fix(editor): Stop connection to last selected node when pasting on ne…

…w canvas (no-changelog) (#11042)
n8n-io · Oct 3, 2024 · f9480e9 · f9480e9
1 parent fc26c44
commit f9480e9
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 187 deletions.
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -40,9 +40,9 @@
     "@n8n/permissions": "workspace:*",
     "@sentry/vue": "^8.31.0",
     "@vue-flow/background": "^1.3.0",
-    "@vue-flow/controls": "^1.1.1",
-    "@vue-flow/core": "^1.33.5",
-    "@vue-flow/minimap": "^1.4.0",
+    "@vue-flow/controls": "^1.1.2",
+    "@vue-flow/core": "^1.41.2",
+    "@vue-flow/minimap": "^1.5.0",
     "@vue-flow/node-resizer": "^1.4.0",
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",

diff --git a/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts b/packages/editor-ui/src/composables/__tests__/useCanvasOperations.spec.ts
@@ -279,7 +279,7 @@ describe('useCanvasOperations', () => {
 			const position = resolveNodePosition({ ...node, position: undefined }, nodeTypeDescription);
 
 			expect(position).toEqual([200, 160]);
-			expect(uiStore.lastCancelledConnectionPosition).toBeNull();
+			expect(uiStore.lastCancelledConnectionPosition).toBeUndefined();
 		});
 
 		it('should place the node to the right of the last interacted with node', () => {

diff --git a/packages/editor-ui/src/composables/useCanvasOperations.ts b/packages/editor-ui/src/composables/useCanvasOperations.ts
@@ -307,7 +307,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 		}
 
 		if (uiStore.lastInteractedWithNodeId === id) {
-			uiStore.lastInteractedWithNodeId = null;
+			uiStore.lastInteractedWithNodeId = undefined;
 		}
 
 		connectAdjacentNodes(id, { trackHistory });
@@ -387,7 +387,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 
 	function setNodeSelected(id?: string) {
 		if (!id) {
-			uiStore.lastInteractedWithNodeId = null;
+			uiStore.lastInteractedWithNodeId = undefined;
 			uiStore.lastSelectedNode = '';
 			return;
 		}
@@ -917,7 +917,7 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 
 				position = [newNodeInsertPosition[0] + xOffset, newNodeInsertPosition[1] + yOffset];
 
-				uiStore.lastCancelledConnectionPosition = null;
+				uiStore.lastCancelledConnectionPosition = undefined;
 			} else if (lastInteractedWithNodeTypeDescription) {
 				// When
 				// - clicking the plus button of a node handle
@@ -1617,6 +1617,8 @@ export function useCanvasOperations({ router }: { router: ReturnType<typeof useR
 		source: string,
 		importTags = true,
 	): Promise<IWorkflowDataUpdate> {
+		uiStore.resetLastInteractedWith();
+
 		// If it is JSON check if it looks on the first look like data we can use
 		if (!workflowData.hasOwnProperty('nodes') || !workflowData.hasOwnProperty('connections')) {
 			return {};

diff --git a/packages/editor-ui/src/stores/ui.store.ts b/packages/editor-ui/src/stores/ui.store.ts
@@ -195,10 +195,10 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	const appGridWidth = ref<number>(0);
 
 	// Last interacted with - Canvas v2 specific
-	const lastInteractedWithNodeConnection = ref<Connection | null>(null);
+	const lastInteractedWithNodeConnection = ref<Connection | undefined>();
 	const lastInteractedWithNodeHandle = ref<string | null>(null);
-	const lastInteractedWithNodeId = ref<string | null>(null);
-	const lastCancelledConnectionPosition = ref<XYPosition | null>(null);
+	const lastInteractedWithNodeId = ref<string | undefined>();
+	const lastCancelledConnectionPosition = ref<XYPosition | undefined>();
 
 	const settingsStore = useSettingsStore();
 	const workflowsStore = useWorkflowsStore();
@@ -620,10 +620,10 @@ export const useUIStore = defineStore(STORES.UI, () => {
 	};
 
 	function resetLastInteractedWith() {
-		lastInteractedWithNodeConnection.value = null;
+		lastInteractedWithNodeConnection.value = undefined;
 		lastInteractedWithNodeHandle.value = null;
-		lastInteractedWithNodeId.value = null;
-		lastCancelledConnectionPosition.value = null;
+		lastInteractedWithNodeId.value = undefined;
+		lastCancelledConnectionPosition.value = undefined;
 	}
 
 	return {

diff --git a/packages/editor-ui/src/types/canvas.ts b/packages/editor-ui/src/types/canvas.ts
@@ -5,7 +5,7 @@ import type {
 	IConnection,
 	NodeConnectionType,
 } from 'n8n-workflow';
-import type { DefaultEdge, Node, NodeProps, Position } from '@vue-flow/core';
+import type { DefaultEdge, Node, NodeProps, Position, OnConnectStartParams } from '@vue-flow/core';
 import type { IExecutionResponse, INodeUi } from '@/Interface';
 import type { ComputedRef, Ref } from 'vue';
 import type { PartialBy } from '@/utils/typeHelpers';
@@ -173,7 +173,9 @@ export interface CanvasNodeHandleInjectionData {
 	runData: Ref<ExecutionOutputMapData | undefined>;
 }
 
-export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };
+export type ConnectStartEvent = {
+	event?: MouseEvent | undefined;
+} & OnConnectStartParams;
 
 export type CanvasNodeMoveEvent = { id: string; position: CanvasNode['position'] };
 

diff --git a/packages/editor-ui/src/views/NodeView.v2.vue b/packages/editor-ui/src/views/NodeView.v2.vue
@@ -585,7 +585,7 @@ async function onClipboardPaste(plainTextData: string): Promise<void> {
 
 		workflowData = await fetchWorkflowDataFromUrl(plainTextData);
 	} else {
-		// Pasted data is is possible workflow data
+		// Pasted data is possible workflow data
 		workflowData = jsonParse<IWorkflowDataUpdate | null>(plainTextData, { fallbackValue: null });
 	}
 
@@ -773,6 +773,8 @@ function onCreateConnectionCancelled(
 	uiStore.lastCancelledConnectionPosition = [position.x, position.y];
 
 	setTimeout(() => {
+		if (!event.nodeId) return;
+
 		nodeCreatorStore.openNodeCreatorForConnectingNode({
 			connection: {
 				source: event.nodeId,