From db66ad8f544dfad5381e37eb1e67e314d40f79b4 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Fri, 15 Oct 2021 17:42:12 +0200 Subject: [PATCH] push nodes out 200 on insert --- .../editor-ui/src/components/NodeSettings.vue | 4 +-- .../src/components/mixins/nodeBase.ts | 8 +++-- packages/editor-ui/src/store.ts | 12 +++++-- packages/editor-ui/src/views/NodeView.vue | 34 +++++++++++++++---- 4 files changed, 43 insertions(+), 15 deletions(-) diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue index 3fabe545bc..84805da451 100644 --- a/packages/editor-ui/src/components/NodeSettings.vue +++ b/packages/editor-ui/src/components/NodeSettings.vue @@ -316,7 +316,7 @@ export default mixins( // Update the values on the node this.$store.commit('updateNodeProperties', updateInformation); - const node = this.$store.getters.nodeByName(updateInformation.name); + const node = this.$store.getters.getNodeByName(updateInformation.name); // Update the issues this.updateNodeCredentialIssues(node); @@ -336,7 +336,7 @@ export default mixins( // Save the node name before we commit the change because // we need the old name to rename the node properly const nodeNameBefore = parameterData.node || this.node.name; - const node = this.$store.getters.nodeByName(nodeNameBefore); + const node = this.$store.getters.getNodeByName(nodeNameBefore); if (parameterData.name === 'name') { // Name of node changed so we have to set also the new node name as active diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts index f9716a55df..5561e0b0d3 100644 --- a/packages/editor-ui/src/components/mixins/nodeBase.ts +++ b/packages/editor-ui/src/components/mixins/nodeBase.ts @@ -18,7 +18,7 @@ export const nodeBase = mixins( }, computed: { data (): INodeUi { - return this.$store.getters.nodeByName(this.name); + return this.$store.getters.getNodeByName(this.name); }, hasIssues (): boolean { if (this.data.issues !== undefined && Object.keys(this.data.issues).length) { @@ -33,11 +33,13 @@ export const nodeBase = mixins( return this.$store.getters.getNodeIndex(this.data.name).toString(); }, nodePosition (): object { + const node = this.$store.getters.nodesByName[this.name]; + console.log(node); const returnStyles: { [key: string]: string; } = { - left: this.data.position[0] + 'px', - top: this.data.position[1] + 'px', + left: node.position[0] + 'px', + top: node.position[1] + 'px', }; return returnStyles; diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts index 75e0c4b612..adf0ef8717 100644 --- a/packages/editor-ui/src/store.ts +++ b/packages/editor-ui/src/store.ts @@ -763,7 +763,13 @@ export const store = new Vuex.Store({ allNodes: (state): INodeUi[] => { return state.workflow.nodes; }, - nodeByName: (state) => (nodeName: string): INodeUi | null => { + nodesByName: (state: IRootState): {[name: string]: INodeUi} => { + return state.workflow.nodes.reduce((accu: {[name: string]: INodeUi}, node) => { + accu[node.name] = node; + return accu; + }, {}); + }, + getNodeByName: (state) => (nodeName: string): INodeUi | null => { const foundNode = state.workflow.nodes.find(node => { return node.name === nodeName; }); @@ -796,10 +802,10 @@ export const store = new Vuex.Store({ return foundType; }, activeNode: (state, getters): INodeUi | null => { - return getters.nodeByName(state.activeNode); + return getters.getNodeByName(state.activeNode); }, lastSelectedNode: (state, getters): INodeUi | null => { - return getters.nodeByName(state.lastSelectedNode); + return getters.getNodeByName(state.lastSelectedNode); }, lastSelectedNodeOutputIndex: (state, getters): number | null => { return state.lastSelectedNodeOutputIndex; diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 36127dc13e..25ee44d30e 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -745,7 +745,7 @@ export default mixins( // Ignore current node continue; } - siblingNode = this.$store.getters.nodeByName(ouputConnection.node); + siblingNode = this.$store.getters.getNodeByName(ouputConnection.node); if (e.key === 'ArrowUp') { // Get the next node on the left @@ -829,6 +829,25 @@ export default mixins( this.nodeSelectedByName(lastSelectedNode.name); }, + pushDownstreamNodes (margin: number) { + const lastSelectedNode = this.lastSelectedNode; + if (lastSelectedNode === null) { + return; + } + const workflow = this.getWorkflow(); + for (const nodeName of workflow.getChildNodes(lastSelectedNode.name)) { + const node = this.$store.getters.nodesByName[nodeName] as INodeUi; + const updateInformation = { + name: nodeName, + properties: { + position: [node.position[0] + margin, node.position[1]], + }, + }; + + this.$store.commit('updateNodeProperties', updateInformation); + } + }, + cutSelectedNodes () { this.copySelectedNodes(); this.deleteSelectedNodes(); @@ -1074,7 +1093,7 @@ export default mixins( }, nodeDeselectedByName (nodeName: string) { - const node = this.$store.getters.nodeByName(nodeName); + const node = this.$store.getters.getNodeByName(nodeName); if (node) { this.nodeDeselected(node); } @@ -1085,7 +1104,7 @@ export default mixins( this.deselectAllNodes(); } - const node = this.$store.getters.nodeByName(nodeName); + const node = this.$store.getters.getNodeByName(nodeName); if (node) { this.nodeSelected(node); } @@ -1180,6 +1199,7 @@ export default mixins( const lastSelectedNode = this.lastSelectedNode; const lastSelectedNodeOutputIndex = this.$store.getters.lastSelectedNodeOutputIndex; if (lastSelectedNode) { + this.pushDownstreamNodes(200); // If a node is active then add the new node directly after the current one // newNodeData.position = [activeNode.position[0], activeNode.position[1] + 60]; newNodeData.position = getNewNodePosition( @@ -1319,8 +1339,8 @@ export default mixins( const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex); const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex); - const sourceNode = this.$store.getters.nodeByName(sourceNodeName); - const targetNode = this.$store.getters.nodeByName(targetNodeName); + const sourceNode = this.$store.getters.getNodeByName(sourceNodeName); + const targetNode = this.$store.getters.getNodeByName(targetNodeName); // @ts-ignore info.connection.removeOverlay('drop-add-node'); @@ -1652,7 +1672,7 @@ export default mixins( return; } - const node = this.$store.getters.nodeByName(nodeName); + const node = this.$store.getters.getNodeByName(nodeName); const nodeTypeData: INodeTypeDescription = this.$store.getters.nodeType(node.type); if (nodeTypeData.maxNodes !== undefined && this.getNodeTypeCount(node.type) >= nodeTypeData.maxNodes) { @@ -1710,7 +1730,7 @@ export default mixins( return; } - const node = this.$store.getters.nodeByName(nodeName); + const node = this.$store.getters.getNodeByName(nodeName); // "requiredNodeTypes" are also defined in cli/commands/run.ts const requiredNodeTypes = [ 'n8n-nodes-base.start' ];