clean up impl

packages/editor-ui/src/constants.ts

@@ -62,3 +62,5 @@ export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fB
 // General
 export const INSTANCE_ID_HEADER = 'n8n-instance-id';
 export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';
+
+export const JSPLUMB_FLOWCHART_STUB = 60;

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

@@ -111,7 +111,7 @@ import {
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
-import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE } from '@/constants';
+import { JSPLUMB_FLOWCHART_STUB, NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -132,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, addOrRemoveMidpointArrow } from './helpers';
+import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays } from './helpers';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
@@ -1312,27 +1312,7 @@ export default mixins(
 				}
 			},
 			initNodeView () {
-				const connectionOverlays: OverlaySpec[] = [
+
-					[
-						'Arrow',
-						{
-							id: 'endpoint-arrow',
-							location: 1,
-							width: 12,
-							foldback: 1,
-							length: 10,
-						},
-					],
-					[
-						'Label',
-						{
-							id: 'drop-add-node',
-							label: 'Drop connection<br />to create node',
-							cssClass: 'drop-add-node-label',
-							location: 0.5,
-						},
-					],
-				];
 
 				this.instance.importDefaults({
 					Connector: ['Bezier', { curviness: 150 }],
@@ -1342,7 +1322,7 @@ export default mixins(
 					EndpointStyle: { radius: 9, fill: '#acd', stroke: 'red' },
 					HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
 					EndpointHoverStyle: { fill: '#ff6d5a', stroke: '#acd' },
-					ConnectionOverlays: connectionOverlays,
+					ConnectionOverlays: getDefaultOverlays(),
 					Container: '#node-view',
 				});
 
@@ -1362,17 +1342,9 @@ export default mixins(
 				});
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
-					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: 60, gap: 5, alwaysRespectStubs: false}]);
+					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: true}]);
-					info.connection.addOverlay([
+
-						'Arrow',
+					addEndpointArrow(info.connection);
-						{
-							id: 'endpoint-arrow',
-							location: 1,
-							width: 12,
-							foldback: 1,
-							length: 10,
-						},
-					]);
 					addOrRemoveMidpointArrow(info.connection);
 
 					// @ts-ignore

packages/editor-ui/src/views/helpers.ts

@@ -1,5 +1,6 @@
+import { JSPLUMB_FLOWCHART_STUB } from "@/constants";
 import { INodeUi, IZoomConfig } from "@/Interface";
-import { Connection } from "jsplumb";
+import { Connection, OverlaySpec } from "jsplumb";
 
 interface ICorners {
 	minX: number;
@@ -85,10 +86,48 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
 	return config;
 };
 
+export const getDefaultOverlays = (): OverlaySpec[] => ([
+	[
+		'Arrow',
+		{
+			id: 'endpoint-arrow',
+			location: 1,
+			width: 12,
+			foldback: 1,
+			length: 10,
+		},
+	],
+	[
+		'Label',
+		{
+			id: 'drop-add-node',
+			label: 'Drop connection<br />to create node',
+			cssClass: 'drop-add-node-label',
+			location: 0.5,
+		},
+	],
+]);
+
+export const addEndpointArrow = (connection: Connection)  => {
+	const hasArrow = !!connection.getOverlay('midpoint-arrow');
+	if (!hasArrow) {
+		connection.addOverlay([
+			'Arrow',
+			{
+				id: 'endpoint-arrow',
+				location: 1,
+				width: 12,
+				foldback: 1,
+				length: 10,
+			},
+		]);
+	}
+};
+
 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 requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= (targetEndpoint.anchor.lastReturnValue[0] - JSPLUMB_FLOWCHART_STUB);
 
 	const hasArrow = !!connection.getOverlay('midpoint-arrow');