From 497d637fc5308b9c4a06bc764152fde1f1a9c130 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Wed, 30 Oct 2024 14:02:54 +0200
Subject: [PATCH] fix(editor): Fit view consistently after nodes are
 initialized on new canvas (#11457)

---
 packages/editor-ui/src/components/canvas/Canvas.vue |  7 -------
 .../src/components/canvas/WorkflowCanvas.vue        | 13 ++++++++++++-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index b09302cbdd..554900f24b 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -41,7 +41,6 @@ import { GRID_SIZE } from '@/utils/nodeViewUtils';
 import { CanvasKey } from '@/constants';
 import { onKeyDown, onKeyUp, useDebounceFn } from '@vueuse/core';
 import CanvasArrowHeadMarker from './elements/edges/CanvasArrowHeadMarker.vue';
-import { CanvasNodeRenderType } from '@/types';
 import CanvasBackgroundStripedPattern from './elements/CanvasBackgroundStripedPattern.vue';
 import { isMiddleMouseButton } from '@/utils/eventUtils';
 
@@ -123,7 +122,6 @@ const {
 	nodes: graphNodes,
 	onPaneReady,
 	findNode,
-	onNodesInitialized,
 	viewport,
 } = useVueFlow({ id: props.id, deleteKeyCode: null });
 
@@ -538,11 +536,6 @@ onPaneReady(async () => {
 	isPaneReady.value = true;
 });
 
-onNodesInitialized((nodes) => {
-	if (nodes.length !== 1 || nodes[0].data?.render.type !== CanvasNodeRenderType.AddNodes) return;
-	void onFitView();
-});
-
 watch(() => props.readOnly, setReadonly, {
 	immediate: true,
 });
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index 72dc04cbcd..d32b974a40 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import Canvas from '@/components/canvas/Canvas.vue';
-import { computed, toRef, useCssModule } from 'vue';
+import { computed, ref, toRef, useCssModule } from 'vue';
 import type { Workflow } from 'n8n-workflow';
 import type { IWorkflowDb } from '@/Interface';
 import { useCanvasMapping } from '@/composables/useCanvasMapping';
 import type { EventBus } from 'n8n-design-system';
 import { createEventBus } from 'n8n-design-system';
 import type { CanvasEventBusEvents } from '@/types';
+import { useVueFlow } from '@vue-flow/core';
 
 defineOptions({
 	inheritAttrs: false,
@@ -34,6 +35,8 @@ const props = withDefaults(
 
 const $style = useCssModule();
 
+const { onNodesInitialized } = useVueFlow({ id: props.id });
+
 const workflow = toRef(props, 'workflow');
 const workflowObject = toRef(props, 'workflowObject');
 
@@ -49,6 +52,14 @@ const { nodes: mappedNodes, connections: mappedConnections } = useCanvasMapping(
 	connections,
 	workflowObject,
 });
+
+const initialFitViewDone = ref(false); // Workaround for https://github.com/bcakmakoglu/vue-flow/issues/1636
+onNodesInitialized(() => {
+	if (!initialFitViewDone.value || props.showFallbackNodes) {
+		props.eventBus.emit('fitView');
+		initialFitViewDone.value = true;
+	}
+});
 </script>
 
 <template>