From 264f918d9720e2a11ec011993df1e7a4cb776882 Mon Sep 17 00:00:00 2001 From: Giulio Andreini Date: Tue, 26 Mar 2024 09:54:04 +0100 Subject: [PATCH] fix(editor): Nodes connectors improvements (#8945) Co-authored-by: Elias Meire --- .../design-system/src/css/_tokens.dark.scss | 3 +++ packages/design-system/src/css/_tokens.scss | 3 +++ packages/editor-ui/src/components/Node.vue | 24 ++++++++++++------- packages/editor-ui/src/mixins/nodeBase.ts | 9 ++++++- .../plugins/jsplumb/N8nPlusEndpointType.ts | 3 ++- 5 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss index 5ff23bac383e9..750a5777aac97 100644 --- a/packages/design-system/src/css/_tokens.dark.scss +++ b/packages/design-system/src/css/_tokens.dark.scss @@ -40,6 +40,9 @@ // Canvas --color-canvas-background: var(--prim-gray-820); + --color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background + --color-canvas-background-s: 1%; + --color-canvas-background-l: 18%; --color-canvas-dot: var(--prim-gray-670); --color-canvas-read-only-line: var(--prim-gray-800); --color-canvas-node-background: var(--prim-gray-40); diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss index c3a90b5a5d80c..b7c415190c9dd 100644 --- a/packages/design-system/src/css/_tokens.scss +++ b/packages/design-system/src/css/_tokens.scss @@ -73,6 +73,9 @@ // Canvas --color-canvas-background: var(--prim-gray-10); + --color-canvas-background-h: var(--prim-gray-h); // Used for connectors labels background + --color-canvas-background-s: 47%; + --color-canvas-background-l: 99%; --color-canvas-dot: var(--prim-gray-120); --color-canvas-read-only-line: var(--prim-gray-30); --color-canvas-node-background: var(--prim-gray-0); diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue index 28ded3cbd280f..c3db780cb43f6 100644 --- a/packages/editor-ui/src/components/Node.vue +++ b/packages/editor-ui/src/components/Node.vue @@ -1182,7 +1182,8 @@ export default defineComponent({ --endpoint-size-small: 14px; --endpoint-size-medium: 18px; --stalk-size: 40px; - --stalk-switch-size: 60px; + --stalk-medium-size: 60px; + --stalk-large-size: 90px; --stalk-success-size: 87px; --stalk-success-size-without-label: 40px; --stalk-long-size: 127px; @@ -1235,13 +1236,13 @@ export default defineComponent({ // mouse over event. pointer-events: none; span { - border-radius: 7px; background-color: hsla( var(--color-canvas-background-h), var(--color-canvas-background-s), var(--color-canvas-background-l), 0.85 ); + border-radius: var(--border-radius-base); line-height: 1.3em; padding: 0px 3px; white-space: nowrap; @@ -1421,9 +1422,9 @@ export default defineComponent({ var(--color-canvas-background-l), 0.85 ); - border-radius: 7px; - font-size: 0.7em; - padding: 2px; + border-radius: var(--border-radius-large); + font-size: var(--font-size-3xs); + padding: var(--spacing-5xs) var(--spacing-4xs); white-space: nowrap; transition: color var(--node-endpoint-label--transition-duration) ease; @@ -1449,11 +1450,12 @@ export default defineComponent({ // Some nodes allow for dynamic connection labels // so we need to make sure the label does not overflow - &.node-connection-type-main[data-endpoint-label-length='medium'] { - max-width: calc(var(--stalk-size) - (var(--endpoint-size-small))); + &.node-connection-type-main[data-endpoint-label-length] { + max-width: calc(var(--stalk-size) - var(--endpoint-size-small) - var(--spacing-4xs)); overflow: hidden; text-overflow: ellipsis; - margin-left: calc(var(--endpoint-size-small) + var(--spacing-2xs) + 10px); + transform: translateY(-50%) !important; + margin-left: var(--endpoint-size-small); } } @@ -1508,6 +1510,10 @@ export default defineComponent({ } [data-endpoint-label-length='medium'] { - --stalk-size: var(--stalk-switch-size); + --stalk-size: var(--stalk-medium-size); +} + +[data-endpoint-label-length='large'] { + --stalk-size: var(--stalk-large-size); } diff --git a/packages/editor-ui/src/mixins/nodeBase.ts b/packages/editor-ui/src/mixins/nodeBase.ts index 6d9193250c11d..d80d813519af0 100644 --- a/packages/editor-ui/src/mixins/nodeBase.ts +++ b/packages/editor-ui/src/mixins/nodeBase.ts @@ -28,6 +28,7 @@ import { useHistoryStore } from '@/stores/history.store'; import { useCanvasStore } from '@/stores/canvas.store'; import type { EndpointSpec } from '@jsplumb/common'; import { useDeviceSupport } from 'n8n-design-system'; +import type { N8nEndpointLabelLength } from '@/plugins/jsplumb/N8nPlusEndpointType'; const createAddInputEndpointSpec = ( connectionName: NodeConnectionType, @@ -55,6 +56,12 @@ const createDiamondOutputEndpointSpec = (): EndpointSpec => ({ }, }); +const getEndpointLabelLength = (length: number): N8nEndpointLabelLength => { + if (length <= 2) return 'small'; + else if (length <= 6) return 'medium'; + return 'large'; +}; + export const nodeBase = defineComponent({ data() { return { @@ -371,7 +378,7 @@ export const nodeBase = defineComponent({ outputConfigurations.push(outputConfiguration); }); - const endpointLabelLength = maxLabelLength < 4 ? 'short' : 'medium'; + const endpointLabelLength = getEndpointLabelLength(maxLabelLength); this.outputs.forEach((value, i) => { const outputConfiguration = outputConfigurations[i]; diff --git a/packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts b/packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts index 9af9738f98e59..2cf9ddd464a66 100644 --- a/packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts +++ b/packages/editor-ui/src/plugins/jsplumb/N8nPlusEndpointType.ts @@ -10,11 +10,12 @@ import { } from '@jsplumb/browser-ui'; export type ComputedN8nPlusEndpoint = [number, number, number, number, number]; +export type N8nEndpointLabelLength = 'small' | 'medium' | 'large'; interface N8nPlusEndpointParams extends EndpointRepresentationParams { dimensions: number; connectedEndpoint: Endpoint; hoverMessage: string; - endpointLabelLength: 'small' | 'medium'; + endpointLabelLength: N8nEndpointLabelLength; size: 'small' | 'medium'; showOutputLabel: boolean; }