diff --git a/packages/frontend/editor-ui/package.json b/packages/frontend/editor-ui/package.json index a5f12acfa0..6f6db80d7f 100644 --- a/packages/frontend/editor-ui/package.json +++ b/packages/frontend/editor-ui/package.json @@ -53,7 +53,7 @@ "@typescript/vfs": "^1.6.0", "@vue-flow/background": "^1.3.2", "@vue-flow/controls": "^1.1.2", - "@vue-flow/core": "1.42.1", + "@vue-flow/core": "1.45.0", "@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 91591e648a..ebd99c9c15 100644 --- a/packages/frontend/editor-ui/src/__tests__/data/canvas.ts +++ b/packages/frontend/editor-ui/src/__tests__/data/canvas.ts @@ -92,7 +92,10 @@ export function createCanvasGraphNode({ isParent: false, selected: false, resizing: false, - handleBounds: {}, + handleBounds: { + source: null, + target: null, + }, 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 772845c0f5..c5bae3db77 100644 --- a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue +++ b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue @@ -447,11 +447,7 @@ function onSelectNodes({ ids, panIntoView }: CanvasEventBusEvents['nodes:select' const newViewport = updateViewportToContainNodes(viewport.value, dimensions.value, nodes, 100); - void setViewport(newViewport, { - duration: 200, - // TODO: restore when re-upgrading vue-flow to >= 1.45 - // interpolate: 'linear', - }); + void setViewport(newViewport, { duration: 200, interpolate: 'linear' }); } } @@ -469,10 +465,16 @@ function onUpdateNodeParameters(id: string, parameters: Record) function onUpdateNodeInputs(id: string) { emit('update:node:inputs', id); + + // Let VueFlow update connection paths to match the new handle position + void nextTick(() => vueFlow.updateNodeInternals([id])); } function onUpdateNodeOutputs(id: string) { emit('update:node:outputs', id); + + // Let VueFlow update connection paths to match the new handle position + void nextTick(() => vueFlow.updateNodeInternals([id])); } function onFocusNode(id: string) { 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 a7e2dccaff..2ffcd7786a 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 @@ -88,8 +88,7 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { { duration: 200, zoom: maxCanvasZoom.value, - // TODO: restore when re-upgrading vue-flow to >= 1.45 - // interpolate: 'linear', + interpolate: 'linear', }, ); } @@ -107,19 +106,11 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { function toggleZoomMode(options: ToggleZoomModeOptions) { if (isActive(options.canvasViewport.zoom)) { if (previousViewport.value === undefined) { - void options.fitView({ - duration: 200, - // TODO: restore when re-upgrading vue-flow to >= 1.45 - // interpolate: 'linear', - }); + void options.fitView({ duration: 200, interpolate: 'linear' }); return; } - void options.setViewport(previousViewport.value, { - duration: 200, - // TODO: restore when re-upgrading vue-flow to >= 1.45 - // interpolate: 'linear' - }); + void options.setViewport(previousViewport.value, { duration: 200, interpolate: 'linear' }); return; } @@ -136,11 +127,7 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { return; } - void options.zoomTo(maxCanvasZoom.value, { - duration: 200, - // TODO: restore when re-upgrading vue-flow to >= 1.45 - // interpolate: 'linear', - }); + void options.zoomTo(maxCanvasZoom.value, { duration: 200, 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 dab1924474..41d842eb15 100644 --- a/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts +++ b/packages/frontend/editor-ui/src/utils/nodeViewUtils.test.ts @@ -558,7 +558,10 @@ describe('calculateNodeSize', () => { function createTestGraphNode(data: Partial = {}): GraphNode { return { computedPosition: { z: 0, ...(data.position ?? { x: 0, y: 0 }) }, - handleBounds: {}, + handleBounds: { + source: null, + target: null, + }, dimensions: { width: 0, height: 0 }, isParent: true, selected: false, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e13ee7fbeb..b8fc7704f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2537,19 +2537,19 @@ importers: version: 1.6.0(typescript@5.9.2) '@vue-flow/background': specifier: ^1.3.2 - version: 1.3.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) + version: 1.3.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) '@vue-flow/controls': specifier: ^1.1.2 - version: 1.1.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) + version: 1.1.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) '@vue-flow/core': - specifier: 1.42.1 - version: 1.42.1(vue@3.5.13(typescript@5.9.2)) + specifier: 1.45.0 + version: 1.45.0(vue@3.5.13(typescript@5.9.2)) '@vue-flow/minimap': specifier: ^1.5.2 - version: 1.5.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) + version: 1.5.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) '@vue-flow/node-resizer': specifier: ^1.4.0 - version: 1.4.0(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) + version: 1.4.0(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2)) '@vueuse/components': specifier: ^10.11.0 version: 10.11.0(vue@3.5.13(typescript@5.9.2)) @@ -8072,8 +8072,8 @@ packages: '@vue-flow/core': ^1.23.0 vue: ^3.3.0 - '@vue-flow/core@1.42.1': - resolution: {integrity: sha512-QzzTxMAXfOeETKc+N3XMp5XpiPxKBHK5kq98avgTsE6MXyeU2E8EkANwwgSB/hvJ/k36RjU0Y7BOwCHiqiI1tw==} + '@vue-flow/core@1.45.0': + resolution: {integrity: sha512-+Qd4fTnCfrhfYQzlHyf5Jt7rNE4PlDnEJEJZH9v6hDZoTOeOy1RhS85cSxKYxdsJ31Ttj2v3yabhoVfBf+bmJA==} peerDependencies: vue: ^3.3.0 @@ -23015,36 +23015,37 @@ snapshots: path-browserify: 1.0.1 vscode-uri: 3.0.8 - '@vue-flow/background@1.3.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': + '@vue-flow/background@1.3.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': dependencies: - '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.9.2)) + '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.9.2)) vue: 3.5.13(typescript@5.9.2) - '@vue-flow/controls@1.1.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': + '@vue-flow/controls@1.1.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': dependencies: - '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.9.2)) + '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.9.2)) vue: 3.5.13(typescript@5.9.2) - '@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2))': + '@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2))': dependencies: '@vueuse/core': 10.11.0(vue@3.5.13(typescript@5.9.2)) 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.9.2) transitivePeerDependencies: - '@vue/composition-api' - '@vue-flow/minimap@1.5.2(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': + '@vue-flow/minimap@1.5.2(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': dependencies: - '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.9.2)) + '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.9.2)) d3-selection: 3.0.0 d3-zoom: 3.0.0 vue: 3.5.13(typescript@5.9.2) - '@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.42.1(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': + '@vue-flow/node-resizer@1.4.0(@vue-flow/core@1.45.0(vue@3.5.13(typescript@5.9.2)))(vue@3.5.13(typescript@5.9.2))': dependencies: - '@vue-flow/core': 1.42.1(vue@3.5.13(typescript@5.9.2)) + '@vue-flow/core': 1.45.0(vue@3.5.13(typescript@5.9.2)) d3-drag: 3.0.0 d3-selection: 3.0.0 vue: 3.5.13(typescript@5.9.2)