From 97280329b2dc92b929e50cdb7f09541a13320fe7 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 13 Oct 2021 12:45:41 +0200
Subject: [PATCH] handle nodes moving

---
 packages/editor-ui/src/Interface.ts           |  5 --
 .../src/components/mixins/nodeBase.ts         |  2 +
 packages/editor-ui/src/store.ts               |  4 +-
 packages/editor-ui/src/views/NodeView.vue     | 48 +++++++++++--------
 packages/editor-ui/src/views/helpers.ts       | 32 +++++++++++++
 5 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 8181647da4..d86a134acb 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -103,11 +103,6 @@ export interface INodeUi extends INode {
 	color?: string;
 	notes?: string;
 	issues?: INodeIssues;
-	_jsPlumb?: {
-		endpoints?: {
-			[key: string]: IEndpointOptions[];
-		};
-	};
 }
 
 export interface INodeTypesMaxCount {
diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
index d687a2fd09..f9716a55df 100644
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -328,6 +328,8 @@ export const nodeBase = mixins(
 
 							this.$store.commit('updateNodeProperties', updateInformation);
 						});
+
+						this.$emit('moved', node);
 					}
 				},
 				filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index 93e67903ef..db31d9b2a0 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -728,9 +728,7 @@ export const store = new Vuex.Store({
 		allConnections: (state): IConnections => {
 			return state.workflow.connections;
 		},
-		// connectionsByNodeName: (state) => (nodeName: string): {[key: string]: Connection[][]} | null => {
-		// connectionsByNodeName: (state) => (nodeName: string): { [key: string]: NodeConnections} | null => {
-		connectionsByNodeName: (state) => (nodeName: string): INodeConnections => {
+		outgoingConnectionsByNodeName: (state) => (nodeName: string): INodeConnections => {
 			if (state.workflow.connections.hasOwnProperty(nodeName)) {
 				return state.workflow.connections[nodeName];
 			}
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 63cf899873..9ec86c5055 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -21,6 +21,7 @@
 				@nodeSelected="nodeSelectedByName"
 				@removeNode="removeNode"
 				@runWorkflow="runWorkflow"
+				@moved="onNodeMoved"
 				:id="'node-' + getNodeIndex(nodeData.name)"
 				:key="getNodeIndex(nodeData.name)"
 				:name="nodeData.name"
@@ -105,6 +106,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import {
+	Connection,
 	OverlaySpec,
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
@@ -130,7 +132,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
 import NodeSettings from '@/components/NodeSettings.vue';
 import RunData from '@/components/RunData.vue';
 
-import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset } from './helpers';
+import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow } from './helpers';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
@@ -266,9 +268,6 @@ export default mixins(
 			lastSelectedNode (): INodeUi {
 				return this.$store.getters.lastSelectedNode;
 			},
-			connections (): IConnectionsUi {
-				return this.$store.getters.allConnections;
-			},
 			nodes (): INodeUi[] {
 				return this.$store.getters.allNodes;
 			},
@@ -670,7 +669,7 @@ export default mixins(
 						return;
 					}
 
-					const connections = this.$store.getters.connectionsByNodeName(lastSelectedNode.name);
+					const connections = this.$store.getters.outgoingConnectionsByNodeName(lastSelectedNode.name);
 
 					if (connections.main === undefined || connections.main.length === 0) {
 						return;
@@ -725,7 +724,7 @@ export default mixins(
 					}
 
 					const parentNode = connections.main[0][0].node;
-					const connectionsParent = this.$store.getters.connectionsByNodeName(parentNode);
+					const connectionsParent = this.$store.getters.outgoingConnectionsByNodeName(parentNode);
 
 					if (connectionsParent.main === undefined || connectionsParent.main.length === 0) {
 						return;
@@ -1258,7 +1257,7 @@ export default mixins(
 					await Vue.nextTick();
 
 					// Add connections of active node to newly created one
-					let connections = this.$store.getters.connectionsByNodeName(
+					let connections = this.$store.getters.outgoingConnectionsByNodeName(
 						lastSelectedNode.name,
 					);
 					connections = JSON.parse(JSON.stringify(connections));
@@ -1317,6 +1316,7 @@ export default mixins(
 					[
 						'Arrow',
 						{
+							id: 'endpoint-arrow',
 							location: 1,
 							width: 12,
 							foldback: 1,
@@ -1366,12 +1366,15 @@ export default mixins(
 					info.connection.addOverlay([
 						'Arrow',
 						{
+							id: 'endpoint-arrow',
 							location: 1,
 							width: 12,
 							foldback: 1,
 							length: 10,
 						},
 					]);
+					addOrRemoveMidpointArrow(info.connection);
+
 					// @ts-ignore
 					const sourceInfo = info.sourceEndpoint.getParameters();
 					// @ts-ignore
@@ -1383,19 +1386,6 @@ export default mixins(
 					const sourceNode = this.$store.getters.nodeByName(sourceNodeName);
 					const targetNode = this.$store.getters.nodeByName(targetNodeName);
 
-					// TODO: That should happen after each move (only the setConnector part)
-					if (info.sourceEndpoint.anchor.lastReturnValue[0] >= info.targetEndpoint.anchor.lastReturnValue[0]) {
-						info.connection.addOverlay([
-							'Arrow',
-							{
-								location: 0.5,
-								width: 12,
-								foldback: 1,
-								length: 10,
-							},
-						]);
-					}
-
 					// @ts-ignore
 					info.connection.removeOverlay('drop-add-node');
 
@@ -1739,6 +1729,22 @@ export default mixins(
 					this.nodeSelectedByName(newNodeData.name, true);
 				});
 			},
+			onNodeMoved (node: INodeUi) {
+				const name = `${NODE_NAME_PREFIX}${this.$store.getters.getNodeIndex(node.name)}`;
+				// @ts-ignore
+				const outgoing = this.instance.getConnections({
+					source: name,
+				}) as Connection[];
+
+				// @ts-ignore
+				const incoming = this.instance.getConnections({
+					target: name,
+				}) as Connection[];
+
+				[...incoming, ...outgoing].forEach((connection: Connection) => {
+					addOrRemoveMidpointArrow(connection);
+				});
+			},
 			removeNode (nodeName: string) {
 				if (this.editAllowedCheck() === false) {
 					return;
@@ -2101,7 +2107,7 @@ export default mixins(
 					typeConnections: INodeConnections;
 
 				data.nodes.forEach((node) => {
-					connections = this.$store.getters.connectionsByNodeName(node.name);
+					connections = this.$store.getters.outgoingConnectionsByNodeName(node.name);
 					if (Object.keys(connections).length === 0) {
 						return;
 					}
diff --git a/packages/editor-ui/src/views/helpers.ts b/packages/editor-ui/src/views/helpers.ts
index e8ffc6b4bf..46e78a38be 100644
--- a/packages/editor-ui/src/views/helpers.ts
+++ b/packages/editor-ui/src/views/helpers.ts
@@ -1,4 +1,5 @@
 import { INodeUi, IZoomConfig } from "@/Interface";
+import { Connection } from "jsplumb";
 
 interface ICorners {
 	minX: number;
@@ -83,3 +84,34 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
 
 	return config;
 };
+
+export const addOrRemoveMidpointArrow = (connection: Connection) => {
+	const sourceEndpoint = connection.endpoints[0];
+	const targetEndpoint = connection.endpoints[1];
+	const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0];
+
+	const hasArrow = !!connection.getOverlay('midpoint-arrow');
+
+	if (!requiresArrow) {
+		if (hasArrow) {
+			connection.removeOverlay('midpoint-arrow');
+		}
+
+		return;
+	}
+
+	if (hasArrow) {
+		return;
+	}
+
+	connection.addOverlay([
+		'Arrow',
+		{
+			id: 'midpoint-arrow',
+			location: 0.5,
+			width: 12,
+			foldback: 1,
+			length: 10,
+		},
+	]);
+};