diff --git a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue index 70b25dc566..ddc6f5de7c 100644 --- a/packages/frontend/editor-ui/src/components/canvas/Canvas.vue +++ b/packages/frontend/editor-ui/src/components/canvas/Canvas.vue @@ -862,6 +862,26 @@ watch([nodesSelectionActive, userSelectionRect], ([isActive, rect]) => emit('update:has-range-selection', isActive || (rect?.width ?? 0) > 0 || (rect?.height ?? 0) > 0), ); +watch([vueFlow.nodes, () => experimentalNdvStore.nodeNameToBeFocused], ([nodes, toFocusName]) => { + const toFocusNode = + toFocusName && + (nodes as Array>).find((n) => n.data.name === toFocusName); + + if (!toFocusNode) { + return; + } + + // setTimeout() so that this happens after layout recalculation with the node to be focused + setTimeout(() => { + experimentalNdvStore.focusNode(toFocusNode, { + collapseOthers: false, + canvasViewport: viewport.value, + canvasDimensions: dimensions.value, + setCenter, + }); + }); +}); + /** * Provide */ 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 8652dae700..10ee8cc417 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 @@ -27,6 +27,7 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { const previousViewport = ref(); const collapsedNodes = shallowRef>>({}); + const nodeNameToBeFocused = ref(); function setNodeExpanded(nodeId: string, isExpanded?: boolean) { collapsedNodes.value = { @@ -53,6 +54,10 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { return isEnabled.value && Math.abs(canvasZoom - maxCanvasZoom.value) < 0.000001; } + function setNodeNameToBeFocused(nodeName: string) { + nodeNameToBeFocused.value = nodeName; + } + interface FocusNodeOptions { collapseOthers?: boolean; canvasViewport: ViewportTransform; @@ -74,6 +79,10 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { const topMargin = 80; // pixels const nodeWidth = node.dimensions.width * (isActive(canvasViewport.zoom) ? 1 : 1.5); + if (nodeNameToBeFocused.value === node.data.name) { + nodeNameToBeFocused.value = undefined; + } + // Move the node to top center of the canvas void setCenter( node.position.x + nodeWidth / 2, @@ -128,11 +137,13 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => { maxCanvasZoom, previousZoom: computed(() => previousViewport.value), collapsedNodes: computed(() => collapsedNodes.value), + nodeNameToBeFocused: computed(() => nodeNameToBeFocused.value), isActive, setNodeExpanded, expandAllNodes, collapseAllNodes, toggleZoomMode, focusNode, + setNodeNameToBeFocused, }; }); diff --git a/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts b/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts index ee8f96285f..2544fb5ddf 100644 --- a/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts +++ b/packages/frontend/editor-ui/src/composables/useCanvasOperations.ts @@ -112,6 +112,7 @@ import { useLogsStore } from '@/stores/logs.store'; import { isChatNode } from '@/utils/aiUtils'; import cloneDeep from 'lodash/cloneDeep'; import uniq from 'lodash/uniq'; +import { useExperimentalNdvStore } from '@/components/canvas/experimental/experimentalNdv.store'; type AddNodeData = Partial & { type: string; @@ -155,6 +156,7 @@ export function useCanvasOperations() { const executionsStore = useExecutionsStore(); const projectsStore = useProjectsStore(); const logsStore = useLogsStore(); + const experimentalNdvStore = useExperimentalNdvStore(); const i18n = useI18n(); const toast = useToast(); @@ -789,7 +791,11 @@ export function useCanvasOperations() { void externalHooks.run('nodeView.addNodeButton', { nodeTypeName: nodeData.type }); if (options.openNDV && !preventOpeningNDV) { - ndvStore.setActiveNodeName(nodeData.name); + if (experimentalNdvStore.isEnabled) { + experimentalNdvStore.setNodeNameToBeFocused(nodeData.name); + } else { + ndvStore.setActiveNodeName(nodeData.name); + } } } });