⚡ Automatically adjust position of pasted nodes

packages/editor-ui/src/components/mixins/workflowHelpers.ts

@@ -19,6 +19,8 @@ import {
 	INodeTypesMaxCount,
 	INodeUi,
 	IWorkflowData,
+	IWorkflowDataUpdate,
+	XYPositon,
 } from '../../Interface';
 
 import { restApi } from '@/components/mixins/restApi';
@@ -438,5 +440,36 @@ export const workflowHelpers = mixins(
 					});
 				}
 			},
+
+			// Updates the position of all the nodes that the top-left node
+			// is at the given position
+			updateNodePositions (workflowData: IWorkflowData | IWorkflowDataUpdate, position: XYPositon): void {
+				if (workflowData.nodes === undefined) {
+					return;
+				}
+
+				// Find most top-left node
+				const minPosition = [99999999, 99999999];
+				for (const node of workflowData.nodes) {
+					if (node.position[1] < minPosition[1]) {
+						minPosition[0] = node.position[0];
+						minPosition[1] = node.position[1];
+					} else if (node.position[1] === minPosition[1]) {
+						if (node.position[0] < minPosition[0]) {
+							minPosition[0] = node.position[0];
+							minPosition[1] = node.position[1];
+						}
+					}
+				}
+
+				// Update the position on all nodes so that the
+				// most top-left one is at given position
+				const offsetPosition = [position[0] - minPosition[0], position[1] - minPosition[1]];
+				for (const node of workflowData.nodes) {
+					node.position[0] += offsetPosition[0];
+					node.position[1] += offsetPosition[1];
+					console.log(node.position);
+				}
+			},
 		},
 	});

packages/editor-ui/src/views/NodeView.vue

@@ -704,10 +704,17 @@ export default mixins(
 				}
 
 				try {
-					const data = await this.addNodesToWorkflow(workflowData);
 					// By default we automatically deselect all the currently
 					// selected nodes and select the new ones
 					this.deselectAllNodes();
+
+					// Fix the node position as it could be totally offscreen
+					// and the pasted nodes would so not be directly visible to
+					// the user
+					this.updateNodePositions(workflowData, this.getNewNodePosition());
+
+					const data = await this.addNodesToWorkflow(workflowData);
+
 					setTimeout(() => {
 						data.nodes!.forEach((node: INodeUi) => {
 							this.nodeSelectedByName(node.name);
@@ -1515,8 +1522,6 @@ export default mixins(
 
 					oldName = node.name;
 					node.name = this.getUniqueNodeName(node.name, newNodeNames);
-					node.position[0] += 200;
-					node.position[1] += 50;
 
 					newNodeNames.push(node.name);
 					nodeNameTable[oldName] = node.name;