push nodes out 200 on insert

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
 

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',
+				left: node.position[0] + 'px',
-				top: this.data.position[1] + 'px',
+				top: node.position[1] + 'px',
 			};
 
 			return returnStyles;

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;

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 sourceNode = this.$store.getters.getNodeByName(sourceNodeName);
-					const targetNode = this.$store.getters.nodeByName(targetNodeName);
+					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' ];