feat(editor): Zoom in to node after creation (no-changelog) (#17617)

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<GraphNode<CanvasNodeData>>).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
  */

packages/frontend/editor-ui/src/components/canvas/experimental/experimentalNdv.store.ts

@@ -27,6 +27,7 @@ export const useExperimentalNdvStore = defineStore('experimentalNdv', () => {
 
 	const previousViewport = ref<ViewportTransform>();
 	const collapsedNodes = shallowRef<Partial<Record<string, boolean>>>({});
+	const nodeNameToBeFocused = ref<string | undefined>();
 
 	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,
 	};
 });

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<INodeUi> & {
 	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);
+					}
 				}
 			}
 		});