diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts index e6454f73f8..ba4d2fbcf9 100644 --- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts +++ b/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); + } + }, }, }); diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 88b58d97ec..9c58981e64 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/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;