From 566789caee49d157b7154adbe60dadb0ea858e06 Mon Sep 17 00:00:00 2001 From: Suguru Inoue Date: Mon, 4 Aug 2025 14:54:04 +0200 Subject: [PATCH] fix(editor): Connection port mapped incorrectly when changed dynamically (#17958) --- packages/frontend/editor-ui/package.json | 2 +- .../editor-ui/src/__tests__/data/canvas.ts | 5 +-- .../src/components/canvas/Canvas.vue | 6 +++- .../experimental/experimentalNdv.store.ts | 21 ++++++++--- .../editor-ui/src/utils/nodeViewUtils.test.ts | 5 +-- pnpm-lock.yaml | 35 +++++++++---------- 6 files changed, 42 insertions(+), 32 deletions(-) diff --git a/packages/frontend/editor-ui/package.json b/packages/frontend/editor-ui/package.json index 9b446ae4f7..d9e8764fe7 100644 --- a/packages/frontend/editor-ui/package.json +++ b/packages/frontend/editor-ui/package.json @@ -50,7 +50,7 @@ "@typescript/vfs": "^1.6.0", "@vue-flow/background": "^1.3.2", "@vue-flow/controls": "^1.1.2", - "@vue-flow/core": "^1.45.0", + "@vue-flow/core": "1.42.1", "@vue-flow/minimap": "^1.5.2", "@vue-flow/node-resizer": "^1.4.0", "@vueuse/components": "^10.11.0", diff --git a/packages/frontend/editor-ui/src/__tests__/data/canvas.ts b/packages/frontend/editor-ui/src/__tests__/data/canvas.ts index ebd99c9c15..91591e648a 100644 --- a/packages/frontend/editor-ui/src/__tests__/data/canvas.ts +++ b/packages/frontend/editor-ui/src/__tests__/data/canvas.ts @@ -92,10 +92,7 @@ export function createCanvasGraphNode({ isParent: false, selected: false, resizing: false, - handleBounds: { - source: null, - target: null, - }, + handleBounds: {}, events: {}, data: createCanvasNodeData({ id, type, ...data }), ...rest, diff --git a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue index a4ac0e244c..710a723a47 100644 --- a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue +++ b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue @@ -448,7 +448,11 @@ function onSelectNodes({ ids, panIntoView }: CanvasEventBusEvents['nodes:select' const newViewport = updateViewportToContainNodes(viewport.value, dimensions.value, nodes, 100); - void setViewport(newViewport, { duration: 200, interpolate: 'linear' }); + void setViewport(newViewport, { + duration: 200, + // TODO: restore when re-upgrading vue-flow to >= 1.45 + // interpolate: 'linear', + }); } } diff --git a/packages/frontend/editor-ui/src/components/canvas/experimental/experimentalNdv.store.ts b/packages/frontend/editor-ui/src/components/canvas/experimental/experimentalNdv.store.ts index 10ee8cc417..a4842b6376 100644 --- a/packages/frontend/editor-ui/src/components/canvas/experimental/experimentalNdv.store.ts +++ b/packages/frontend/editor-ui/src/components/canvas/experimental/experimentalNdv.store.ts @@ -90,7 +90,8 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { { duration: 200, zoom: maxCanvasZoom.value, - interpolate: 'linear', + // TODO: restore when re-upgrading vue-flow to >= 1.45 + // interpolate: 'linear', }, ); } @@ -108,11 +109,19 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { function toggleZoomMode(options: ToggleZoomModeOptions) { if (isActive(options.canvasViewport.zoom)) { if (previousViewport.value === undefined) { - void options.fitView({ duration: 200, interpolate: 'linear' }); + void options.fitView({ + duration: 200, + // TODO: restore when re-upgrading vue-flow to >= 1.45 + // interpolate: 'linear', + }); return; } - void options.setViewport(previousViewport.value, { duration: 200, interpolate: 'linear' }); + void options.setViewport(previousViewport.value, { + duration: 200, + // TODO: restore when re-upgrading vue-flow to >= 1.45 + // interpolate: 'linear' + }); return; } @@ -129,7 +138,11 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { return; } - void options.zoomTo(maxCanvasZoom.value, { duration: 200, interpolate: 'linear' }); + void options.zoomTo(maxCanvasZoom.value, { + duration: 200, + // TODO: restore when re-upgrading vue-flow to >= 1.45 + // interpolate: 'linear', + }); } return { diff --git a/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts b/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts index 8129049ba2..d8a55a1b0f 100644 --- a/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts +++ b/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts @@ -555,10 +555,7 @@ describe('calculateNodeSize', () => { function createTestGraphNode(data: Partial = {}): GraphNode { return { computedPosition: { z: 0, ...(data.position ?? { x: 0, y: 0 }) }, - handleBounds: { - source: null, - target: null, - }, + handleBounds: {}, dimensions: { width: 0, height: 0 }, isParent: true, selected: false, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 11d50d6b3b..e409e2d673 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2421,19 +2421,19 @@ importers: version: 1.6.0(typescript@5.8.3) '@vue-flow/background': specifier: ^1.3.2 - version: 1.3.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) + version: 1.3.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) '@vue-flow/controls': specifier: ^1.1.2 - version: 1.1.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) + version: 1.1.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) '@vue-flow/core': - specifier: ^1.45.0 - version: 1.45.0(vue@3.5.13(typescript@5.8.3)) + specifier: 1.42.1 + version: 1.42.1(vue@3.5.13(typescript@5.8.3)) '@vue-flow/minimap': specifier: ^1.5.2 - version: 1.5.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) + version: 1.5.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) '@vue-flow/node-resizer': specifier: ^1.4.0 - version: 1.4.0(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) + version: 1.4.0(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3)) '@vueuse/components': specifier: ^10.11.0 version: 10.11.0(vue@3.5.13(typescript@5.8.3)) @@ -7787,8 +7787,8 @@ packages: '@vue-flow/core': ^1.23.0 vue: ^3.3.0 - '@vue-flow/core@1.45.0': - resolution: {integrity: sha512-+Qd4fTnCfrhfYQzlHyf5Jt7rNE4PlDnEJEJZH9v6hDZoTOeOy1RhS85cSxKYxdsJ31Ttj2v3yabhoVfBf+bmJA==} + '@vue-flow/core@1.42.1': + resolution: {integrity: sha512-QzzTxMAXfOeETKc+N3XMp5XpiPxKBHK5kq98avgTsE6MXyeU2E8EkANwwgSB/hvJ/k36RjU0Y7BOwCHiqiI1tw==} peerDependencies: vue: ^3.3.0 @@ -22422,37 +22422,36 @@ snapshots: path-browserify: 1.0.1 vscode-uri: 3.0.8 - '@vue-flow/background@1.3.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': + '@vue-flow/background@1.3.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': dependencies: - '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.8.3)) + '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.8.3)) vue: 3.5.13(typescript@5.8.3) - '@vue-flow/controls@1.1.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': + '@vue-flow/controls@1.1.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': dependencies: - '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.8.3)) + '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.8.3)) vue: 3.5.13(typescript@5.8.3) - '@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3))': + '@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3))': dependencies: '@vueuse/core': 10.11.0(vue@3.5.13(typescript@5.8.3)) d3-drag: 3.0.0 - d3-interpolate: 3.0.1 d3-selection: 3.0.0 d3-zoom: 3.0.0 vue: 3.5.13(typescript@5.8.3) transitivePeerDependencies: - '@vue/composition-api' - '@vue-flow/minimap@1.5.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': + '@vue-flow/minimap@1.5.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': dependencies: - '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.8.3)) + '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.8.3)) d3-selection: 3.0.0 d3-zoom: 3.0.0 vue: 3.5.13(typescript@5.8.3) - '@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': + '@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.8.3)))(vue@3.5.13(typescript@5.8.3))': dependencies: - '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.8.3)) + '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.8.3)) d3-drag: 3.0.0 d3-selection: 3.0.0 vue: 3.5.13(typescript@5.8.3)