diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index dadf10f80a..68df563d8b 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/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;
+
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 5bd9fff238..f27c3539f0 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/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);
-
- const itemsOverlay = info.connection.getOverlay('output-items-label');
- if (itemsOverlay) {
- itemsOverlay.setVisible(false);
- }
+ showOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID);
+ hideOverlay(info.connection, OVERLAY_MIDPOINT_ARROW_ID);
+ hideOverlay(info.connection, OVERLAY_RUN_ITEMS_ID);
});
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');
- if (itemsOverlay) {
- itemsOverlay.setVisible(true);
- }
- else {
- showOrHideMidpointArrow(info.connection);
- }
+ hideOverlay(info.connection, OVERLAY_CONNECTION_ACTIONS_ID);
+ showOrHideItemsLabel(info.connection);
+ showOrHideMidpointArrow(info.connection);
}, 500);
});
@@ -1505,9 +1492,9 @@ export default mixins(
info.connection.addOverlay([
'Label',
{
- id: 'connection-actions',
+ id: OVERLAY_CONNECTION_ACTIONS_ID,
label: `${getIcon('plus')}
${getIcon('trash')}
`,
- 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')) {
- conn.removeOverlay('output-items-label');
+ if (conn.getOverlay(OVERLAY_RUN_ITEMS_ID)) {
+ 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;
}
diff --git a/packages/editor-ui/src/views/helpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
similarity index 87%
rename from packages/editor-ui/src/views/helpers.ts
rename to packages/editor-ui/src/views/canvasHelpers.ts
index ac7cd685eb..e15c44a691 100644
--- a/packages/editor-ui/src/views/helpers.ts
+++ b/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) => {
- const arrow = connection.getOverlay('midpoint-arrow');
+export const showOverlay = (connection: Connection, overlayId: string) => {
+ 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 ``;
- }
-
- if (name === 'plus') {
- return ``;
- }
-
- 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 ``;
+ }
+
+ if (name === 'plus') {
+ return ``;
+ }
+
+ return '';
+};
+
+
const canUsePosition = (position1: XYPositon, position2: XYPositon) => {
if (Math.abs(position1[0] - position2[0]) <= 100) {
if (Math.abs(position1[1] - position2[1]) <= 50) {