🐛 Fix that drop connection and addNodeButton did connect wrong

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

@@ -173,6 +173,7 @@ export const mouseSelect = mixins(nodeIndex).extend({
 			this.instance.clearDragSelection();
 			this.$store.commit('resetSelectedNodes');
 			this.$store.commit('setLastSelectedNode', null);
+			this.$store.commit('setLastSelectedNodeOutputIndex', null);
 			this.$store.commit('setActiveNode', null);
 		},
 	},

packages/editor-ui/src/store.ts

@@ -56,6 +56,7 @@ export const store = new Vuex.Store({
 		versionCli: '0.0.0',
 		workflowExecutionData: null as IExecutionResponse | null,
 		lastSelectedNode: null as string | null,
+		lastSelectedNodeOutputIndex: null as number | null,
 		nodeIndex: [] as Array<string | null>,
 		nodeTypes: [] as INodeTypeDescription[],
 		nodeViewOffsetPosition: [0, 0] as XYPositon,
@@ -501,6 +502,10 @@ export const store = new Vuex.Store({
 			state.lastSelectedNode = nodeName;
 		},
 
+		setLastSelectedNodeOutputIndex(state, outputIndex: number | null) {
+			state.lastSelectedNodeOutputIndex = outputIndex;
+		},
+
 		setWorkflowExecutionData (state, workflowResultData: IExecutionResponse | null) {
 			state.workflowExecutionData = workflowResultData;
 		},
@@ -712,6 +717,9 @@ export const store = new Vuex.Store({
 		lastSelectedNode: (state, getters): INodeUi | null => {
 			return getters.nodeByName(state.lastSelectedNode);
 		},
+		lastSelectedNodeOutputIndex: (state, getters): number | null => {
+			return state.lastSelectedNodeOutputIndex;
+		},
 
 		// Active Execution
 		executingNode: (state): string | null => {

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

@@ -806,6 +806,7 @@ export default mixins(
 				}
 
 				this.$store.commit('setLastSelectedNode', node.name);
+				this.$store.commit('setLastSelectedNodeOutputIndex', null);
 
 				if (setActive === true) {
 					this.$store.commit('setActiveNode', node.name);
@@ -936,6 +937,7 @@ export default mixins(
 
 				// Check if there is a last selected node
 				const lastSelectedNode = this.$store.getters.lastSelectedNode;
+				const lastSelectedNodeOutputIndex = this.$store.getters.lastSelectedNodeOutputIndex;
 				if (lastSelectedNode) {
 					// If a node is active then add the new node directly after the current one
 					// newNodeData.position = [activeNode.position[0], activeNode.position[1] + 60];
@@ -960,6 +962,8 @@ export default mixins(
 					this.nodeSelectedByName(newNodeData.name, true);
 				});
 
+				const outputIndex = lastSelectedNodeOutputIndex || 0;
+
 				if (lastSelectedNode) {
 					// If a node is last selected then connect between the active and its child ones
 					await Vue.nextTick();
@@ -971,15 +975,15 @@ export default mixins(
 					connections = JSON.parse(JSON.stringify(connections));
 
 					for (const type of Object.keys(connections)) {
-						for (let inputIndex = 0; inputIndex < connections[type].length; inputIndex++) {
+						if (outputIndex <= connections[type].length) {
-							connections[type][inputIndex].forEach((connectionInfo: IConnection) => {
+							connections[type][outputIndex].forEach((connectionInfo: IConnection) => {
 								// Remove currenct connection
 
 								const connectionDataDisonnect = [
 									{
 										node: lastSelectedNode.name,
 										type,
-										index: inputIndex,
+										index: outputIndex,
 									},
 									connectionInfo,
 								] as [IConnection, IConnection];
@@ -990,7 +994,7 @@ export default mixins(
 									{
 										node: newNodeData.name,
 										type,
-										index: inputIndex,
+										index: 0,
 									},
 									connectionInfo,
 								] as [IConnection, IConnection];
@@ -1007,7 +1011,7 @@ export default mixins(
 						{
 							node: lastSelectedNode.name,
 							type: 'main',
-							index: 0,
+							index: outputIndex,
 						},
 						{
 							node: newNodeData.name,
@@ -1063,6 +1067,9 @@ export default mixins(
 					const sourceNodeName = this.$store.getters.getNodeNameByIndex(info.sourceId.slice(NODE_NAME_PREFIX.length));
 					this.$store.commit('setLastSelectedNode', sourceNodeName);
 
+					const sourceInfo = info.getParameters();
+					this.$store.commit('setLastSelectedNodeOutputIndex', sourceInfo.index);
+
 					// Display the node-creator
 					this.createNodeActive = true;
 				});