From 266134fced3e61e733f2ca667656930a9aa3a610 Mon Sep 17 00:00:00 2001 From: Mutasem Date: Mon, 1 Nov 2021 17:50:17 +0100 Subject: [PATCH] refactor func --- packages/editor-ui/src/views/NodeView.vue | 75 +++++-------------- packages/editor-ui/src/views/canvasHelpers.ts | 56 +++++++++++--- 2 files changed, 64 insertions(+), 67 deletions(-) diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 6cd8cc5658..171d74cabb 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -1324,8 +1324,6 @@ export default mixins( CanvasHelpers.showOrHideMidpointArrow(info.connection); - info.connection.removeOverlay(CanvasHelpers.OVERLAY_DROP_NODE_ID); - if (this.isReadOnly === false) { let exitTimer: NodeJS.Timeout | undefined; let enterTimer: NodeJS.Timeout | undefined; @@ -1376,41 +1374,24 @@ export default mixins( }, 500); }); - // @ts-ignore - info.connection.addOverlay([ - 'Label', - { - id: CanvasHelpers.OVERLAY_CONNECTION_ACTIONS_ID, - label: `
${CanvasHelpers.getIcon('plus')}
${CanvasHelpers.getIcon('trash')}
`, - cssClass: CanvasHelpers.OVERLAY_CONNECTION_ACTIONS_ID, - visible: false, - events: { - mousedown: (overlay: Overlay, event: MouseEvent) => { - const element = event.target as HTMLElement; - if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) { - activeConnection = null; - this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event - } - else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) { - setTimeout(() => { - insertNodeAfterSelected({ - sourceId: info.sourceId, - index: sourceInfo.index, - connection: info.connection, - eventSource: 'node_connection_action', - }); - }, 150); - } - }, - }, + CanvasHelpers.addConnectionActionsOverlay(info.connection, + () => { + activeConnection = null; + this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event }, - ]); + () => { + setTimeout(() => { + insertNodeAfterSelected({ + sourceId: info.sourceId, + index: sourceInfo.index, + connection: info.connection, + eventSource: 'node_connection_action', + }); + }, 150); + }); } - const inputNameOverlay = info.targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL); - if (inputNameOverlay) { - inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED); - } + CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint); this.$store.commit('addConnection', { connection: [ @@ -1429,29 +1410,12 @@ export default mixins( }); }); - const updateConnectionDetach = (sourceEndpoint: Endpoint, targetEndpoint: Endpoint, maxConnections: number) => { - // If the source endpoint is not connected to anything else anymore - // display the output-name overlays on the endpoint if any exist - if (sourceEndpoint !== undefined && sourceEndpoint.connections!.length === maxConnections) { - const outputNameOverlay = sourceEndpoint.getOverlay(CanvasHelpers.OVERLAY_OUTPUT_NAME_LABEL); - if (![null, undefined].includes(outputNameOverlay)) { - outputNameOverlay.setVisible(true); - } - } - if (targetEndpoint !== undefined && targetEndpoint.connections!.length === maxConnections) { - const inputNameOverlay = targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL); - if (![null, undefined].includes(inputNameOverlay)) { - inputNameOverlay.setVisible(true); - } - } - }; - this.instance.bind('connectionMoved', (info) => { // When a connection gets moved from one node to another it for some reason // calls the "connection" event but not the "connectionDetached" one. So we listen // additionally to the "connectionMoved" event and then only delete the existing connection. - updateConnectionDetach(info.originalSourceEndpoint, info.originalTargetEndpoint, 0); + CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint); // @ts-ignore const sourceInfo = info.originalSourceEndpoint.getParameters(); @@ -1479,12 +1443,7 @@ export default mixins( }); this.instance.bind('connectionDetached', (info) => { - const inputNameOverlay = info.targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL); - if (inputNameOverlay) { - inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION); - } - - updateConnectionDetach(info.sourceEndpoint, info.targetEndpoint, 1); + CanvasHelpers.resetInputLabelPosition(info.targetEndpoint); info.connection.removeOverlays(); this.__removeConnectionByConnectionInfo(info, false); }); diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts index a89379baa3..b5a9b0df59 100644 --- a/packages/editor-ui/src/views/canvasHelpers.ts +++ b/packages/editor-ui/src/views/canvasHelpers.ts @@ -1,7 +1,7 @@ import { getStyleTokenValue } from "@/components/helpers"; import { START_NODE_TYPE } from "@/constants"; import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface"; -import { Connection, OverlaySpec, PaintStyle } from "jsplumb"; +import { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb"; import { IConnection, ITaskData, @@ -203,17 +203,17 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => { return config; }; -export const showOverlay = (connection: Connection, overlayId: string) => { - const arrow = connection.getOverlay(overlayId); - if (arrow) { - arrow.setVisible(true); +export const showOverlay = (item: Connection | Endpoint, overlayId: string) => { + const overlay = item.getOverlay(overlayId); + if (overlay) { + overlay.setVisible(true); } }; -export const hideOverlay = (connection: Connection, overlayId: string) => { - const arrow = connection.getOverlay(overlayId); - if (arrow) { - arrow.setVisible(false); +export const hideOverlay = (item: Connection | Endpoint, overlayId: string) => { + const overlay = item.getOverlay(overlayId); + if (overlay) { + overlay.setVisible(false); } }; @@ -534,3 +534,41 @@ export const showPullConnectionState = (connection: Connection) => { addOverlays(connection, CONNECTOR_ARROW_OVERLAYS); showOverlay(connection, OVERLAY_DROP_NODE_ID); }; + +export const resetInputLabelPosition = (targetEndpoint: Endpoint) => { + const inputNameOverlay = targetEndpoint.getOverlay(OVERLAY_INPUT_NAME_LABEL); + if (inputNameOverlay) { + inputNameOverlay.setLocation(OVERLAY_INPUT_NAME_LABEL_POSITION); + } +}; + +export const moveBackInputLabelPosition = (targetEndpoint: Endpoint) => { + const inputNameOverlay = targetEndpoint.getOverlay(OVERLAY_INPUT_NAME_LABEL); + if (inputNameOverlay) { + inputNameOverlay.setLocation(OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED); + } +}; + +export const addConnectionActionsOverlay = (connection: Connection, onDelete: Function, onAdd: Function) => { + connection.addOverlay([ + 'Label', + { + id: OVERLAY_CONNECTION_ACTIONS_ID, + label: `
${getIcon('plus')}
${getIcon('trash')}
`, + cssClass: OVERLAY_CONNECTION_ACTIONS_ID, + visible: false, + events: { + mousedown: (overlay: Overlay, event: MouseEvent) => { + const element = event.target as HTMLElement; + if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) { + onDelete(); + } + else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) { + onAdd(); + } + }, + }, + }, + ]); +}; +