diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue index fc39d481a9..44887754c0 100644 --- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue +++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue @@ -44,16 +44,14 @@ const connectionType = computed(() => : NodeConnectionType.Main, ); -const renderToolbar = computed(() => (props.selected || isHovered.value) && !props.readOnly); +const renderToolbar = computed(() => isHovered.value && !props.readOnly); const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main); const status = computed(() => props.data.status); const edgeColor = computed(() => { - if (props.selected) { - return 'var(--color-background-dark)'; - } else if (status.value === 'success') { + if (status.value === 'success') { return 'var(--color-success)'; } else if (status.value === 'pinned') { return 'var(--color-secondary)'; @@ -61,6 +59,8 @@ const edgeColor = computed(() => { return 'var(--color-primary)'; } else if (!isMainConnection.value) { return 'var(--node-type-supplemental-color)'; + } else if (props.selected) { + return 'var(--color-background-dark)'; } else { return 'var(--color-foreground-xdark)'; } diff --git a/packages/editor-ui/src/styles/plugins/_vueflow.scss b/packages/editor-ui/src/styles/plugins/_vueflow.scss index 87dc83acf7..9c2414572b 100644 --- a/packages/editor-ui/src/styles/plugins/_vueflow.scss +++ b/packages/editor-ui/src/styles/plugins/_vueflow.scss @@ -1,3 +1,7 @@ +/** + * Resizer + */ + .vue-flow__resize-control.line { border-color: transparent; z-index: 1; @@ -32,6 +36,10 @@ z-index: 1; } +/** + * Minimap + */ + .vue-flow__minimap { height: 120px; overflow: hidden; @@ -50,6 +58,10 @@ } } +/** + * Pane + */ + .vue-flow__pane { &, &.draggable { @@ -57,6 +69,10 @@ } } +/** + * Node + */ + .vue-flow__node { &, &.draggable { @@ -71,3 +87,14 @@ z-index: 1 !important; } } + +/** + * Selection + */ + +.vue-flow__nodesselection-rect { + box-sizing: content-box; + margin-top: calc(-1 * var(--spacing-2xs)); + margin-left: calc(-1 * var(--spacing-2xs)); + padding: var(--spacing-2xs); +}