mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-31 23:47:28 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor func

Browse source
This commit is contained in:
Mutasem 2021-11-01 17:50:17 +01:00
parent 78b581880f
commit 266134fced
2 changed files with 64 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
packages/editor-ui/src/views/NodeView.vue
View file

@ -1324,8 +1324,6 @@ export default mixins(
CanvasHelpers.showOrHideMidpointArrow(info.connection); CanvasHelpers.showOrHideMidpointArrow(info.connection);
info.connection.removeOverlay(CanvasHelpers.OVERLAY_DROP_NODE_ID);
if (this.isReadOnly === false) { if (this.isReadOnly === false) {
let exitTimer: NodeJS.Timeout | undefined; let exitTimer: NodeJS.Timeout | undefined;
let enterTimer: NodeJS.Timeout | undefined; let enterTimer: NodeJS.Timeout | undefined;
@ -1376,41 +1374,24 @@ export default mixins(
}, 500); }, 500);
}); });
// @ts-ignore CanvasHelpers.addConnectionActionsOverlay(info.connection,
info.connection.addOverlay([ () => {
'Label', activeConnection = null;
{ this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
id: CanvasHelpers.OVERLAY_CONNECTION_ACTIONS_ID,
label: `<div class="add">${CanvasHelpers.getIcon('plus')}</div> <div class="delete">${CanvasHelpers.getIcon('trash')}</div>`,
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);
}
},
},
}, },
]); () => {
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); CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint);
if (inputNameOverlay) {
inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED);
}
this.$store.commit('addConnection', { this.$store.commit('addConnection', {
connection: [ 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) => { this.instance.bind('connectionMoved', (info) => {
// When a connection gets moved from one node to another it for some reason // 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 // calls the "connection" event but not the "connectionDetached" one. So we listen
// additionally to the "connectionMoved" event and then only delete the existing connection. // additionally to the "connectionMoved" event and then only delete the existing connection.
updateConnectionDetach(info.originalSourceEndpoint, info.originalTargetEndpoint, 0); CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint);
// @ts-ignore // @ts-ignore
const sourceInfo = info.originalSourceEndpoint.getParameters(); const sourceInfo = info.originalSourceEndpoint.getParameters();
@ -1479,12 +1443,7 @@ export default mixins(
}); });
this.instance.bind('connectionDetached', (info) => { this.instance.bind('connectionDetached', (info) => {
const inputNameOverlay = info.targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL); CanvasHelpers.resetInputLabelPosition(info.targetEndpoint);
if (inputNameOverlay) {
inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION);
}
updateConnectionDetach(info.sourceEndpoint, info.targetEndpoint, 1);
info.connection.removeOverlays(); info.connection.removeOverlays();
this.__removeConnectionByConnectionInfo(info, false); this.__removeConnectionByConnectionInfo(info, false);
}); });

56
packages/editor-ui/src/views/canvasHelpers.ts
View file

@ -1,7 +1,7 @@
import { getStyleTokenValue } from "@/components/helpers"; import { getStyleTokenValue } from "@/components/helpers";
import { START_NODE_TYPE } from "@/constants"; import { START_NODE_TYPE } from "@/constants";
import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface"; import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface";
import { Connection, OverlaySpec, PaintStyle } from "jsplumb"; import { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
import { import {
IConnection, IConnection,
ITaskData, ITaskData,
@ -203,17 +203,17 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
return config; return config;
}; };
export const showOverlay = (connection: Connection, overlayId: string) => { export const showOverlay = (item: Connection | Endpoint, overlayId: string) => {
const arrow = connection.getOverlay(overlayId); const overlay = item.getOverlay(overlayId);
if (arrow) { if (overlay) {
arrow.setVisible(true); overlay.setVisible(true);
} }
}; };
export const hideOverlay = (connection: Connection, overlayId: string) => { export const hideOverlay = (item: Connection | Endpoint, overlayId: string) => {
const arrow = connection.getOverlay(overlayId); const overlay = item.getOverlay(overlayId);
if (arrow) { if (overlay) {
arrow.setVisible(false); overlay.setVisible(false);
} }
}; };
@ -534,3 +534,41 @@ export const showPullConnectionState = (connection: Connection) => {
addOverlays(connection, CONNECTOR_ARROW_OVERLAYS); addOverlays(connection, CONNECTOR_ARROW_OVERLAYS);
showOverlay(connection, OVERLAY_DROP_NODE_ID); 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: `<div class="add">${getIcon('plus')}</div> <div class="delete">${getIcon('trash')}</div>`,
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();
}
},
},
},
]);
};