mirror of
https://github.com/n8n-io/n8n.git
synced 2025-02-02 07:01:30 -08:00
refactor a bunch
This commit is contained in:
Mutasem
parent
ad7b3614b3
commit
3c7daae9b3
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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: `<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')) {
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 `<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) {
|
||||
Loading…
Reference in a new issue