refactor a bunch

packages/editor-ui/src/constants.ts

@@ -123,3 +123,4 @@ if (!window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB')) {
 // @ts-ignore
 const _JSPLUMB_FLOWCHART_STUB = parseInt(window.localStorage.getItem('JSPLUMB_FLOWCHART_STUB'), 10);
 export const JSPLUMB_FLOWCHART_STUB = _JSPLUMB_FLOWCHART_STUB;
+

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

@@ -135,7 +135,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, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideMidpointArrow, showOrHideItemsLabel } from './helpers';
+import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, showOrHideMidpointArrow, getIcon, getNewNodePosition, hideOverlay, showOrHideItemsLabel, showOverlay, OVERLAY_ENDPOINT_ARROW_ID, OVERLAY_MIDPOINT_ARROW_ID, OVERLAY_DROP_NODE_ID, OVERLAY_RUN_ITEMS_ID, OVERLAY_CONNECTION_ACTIONS_ID } from './canvasHelpers';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
@@ -240,13 +240,11 @@ const CONNECTOR_PAINT_STYLE_SUCCESS = {
 const CONNECTOR_TYPE_BEZIER = ['Bezier', { curviness: _CURVINESS }];
 const CONNECTOR_TYPE_FLOWCHART = ['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: _ALWAYS_RESPECT_STUB}];
 
-const OVERLAY_DROP_NODE_ID = 'drop-add-node';
-
 const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
 	[
 		'Arrow',
 		{
-			id: 'endpoint-arrow',
+			id: OVERLAY_ENDPOINT_ARROW_ID,
 			location: 1,
 			width: 12,
 			foldback: 1,
@@ -257,7 +255,7 @@ const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
 	[
 		'Arrow',
 		{
-			id: 'midpoint-arrow',
+			id: OVERLAY_MIDPOINT_ARROW_ID,
 			location: 0.5,
 			width: 12,
 			foldback: 1,
@@ -1471,15 +1469,10 @@ export default mixins(
 							if (timer !== undefined) {
 								clearTimeout(timer);
 							}
-							const overlay = info.connection.getOverlay('connection-actions');
-							overlay.setVisible(true);
 
-							hideMidpointArrow(info.connection);
+							showOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID);
-
+							hideOverlay(info.connection, OVERLAY_MIDPOINT_ARROW_ID);
-							const itemsOverlay = info.connection.getOverlay('output-items-label');
+							hideOverlay(info.connection, OVERLAY_RUN_ITEMS_ID);
-							if (itemsOverlay) {
-								itemsOverlay.setVisible(false);
-							}
 						});
 
 						info.connection.bind('mouseout', (connection: IConnection) => {
@@ -1487,17 +1480,11 @@ export default mixins(
 								if (!info.connection) {
 									return;
 								}
-								const overlay = info.connection.getOverlay('connection-actions');
-								overlay.setVisible(false);
 								timer = undefined;
 
-								const itemsOverlay = info.connection.getOverlay('output-items-label');
+								hideOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID);
-								if (itemsOverlay) {
+								showOrHideItemsLabel(info.connection);
-									itemsOverlay.setVisible(true);
-								}
-								else {
 								showOrHideMidpointArrow(info.connection);
-								}
 							}, 500);
 						});
 
@@ -1505,9 +1492,9 @@ export default mixins(
 						info.connection.addOverlay([
 							'Label',
 							{
-								id: 'connection-actions',
+								id: OVERLAY_CONNECTION_ACTIONS_ID,
 								label: `<div class="add">${getIcon('plus')}</div> <div class="delete">${getIcon('trash')}</div>`,
-								cssClass: 'connection-actions',
+								cssClass: OVERLAY_CONNECTION_ACTIONS_ID,
 								visible: false,
 								events: {
 									mousedown: (overlay: Overlay, event: MouseEvent) => {
@@ -1849,9 +1836,8 @@ export default mixins(
 					}) as Connection[];
 
 					outgoing.forEach((connection: Connection) => {
-						connection.removeOverlay('output-items-label');
+						connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 						connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
-						showOrHideMidpointArrow(connection);
 					});
 
 					return;
@@ -1865,11 +1851,15 @@ export default mixins(
 				const outputMap: {[sourceEndpoint: string]: {[targetId: string]: {[targetEndpoint: string]: {total: number, iterations: number}}}} = {};
 
 				data.forEach((run: ITaskData) => {
-					if (!run.data) {
+					if (!run.data || !run.data.main) {
 						return;
 					}
 
 					run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
+						if (!nodeConnections[i]) {
+							return;
+						}
+
 						nodeConnections[i]
 							.map((conn: IConnection) => {
 								const targetIndex = this.getNodeIndex(conn.node);
@@ -1921,14 +1911,14 @@ export default mixins(
 							const output = outputMap[sourceEndpoint][targetId][targetEndpoint];
 							if (!output || !output.total) {
 								conn.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
-								conn.removeOverlay('output-items-label');
+								conn.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 								return;
 							}
 
 							conn.setPaintStyle(CONNECTOR_PAINT_STYLE_SUCCESS);
 
-							if (conn.getOverlay('output-items-label')) {
+							if (conn.getOverlay(OVERLAY_RUN_ITEMS_ID)) {
-								conn.removeOverlay('output-items-label');
+								conn.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 							}
 
 							let label = `${output.total}`;
@@ -1938,14 +1928,13 @@ export default mixins(
 							conn.addOverlay([
 								'Label',
 								{
-									id: 'output-items-label',
+									id: OVERLAY_RUN_ITEMS_ID,
 									label,
 									cssClass: 'connection-output-items-label',
 									location: .5,
 								},
 							]);
 
-							hideMidpointArrow(conn);
 							showOrHideItemsLabel(conn);
 						});
 					});
@@ -2702,6 +2691,7 @@ export default mixins(
 }
 
 .connection-actions {
+	z-index: 9;
 	&:hover {
 		display: block !important;
 	}

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

@@ -1,6 +1,25 @@
 import { INodeUi, IZoomConfig, XYPositon } from "@/Interface";
 import { Connection, OverlaySpec } from "jsplumb";
 
+export const OVERLAY_DROP_NODE_ID = 'drop-add-node';
+export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow';
+export const OVERLAY_ENDPOINT_ARROW_ID = 'endpoint-arrow';
+export const OVERLAY_RUN_ITEMS_ID = 'output-items-label';
+export const OVERLAY_CONNECTION_ACTIONS_ID = 'connection-actions';
+
+
+if (!window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL')) {
+	window.localStorage.setItem('MIN_X_TO_SHOW_OUTPUT_LABEL', '150');
+}
+// @ts-ignore
+const _MIN_X_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL'), 10);
+
+if (!window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL')) {
+	window.localStorage.setItem('MIN_Y_TO_SHOW_OUTPUT_LABEL', '100');
+}
+// @ts-ignore
+const _MIN_Y_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL'), 10);
+
 interface ICorners {
 	minX: number;
 	minY: number;
@@ -85,8 +104,15 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
 	return config;
 };
 
-export const hideMidpointArrow = (connection: Connection) => {
+export const showOverlay = (connection: Connection, overlayId: string) => {
-	const arrow = connection.getOverlay('midpoint-arrow');
+	const arrow = connection.getOverlay(overlayId);
+	if (arrow) {
+		arrow.setVisible(true);
+	}
+};
+
+export const hideOverlay = (connection: Connection, overlayId: string) => {
+	const arrow = connection.getOverlay(overlayId);
 	if (arrow) {
 		arrow.setVisible(false);
 	}
@@ -97,38 +123,14 @@ export const showOrHideMidpointArrow = (connection: Connection) => {
 	const targetEndpoint = connection.endpoints[1];
 	const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0];
 
-	const arrow = connection.getOverlay('midpoint-arrow');
+	const arrow = connection.getOverlay(OVERLAY_MIDPOINT_ARROW_ID);
 	if (arrow) {
 		arrow.setVisible(requiresArrow);
 	}
 };
 
-export const getIcon = (name: string): string => {
-	if (name === 'trash') {
-		return `<svg data-v-66d5c7e2="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash fa-w-14 Icon__medium_ctPPJ"><path data-v-66d5c7e2="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" class=""></path></svg>`;
-	}
-
-	if (name === 'plus') {
-		return `<svg data-v-301ed208="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-plus fa-w-14 Icon__medium_ctPPJ"><path data-v-301ed208="" fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" class=""></path></svg>`;
-	}
-
-	return '';
-};
-
-if (!window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL')) {
-	window.localStorage.setItem('MIN_X_TO_SHOW_OUTPUT_LABEL', '150');
-}
-// @ts-ignore
-const _MIN_X_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_X_TO_SHOW_OUTPUT_LABEL'), 10);
-
-if (!window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL')) {
-	window.localStorage.setItem('MIN_Y_TO_SHOW_OUTPUT_LABEL', '100');
-}
-// @ts-ignore
-const _MIN_Y_TO_SHOW_OUTPUT_LABEL = parseInt(window.localStorage.getItem('MIN_Y_TO_SHOW_OUTPUT_LABEL'), 10);
-
 export const showOrHideItemsLabel = (connection: Connection) => {
-	const overlay = connection.getOverlay('output-items-label');
+	const overlay = connection.getOverlay(OVERLAY_RUN_ITEMS_ID);
 	if (!overlay) {
 		return;
 	}
@@ -146,6 +148,19 @@ export const showOrHideItemsLabel = (connection: Connection) => {
 	}
 };
 
+export const getIcon = (name: string): string => {
+	if (name === 'trash') {
+		return `<svg data-v-66d5c7e2="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash fa-w-14 Icon__medium_ctPPJ"><path data-v-66d5c7e2="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" class=""></path></svg>`;
+	}
+
+	if (name === 'plus') {
+		return `<svg data-v-301ed208="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-plus fa-w-14 Icon__medium_ctPPJ"><path data-v-301ed208="" fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" class=""></path></svg>`;
+	}
+
+	return '';
+};
+
+
 const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
 	if (Math.abs(position1[0] - position2[0]) <= 100) {
 		if (Math.abs(position1[1] - position2[1]) <= 50) {