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

refactor

Browse source
This commit is contained in:
Mutasem 2021-11-01 16:43:33 +01:00
parent a19f07cce0
commit e7bbe964f7
2 changed files with 96 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -109,8 +109,6 @@ import Vue from 'vue';
import { import {
Connection, Connection,
Overlay, Overlay,
OverlaySpec,
PaintStyle,
} from 'jsplumb'; } from 'jsplumb';
import { MessageBoxInputData } from 'element-ui/types/message-box'; import { MessageBoxInputData } from 'element-ui/types/message-box';
import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb'; import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
@ -153,7 +151,6 @@ import {
IRun, IRun,
ITaskData, ITaskData,
INodeCredentialsDetails, INodeCredentialsDetails,
INodeExecutionData,
} from 'n8n-workflow'; } from 'n8n-workflow';
import { import {
ICredentialsResponse, ICredentialsResponse,
@ -1813,17 +1810,6 @@ export default mixins(
const sourceIndex = this.$store.getters.getNodeIndex(sourceNodeName); const sourceIndex = this.$store.getters.getNodeIndex(sourceNodeName);
const sourceId = `${NODE_NAME_PREFIX}${sourceIndex}`; const sourceId = `${NODE_NAME_PREFIX}${sourceIndex}`;
const resetConnection = (connection: Connection) => {
connection.removeOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID);
connection.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_DEFAULT);
CanvasHelpers.showOrHideMidpointArrow(connection);
// @ts-ignore
if (connection.canvas) {
// @ts-ignore
(connection.canvas as Element).classList.remove('success');
}
};
if (data === null || data.length === 0) { if (data === null || data.length === 0) {
// @ts-ignore // @ts-ignore
const outgoing = this.instance.getConnections({ const outgoing = this.instance.getConnections({
@ -1831,7 +1817,7 @@ export default mixins(
}) as Connection[]; }) as Connection[];
outgoing.forEach((connection: Connection) => { outgoing.forEach((connection: Connection) => {
resetConnection(connection); CanvasHelpers.resetConnection(connection);
}); });
return; return;
@ -1842,87 +1828,24 @@ export default mixins(
return; return;
} }
const outputMap: {[sourceOutputIndex: string]: {[targetNodeName: string]: {[targetInputIndex: string]: {total: number, iterations: number}}}} = {}; const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections);
data.forEach((run: ITaskData) => {
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 sourceOutputIndex = i;
const targetNodeName = conn.node;
const targetInputIndex = conn.index;
if (!outputMap[sourceOutputIndex]) {
outputMap[sourceOutputIndex] = {};
}
if (!outputMap[sourceOutputIndex][targetNodeName]) {
outputMap[sourceOutputIndex][targetNodeName] = {};
}
if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
total: 0,
iterations: 0,
};
}
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output ? output.length : 0;
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
});
});
});
Object.keys(outputMap).forEach((sourceOutputIndex: string) => { Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => { Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach((targetInputIndex: string) => { Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach((targetInputIndex: string) => {
const conn = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10)); const connection = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
if (!conn) { if (!connection) {
return; return;
} }
const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]; const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
if (!output || !output.total) { if (!output || !output.total) {
resetConnection(conn); CanvasHelpers.resetConnection(connection);
return; return;
} }
conn.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_SUCCESS); CanvasHelpers.addConnectionOutputSuccess(connection, output);
// @ts-ignore
if (conn.canvas) {
// @ts-ignore
(conn.canvas as Element).classList.add('success');
}
if (conn.getOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID)) {
conn.removeOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID);
}
let label = `${output.total}`;
label = output.total > 1 ? `${label} items` : `${label} item`;
label = output.iterations > 1 ? `${label} total` : label;
conn.addOverlay([
'Label',
{
id: CanvasHelpers.OVERLAY_RUN_ITEMS_ID,
label,
cssClass: 'connection-output-items-label',
location: .5,
},
]);
CanvasHelpers.showOrHideItemsLabel(conn);
CanvasHelpers.showOrHideMidpointArrow(conn);
}); });
}); });
}); });

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

@ -2,6 +2,12 @@ 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, OverlaySpec, PaintStyle } from "jsplumb";
import {
IConnection,
ITaskData,
INodeExecutionData,
NodeInputConnections,
} from 'n8n-workflow';
export const OVERLAY_DROP_NODE_ID = 'drop-add-node'; export const OVERLAY_DROP_NODE_ID = 'drop-add-node';
export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow'; export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow';
@ -362,3 +368,87 @@ export const showConectionActions = (connection: Connection | null) => {
} }
}; };
export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputConnections) => {
const outputMap: {[sourceOutputIndex: string]: {[targetNodeName: string]: {[targetInputIndex: string]: {total: number, iterations: number}}}} = {};
data.forEach((run: ITaskData) => {
if (!run.data || !run.data.main) {
return;
}
run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
if (!nodeConnections[i]) {
return;
}
nodeConnections[i]
.map((connection: IConnection) => {
const sourceOutputIndex = i;
const targetNodeName = connection.node;
const targetInputIndex = connection.index;
if (!outputMap[sourceOutputIndex]) {
outputMap[sourceOutputIndex] = {};
}
if (!outputMap[sourceOutputIndex][targetNodeName]) {
outputMap[sourceOutputIndex][targetNodeName] = {};
}
if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
total: 0,
iterations: 0,
};
}
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output ? output.length : 0;
outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
});
});
});
return outputMap;
};
export const resetConnection = (connection: Connection) => {
connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
showOrHideMidpointArrow(connection);
// @ts-ignore
if (connection.canvas) {
// @ts-ignore
(connection.canvas as Element).classList.remove('success');
}
};
export const addConnectionOutputSuccess = (connection: Connection, output: {total: number, iterations: number}) => {
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_SUCCESS);
// @ts-ignore
if (connection.canvas) {
// @ts-ignore
(connection.canvas as Element).classList.add('success');
}
if (connection.getOverlay(OVERLAY_RUN_ITEMS_ID)) {
connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
}
let label = `${output.total}`;
label = output.total > 1 ? `${label} items` : `${label} item`;
label = output.iterations > 1 ? `${label} total` : label;
connection.addOverlay([
'Label',
{
id: OVERLAY_RUN_ITEMS_ID,
label,
cssClass: 'connection-output-items-label',
location: .5,
},
]);
showOrHideItemsLabel(connection);
showOrHideMidpointArrow(connection);
};