From 31c456700a0458019d65fe7bde8aa4715344362b Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 25 Jun 2024 12:11:44 +0300
Subject: [PATCH] feat(editor): Compute node position and connections when
 creating new nodes in new canvas (no-changelog) (#9830)

---
 packages/editor-ui/src/__tests__/mocks.ts     |   70 +-
 .../src/components/canvas/Canvas.vue          |   33 +-
 .../src/components/canvas/WorkflowCanvas.vue  |    4 +
 .../canvas/elements/nodes/CanvasNode.vue      |   10 +-
 .../global/GlobalExecutionsListItem.test.ts   |    2 +-
 .../__tests__/useCanvasOperations.spec.ts     |  302 ++++-
 .../src/composables/useCanvasMouseSelect.ts   |    7 +-
 .../src/composables/useCanvasOperations.ts    |  708 +++++++++-
 packages/editor-ui/src/constants.ts           |    1 +
 .../editor-ui/src/stores/nodeCreator.store.ts |   75 +-
 .../editor-ui/src/stores/workflows.store.ts   |   28 +
 .../src/utils/__tests__/canvasUtilsV2.spec.ts |   30 +
 packages/editor-ui/src/utils/canvasUtilsV2.ts |   12 +
 packages/editor-ui/src/views/NodeView.v2.vue  | 1202 +++++++----------
 packages/editor-ui/src/views/NodeView.vue     |    2 +
 15 files changed, 1628 insertions(+), 858 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/mocks.ts b/packages/editor-ui/src/__tests__/mocks.ts
index d8916bbc6..620d5aefe 100644
--- a/packages/editor-ui/src/__tests__/mocks.ts
+++ b/packages/editor-ui/src/__tests__/mocks.ts
@@ -24,39 +24,65 @@ import {
 	SET_NODE_TYPE,
 } from '@/constants';
 
-const mockNode = (name: string, type: string, props: Partial<INode> = {}) =>
-	mock<INode>({ name, type, ...props });
+export const mockNode = ({
+	id = uuid(),
+	name,
+	type,
+	position = [0, 0],
+}: {
+	id?: INode['id'];
+	name: INode['name'];
+	type: INode['type'];
+	position?: INode['position'];
+}) => mock<INode>({ id, name, type, position });
 
-const mockLoadedClass = (name: string) =>
+export const mockNodeTypeDescription = ({
+	name,
+	version = 1,
+	credentials = [],
+}: {
+	name: INodeTypeDescription['name'];
+	version?: INodeTypeDescription['version'];
+	credentials?: INodeTypeDescription['credentials'];
+}) =>
+	mock<INodeTypeDescription>({
+		name,
+		displayName: name,
+		version,
+		defaults: {
+			name,
+		},
+		defaultVersion: Array.isArray(version) ? version[version.length - 1] : version,
+		properties: [],
+		maxNodes: Infinity,
+		group: EXECUTABLE_TRIGGER_NODE_TYPES.includes(name) ? ['trigger'] : [],
+		inputs: ['main'],
+		outputs: ['main'],
+		credentials,
+		documentationUrl: 'https://docs',
+		webhooks: undefined,
+	});
+
+export const mockLoadedNodeType = (name: string) =>
 	mock<LoadedClass<INodeType>>({
 		type: mock<INodeType>({
 			// @ts-expect-error
-			description: mock<INodeTypeDescription>({
-				name,
-				displayName: name,
-				version: 1,
-				properties: [],
-				group: EXECUTABLE_TRIGGER_NODE_TYPES.includes(name) ? ['trigger'] : [],
-				inputs: ['main'],
-				outputs: ['main'],
-				documentationUrl: 'https://docs',
-				webhooks: undefined,
-			}),
+			description: mockNodeTypeDescription({ name }),
 		}),
 	});
 
 export const mockNodes = [
-	mockNode('Manual Trigger', MANUAL_TRIGGER_NODE_TYPE),
-	mockNode('Set', SET_NODE_TYPE),
-	mockNode('Code', CODE_NODE_TYPE),
-	mockNode('Rename', SET_NODE_TYPE),
-	mockNode('Chat Trigger', CHAT_TRIGGER_NODE_TYPE),
-	mockNode('Agent', AGENT_NODE_TYPE),
-	mockNode('End', NO_OP_NODE_TYPE),
+	mockNode({ name: 'Manual Trigger', type: MANUAL_TRIGGER_NODE_TYPE }),
+	mockNode({ name: 'Set', type: SET_NODE_TYPE }),
+	mockNode({ name: 'Code', type: CODE_NODE_TYPE }),
+	mockNode({ name: 'Rename', type: SET_NODE_TYPE }),
+	mockNode({ name: 'Chat Trigger', type: CHAT_TRIGGER_NODE_TYPE }),
+	mockNode({ name: 'Agent', type: AGENT_NODE_TYPE }),
+	mockNode({ name: 'End', type: NO_OP_NODE_TYPE }),
 ];
 
 export const defaultNodeTypes = mockNodes.reduce<INodeTypeData>((acc, { type }) => {
-	acc[type] = mockLoadedClass(type);
+	acc[type] = mockLoadedNodeType(type);
 	return acc;
 }, {});
 
diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 0adea73ad..1b6568ee0 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { EdgeMouseEvent, NodeDragEvent, Connection } from '@vue-flow/core';
+import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
@@ -13,11 +13,13 @@ const $style = useCssModule();
 
 const emit = defineEmits<{
 	'update:modelValue': [elements: CanvasElement[]];
-	'update:node:position': [id: string, position: { x: number; y: number }];
+	'update:node:position': [id: string, position: XYPosition];
 	'update:node:active': [id: string];
+	'update:node:selected': [id?: string];
 	'delete:node': [id: string];
 	'delete:connection': [connection: Connection];
 	'create:connection': [connection: Connection];
+	'click:pane': [position: XYPosition];
 }>();
 
 const props = withDefaults(
@@ -35,7 +37,9 @@ const props = withDefaults(
 	},
 );
 
-const { getSelectedEdges, getSelectedNodes } = useVueFlow({ id: props.id });
+const { getSelectedEdges, getSelectedNodes, viewportRef, project } = useVueFlow({
+	id: props.id,
+});
 
 const hoveredEdges = ref<Record<string, boolean>>({});
 
@@ -57,6 +61,11 @@ function onSetNodeActive(id: string) {
 	emit('update:node:active', id);
 }
 
+function onSelectNode() {
+	const selectedNodeId = getSelectedNodes.value[getSelectedNodes.value.length - 1]?.id;
+	emit('update:node:selected', selectedNodeId);
+}
+
 function onDeleteNode(id: string) {
 	emit('delete:node', id);
 }
@@ -83,6 +92,16 @@ function onMouseEnterEdge(event: EdgeMouseEvent) {
 function onMouseLeaveEdge(event: EdgeMouseEvent) {
 	hoveredEdges.value[event.edge.id] = false;
 }
+
+function onClickPane(event: MouseEvent) {
+	const bounds = viewportRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 };
+	const position = project({
+		x: event.offsetX - bounds.left,
+		y: event.offsetY - bounds.top,
+	});
+
+	emit('click:pane', position);
+}
 </script>
 
 <template>
@@ -99,10 +118,16 @@ function onMouseLeaveEdge(event: EdgeMouseEvent) {
 		@node-drag-stop="onNodeDragStop"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
+		@pane-click="onClickPane"
 		@connect="onConnect"
 	>
 		<template #node-canvas-node="canvasNodeProps">
-			<CanvasNode v-bind="canvasNodeProps" @delete="onDeleteNode" @activate="onSetNodeActive" />
+			<CanvasNode
+				v-bind="canvasNodeProps"
+				@delete="onDeleteNode"
+				@select="onSelectNode"
+				@activate="onSetNodeActive"
+			/>
 		</template>
 
 		<template #edge-canvas-edge="canvasEdgeProps">
diff --git a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
index f5dad78e3..c2b99f147 100644
--- a/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
+++ b/packages/editor-ui/src/components/canvas/WorkflowCanvas.vue
@@ -5,6 +5,10 @@ import type { Workflow } from 'n8n-workflow';
 import type { IWorkflowDb } from '@/Interface';
 import { useCanvasMapping } from '@/composables/useCanvasMapping';
 
+defineOptions({
+	inheritAttrs: false,
+});
+
 const props = defineProps<{
 	id?: string;
 	workflow: IWorkflowDb;
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index 0df937b1f..28d98d01d 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Position } from '@vue-flow/core';
-import { computed, provide, toRef } from 'vue';
+import { computed, provide, toRef, watch } from 'vue';
 import type {
 	CanvasElementData,
 	CanvasConnectionPort,
@@ -17,6 +17,7 @@ import type { NodeProps } from '@vue-flow/core';
 
 const emit = defineEmits<{
 	delete: [id: string];
+	select: [id: string, selected: boolean];
 	activate: [id: string];
 }>();
 
@@ -36,6 +37,13 @@ const nodeType = computed(() => {
 	return nodeTypesStore.getNodeType(props.data.type, props.data.typeVersion);
 });
 
+watch(
+	() => props.selected,
+	(selected) => {
+		emit('select', props.id, selected);
+	},
+);
+
 /**
  * Inputs
  */
diff --git a/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts b/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
index 5704f9460..a1f7cb75b 100644
--- a/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
+++ b/packages/editor-ui/src/components/executions/global/GlobalExecutionsListItem.test.ts
@@ -98,7 +98,7 @@ describe('GlobalExecutionsListItem', () => {
 		});
 
 		expect(
-			getByText(`1 Jan, 2022 at ${DateTime.fromJSDate(new Date(testDate)).toFormat('hh')}:00:00`),
+			getByText(`1 Jan, 2022 at ${DateTime.fromJSDate(new Date(testDate)).toFormat('HH')}:00:00`),
 		).toBeInTheDocument();
 	});
 });
diff --git a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
index e95b9fa00..6dc6a3905 100644
--- a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
+++ b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
@@ -2,24 +2,47 @@ import { createPinia, setActivePinia } from 'pinia';
 import type { Connection } from '@vue-flow/core';
 import type { IConnection } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
-
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 import type { CanvasElement } from '@/types';
-import type { INodeUi } from '@/Interface';
+import type { ICredentialsResponse, INodeUi, IWorkflowDb, XYPosition } from '@/Interface';
 import { RemoveNodeCommand } from '@/models/history';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useHistoryStore } from '@/stores/history.store';
 import { useNDVStore } from '@/stores/ndv.store';
-import { createTestNode, createTestWorkflowObject } from '@/__tests__/mocks';
+import { ref } from 'vue';
+import {
+	createTestNode,
+	createTestWorkflowObject,
+	mockNode,
+	mockNodeTypeDescription,
+} from '@/__tests__/mocks';
+import { useRouter } from 'vue-router';
+import { mock } from 'vitest-mock-extended';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useCredentialsStore } from '@/stores/credentials.store';
+
+vi.mock('vue-router', async () => {
+	const actual = await import('vue-router');
+
+	return {
+		...actual,
+		useRouter: () => ({}),
+	};
+});
 
 describe('useCanvasOperations', () => {
 	let workflowsStore: ReturnType<typeof useWorkflowsStore>;
 	let uiStore: ReturnType<typeof useUIStore>;
 	let ndvStore: ReturnType<typeof useNDVStore>;
 	let historyStore: ReturnType<typeof useHistoryStore>;
+	let nodeTypesStore: ReturnType<typeof useNodeTypesStore>;
+	let credentialsStore: ReturnType<typeof useCredentialsStore>;
 	let canvasOperations: ReturnType<typeof useCanvasOperations>;
 
+	const lastClickPosition = ref<XYPosition>([450, 450]);
+	const router = useRouter();
+
 	beforeEach(() => {
 		const pinia = createPinia();
 		setActivePinia(pinia);
@@ -28,7 +51,19 @@ describe('useCanvasOperations', () => {
 		uiStore = useUIStore();
 		ndvStore = useNDVStore();
 		historyStore = useHistoryStore();
-		canvasOperations = useCanvasOperations();
+		nodeTypesStore = useNodeTypesStore();
+		credentialsStore = useCredentialsStore();
+
+		const workflowId = 'test';
+		workflowsStore.workflowsById[workflowId] = mock<IWorkflowDb>({
+			id: workflowId,
+			nodes: [],
+			tags: [],
+			usedCredentials: [],
+		});
+		workflowsStore.initializeEditableWorkflow(workflowId);
+
+		canvasOperations = useCanvasOperations({ router, lastClickPosition });
 	});
 
 	describe('updateNodePosition', () => {
@@ -53,6 +88,218 @@ describe('useCanvasOperations', () => {
 		});
 	});
 
+	describe('setNodeSelected', () => {
+		it('should set last selected node when node id is provided and node exists', () => {
+			const nodeId = 'node1';
+			const nodeName = 'Node 1';
+			workflowsStore.getNodeById = vi.fn().mockReturnValue({ name: nodeName });
+			uiStore.lastSelectedNode = '';
+
+			canvasOperations.setNodeSelected(nodeId);
+
+			expect(uiStore.lastSelectedNode).toBe(nodeName);
+		});
+
+		it('should not change last selected node when node id is provided but node does not exist', () => {
+			const nodeId = 'node1';
+			workflowsStore.getNodeById = vi.fn().mockReturnValue(undefined);
+			uiStore.lastSelectedNode = 'Existing Node';
+
+			canvasOperations.setNodeSelected(nodeId);
+
+			expect(uiStore.lastSelectedNode).toBe('Existing Node');
+		});
+
+		it('should clear last selected node when node id is not provided', () => {
+			uiStore.lastSelectedNode = 'Existing Node';
+
+			canvasOperations.setNodeSelected();
+
+			expect(uiStore.lastSelectedNode).toBe('');
+		});
+	});
+
+	describe('initializeNodeDataWithDefaultCredentials', () => {
+		it('should throw error when node type does not exist', async () => {
+			vi.spyOn(nodeTypesStore, 'getNodeTypes').mockResolvedValue(undefined);
+
+			await expect(
+				canvasOperations.initializeNodeDataWithDefaultCredentials({ type: 'nonexistent' }),
+			).rejects.toThrow();
+		});
+
+		it('should create node with default version when version is undefined', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				name: 'example',
+				type: 'type',
+			});
+
+			expect(result.typeVersion).toBe(1);
+		});
+
+		it('should create node with last version when version is an array', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type', version: [1, 2] })]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				type: 'type',
+			});
+
+			expect(result.typeVersion).toBe(2);
+		});
+
+		it('should create node with default position when position is not provided', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				type: 'type',
+			});
+
+			expect(result.position).toEqual([0, 0]);
+		});
+
+		it('should create node with provided position when position is provided', async () => {
+			nodeTypesStore.setNodeTypes([mockNodeTypeDescription({ name: 'type' })]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				type: 'type',
+				position: [10, 20],
+			});
+
+			expect(result.position).toEqual([10, 20]);
+		});
+
+		it('should create node with default credentials when only one credential is available', async () => {
+			const credential = mock<ICredentialsResponse>({ id: '1', name: 'cred', type: 'cred' });
+			const nodeTypeName = 'type';
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({ name: nodeTypeName, credentials: [{ name: credential.name }] }),
+			]);
+
+			credentialsStore.addCredentials([credential]);
+
+			// @ts-expect-error Known pinia issue when spying on store getters
+			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
+				credential,
+			]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				type: nodeTypeName,
+			});
+
+			expect(result.credentials).toEqual({ [credential.name]: { id: '1', name: credential.name } });
+		});
+
+		it('should not assign credentials when multiple credentials are available', async () => {
+			const credentialA = mock<ICredentialsResponse>({ id: '1', name: 'credA', type: 'cred' });
+			const credentialB = mock<ICredentialsResponse>({ id: '1', name: 'credB', type: 'cred' });
+			const nodeTypeName = 'type';
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+					credentials: [{ name: credentialA.name }, { name: credentialB.name }],
+				}),
+			]);
+
+			// @ts-expect-error Known pinia issue when spying on store getters
+			vi.spyOn(credentialsStore, 'getUsableCredentialByType', 'get').mockReturnValue(() => [
+				credentialA,
+				credentialB,
+			]);
+
+			const result = await canvasOperations.initializeNodeDataWithDefaultCredentials({
+				type: 'type',
+			});
+			expect(result.credentials).toBeUndefined();
+		});
+	});
+
+	describe('addNodes', () => {
+		it('should add nodes at specified positions', async () => {
+			const nodeTypeName = 'type';
+			const nodes = [
+				mockNode({ name: 'Node 1', type: nodeTypeName, position: [30, 40] }),
+				mockNode({ name: 'Node 2', type: nodeTypeName, position: [100, 240] }),
+			];
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+				}),
+			]);
+
+			await canvasOperations.addNodes(nodes, {});
+
+			expect(workflowsStore.workflow.nodes).toHaveLength(2);
+			expect(workflowsStore.workflow.nodes[0]).toHaveProperty('name', nodes[0].name);
+			expect(workflowsStore.workflow.nodes[0]).toHaveProperty('parameters', {});
+			expect(workflowsStore.workflow.nodes[0]).toHaveProperty('type', nodeTypeName);
+			expect(workflowsStore.workflow.nodes[0]).toHaveProperty('typeVersion', 1);
+			expect(workflowsStore.workflow.nodes[0]).toHaveProperty('position');
+		});
+
+		it('should add nodes at current position when position is not specified', async () => {
+			const nodeTypeName = 'type';
+			const nodes = [
+				mockNode({ name: 'Node 1', type: nodeTypeName, position: [40, 40] }),
+				mockNode({ name: 'Node 2', type: nodeTypeName, position: [100, 240] }),
+			];
+			const workflowStoreAddNodeSpy = vi.spyOn(workflowsStore, 'addNode');
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+				}),
+			]);
+
+			await canvasOperations.addNodes(nodes, { position: [50, 60] });
+
+			expect(workflowStoreAddNodeSpy).toHaveBeenCalledTimes(2);
+			expect(workflowStoreAddNodeSpy.mock.calls[0][0].position).toEqual(
+				expect.arrayContaining(nodes[0].position),
+			);
+			expect(workflowStoreAddNodeSpy.mock.calls[1][0].position).toEqual(
+				expect.arrayContaining(nodes[1].position),
+			);
+		});
+
+		it('should adjust the position of nodes with multiple inputs', async () => {
+			const nodeTypeName = 'type';
+			const nodes = [
+				mockNode({ id: 'a', name: 'Node A', type: nodeTypeName, position: [40, 40] }),
+				mockNode({ id: 'b', name: 'Node B', type: nodeTypeName, position: [40, 40] }),
+				mockNode({ id: 'c', name: 'Node C', type: nodeTypeName, position: [100, 240] }),
+			];
+
+			const setNodePositionByIdSpy = vi.spyOn(workflowsStore, 'setNodePositionById');
+			vi.spyOn(workflowsStore, 'getNodeByName')
+				.mockReturnValueOnce(nodes[1])
+				.mockReturnValueOnce(nodes[2]);
+			vi.spyOn(workflowsStore, 'getNodeById')
+				.mockReturnValueOnce(nodes[1])
+				.mockReturnValueOnce(nodes[2]);
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+				}),
+			]);
+
+			canvasOperations.editableWorkflowObject.value.getParentNodesByDepth = vi
+				.fn()
+				.mockReturnValue(nodes.map((node) => node.name));
+
+			await canvasOperations.addNodes(nodes, {});
+
+			expect(setNodePositionByIdSpy).toHaveBeenCalledTimes(2);
+			expect(setNodePositionByIdSpy).toHaveBeenCalledWith(nodes[1].id, expect.any(Object));
+			expect(setNodePositionByIdSpy).toHaveBeenCalledWith(nodes[2].id, expect.any(Object));
+		});
+	});
+
 	describe('deleteNode', () => {
 		it('should delete node and track history', () => {
 			const removeNodeByIdSpy = vi
@@ -225,6 +472,53 @@ describe('useCanvasOperations', () => {
 		});
 	});
 
+	describe('addConnections', () => {
+		it('should create connections between nodes', async () => {
+			const nodeTypeName = 'type';
+			const nodes = [
+				mockNode({ id: 'a', name: 'Node A', type: nodeTypeName, position: [40, 40] }),
+				mockNode({ id: 'b', name: 'Node B', type: nodeTypeName, position: [40, 40] }),
+			];
+
+			nodeTypesStore.setNodeTypes([
+				mockNodeTypeDescription({
+					name: nodeTypeName,
+				}),
+			]);
+
+			await canvasOperations.addNodes(nodes, {});
+
+			vi.spyOn(workflowsStore, 'getNodeById')
+				.mockReturnValueOnce(nodes[0])
+				.mockReturnValueOnce(nodes[1]);
+
+			const connections = [
+				{ from: { nodeIndex: 0, outputIndex: 0 }, to: { nodeIndex: 1, inputIndex: 0 } },
+				{ from: { nodeIndex: 1, outputIndex: 0 }, to: { nodeIndex: 2, inputIndex: 0 } },
+			];
+			const offsetIndex = 0;
+
+			const addConnectionSpy = vi.spyOn(workflowsStore, 'addConnection');
+
+			await canvasOperations.addConnections(connections, { offsetIndex });
+
+			expect(addConnectionSpy).toHaveBeenCalledWith({
+				connection: [
+					{
+						index: 0,
+						node: 'Node B',
+						type: 'main',
+					},
+					{
+						index: 0,
+						node: 'spy',
+						type: 'main',
+					},
+				],
+			});
+		});
+	});
+
 	describe('createConnection', () => {
 		it('should not create a connection if source node does not exist', () => {
 			const addConnectionSpy = vi
diff --git a/packages/editor-ui/src/composables/useCanvasMouseSelect.ts b/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
index 4abb3aace..e8f7ac52d 100644
--- a/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
+++ b/packages/editor-ui/src/composables/useCanvasMouseSelect.ts
@@ -4,7 +4,7 @@ import { useDeviceSupport } from 'n8n-design-system';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { getMousePosition, getRelativePosition } from '@/utils/nodeViewUtils';
-import { ref, onMounted, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useCanvasStore } from '@/stores/canvas.store';
 import { useContextMenu } from './useContextMenu';
 
@@ -210,9 +210,9 @@ export default function useCanvasMouseSelect() {
 
 	const instance = computed(() => canvasStore.jsPlumbInstance);
 
-	onMounted(() => {
+	function initializeCanvasMouseSelect() {
 		_createSelectBox();
-	});
+	}
 
 	return {
 		selectActive,
@@ -222,5 +222,6 @@ export default function useCanvasMouseSelect() {
 		nodeDeselected,
 		nodeSelected,
 		deselectAllNodes,
+		initializeCanvasMouseSelect,
 	};
 }
diff --git a/packages/editor-ui/src/composables/useCanvasOperations.ts b/packages/editor-ui/src/composables/useCanvasOperations.ts
index c3b4c52a2..cb9588f9e 100644
--- a/packages/editor-ui/src/composables/useCanvasOperations.ts
+++ b/packages/editor-ui/src/composables/useCanvasOperations.ts
@@ -1,5 +1,10 @@
 import type { CanvasElement } from '@/types';
-import type { INodeUi, XYPosition } from '@/Interface';
+import type {
+	AddedNodesAndConnections,
+	INodeUi,
+	INodeUpdatePropertiesInformation,
+	XYPosition,
+} from '@/Interface';
 import { QUICKSTART_NOTE_NAME, STICKY_NODE_TYPE } from '@/constants';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import { useHistoryStore } from '@/stores/history.store';
@@ -13,19 +18,76 @@ import {
 	RenameNodeCommand,
 } from '@/models/history';
 import type { Connection } from '@vue-flow/core';
-import { getUniqueNodeName, mapCanvasConnectionToLegacyConnection } from '@/utils/canvasUtilsV2';
-import type { IConnection } from 'n8n-workflow';
+import {
+	getUniqueNodeName,
+	mapCanvasConnectionToLegacyConnection,
+	parseCanvasConnectionHandleString,
+} from '@/utils/canvasUtilsV2';
+import type {
+	ConnectionTypes,
+	IConnection,
+	INodeInputConfiguration,
+	INodeOutputConfiguration,
+	INodeTypeDescription,
+	INodeTypeNameVersion,
+	ITelemetryTrackProperties,
+} from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
 import { useNDVStore } from '@/stores/ndv.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { useI18n } from '@/composables/useI18n';
+import { useToast } from '@/composables/useToast';
+import * as NodeViewUtils from '@/utils/nodeViewUtils';
+import { v4 as uuid } from 'uuid';
+import { useSegment } from '@/stores/segment.store';
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+import { useCredentialsStore } from '@/stores/credentials.store';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import type { useRouter } from 'vue-router';
+import { useCanvasStore } from '@/stores/canvas.store';
 
-export function useCanvasOperations() {
+type AddNodeData = {
+	name?: string;
+	type: string;
+	position?: XYPosition;
+};
+
+type AddNodeOptions = {
+	dragAndDrop?: boolean;
+	openNDV?: boolean;
+	trackHistory?: boolean;
+	isAutoAdd?: boolean;
+};
+
+export function useCanvasOperations({
+	router,
+	lastClickPosition,
+}: {
+	router: ReturnType<typeof useRouter>;
+	lastClickPosition: Ref<XYPosition>;
+}) {
 	const workflowsStore = useWorkflowsStore();
+	const credentialsStore = useCredentialsStore();
 	const historyStore = useHistoryStore();
 	const uiStore = useUIStore();
 	const ndvStore = useNDVStore();
+	const nodeTypesStore = useNodeTypesStore();
+	const canvasStore = useCanvasStore();
 
+	const i18n = useI18n();
+	const toast = useToast();
+	const workflowHelpers = useWorkflowHelpers({ router });
 	const telemetry = useTelemetry();
 	const externalHooks = useExternalHooks();
 
+	const editableWorkflow = computed(() => workflowsStore.workflow);
+	const editableWorkflowObject = computed(() => workflowsStore.getCurrentWorkflow());
+
+	const triggerNodes = computed<INodeUi[]>(() => {
+		return workflowsStore.workflowTriggerNodes;
+	});
+
 	/**
 	 * Node operations
 	 */
@@ -159,6 +221,532 @@ export function useCanvasOperations() {
 		ndvStore.activeNodeName = name;
 	}
 
+	function setNodeSelected(id?: string) {
+		if (!id) {
+			uiStore.lastSelectedNode = '';
+			return;
+		}
+
+		const node = workflowsStore.getNodeById(id);
+		if (!node) {
+			return;
+		}
+
+		uiStore.lastSelectedNode = node.name;
+	}
+
+	async function addNodes(
+		nodes: AddedNodesAndConnections['nodes'],
+		{
+			dragAndDrop,
+			position,
+		}: {
+			dragAndDrop?: boolean;
+			position?: XYPosition;
+		} = {},
+	) {
+		let currentPosition = position;
+		let lastAddedNode: INodeUi | undefined;
+		for (const { type, name, position: nodePosition, isAutoAdd, openDetail } of nodes) {
+			try {
+				await createNode(
+					{
+						name,
+						type,
+						position: nodePosition ?? currentPosition,
+					},
+					{
+						dragAndDrop,
+						openNDV: openDetail ?? false,
+						trackHistory: true,
+						isAutoAdd,
+					},
+				);
+			} catch (error) {
+				toast.showError(error, i18n.baseText('error'));
+				continue;
+			}
+
+			lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
+			currentPosition = [
+				lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
+				lastAddedNode.position[1],
+			];
+		}
+
+		// If the last added node has multiple inputs, move them down
+		if (!lastAddedNode) {
+			return;
+		}
+		const lastNodeInputs = editableWorkflowObject.value.getParentNodesByDepth(
+			lastAddedNode.name,
+			1,
+		);
+		if (lastNodeInputs.length > 1) {
+			lastNodeInputs.slice(1).forEach((node, index) => {
+				const nodeUi = workflowsStore.getNodeByName(node.name);
+				if (!nodeUi) return;
+
+				updateNodePosition(nodeUi.id, {
+					x: nodeUi.position[0],
+					y: nodeUi.position[1] + 100 * (index + 1),
+				});
+			});
+		}
+	}
+
+	async function createNode(node: AddNodeData, options: AddNodeOptions = {}): Promise<INodeUi> {
+		const newNodeData = await resolveNodeData(node, options);
+		if (!newNodeData) {
+			throw new Error(i18n.baseText('nodeViewV2.showError.failedToCreateNode'));
+		}
+
+		/**
+		 * @TODO Check if maximum node type limit reached
+		 */
+
+		newNodeData.name = getUniqueNodeName(newNodeData.name, workflowsStore.canvasNames);
+
+		workflowsStore.addNode(newNodeData);
+
+		// @TODO Figure out why this is needed and if we can do better...
+		// this.matchCredentials(node);
+
+		const lastSelectedNode = uiStore.getLastSelectedNode;
+		const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
+		const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
+
+		historyStore.startRecordingUndo();
+
+		const outputIndex = lastSelectedNodeOutputIndex ?? 0;
+		const targetEndpoint = lastSelectedNodeEndpointUuid ?? '';
+
+		// Handle connection of scoped_endpoint types
+		if (lastSelectedNode && !options.isAutoAdd) {
+			if (lastSelectedNodeEndpointUuid) {
+				const { type: connectionType } = parseCanvasConnectionHandleString(
+					lastSelectedNodeEndpointUuid,
+				);
+				if (isConnectionAllowed(lastSelectedNode, newNodeData, connectionType)) {
+					createConnection({
+						source: lastSelectedNode.id,
+						sourceHandle: targetEndpoint,
+						target: newNodeData.id,
+						targetHandle: `inputs/${connectionType}/0`,
+					});
+				}
+			} else {
+				// If a node is last selected then connect between the active and its child ones
+				// Connect active node to the newly created one
+				createConnection({
+					source: lastSelectedNode.id,
+					sourceHandle: `outputs/${NodeConnectionType.Main}/${outputIndex}`,
+					target: newNodeData.id,
+					targetHandle: `inputs/${NodeConnectionType.Main}/0`,
+				});
+			}
+		}
+
+		historyStore.stopRecordingUndo();
+
+		return newNodeData;
+	}
+
+	async function initializeNodeDataWithDefaultCredentials(node: AddNodeData) {
+		const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
+		if (!nodeTypeDescription) {
+			throw new Error(i18n.baseText('nodeViewV2.showError.failedToCreateNode'));
+		}
+
+		let nodeVersion = nodeTypeDescription.defaultVersion;
+		if (typeof nodeVersion === 'undefined') {
+			nodeVersion = Array.isArray(nodeTypeDescription.version)
+				? nodeTypeDescription.version.slice(-1)[0]
+				: nodeTypeDescription.version;
+		}
+
+		const newNodeData: INodeUi = {
+			id: uuid(),
+			name: node.name ?? (nodeTypeDescription.defaults.name as string),
+			type: nodeTypeDescription.name,
+			typeVersion: nodeVersion,
+			position: node.position ?? [0, 0],
+			parameters: {},
+		};
+
+		await loadNodeTypesProperties([{ name: newNodeData.type, version: newNodeData.typeVersion }]);
+
+		const nodeType = nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
+		const nodeParameters = NodeHelpers.getNodeParameters(
+			nodeType?.properties ?? [],
+			{},
+			true,
+			false,
+			newNodeData,
+		);
+
+		newNodeData.parameters = nodeParameters ?? {};
+
+		const credentialPerType = nodeTypeDescription.credentials
+			?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
+			.flat();
+
+		if (credentialPerType?.length === 1) {
+			const defaultCredential = credentialPerType[0];
+
+			const selectedCredentials = credentialsStore.getCredentialById(defaultCredential.id);
+			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
+			const credentials = {
+				[defaultCredential.type]: selected,
+			};
+
+			if (nodeTypeDescription.credentials) {
+				const authentication = nodeTypeDescription.credentials.find(
+					(type) => type.name === defaultCredential.type,
+				);
+				if (authentication?.displayOptions?.hide) {
+					return newNodeData;
+				}
+
+				const authDisplayOptions = authentication?.displayOptions?.show;
+				if (!authDisplayOptions) {
+					newNodeData.credentials = credentials;
+					return newNodeData;
+				}
+
+				if (Object.keys(authDisplayOptions).length === 1 && authDisplayOptions.authentication) {
+					// ignore complex case when there's multiple dependencies
+					newNodeData.credentials = credentials;
+
+					let parameters: { [key: string]: string } = {};
+					for (const displayOption of Object.keys(authDisplayOptions)) {
+						if (nodeParameters && !nodeParameters[displayOption]) {
+							parameters = {};
+							newNodeData.credentials = undefined;
+							break;
+						}
+						const optionValue = authDisplayOptions[displayOption]?.[0];
+						if (optionValue && typeof optionValue === 'string') {
+							parameters[displayOption] = optionValue;
+						}
+						newNodeData.parameters = {
+							...newNodeData.parameters,
+							...parameters,
+						};
+					}
+				}
+			}
+		}
+
+		return newNodeData;
+	}
+
+	/**
+	 * Resolves the data for a new node
+	 */
+	async function resolveNodeData(node: AddNodeData, options: AddNodeOptions = {}) {
+		const nodeTypeDescription: INodeTypeDescription | null = nodeTypesStore.getNodeType(node.type);
+		if (nodeTypeDescription === null) {
+			toast.showMessage({
+				title: i18n.baseText('nodeView.showMessage.addNodeButton.title'),
+				message: i18n.baseText('nodeView.showMessage.addNodeButton.message', {
+					interpolate: { nodeTypeName: node.type },
+				}),
+				type: 'error',
+			});
+			return;
+		}
+
+		if (
+			nodeTypeDescription.maxNodes !== undefined &&
+			workflowHelpers.getNodeTypeCount(node.type) >= nodeTypeDescription.maxNodes
+		) {
+			showMaxNodeTypeError(nodeTypeDescription);
+			return;
+		}
+
+		const newNodeData = await initializeNodeDataWithDefaultCredentials(node);
+
+		// When pulling new connection from node or injecting into a connection
+		const lastSelectedNode = uiStore.getLastSelectedNode;
+
+		if (node.position) {
+			newNodeData.position = NodeViewUtils.getNewNodePosition(
+				canvasStore.getNodesWithPlaceholderNode(),
+				node.position,
+			);
+		} else if (lastSelectedNode) {
+			// @TODO Implement settings lastSelectedConnection for new canvas
+			const lastSelectedConnection = canvasStore.lastSelectedConnection;
+			if (lastSelectedConnection) {
+				// set when injecting into a connection
+				const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
+				if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
+					pushDownstreamNodes(lastSelectedNode.name, NodeViewUtils.PUSH_NODES_OFFSET, {
+						trackHistory: options.trackHistory,
+					});
+				}
+			}
+
+			// This position is set in `onMouseUp` when pulling connections
+			if (canvasStore.newNodeInsertPosition) {
+				newNodeData.position = NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, [
+					canvasStore.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
+					canvasStore.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
+				]);
+				canvasStore.newNodeInsertPosition = null;
+			} else {
+				let yOffset = 0;
+				const workflow = workflowsStore.getCurrentWorkflow();
+
+				if (lastSelectedConnection) {
+					const sourceNodeType = nodeTypesStore.getNodeType(
+						lastSelectedNode.type,
+						lastSelectedNode.typeVersion,
+					);
+
+					if (sourceNodeType) {
+						const offsets = [
+							[-100, 100],
+							[-140, 0, 140],
+							[-240, -100, 100, 240],
+						];
+
+						const sourceNodeOutputs = NodeHelpers.getNodeOutputs(
+							workflow,
+							lastSelectedNode,
+							sourceNodeType,
+						);
+						const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
+
+						const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
+							(output) => output === NodeConnectionType.Main,
+						);
+
+						if (sourceNodeOutputMainOutputs.length > 1) {
+							const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
+							const sourceOutputIndex = lastSelectedConnection.__meta
+								? lastSelectedConnection.__meta.sourceOutputIndex
+								: 0;
+							yOffset = offset[sourceOutputIndex];
+						}
+					}
+				}
+
+				let outputs: Array<ConnectionTypes | INodeOutputConfiguration> = [];
+				try {
+					// It fails when the outputs are an expression. As those nodes have
+					// normally no outputs by default and the only reason we need the
+					// outputs here is to calculate the position, it is fine to assume
+					// that they have no outputs and are so treated as a regular node
+					// with only "main" outputs.
+					outputs = NodeHelpers.getNodeOutputs(workflow, newNodeData, nodeTypeDescription);
+				} catch (e) {}
+				const outputTypes = NodeHelpers.getConnectionTypes(outputs);
+				const lastSelectedNodeType = nodeTypesStore.getNodeType(
+					lastSelectedNode.type,
+					lastSelectedNode.typeVersion,
+				);
+
+				// If node has only scoped outputs, position it below the last selected node
+				if (
+					outputTypes.length > 0 &&
+					outputTypes.every((outputName) => outputName !== NodeConnectionType.Main)
+				) {
+					const lastSelectedNodeWorkflow = workflow.getNode(lastSelectedNode.name);
+					if (!lastSelectedNodeWorkflow || !lastSelectedNodeType) {
+						return;
+					}
+
+					const lastSelectedInputs = NodeHelpers.getNodeInputs(
+						workflow,
+						lastSelectedNodeWorkflow,
+						lastSelectedNodeType,
+					);
+					const lastSelectedInputTypes = NodeHelpers.getConnectionTypes(lastSelectedInputs);
+
+					const scopedConnectionIndex = (lastSelectedInputTypes || [])
+						.filter((input) => input !== NodeConnectionType.Main)
+						.findIndex((inputType) => outputs[0] === inputType);
+
+					newNodeData.position = NodeViewUtils.getNewNodePosition(
+						workflowsStore.allNodes,
+						[
+							lastSelectedNode.position[0] +
+								(NodeViewUtils.NODE_SIZE /
+									(Math.max(lastSelectedNodeType?.inputs?.length ?? 1), 1)) *
+									scopedConnectionIndex,
+							lastSelectedNode.position[1] + NodeViewUtils.PUSH_NODES_OFFSET,
+						],
+						[100, 0],
+					);
+				} else {
+					if (!lastSelectedNodeType) {
+						return;
+					}
+
+					// Has only main outputs or no outputs at all
+					const inputs = NodeHelpers.getNodeInputs(
+						workflow,
+						lastSelectedNode,
+						lastSelectedNodeType,
+					);
+					const inputsTypes = NodeHelpers.getConnectionTypes(inputs);
+
+					let pushOffset = NodeViewUtils.PUSH_NODES_OFFSET;
+					if (!!inputsTypes.find((input) => input !== NodeConnectionType.Main)) {
+						// If the node has scoped inputs, push it down a bit more
+						pushOffset += 150;
+					}
+
+					// If a node is active then add the new node directly after the current one
+					newNodeData.position = NodeViewUtils.getNewNodePosition(
+						workflowsStore.allNodes,
+						[lastSelectedNode.position[0] + pushOffset, lastSelectedNode.position[1] + yOffset],
+						[100, 0],
+					);
+				}
+			}
+		} else {
+			// If added node is a trigger and it's the first one added to the canvas
+			// we place it at canvasAddButtonPosition to replace the canvas add button
+			const position =
+				nodeTypesStore.isTriggerNode(node.type) && triggerNodes.value.length === 0
+					? canvasStore.canvasAddButtonPosition
+					: // If no node is active find a free spot
+						(lastClickPosition.value as XYPosition);
+
+			newNodeData.position = NodeViewUtils.getNewNodePosition(workflowsStore.allNodes, position);
+		}
+
+		const localizedName = i18n.localizeNodeName(newNodeData.name, newNodeData.type);
+
+		newNodeData.name = getUniqueNodeName(localizedName, workflowsStore.canvasNames);
+
+		if (nodeTypeDescription.webhooks?.length) {
+			newNodeData.webhookId = uuid();
+		}
+
+		workflowsStore.setNodePristine(newNodeData.name, true);
+		uiStore.stateIsDirty = true;
+
+		if (node.type === STICKY_NODE_TYPE) {
+			telemetry.trackNodesPanel('nodeView.addSticky', {
+				workflow_id: workflowsStore.workflowId,
+			});
+		} else {
+			void externalHooks.run('nodeView.addNodeButton', { nodeTypeName: node.type });
+			useSegment().trackAddedTrigger(node.type);
+			const trackProperties: ITelemetryTrackProperties = {
+				node_type: node.type,
+				node_version: newNodeData.typeVersion,
+				is_auto_add: options.isAutoAdd,
+				workflow_id: workflowsStore.workflowId,
+				drag_and_drop: options.dragAndDrop,
+			};
+
+			if (lastSelectedNode) {
+				trackProperties.input_node_type = lastSelectedNode.type;
+			}
+
+			telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
+		}
+
+		// Automatically deselect all nodes and select the current one and also active
+		// current node. But only if it's added manually by the user (not by undo/redo mechanism)
+		// @TODO
+		// if (trackHistory) {
+		// 	this.deselectAllNodes();
+		// 	setTimeout(() => {
+		// 		this.nodeSelectedByName(newNodeData.name, showDetail && nodeTypeName !== STICKY_NODE_TYPE);
+		// 	});
+		// }
+
+		return newNodeData;
+	}
+
+	function pushDownstreamNodes(
+		sourceNodeName: string,
+		margin: number,
+		{ trackHistory = false }: { trackHistory?: boolean },
+	) {
+		const sourceNode = workflowsStore.nodesByName[sourceNodeName];
+
+		const workflow = workflowHelpers.getCurrentWorkflow();
+
+		const checkNodes = workflowHelpers.getConnectedNodes('downstream', workflow, sourceNodeName);
+		for (const nodeName of checkNodes) {
+			const node = workflowsStore.nodesByName[nodeName];
+			const oldPosition = node.position;
+
+			if (node.position[0] < sourceNode.position[0]) {
+				continue;
+			}
+
+			const updateInformation: INodeUpdatePropertiesInformation = {
+				name: nodeName,
+				properties: {
+					position: [node.position[0] + margin, node.position[1]],
+				},
+			};
+
+			workflowsStore.updateNodeProperties(updateInformation);
+			updateNodePosition(node.id, { x: node.position[0], y: node.position[1] });
+
+			if (
+				(trackHistory && oldPosition[0] !== updateInformation.properties.position[0]) ||
+				oldPosition[1] !== updateInformation.properties.position[1]
+			) {
+				historyStore.pushCommandToUndo(
+					new MoveNodeCommand(nodeName, oldPosition, updateInformation.properties.position),
+					trackHistory,
+				);
+			}
+		}
+	}
+
+	async function loadNodeTypesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
+		const allNodeTypeDescriptions: INodeTypeDescription[] = nodeTypesStore.allNodeTypes;
+
+		const nodesToBeFetched: INodeTypeNameVersion[] = [];
+		allNodeTypeDescriptions.forEach((nodeTypeDescription) => {
+			const nodeVersions = Array.isArray(nodeTypeDescription.version)
+				? nodeTypeDescription.version
+				: [nodeTypeDescription.version];
+			if (
+				!!nodeInfos.find(
+					(n) => n.name === nodeTypeDescription.name && nodeVersions.includes(n.version),
+				) &&
+				!nodeTypeDescription.hasOwnProperty('properties')
+			) {
+				nodesToBeFetched.push({
+					name: nodeTypeDescription.name,
+					version: Array.isArray(nodeTypeDescription.version)
+						? nodeTypeDescription.version.slice(-1)[0]
+						: nodeTypeDescription.version,
+				});
+			}
+		});
+
+		if (nodesToBeFetched.length > 0) {
+			// Only call API if node information is actually missing
+			await nodeTypesStore.getNodesInformation(nodesToBeFetched);
+		}
+	}
+
+	function showMaxNodeTypeError(nodeTypeDescription: INodeTypeDescription) {
+		const maxNodes = nodeTypeDescription.maxNodes;
+		toast.showMessage({
+			title: i18n.baseText('nodeView.showMessage.showMaxNodeTypeError.title'),
+			message: i18n.baseText('nodeView.showMessage.showMaxNodeTypeError.message', {
+				adjustToNumber: maxNodes,
+				interpolate: { nodeTypeDataDisplayName: nodeTypeDescription.displayName },
+			}),
+			type: 'error',
+			duration: 0,
+		});
+	}
+
 	/**
 	 * Connection operations
 	 */
@@ -166,7 +754,7 @@ export function useCanvasOperations() {
 	function createConnection(connection: Connection) {
 		const sourceNode = workflowsStore.getNodeById(connection.source);
 		const targetNode = workflowsStore.getNodeById(connection.target);
-		if (!sourceNode || !targetNode || !isConnectionAllowed(sourceNode, targetNode)) {
+		if (!sourceNode || !targetNode) {
 			return;
 		}
 
@@ -175,6 +763,11 @@ export function useCanvasOperations() {
 			targetNode,
 			connection,
 		);
+
+		if (!isConnectionAllowed(sourceNode, targetNode, mappedConnection[1].type)) {
+			return;
+		}
+
 		workflowsStore.addConnection({
 			connection: mappedConnection,
 		});
@@ -221,55 +814,86 @@ export function useCanvasOperations() {
 		});
 	}
 
-	// @TODO Figure out a way to improve this
-	function isConnectionAllowed(sourceNode: INodeUi, targetNode: INodeUi): boolean {
-		// const targetNodeType = nodeTypesStore.getNodeType(
-		// 	targetNode.type,
-		// 	targetNode.typeVersion,
-		// );
-		//
-		// if (targetNodeType?.inputs?.length) {
-		// 	const workflow = this.workflowHelpers.getCurrentWorkflow();
-		// 	const workflowNode = workflow.getNode(targetNode.name);
-		// 	let inputs: Array<ConnectionTypes | INodeInputConfiguration> = [];
-		// 	if (targetNodeType) {
-		// 		inputs = NodeHelpers.getNodeInputs(workflow, workflowNode, targetNodeType);
-		// 	}
-		//
-		// 	for (const input of inputs || []) {
-		// 		if (typeof input === 'string' || input.type !== targetInfoType || !input.filter) {
-		// 			// No filters defined or wrong connection type
-		// 			continue;
-		// 		}
-		//
-		// 		if (input.filter.nodes.length) {
-		// 			if (!input.filter.nodes.includes(sourceNode.type)) {
-		// 				this.dropPrevented = true;
-		// 				this.showToast({
-		// 					title: this.$locale.baseText('nodeView.showError.nodeNodeCompatible.title'),
-		// 					message: this.$locale.baseText('nodeView.showError.nodeNodeCompatible.message', {
-		// 						interpolate: { sourceNodeName: sourceNode.name, targetNodeName: targetNode.name },
-		// 					}),
-		// 					type: 'error',
-		// 					duration: 5000,
-		// 				});
-		// 				return false;
-		// 			}
-		// 		}
-		// 	}
-		// }
+	function isConnectionAllowed(
+		sourceNode: INodeUi,
+		targetNode: INodeUi,
+		targetNodeConnectionType: NodeConnectionType,
+	): boolean {
+		const targetNodeType = nodeTypesStore.getNodeType(targetNode.type, targetNode.typeVersion);
+
+		if (targetNodeType?.inputs?.length) {
+			const workflow = workflowsStore.getCurrentWorkflow();
+			const workflowNode = workflow.getNode(targetNode.name);
+			if (!workflowNode) {
+				return false;
+			}
+
+			let inputs: Array<ConnectionTypes | INodeInputConfiguration> = [];
+			if (targetNodeType) {
+				inputs = NodeHelpers.getNodeInputs(workflow, workflowNode, targetNodeType) || [];
+			}
+
+			for (const input of inputs) {
+				if (typeof input === 'string' || input.type !== targetNodeConnectionType || !input.filter) {
+					// No filters defined or wrong connection type
+					continue;
+				}
+
+				if (input.filter.nodes.length) {
+					if (!input.filter.nodes.includes(sourceNode.type)) {
+						// this.dropPrevented = true;
+						toast.showToast({
+							title: i18n.baseText('nodeView.showError.nodeNodeCompatible.title'),
+							message: i18n.baseText('nodeView.showError.nodeNodeCompatible.message', {
+								interpolate: { sourceNodeName: sourceNode.name, targetNodeName: targetNode.name },
+							}),
+							type: 'error',
+							duration: 5000,
+						});
+						return false;
+					}
+				}
+			}
+		}
+
 		return sourceNode.id !== targetNode.id;
 	}
 
+	async function addConnections(
+		connections: AddedNodesAndConnections['connections'],
+		{ offsetIndex }: { offsetIndex: number },
+	) {
+		for (const { from, to } of connections) {
+			const fromNode = editableWorkflow.value.nodes[offsetIndex + from.nodeIndex];
+			const toNode = editableWorkflow.value.nodes[offsetIndex + to.nodeIndex];
+
+			createConnection({
+				source: fromNode.id,
+				sourceHandle: `outputs/${NodeConnectionType.Main}/${from.outputIndex ?? 0}`,
+				target: toNode.id,
+				targetHandle: `inputs/${NodeConnectionType.Main}/${to.inputIndex ?? 0}`,
+			});
+		}
+	}
+
 	return {
+		editableWorkflow,
+		editableWorkflowObject,
+		triggerNodes,
+		lastClickPosition,
+		initializeNodeDataWithDefaultCredentials,
+		createNode,
+		addNodes,
 		updateNodePosition,
 		setNodeActive,
 		setNodeActiveByName,
+		setNodeSelected,
 		renameNode,
 		revertRenameNode,
 		deleteNode,
 		revertDeleteNode,
 		trackDeleteNode,
+		addConnections,
 		createConnection,
 		deleteConnection,
 		revertDeleteConnection,
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 7f47a553a..3d007e51a 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -24,6 +24,7 @@ export const CUSTOM_API_CALL_NAME = 'Custom API Call';
 
 // workflows
 export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';
+export const NEW_WORKFLOW_ID = 'new';
 export const DEFAULT_NODETYPE_VERSION = 1;
 export const DEFAULT_NEW_WORKFLOW_NAME = 'My workflow';
 export const MIN_WORKFLOW_NAME_LENGTH = 1;
diff --git a/packages/editor-ui/src/stores/nodeCreator.store.ts b/packages/editor-ui/src/stores/nodeCreator.store.ts
index fe92add49..55439eda1 100644
--- a/packages/editor-ui/src/stores/nodeCreator.store.ts
+++ b/packages/editor-ui/src/stores/nodeCreator.store.ts
@@ -26,6 +26,7 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useViewStacks } from '@/components/Node/NodeCreator/composables/useViewStacks';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import { createCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
 
 export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 	const workflowsStore = useWorkflowsStore();
@@ -67,6 +68,42 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		openSource.value = view;
 	}
 
+	function openSelectiveNodeCreator({
+		connectionType,
+		node,
+		creatorView,
+	}: {
+		connectionType: NodeConnectionType;
+		node: string;
+		creatorView?: NodeFilterType;
+	}) {
+		const nodeName = node ?? ndvStore.activeNodeName;
+		const nodeData = nodeName ? workflowsStore.getNodeByName(nodeName) : null;
+
+		ndvStore.activeNodeName = null;
+
+		setTimeout(() => {
+			if (creatorView) {
+				openNodeCreator({
+					createNodeActive: true,
+					nodeCreatorView: creatorView,
+				});
+			} else if (connectionType && nodeData) {
+				openNodeCreatorForConnectingNode({
+					index: 0,
+					endpointUuid: createCanvasConnectionHandleString({
+						mode: 'inputs',
+						type: connectionType,
+						index: 0,
+					}),
+					eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
+					outputType: connectionType,
+					sourceId: nodeData.id,
+				});
+			}
+		});
+	}
+
 	function openNodeCreator({
 		source,
 		createNodeActive,
@@ -135,39 +172,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		});
 	}
 
-	function openSelectiveNodeCreator({
-		connectionType,
-		node,
-		creatorView,
-	}: {
-		connectionType: NodeConnectionType;
-		node: string;
-		creatorView?: NodeFilterType;
-	}) {
-		const nodeName = node ?? ndvStore.activeNodeName;
-		const nodeData = nodeName ? workflowsStore.getNodeByName(nodeName) : null;
-
-		ndvStore.activeNodeName = null;
-
-		setTimeout(() => {
-			if (creatorView) {
-				openNodeCreator({
-					createNodeActive: true,
-					nodeCreatorView: creatorView,
-				});
-			} else if (connectionType && nodeData) {
-				insertNodeAfterSelected({
-					index: 0,
-					endpointUuid: `${nodeData.id}-input${connectionType}0`,
-					eventSource: NODE_CREATOR_OPEN_SOURCES.NOTICE_ERROR_MESSAGE,
-					outputType: connectionType,
-					sourceId: nodeData.id,
-				});
-			}
-		});
-	}
-
-	function insertNodeAfterSelected(info: AIAssistantConnectionInfo) {
+	function openNodeCreatorForConnectingNode(info: AIAssistantConnectionInfo) {
 		const type = info.outputType ?? NodeConnectionType.Main;
 		// Get the node and set it as active that new nodes
 		// which get created get automatically connected
@@ -178,8 +183,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		}
 
 		uiStore.lastSelectedNode = sourceNode.name;
-		uiStore.lastSelectedNodeEndpointUuid =
-			info.endpointUuid ?? info.connection?.target.jtk?.endpoint.uuid;
+		uiStore.lastSelectedNodeEndpointUuid = info.endpointUuid ?? null;
 		uiStore.lastSelectedNodeOutputIndex = info.index;
 		// canvasStore.newNodeInsertPosition = null;
 
@@ -247,6 +251,7 @@ export const useNodeCreatorStore = defineStore(STORES.NODE_CREATOR, () => {
 		setMergeNodes,
 		openNodeCreator,
 		openSelectiveNodeCreator,
+		openNodeCreatorForConnectingNode,
 		allNodeCreatorNodes,
 	};
 });
diff --git a/packages/editor-ui/src/stores/workflows.store.ts b/packages/editor-ui/src/stores/workflows.store.ts
index 57aef660e..44e22d61e 100644
--- a/packages/editor-ui/src/stores/workflows.store.ts
+++ b/packages/editor-ui/src/stores/workflows.store.ts
@@ -31,6 +31,7 @@ import type {
 	WorkflowMetadata,
 	IExecutionFlattedResponse,
 	IWorkflowTemplateNode,
+	ITag,
 } from '@/Interface';
 import { defineStore } from 'pinia';
 import type {
@@ -73,6 +74,7 @@ import { i18n } from '@/plugins/i18n';
 
 import { computed, ref } from 'vue';
 import { useProjectsStore } from '@/stores/projects.store';
+import { useTagsStore } from '@/stores/tags.store';
 
 const defaults: Omit<IWorkflowDb, 'id'> & { settings: NonNullable<IWorkflowDb['settings']> } = {
 	name: '',
@@ -1502,6 +1504,31 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		clearNodeExecutionData(node.name);
 	}
 
+	function initializeEditableWorkflow(id: string) {
+		const targetWorkflow = workflowsById.value[id];
+		const tags = (targetWorkflow?.tags ?? []) as ITag[];
+		const tagIds = tags.map((tag) => tag.id);
+
+		addWorkflow(targetWorkflow);
+		setWorkflow(targetWorkflow);
+		setActive(targetWorkflow.active || false);
+		setWorkflowId(targetWorkflow.id);
+		setWorkflowName({ newName: targetWorkflow.name, setStateDirty: false });
+		setWorkflowSettings(targetWorkflow.settings ?? {});
+		setWorkflowPinData(targetWorkflow.pinData ?? {});
+		setWorkflowVersionId(targetWorkflow.versionId);
+		setWorkflowMetadata(targetWorkflow.meta);
+		if (targetWorkflow.usedCredentials) {
+			setUsedCredentials(targetWorkflow.usedCredentials);
+		}
+		setWorkflowTagIds(tagIds || []);
+
+		if (tags.length > 0) {
+			const tagsStore = useTagsStore();
+			tagsStore.upsertTags(tags);
+		}
+	}
+
 	//
 	// End Canvas V2 Functions
 	//
@@ -1642,5 +1669,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		removeNodeExecutionDataById,
 		setNodes,
 		setConnections,
+		initializeEditableWorkflow,
 	};
 });
diff --git a/packages/editor-ui/src/utils/__tests__/canvasUtilsV2.spec.ts b/packages/editor-ui/src/utils/__tests__/canvasUtilsV2.spec.ts
index bcbbfa2ba..3e3074def 100644
--- a/packages/editor-ui/src/utils/__tests__/canvasUtilsV2.spec.ts
+++ b/packages/editor-ui/src/utils/__tests__/canvasUtilsV2.spec.ts
@@ -4,6 +4,7 @@ import {
 	getUniqueNodeName,
 	mapCanvasConnectionToLegacyConnection,
 	parseCanvasConnectionHandleString,
+	createCanvasConnectionHandleString,
 } from '@/utils/canvasUtilsV2';
 import { NodeConnectionType, type IConnections, type INodeTypeDescription } from 'n8n-workflow';
 import type { CanvasConnection } from '@/types';
@@ -477,6 +478,35 @@ describe('parseCanvasConnectionHandleString', () => {
 	});
 });
 
+describe('createCanvasConnectionHandleString', () => {
+	it('should create handle string with default values', () => {
+		const result = createCanvasConnectionHandleString({ mode: 'inputs' });
+		expect(result).toBe('inputs/main/0');
+	});
+
+	it('should create handle string with provided values', () => {
+		const result = createCanvasConnectionHandleString({
+			mode: 'outputs',
+			type: NodeConnectionType.AiMemory,
+			index: 2,
+		});
+		expect(result).toBe(`outputs/${NodeConnectionType.AiMemory}/2`);
+	});
+
+	it('should create handle string with mode and type only', () => {
+		const result = createCanvasConnectionHandleString({
+			mode: 'inputs',
+			type: NodeConnectionType.AiTool,
+		});
+		expect(result).toBe(`inputs/${NodeConnectionType.AiTool}/0`);
+	});
+
+	it('should create handle string with mode and index only', () => {
+		const result = createCanvasConnectionHandleString({ mode: 'outputs', index: 3 });
+		expect(result).toBe('outputs/main/3');
+	});
+});
+
 describe('mapCanvasConnectionToLegacyConnection', () => {
 	it('should map canvas connection to legacy connection', () => {
 		const sourceNode = createTestNode({ name: 'sourceNode', type: 'main' });
diff --git a/packages/editor-ui/src/utils/canvasUtilsV2.ts b/packages/editor-ui/src/utils/canvasUtilsV2.ts
index b1b249999..5b08c18d3 100644
--- a/packages/editor-ui/src/utils/canvasUtilsV2.ts
+++ b/packages/editor-ui/src/utils/canvasUtilsV2.ts
@@ -68,6 +68,18 @@ export function parseCanvasConnectionHandleString(handle: string | null | undefi
 	};
 }
 
+export function createCanvasConnectionHandleString({
+	mode,
+	type = NodeConnectionType.Main,
+	index = 0,
+}: {
+	mode: 'inputs' | 'outputs';
+	type?: NodeConnectionType;
+	index?: number;
+}) {
+	return `${mode}/${type}/${index}`;
+}
+
 export function mapCanvasConnectionToLegacyConnection(
 	sourceNode: INodeUi,
 	targetNode: INodeUi,
diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
index 047c7183d..d9d518d46 100644
--- a/packages/editor-ui/src/views/NodeView.v2.vue
+++ b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -11,34 +11,44 @@ import { useRunWorkflow } from '@/composables/useRunWorkflow';
 import type {
 	AddedNodesAndConnections,
 	INodeUi,
-	ITag,
 	IUpdateInformation,
 	IWorkflowDataUpdate,
 	ToggleNodeCreatorOptions,
 	XYPosition,
 } from '@/Interface';
-import { useTagsStore } from '@/stores/tags.store';
 import type { Connection } from '@vue-flow/core';
 import type { CanvasElement } from '@/types';
-import { EnterpriseEditionFeature, VIEWS } from '@/constants';
+import {
+	CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT,
+	EnterpriseEditionFeature,
+	MODAL_CANCEL,
+	MODAL_CONFIRM,
+	NEW_WORKFLOW_ID,
+	VIEWS,
+} from '@/constants';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import { useNodeCreatorStore } from '@/stores/nodeCreator.store';
 import { useExternalHooks } from '@/composables/useExternalHooks';
-import * as NodeViewUtils from '@/utils/nodeViewUtils';
-import type { ExecutionSummary, IConnection, INodeTypeDescription } from 'n8n-workflow';
-import { NodeConnectionType } from 'n8n-workflow';
+import type { NodeConnectionType, ExecutionSummary, IConnection } from 'n8n-workflow';
 import { useToast } from '@/composables/useToast';
-import { v4 as uuid } from 'uuid';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import useEnvironmentsStore from '@/stores/environments.ee.store';
 import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
 import { useRootStore } from '@/stores/root.store';
 import { useCollaborationStore } from '@/stores/collaboration.store';
-import { getUniqueNodeName } from '@/utils/canvasUtilsV2';
 import { historyBus } from '@/models/history';
 import { useCanvasOperations } from '@/composables/useCanvasOperations';
 import { useExecutionsStore } from '@/stores/executions.store';
+import { useCanvasStore } from '@/stores/canvas.store';
+import { useMessage } from '@/composables/useMessage';
+import { useTitleChange } from '@/composables/useTitleChange';
+import { useNpsSurveyStore } from '@/stores/npsSurvey.store';
+import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { useHistoryStore } from '@/stores/history.store';
+import { useProjectsStore } from '@/stores/projects.store';
+import { usePostHog } from '@/stores/posthog.store';
 
 const NodeCreation = defineAsyncComponent(
 	async () => await import('@/components/Node/NodeCreation.vue'),
@@ -49,17 +59,19 @@ const NodeDetailsView = defineAsyncComponent(
 );
 
 const $style = useCssModule();
-
 const router = useRouter();
 const route = useRoute();
 const i18n = useI18n();
+const telemetry = useTelemetry();
 const externalHooks = useExternalHooks();
 const toast = useToast();
+const message = useMessage();
+const titleChange = useTitleChange();
+const workflowHelpers = useWorkflowHelpers({ router });
 
 const nodeTypesStore = useNodeTypesStore();
 const uiStore = useUIStore();
 const workflowsStore = useWorkflowsStore();
-const tagsStore = useTagsStore();
 const sourceControlStore = useSourceControlStore();
 const nodeCreatorStore = useNodeCreatorStore();
 const settingsStore = useSettingsStore();
@@ -69,6 +81,12 @@ const externalSecretsStore = useExternalSecretsStore();
 const rootStore = useRootStore();
 const collaborationStore = useCollaborationStore();
 const executionsStore = useExecutionsStore();
+const canvasStore = useCanvasStore();
+const npsSurveyStore = useNpsSurveyStore();
+const historyStore = useHistoryStore();
+const projectsStore = useProjectsStore();
+
+const lastClickPosition = ref<XYPosition>([450, 450]);
 
 const { runWorkflow } = useRunWorkflow({ router });
 const {
@@ -76,19 +94,27 @@ const {
 	renameNode,
 	revertRenameNode,
 	setNodeActive,
+	setNodeSelected,
 	deleteNode,
 	revertDeleteNode,
+	addNodes,
 	createConnection,
 	deleteConnection,
 	revertDeleteConnection,
 	setNodeActiveByName,
-} = useCanvasOperations();
+	addConnections,
+	editableWorkflow,
+	editableWorkflowObject,
+	triggerNodes,
+} = useCanvasOperations({ router, lastClickPosition });
 
 const isLoading = ref(true);
+const isBlankRedirect = ref(false);
 const readOnlyNotification = ref<null | { visible: boolean }>(null);
 
 const isProductionExecutionPreview = ref(false);
 const isExecutionPreview = ref(false);
+const isExecutionWaitingForWebhook = ref(false);
 
 const canOpenNDV = ref(true);
 const hideNodeIssues = ref(false);
@@ -96,19 +122,12 @@ const hideNodeIssues = ref(false);
 const workflowId = computed<string>(() => route.params.workflowId as string);
 const workflow = computed(() => workflowsStore.workflowsById[workflowId.value]);
 
-const editableWorkflow = computed(() => workflowsStore.workflow);
-const editableWorkflowObject = computed(() => workflowsStore.getCurrentWorkflow());
-
 const isDemoRoute = computed(() => route.name === VIEWS.DEMO);
 const isReadOnlyRoute = computed(() => route?.meta?.readOnlyCanvas === true);
 const isReadOnlyEnvironment = computed(() => {
 	return sourceControlStore.preferences.branchReadOnly;
 });
 
-const triggerNodes = computed<INodeUi[]>(() => {
-	return workflowsStore.workflowTriggerNodes;
-});
-
 const isCanvasAddButtonVisible = computed(() => {
 	return (
 		triggerNodes.value.length > 0 &&
@@ -118,13 +137,16 @@ const isCanvasAddButtonVisible = computed(() => {
 	);
 });
 
-onMounted(() => {
-	void initialize();
-});
+/**
+ * Initialization
+ */
 
-async function initialize() {
+async function initializeData() {
 	isLoading.value = true;
 
+	resetWorkspace();
+	titleChange.titleReset();
+
 	const loadPromises: Array<Promise<unknown>> = [
 		nodeTypesStore.getNodeTypes(),
 		workflowsStore.fetchWorkflow(workflowId.value),
@@ -156,25 +178,349 @@ async function initialize() {
 		);
 	}
 
-	initializeEditableWorkflow(workflowId.value);
+	void externalHooks.run('workflow.open', {
+		workflowId: workflowsStore.workflow.id,
+		workflowName: workflowsStore.workflow.name,
+	});
+	collaborationStore.notifyWorkflowOpened(workflowsStore.workflow.id);
 
-	addUndoRedoEventBindings();
-	addPostMessageEventBindings();
-
-	if (window.parent) {
-		window.parent.postMessage(
-			JSON.stringify({ command: 'n8nReady', version: rootStore.versionCli }),
-			'*',
-		);
+	const selectedExecution = executionsStore.activeExecution;
+	if (selectedExecution?.workflowId !== workflowsStore.workflow.id) {
+		executionsStore.activeExecution = null;
+		workflowsStore.currentWorkflowExecutions = [];
+	} else {
+		executionsStore.activeExecution = selectedExecution;
 	}
 
+	// @TODO Implement this
+	// this.clipboard.onPaste.value = this.onClipboardPasteEvent;
+
 	isLoading.value = false;
 }
 
-onBeforeUnmount(() => {
-	removePostMessageEventBindings();
-	removeUndoRedoEventBindings();
-});
+async function initializeView() {
+	// In case the workflow got saved we do not have to run init
+	// as only the route changed but all the needed data is already loaded
+	if (route.params.action === 'workflowSave') {
+		uiStore.stateIsDirty = false;
+		return;
+	}
+
+	// This function is called on route change as well, so we need to do the following:
+	// - if the redirect is blank, then do nothing
+	// - if the route is the template import view, then open the template
+	// - if the user is leaving the current view without saving the changes, then show a confirmation modal
+	if (isBlankRedirect.value) {
+		isBlankRedirect.value = false;
+	} else if (route.name === VIEWS.TEMPLATE_IMPORT) {
+		// @TODO Implement template import
+		// const templateId = route.params.id;
+		// await openWorkflowTemplate(templateId.toString());
+	} else {
+		if (uiStore.stateIsDirty && !isReadOnlyEnvironment.value) {
+			const confirmModal = await message.confirm(
+				i18n.baseText('generic.unsavedWork.confirmMessage.message'),
+				{
+					title: i18n.baseText('generic.unsavedWork.confirmMessage.headline'),
+					type: 'warning',
+					confirmButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.confirmButtonText'),
+					cancelButtonText: i18n.baseText('generic.unsavedWork.confirmMessage.cancelButtonText'),
+					showClose: true,
+				},
+			);
+
+			if (confirmModal === MODAL_CONFIRM) {
+				const saved = await workflowHelpers.saveCurrentWorkflow();
+				if (saved) {
+					await npsSurveyStore.fetchPromptsData();
+				}
+			} else if (confirmModal === MODAL_CANCEL) {
+				return;
+			}
+		}
+
+		// Get workflow id
+		let workflowIdParam: string | null = null;
+		if (route.params.workflowId) {
+			workflowIdParam = route.params.workflowId.toString();
+		}
+
+		historyStore.reset();
+
+		// If there is no workflow id, treat it as a new workflow
+		if (!workflowIdParam || workflowIdParam === NEW_WORKFLOW_ID) {
+			if (route.meta?.nodeView === true) {
+				await initializeViewForNewWorkflow();
+			}
+			return;
+		}
+
+		// Load workflow data
+		try {
+			await workflowsStore.fetchWorkflow(workflowIdParam);
+
+			titleChange.titleSet(workflow.value.name, 'IDLE');
+			// @TODO Implement this
+			// await openWorkflow(workflow);
+			// await checkAndInitDebugMode();
+
+			workflowsStore.initializeEditableWorkflow(workflowIdParam);
+			await projectsStore.setProjectNavActiveIdByWorkflowHomeProject(workflow.value.homeProject);
+
+			trackOpenWorkflowFromOnboardingTemplate();
+		} catch (error) {
+			toast.showError(error, i18n.baseText('openWorkflow.workflowNotFoundError'));
+
+			void router.push({
+				name: VIEWS.NEW_WORKFLOW,
+			});
+		}
+	}
+
+	await loadCredentials();
+	uiStore.nodeViewInitialized = true;
+
+	// Once view is initialized, pick up all toast notifications
+	// waiting in the store and display them
+	toast.showNotificationForViews([VIEWS.WORKFLOW, VIEWS.NEW_WORKFLOW]);
+}
+
+async function initializeViewForNewWorkflow() {
+	resetWorkspace();
+
+	await workflowsStore.getNewWorkflowData(undefined, projectsStore.currentProjectId);
+
+	workflowsStore.currentWorkflowExecutions = [];
+	executionsStore.activeExecution = null;
+	uiStore.stateIsDirty = false;
+	uiStore.nodeViewInitialized = true;
+	executionsStore.activeExecution = null;
+
+	// @TODO Implement this
+	// canvasStore.setZoomLevel(1, [0, 0]);
+	// canvasStore.zoomToFit();
+
+	// @TODO Implement this
+	// this.makeNewWorkflowShareable();
+
+	// Pre-populate the canvas with the manual trigger node if the experiment is enabled and the user is in the variant group
+	const { getVariant } = usePostHog();
+	if (
+		getVariant(CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT.name) ===
+		CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT.variant
+	) {
+		const manualTriggerNode = canvasStore.getAutoAddManualTriggerNode();
+		if (manualTriggerNode) {
+			await addNodes([manualTriggerNode]);
+			uiStore.lastSelectedNode = manualTriggerNode.name;
+		}
+	}
+}
+
+function resetWorkspace() {
+	workflowsStore.resetWorkflow();
+
+	onToggleNodeCreator({ createNodeActive: false });
+	nodeCreatorStore.setShowScrim(false);
+
+	// @TODO Implement this
+	// Reset nodes
+	// this.unbindEndpointEventListeners();
+	// this.deleteEveryEndpoint();
+
+	// Make sure that if there is a waiting test-webhook that it gets removed
+	if (isExecutionWaitingForWebhook.value) {
+		try {
+			void workflowsStore.removeTestWebhook(workflowsStore.workflowId);
+		} catch (error) {}
+	}
+	workflowsStore.resetState();
+	uiStore.removeActiveAction('workflowRunning');
+
+	uiStore.resetSelectedNodes();
+	uiStore.nodeViewOffsetPosition = [0, 0]; // @TODO Not sure if needed
+
+	// this.credentialsUpdated = false;
+}
+
+function trackOpenWorkflowFromOnboardingTemplate() {
+	if (workflow.value.meta?.onboardingId) {
+		telemetry.track(
+			`User opened workflow from onboarding template with ID ${workflow.value.meta.onboardingId}`,
+			{
+				workflow_id: workflowId.value,
+			},
+			{
+				withPostHog: true,
+			},
+		);
+	}
+}
+
+/**
+ * Nodes
+ */
+
+function onUpdateNodePosition(id: string, position: CanvasElement['position']) {
+	updateNodePosition(id, position, { trackHistory: true });
+}
+
+function onDeleteNode(id: string) {
+	deleteNode(id, { trackHistory: true });
+}
+
+function onRevertDeleteNode({ node }: { node: INodeUi }) {
+	revertDeleteNode(node);
+}
+
+function onSetNodeActive(id: string) {
+	setNodeActive(id);
+}
+
+function onSetNodeSelected(id?: string) {
+	setNodeSelected(id);
+}
+
+function onRenameNode(parameterData: IUpdateInformation) {
+	// The name changed. Do not forget to change the connections as well
+	if (parameterData.name === 'name' && parameterData.oldValue) {
+		void renameNode(parameterData.oldValue as string, parameterData.value as string);
+	}
+}
+
+async function onRevertRenameNode({
+	currentName,
+	newName,
+}: {
+	currentName: string;
+	newName: string;
+}) {
+	await revertRenameNode(currentName, newName);
+}
+
+/**
+ * Credentials
+ */
+
+async function loadCredentials() {
+	let options: { workflowId: string } | { projectId: string };
+
+	if (workflow.value) {
+		options = { workflowId: workflow.value.id };
+	} else {
+		const queryParam =
+			typeof route.query?.projectId === 'string' ? route.query?.projectId : undefined;
+		const projectId = queryParam ?? projectsStore.personalProject?.id;
+		if (projectId === undefined) {
+			throw new Error(
+				'Could not find projectId in the query nor could I find the personal project in the project store',
+			);
+		}
+
+		options = { projectId };
+	}
+
+	await credentialsStore.fetchAllCredentialsForWorkflow(options);
+}
+
+/**
+ * Connections
+ */
+
+function onCreateConnection(connection: Connection) {
+	createConnection(connection);
+}
+
+function onDeleteConnection(connection: Connection) {
+	deleteConnection(connection, { trackHistory: true });
+}
+
+function onRevertDeleteConnection({ connection }: { connection: [IConnection, IConnection] }) {
+	revertDeleteConnection(connection);
+}
+
+/**
+ * Import / Export
+ */
+
+async function importWorkflowExact(_workflow: IWorkflowDataUpdate) {
+	// @TODO
+}
+
+/**
+ * Node creator
+ */
+
+async function onAddNodesAndConnections(
+	{ nodes, connections }: AddedNodesAndConnections,
+	dragAndDrop = false,
+	position?: XYPosition,
+) {
+	if (!checkIfEditingIsAllowed()) {
+		return;
+	}
+
+	await addNodes(nodes, { dragAndDrop, position });
+	await addConnections(connections, {
+		offsetIndex: editableWorkflow.value.nodes.length - nodes.length,
+	});
+}
+
+async function onSwitchActiveNode(nodeName: string) {
+	setNodeActiveByName(nodeName);
+}
+
+async function onOpenConnectionNodeCreator(node: string, connectionType: NodeConnectionType) {
+	nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType });
+}
+
+function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
+	nodeCreatorStore.openNodeCreator(options);
+}
+
+/**
+ * Executions
+ */
+
+async function onRunWorkflow() {
+	await runWorkflow({});
+}
+
+async function openExecution(_executionId: string) {
+	// @TODO
+}
+
+/**
+ * Unload
+ */
+
+function addUnloadEventBindings() {
+	// window.addEventListener('beforeunload', this.onBeforeUnload);
+	// window.addEventListener('unload', this.onUnload);
+}
+
+function removeUnloadEventBindings() {
+	// window.removeEventListener('beforeunload', this.onBeforeUnload);
+	// window.removeEventListener('unload', this.onUnload);
+}
+
+/**
+ * Keboard
+ */
+
+function addKeyboardEventBindings() {
+	// document.addEventListener('keydown', this.keyDown);
+	// document.addEventListener('keyup', this.keyUp);
+}
+
+function removeKeyboardEventBindings() {
+	// document.removeEventListener('keydown', this.keyDown);
+	// document.removeEventListener('keyup', this.keyUp);
+}
+
+/**
+ * History events
+ */
 
 function addUndoRedoEventBindings() {
 	// historyBus.on('nodeMove', onMoveNode);
@@ -196,683 +542,25 @@ function removeUndoRedoEventBindings() {
 	// historyBus.off('enableNodeToggle', onRevertEnableToggle);
 }
 
+/**
+ * Post message events
+ */
+
 function addPostMessageEventBindings() {
 	window.addEventListener('message', onPostMessageReceived);
+
+	if (window.parent) {
+		window.parent.postMessage(
+			JSON.stringify({ command: 'n8nReady', version: rootStore.versionCli }),
+			'*',
+		);
+	}
 }
 
 function removePostMessageEventBindings() {
 	window.removeEventListener('message', onPostMessageReceived);
 }
 
-// @TODO Maybe move this to the store
-function initializeEditableWorkflow(id: string) {
-	const targetWorkflow = workflowsStore.workflowsById[id];
-
-	workflowsStore.addWorkflow(targetWorkflow);
-	workflowsStore.setWorkflow(targetWorkflow);
-	workflowsStore.setActive(targetWorkflow.active || false);
-	workflowsStore.setWorkflowId(targetWorkflow.id);
-	workflowsStore.setWorkflowName({ newName: targetWorkflow.name, setStateDirty: false });
-	workflowsStore.setWorkflowSettings(targetWorkflow.settings ?? {});
-	workflowsStore.setWorkflowPinData(targetWorkflow.pinData ?? {});
-	workflowsStore.setWorkflowVersionId(targetWorkflow.versionId);
-	workflowsStore.setWorkflowMetadata(targetWorkflow.meta);
-	if (targetWorkflow.usedCredentials) {
-		workflowsStore.setUsedCredentials(targetWorkflow.usedCredentials);
-	}
-
-	const tags = (targetWorkflow.tags ?? []) as ITag[];
-	const tagIds = tags.map((tag) => tag.id);
-	workflowsStore.setWorkflowTagIds(tagIds || []);
-	tagsStore.upsertTags(tags);
-
-	// @TODO Figure out a better way to handle this. Maybe show a message on why the state becomes dirty
-	// if (!this.credentialsUpdated) {
-	// 	this.uiStore.stateIsDirty = false;
-	// }
-
-	void externalHooks.run('workflow.open', {
-		workflowId: workflow.value.id,
-		workflowName: workflow.value.name,
-	});
-
-	// @TODO Figure out a better way to handle this
-	// if (selectedExecution?.workflowId !== workflow.id) {
-	// 	this.executionsStore.activeExecution = null;
-	// 	workflowsStore.currentWorkflowExecutions = [];
-	// } else {
-	// 	this.executionsStore.activeExecution = selectedExecution;
-	// }
-
-	collaborationStore.notifyWorkflowOpened(workflow.value.id);
-}
-
-async function onRunWorkflow() {
-	await runWorkflow({});
-}
-
-function onUpdateNodePosition(id: string, position: CanvasElement['position']) {
-	updateNodePosition(id, position, { trackHistory: true });
-}
-
-function onDeleteNode(id: string) {
-	deleteNode(id, { trackHistory: true });
-}
-
-function onRevertDeleteNode({ node }: { node: INodeUi }) {
-	revertDeleteNode(node);
-}
-
-function onSetNodeActive(id: string) {
-	setNodeActive(id);
-}
-
-/**
- * Map new node connection format to the old one and add it to the store
- *
- * @param connection
- */
-
-function onCreateConnection(connection: Connection) {
-	createConnection(connection);
-}
-
-function onDeleteConnection(connection: Connection) {
-	deleteConnection(connection, { trackHistory: true });
-}
-
-function onRevertDeleteConnection({ connection }: { connection: [IConnection, IConnection] }) {
-	revertDeleteConnection(connection);
-}
-
-async function onAddNodes(
-	{ nodes, connections }: AddedNodesAndConnections,
-	dragAndDrop = false,
-	position?: XYPosition,
-) {
-	let currentPosition = position;
-	for (const { type, name, position: nodePosition, isAutoAdd, openDetail } of nodes) {
-		try {
-			await onNodeCreate(
-				{
-					name,
-					type,
-					position: nodePosition ?? currentPosition,
-				},
-				{
-					dragAndDrop,
-					openNDV: openDetail ?? false,
-					trackHistory: true,
-					isAutoAdd,
-				},
-			);
-		} catch (error) {
-			toast.showError(error, i18n.baseText('error'));
-			continue;
-		}
-
-		const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
-		currentPosition = [
-			lastAddedNode.position[0] + NodeViewUtils.NODE_SIZE * 2 + NodeViewUtils.GRID_SIZE,
-			lastAddedNode.position[1],
-		];
-	}
-
-	const newNodesOffset = editableWorkflow.value.nodes.length - nodes.length;
-	for (const { from, to } of connections) {
-		const fromNode = editableWorkflow.value.nodes[newNodesOffset + from.nodeIndex];
-		const toNode = editableWorkflow.value.nodes[newNodesOffset + to.nodeIndex];
-
-		onCreateConnection({
-			source: fromNode.id,
-			sourceHandle: `outputs/${NodeConnectionType.Main}/${from.outputIndex ?? 0}`,
-			target: toNode.id,
-			targetHandle: `inputs/${NodeConnectionType.Main}/${to.inputIndex ?? 0}`,
-		});
-	}
-
-	const lastAddedNode = editableWorkflow.value.nodes[editableWorkflow.value.nodes.length - 1];
-	const lastNodeInputs = editableWorkflowObject.value.getParentNodesByDepth(lastAddedNode.name, 1);
-
-	// If the last added node has multiple inputs, move them down
-	if (lastNodeInputs.length > 1) {
-		lastNodeInputs.slice(1).forEach((node, index) => {
-			const nodeUi = workflowsStore.getNodeByName(node.name);
-			if (!nodeUi) return;
-
-			updateNodePosition(nodeUi.id, {
-				x: nodeUi.position[0],
-				y: nodeUi.position[1] + 100 * (index + 1),
-			});
-		});
-	}
-}
-
-type AddNodeData = {
-	name?: string;
-	type: string;
-	position?: XYPosition;
-};
-
-type AddNodeOptions = {
-	dragAndDrop?: boolean;
-	openNDV?: boolean;
-	trackHistory?: boolean;
-	isAutoAdd?: boolean;
-};
-
-async function onNodeCreate(node: AddNodeData, _options: AddNodeOptions = {}): Promise<INodeUi> {
-	if (!checkIfEditingIsAllowed()) {
-		throw new Error(i18n.baseText('nodeViewV2.showError.editingNotAllowed'));
-	}
-
-	const newNodeData = await createNodeWithDefaultCredentials(node);
-	if (!newNodeData) {
-		throw new Error(i18n.baseText('nodeViewV2.showError.failedToCreateNode'));
-	}
-
-	/**
-	 * @TODO Check if maximum node type limit reached
-	 */
-
-	newNodeData.name = getUniqueNodeName(newNodeData.name, workflowsStore.canvasNames);
-
-	workflowsStore.addNode(newNodeData);
-
-	// @TODO Figure out why this is needed and if we can do better...
-	// this.matchCredentials(node);
-
-	// @TODO Connect added node to last selected node
-	// const lastSelectedNode = uiStore.getLastSelectedNode;
-	// const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
-	// const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
-	// const lastSelectedConnection = canvasStore.lastSelectedConnection;
-	//
-	// historyStore.startRecordingUndo();
-	//
-	// const newNodeData = await injectNode(
-	// 	nodeTypeName,
-	// 	options,
-	// 	showDetail,
-	// 	trackHistory,
-	// 	isAutoAdd,
-	// );
-	// if (!newNodeData) {
-	// 	return;
-	// }
-	//
-	// const outputIndex = lastSelectedNodeOutputIndex || 0;
-	// const targetEndpoint = lastSelectedNodeEndpointUuid || '';
-	//
-	// // Handle connection of scoped_endpoint types
-	// if (lastSelectedNodeEndpointUuid && !isAutoAdd) {
-	// 	const lastSelectedEndpoint = this.instance.getEndpoint(lastSelectedNodeEndpointUuid);
-	// 	if (
-	// 		lastSelectedEndpoint &&
-	// 		this.checkNodeConnectionAllowed(
-	// 			lastSelectedNode,
-	// 			newNodeData,
-	// 			lastSelectedEndpoint.scope as NodeConnectionType,
-	// 		)
-	// 	) {
-	// 		const connectionType = lastSelectedEndpoint.scope as ConnectionTypes;
-	// 		const newNodeElement = this.instance.getManagedElement(newNodeData.id);
-	// 		const newNodeConnections = this.instance.getEndpoints(newNodeElement);
-	// 		const viableConnection = newNodeConnections.find((conn) => {
-	// 			return (
-	// 				conn.scope === connectionType &&
-	// 				lastSelectedEndpoint.parameters.connection !== conn.parameters.connection
-	// 			);
-	// 		});
-	//
-	// 		this.instance?.connect({
-	// 			uuids: [targetEndpoint, viableConnection?.uuid || ''],
-	// 			detachable: !this.isReadOnlyRoute && !this.readOnlyEnv,
-	// 		});
-	// 		this.historyStore.stopRecordingUndo();
-	// 		return;
-	// 	}
-	// }
-	// If a node is last selected then connect between the active and its child ones
-	// if (lastSelectedNode && !isAutoAdd) {
-	// 	await this.$nextTick();
-	//
-	// 	if (lastSelectedConnection?.__meta) {
-	// 		this.__deleteJSPlumbConnection(lastSelectedConnection, trackHistory);
-	//
-	// 		const targetNodeName = lastSelectedConnection.__meta.targetNodeName;
-	// 		const targetOutputIndex = lastSelectedConnection.__meta.targetOutputIndex;
-	// 		this.connectTwoNodes(
-	// 			newNodeData.name,
-	// 			0,
-	// 			targetNodeName,
-	// 			targetOutputIndex,
-	// 			NodeConnectionType.Main,
-	// 		);
-	// 	}
-	//
-	// 	// Connect active node to the newly created one
-	// 	this.connectTwoNodes(
-	// 		lastSelectedNode.name,
-	// 		outputIndex,
-	// 		newNodeData.name,
-	// 		0,
-	// 		NodeConnectionType.Main,
-	// 	);
-	// }
-	// this.historyStore.stopRecordingUndo();
-
-	return newNodeData;
-}
-
-async function createNodeWithDefaultCredentials(node: Partial<INodeUi>) {
-	const nodeTypeDescription = nodeTypesStore.getNodeType(
-		node.type as string,
-	) as INodeTypeDescription;
-
-	let nodeVersion = nodeTypeDescription.defaultVersion;
-	if (typeof nodeVersion === 'undefined') {
-		nodeVersion = Array.isArray(nodeTypeDescription.version)
-			? nodeTypeDescription.version.slice(-1)[0]
-			: nodeTypeDescription.version;
-	}
-
-	const newNodeData: INodeUi = {
-		id: uuid(),
-		name: node.name ?? (nodeTypeDescription.defaults.name as string),
-		type: nodeTypeDescription.name,
-		typeVersion: nodeVersion,
-		position: node.position ?? [0, 0],
-		parameters: {},
-	};
-
-	/**
-	 * @TODO Implement this
-	 */
-
-	// // Load the default parameter values because only values which differ
-	// // from the defaults get saved
-	// if (nodeType !== null) {
-	// 	let nodeParameters = null;
-	// 	try {
-	// 		nodeParameters = NodeHelpers.getNodeParameters(
-	// 			nodeType.properties,
-	// 			node.parameters,
-	// 			true,
-	// 			false,
-	// 			node,
-	// 		);
-	// 	} catch (e) {
-	// 		console.error(
-	// 			i18n.baseText('nodeView.thereWasAProblemLoadingTheNodeParametersOfNode') +
-	// 			`: "${node.name}"`,
-	// 		);
-	// 		console.error(e);
-	// 	}
-	// 	node.parameters = nodeParameters !== null ? nodeParameters : {};
-	//
-	// 	// if it's a webhook and the path is empty set the UUID as the default path
-	// 	if (
-	// 		[WEBHOOK_NODE_TYPE, FORM_TRIGGER_NODE_TYPE].includes(node.type) &&
-	// 		node.parameters.path === ''
-	// 	) {
-	// 		node.parameters.path = node.webhookId as string;
-	// 	}
-	// }
-	// const credentialPerType = nodeTypeData.credentials
-	// 	?.map((type) => credentialsStore.getUsableCredentialByType(type.name))
-	// 	.flat();
-	//
-	// if (credentialPerType && credentialPerType.length === 1) {
-	// 	const defaultCredential = credentialPerType[0];
-	//
-	// 	const selectedCredentials = credentialsStore.getCredentialById(defaultCredential.id);
-	// 	const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
-	// 	const credentials = {
-	// 		[defaultCredential.type]: selected,
-	// 	};
-	//
-	// 	await loadNodesProperties(
-	// 		[newNodeData].map((node) => ({ name: node.type, version: node.typeVersion })),
-	// 	);
-	//
-	// 	const nodeType = nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
-	// 	const nodeParameters = NodeHelpers.getNodeParameters(
-	// 		nodeType?.properties ?? [],
-	// 		{},
-	// 		true,
-	// 		false,
-	// 		newNodeData,
-	// 	);
-	//
-	// 	if (nodeTypeData.credentials) {
-	// 		const authentication = nodeTypeData.credentials.find(
-	// 			(type) => type.name === defaultCredential.type,
-	// 		);
-	// 		if (authentication?.displayOptions?.hide) {
-	// 			return newNodeData;
-	// 		}
-	//
-	// 		const authDisplayOptions = authentication?.displayOptions?.show;
-	// 		if (!authDisplayOptions) {
-	// 			newNodeData.credentials = credentials;
-	// 			return newNodeData;
-	// 		}
-	//
-	// 		if (Object.keys(authDisplayOptions).length === 1 && authDisplayOptions.authentication) {
-	// 			// ignore complex case when there's multiple dependencies
-	// 			newNodeData.credentials = credentials;
-	//
-	// 			let parameters: { [key: string]: string } = {};
-	// 			for (const displayOption of Object.keys(authDisplayOptions)) {
-	// 				if (nodeParameters && !nodeParameters[displayOption]) {
-	// 					parameters = {};
-	// 					newNodeData.credentials = undefined;
-	// 					break;
-	// 				}
-	// 				const optionValue = authDisplayOptions[displayOption]?.[0];
-	// 				if (optionValue && typeof optionValue === 'string') {
-	// 					parameters[displayOption] = optionValue;
-	// 				}
-	// 				newNodeData.parameters = {
-	// 					...newNodeData.parameters,
-	// 					...parameters,
-	// 				};
-	// 			}
-	// 		}
-	// 	}
-	// }
-
-	return newNodeData;
-}
-
-/**
- * @TODO Implement if needed
- */
-// async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
-// 	const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
-//
-// const nodesToBeFetched: INodeTypeNameVersion[] = [];
-// allNodes.forEach((node) => {
-// 	const nodeVersions = Array.isArray(node.version) ? node.version : [node.version];
-// 	if (
-// 		!!nodeInfos.find((n) => n.name === node.name && nodeVersions.includes(n.version)) &&
-// 		!node.hasOwnProperty('properties')
-// 	) {
-// 		nodesToBeFetched.push({
-// 			name: node.name,
-// 			version: Array.isArray(node.version) ? node.version.slice(-1)[0] : node.version,
-// 		});
-// 	}
-// });
-//
-// if (nodesToBeFetched.length > 0) {
-// 	// Only call API if node information is actually missing
-// 	this.canvasStore.startLoading();
-// 	await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
-// 	this.canvasStore.stopLoading();
-// }
-// }
-
-/**
- * @TODO Probably not needed and can be merged into addNode
- */
-async function injectNode(
-	_nodeTypeName: string,
-	_options: AddNodeOptions = {},
-	_showDetail = true,
-	_trackHistory = false,
-	_isAutoAdd = false,
-) {
-	// const nodeTypeData: INodeTypeDescription | null =
-	// 	this.nodeTypesStore.getNodeType(nodeTypeName);
-	//
-	// if (nodeTypeData === null) {
-	// 	this.showMessage({
-	// 		title: i18n.baseText('nodeView.showMessage.addNodeButton.title'),
-	// 		message: i18n.baseText('nodeView.showMessage.addNodeButton.message', {
-	// 			interpolate: { nodeTypeName },
-	// 		}),
-	// 		type: 'error',
-	// 	});
-	// 	return;
-	// }
-	//
-	// if (
-	// 	nodeTypeData.maxNodes !== undefined &&
-	// 	this.workflowHelpers.getNodeTypeCount(nodeTypeName) >= nodeTypeData.maxNodes
-	// ) {
-	// 	this.showMaxNodeTypeError(nodeTypeData);
-	// 	return;
-	// }
-	//
-	// const newNodeData = await this.getNewNodeWithDefaultCredential(nodeTypeData, {
-	// 	name: options.name,
-	// });
-	//
-	// // when pulling new connection from node or injecting into a connection
-	// const lastSelectedNode = this.lastSelectedNode;
-	//
-	// if (options.position) {
-	// 	newNodeData.position = NodeViewUtils.getNewNodePosition(
-	// 		this.canvasStore.getNodesWithPlaceholderNode(),
-	// 		options.position,
-	// 	);
-	// } else if (lastSelectedNode) {
-	// 	const lastSelectedConnection = this.canvasStore.lastSelectedConnection;
-	// 	if (lastSelectedConnection) {
-	// 		// set when injecting into a connection
-	// 		const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
-	// 		if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
-	// 			this.pushDownstreamNodes(
-	// 				lastSelectedNode.name,
-	// 				NodeViewUtils.PUSH_NODES_OFFSET,
-	// 				trackHistory,
-	// 			);
-	// 		}
-	// 	}
-	//
-	// 	// set when pulling connections
-	// 	if (this.canvasStore.newNodeInsertPosition) {
-	// 		newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, [
-	// 			this.canvasStore.newNodeInsertPosition[0] + NodeViewUtils.GRID_SIZE,
-	// 			this.canvasStore.newNodeInsertPosition[1] - NodeViewUtils.NODE_SIZE / 2,
-	// 		]);
-	// 		this.canvasStore.newNodeInsertPosition = null;
-	// 	} else {
-	// 		let yOffset = 0;
-	// 		const workflow = this.workflowHelpers.getCurrentWorkflow();
-	//
-	// 		if (lastSelectedConnection) {
-	// 			const sourceNodeType = this.nodeTypesStore.getNodeType(
-	// 				lastSelectedNode.type,
-	// 				lastSelectedNode.typeVersion,
-	// 			);
-	//
-	// 			if (sourceNodeType) {
-	// 				const offsets = [
-	// 					[-100, 100],
-	// 					[-140, 0, 140],
-	// 					[-240, -100, 100, 240],
-	// 				];
-	//
-	// 				const sourceNodeOutputs = NodeHelpers.getNodeOutputs(
-	// 					workflow,
-	// 					lastSelectedNode,
-	// 					sourceNodeType,
-	// 				);
-	// 				const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
-	//
-	// 				const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
-	// 					(output) => output === NodeConnectionType.Main,
-	// 				);
-	//
-	// 				if (sourceNodeOutputMainOutputs.length > 1) {
-	// 					const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
-	// 					const sourceOutputIndex = lastSelectedConnection.__meta
-	// 						? lastSelectedConnection.__meta.sourceOutputIndex
-	// 						: 0;
-	// 					yOffset = offset[sourceOutputIndex];
-	// 				}
-	// 			}
-	// 		}
-	//
-	// 		let outputs: Array<ConnectionTypes | INodeOutputConfiguration> = [];
-	// 		try {
-	// 			// It fails when the outputs are an expression. As those nodes have
-	// 			// normally no outputs by default and the only reason we need the
-	// 			// outputs here is to calculate the position, it is fine to assume
-	// 			// that they have no outputs and are so treated as a regular node
-	// 			// with only "main" outputs.
-	// 			outputs = NodeHelpers.getNodeOutputs(workflow, newNodeData, nodeTypeData);
-	// 		} catch (e) {}
-	// 		const outputTypes = NodeHelpers.getConnectionTypes(outputs);
-	// 		const lastSelectedNodeType = this.nodeTypesStore.getNodeType(
-	// 			lastSelectedNode.type,
-	// 			lastSelectedNode.typeVersion,
-	// 		);
-	//
-	// 		// If node has only scoped outputs, position it below the last selected node
-	// 		if (
-	// 			outputTypes.length > 0 &&
-	// 			outputTypes.every((outputName) => outputName !== NodeConnectionType.Main)
-	// 		) {
-	// 			const lastSelectedNodeWorkflow = workflow.getNode(lastSelectedNode.name);
-	// 			const lastSelectedInputs = NodeHelpers.getNodeInputs(
-	// 				workflow,
-	// 				lastSelectedNodeWorkflow,
-	// 				lastSelectedNodeType,
-	// 			);
-	// 			const lastSelectedInputTypes = NodeHelpers.getConnectionTypes(lastSelectedInputs);
-	//
-	// 			const scopedConnectionIndex = (lastSelectedInputTypes || [])
-	// 				.filter((input) => input !== NodeConnectionType.Main)
-	// 				.findIndex((inputType) => outputs[0] === inputType);
-	//
-	// 			newNodeData.position = NodeViewUtils.getNewNodePosition(
-	// 				this.nodes,
-	// 				[
-	// 					lastSelectedNode.position[0] +
-	// 					(NodeViewUtils.NODE_SIZE /
-	// 						(Math.max(lastSelectedNodeType?.inputs?.length ?? 1), 1)) *
-	// 					scopedConnectionIndex,
-	// 					lastSelectedNode.position[1] + NodeViewUtils.PUSH_NODES_OFFSET,
-	// 				],
-	// 				[100, 0],
-	// 			);
-	// 		} else {
-	// 			// Has only main outputs or no outputs at all
-	// 			const inputs = NodeHelpers.getNodeInputs(
-	// 				workflow,
-	// 				lastSelectedNode,
-	// 				lastSelectedNodeType,
-	// 			);
-	// 			const inputsTypes = NodeHelpers.getConnectionTypes(inputs);
-	//
-	// 			let pushOffset = NodeViewUtils.PUSH_NODES_OFFSET;
-	// 			if (!!inputsTypes.find((input) => input !== NodeConnectionType.Main)) {
-	// 				// If the node has scoped inputs, push it down a bit more
-	// 				pushOffset += 150;
-	// 			}
-	//
-	// 			// If a node is active then add the new node directly after the current one
-	// 			newNodeData.position = NodeViewUtils.getNewNodePosition(
-	// 				this.nodes,
-	// 				[lastSelectedNode.position[0] + pushOffset, lastSelectedNode.position[1] + yOffset],
-	// 				[100, 0],
-	// 			);
-	// 		}
-	// 	}
-	// } else {
-	// 	// If added node is a trigger and it's the first one added to the canvas
-	// 	// we place it at canvasAddButtonPosition to replace the canvas add button
-	// 	const position =
-	// 		this.nodeTypesStore.isTriggerNode(nodeTypeName) && !this.containsTrigger
-	// 			? this.canvasStore.canvasAddButtonPosition
-	// 			: // If no node is active find a free spot
-	// 			(this.lastClickPosition as XYPosition);
-	//
-	// 	newNodeData.position = NodeViewUtils.getNewNodePosition(this.nodes, position);
-	// }
-	//
-	// const localizedName = this.locale.localizeNodeName(newNodeData.name, newNodeData.type);
-	//
-	// newNodeData.name = this.uniqueNodeName(localizedName);
-	//
-	// if (nodeTypeData.webhooks?.length) {
-	// 	newNodeData.webhookId = uuid();
-	// }
-	//
-	// await this.addNodes([newNodeData], undefined, trackHistory);
-	// this.workflowsStore.setNodePristine(newNodeData.name, true);
-	//
-	// this.uiStore.stateIsDirty = true;
-	//
-	// if (nodeTypeName === STICKY_NODE_TYPE) {
-	// 	this.$telemetry.trackNodesPanel('nodeView.addSticky', {
-	// 		workflow_id: this.workflowsStore.workflowId,
-	// 	});
-	// } else {
-	// 	void this.externalHooks.run('nodeView.addNodeButton', { nodeTypeName });
-	// 	useSegment().trackAddedTrigger(nodeTypeName);
-	// 	const trackProperties: ITelemetryTrackProperties = {
-	// 		node_type: nodeTypeName,
-	// 		node_version: newNodeData.typeVersion,
-	// 		is_auto_add: isAutoAdd,
-	// 		workflow_id: this.workflowsStore.workflowId,
-	// 		drag_and_drop: options.dragAndDrop,
-	// 	};
-	//
-	// 	if (lastSelectedNode) {
-	// 		trackProperties.input_node_type = lastSelectedNode.type;
-	// 	}
-	//
-	// 	this.$telemetry.trackNodesPanel('nodeView.addNodeButton', trackProperties);
-	// }
-	//
-	// // Automatically deselect all nodes and select the current one and also active
-	// // current node. But only if it's added manually by the user (not by undo/redo mechanism)
-	// if (trackHistory) {
-	// 	this.deselectAllNodes();
-	// 	setTimeout(() => {
-	// 		this.nodeSelectedByName(
-	// 			newNodeData.name,
-	// 			showDetail && nodeTypeName !== STICKY_NODE_TYPE,
-	// 		);
-	// 	});
-	// }
-	//
-	// return newNodeData;
-}
-
-function checkIfEditingIsAllowed(): boolean {
-	if (readOnlyNotification.value?.visible) {
-		return false;
-	}
-
-	if (isReadOnlyRoute.value || isReadOnlyEnvironment.value) {
-		const messageContext = isReadOnlyRoute.value ? 'executions' : 'workflows';
-		readOnlyNotification.value = toast.showMessage({
-			title: i18n.baseText(
-				isReadOnlyEnvironment.value
-					? `readOnlyEnv.showMessage.${messageContext}.title`
-					: 'readOnly.showMessage.executions.title',
-			),
-			message: i18n.baseText(
-				isReadOnlyEnvironment.value
-					? `readOnlyEnv.showMessage.${messageContext}.message`
-					: 'readOnly.showMessage.executions.message',
-			),
-			type: 'info',
-			dangerouslyUseHTMLString: true,
-		}) as unknown as { visible: boolean };
-
-		return false;
-	}
-
-	return true;
-}
-
 async function onPostMessageReceived(message: MessageEvent) {
 	if (!message || typeof message.data !== 'string' || !message.data?.includes?.('"command"')) {
 		return;
@@ -895,11 +583,7 @@ async function onPostMessageReceived(message: MessageEvent) {
 						'*',
 					);
 				}
-				toast.showMessage({
-					title: i18n.baseText('openWorkflow.workflowImportError'),
-					message: (e as Error).message,
-					type: 'error',
-				});
+				toast.showError(e, i18n.baseText('openWorkflow.workflowImportError'));
 			}
 		} else if (json && json.command === 'openExecution') {
 			try {
@@ -935,43 +619,67 @@ async function onPostMessageReceived(message: MessageEvent) {
 	} catch (e) {}
 }
 
-async function onSwitchSelectedNode(nodeName: string) {
-	setNodeActiveByName(nodeName);
-}
+/**
+ * Permission checks
+ */
 
-async function onOpenConnectionNodeCreator(node: string, connectionType: NodeConnectionType) {
-	nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType });
-}
-
-function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
-	nodeCreatorStore.openNodeCreator(options);
-}
-
-async function openExecution(_executionId: string) {
-	// @TODO
-}
-
-async function importWorkflowExact(_workflow: IWorkflowDataUpdate) {
-	// @TODO
-}
-
-async function onRevertRenameNode({
-	currentName,
-	newName,
-}: {
-	currentName: string;
-	newName: string;
-}) {
-	await revertRenameNode(currentName, newName);
-}
-
-function onUpdateNodeValue(parameterData: IUpdateInformation) {
-	if (parameterData.name === 'name' && parameterData.oldValue) {
-		// The name changed so we have to take care that
-		// the connections get changed.
-		void renameNode(parameterData.oldValue as string, parameterData.value as string);
+function checkIfEditingIsAllowed(): boolean {
+	if (readOnlyNotification.value?.visible) {
+		return false;
 	}
+
+	if (isReadOnlyRoute.value || isReadOnlyEnvironment.value) {
+		const messageContext = isReadOnlyRoute.value ? 'executions' : 'workflows';
+		readOnlyNotification.value = toast.showMessage({
+			title: i18n.baseText(
+				isReadOnlyEnvironment.value
+					? `readOnlyEnv.showMessage.${messageContext}.title`
+					: 'readOnly.showMessage.executions.title',
+			),
+			message: i18n.baseText(
+				isReadOnlyEnvironment.value
+					? `readOnlyEnv.showMessage.${messageContext}.message`
+					: 'readOnly.showMessage.executions.message',
+			),
+			type: 'info',
+			dangerouslyUseHTMLString: true,
+		}) as unknown as { visible: boolean };
+
+		return false;
+	}
+
+	return true;
 }
+
+/**
+ * Mouse events
+ */
+
+function onClickPane(position: CanvasElement['position']) {
+	lastClickPosition.value = [position.x, position.y];
+	canvasStore.newNodeInsertPosition = [position.x, position.y];
+}
+
+/**
+ * Lifecycle
+ */
+
+onMounted(async () => {
+	await initializeData();
+	await initializeView();
+
+	addUndoRedoEventBindings();
+	addPostMessageEventBindings();
+	addKeyboardEventBindings();
+	addUnloadEventBindings();
+});
+
+onBeforeUnmount(() => {
+	removeUnloadEventBindings();
+	removeKeyboardEventBindings();
+	removePostMessageEventBindings();
+	removeUndoRedoEventBindings();
+});
 </script>
 
 <template>
@@ -981,9 +689,11 @@ function onUpdateNodeValue(parameterData: IUpdateInformation) {
 		:workflow-object="editableWorkflowObject"
 		@update:node:position="onUpdateNodePosition"
 		@update:node:active="onSetNodeActive"
+		@update:node:selected="onSetNodeSelected"
 		@delete:node="onDeleteNode"
 		@create:connection="onCreateConnection"
 		@delete:connection="onDeleteConnection"
+		@click:pane="onClickPane"
 	>
 		<div :class="$style.executionButtons">
 			<CanvasExecuteWorkflowButton @click="onRunWorkflow" />
@@ -994,7 +704,7 @@ function onUpdateNodeValue(parameterData: IUpdateInformation) {
 				:create-node-active="uiStore.isCreateNodeActive"
 				:node-view-scale="1"
 				@toggle-node-creator="onToggleNodeCreator"
-				@add-nodes="onAddNodes"
+				@add-nodes="onAddNodesAndConnections"
 			/>
 		</Suspense>
 		<Suspense>
@@ -1002,8 +712,8 @@ function onUpdateNodeValue(parameterData: IUpdateInformation) {
 				:read-only="isReadOnlyRoute || isReadOnlyEnvironment"
 				:is-production-execution-preview="isProductionExecutionPreview"
 				:renaming="false"
-				@value-changed="onUpdateNodeValue"
-				@switch-selected-node="onSwitchSelectedNode"
+				@value-changed="onRenameNode"
+				@switch-selected-node="onSwitchActiveNode"
 				@open-connection-node-creator="onOpenConnectionNodeCreator"
 			/>
 			<!--
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index d4ac4dbfc..27b7ad0ec 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -839,8 +839,10 @@ export default defineComponent({
 	async mounted() {
 		// To be refactored (unref) when migrating to composition API
 		this.onMouseMoveEnd = this.mouseUp;
+		this.initializeCanvasMouseSelect();
 
 		this.resetWorkspace();
+
 		if (!this.nodeViewRef) {
 			this.showError(
 				new Error('NodeView reference not found'),