From 3c7daae9b3769305d04ee96a3ec8e77d501394a3 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Wed, 20 Oct 2021 17:20:15 +0200 Subject: [PATCH] refactor a bunch --- packages/editor-ui/src/constants.ts | 1 + packages/editor-ui/src/views/NodeView.vue | 54 ++++++-------- .../views/{helpers.ts => canvasHelpers.ts} | 71 +++++++++++-------- 3 files changed, 66 insertions(+), 60 deletions(-) rename packages/editor-ui/src/views/{helpers.ts => canvasHelpers.ts} (87%) 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) {