admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(editor): Refactor utils files and mixins (#4654)

Browse Source 
* ✨ Added `utils` module. Moved `canvasHelpers` and old `utils.ts` file to it
* ✨ Moved rest of utils and helpers
* ⚡ Fixing sytax errors
* 🔨 Refactoring new utils files
* 🔨 Organizing imports, adding comments and a bit more refactoring
* ✔️ Fixing tests
* 🔨 Moving mixins to `src`
This commit is contained in:
Milorad FIlipović
2022-11-23 13:41:53 +01:00
committed by GitHub
parent 67983e8f94
commit 5059c57f4a
167 changed files with 748 additions and 674 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
packages/editor-ui/src/views/NodeView.vue
View File

@@ -152,19 +152,19 @@ import {
WEBHOOK_NODE_TYPE,
TRIGGER_NODE_FILTER, EnterpriseEditionFeature,
} from '@/constants';
import { copyPaste } from '@/components/mixins/copyPaste';
import { externalHooks } from '@/components/mixins/externalHooks';
import { genericHelpers } from '@/components/mixins/genericHelpers';
import { mouseSelect } from '@/components/mixins/mouseSelect';
import { moveNodeWorkflow } from '@/components/mixins/moveNodeWorkflow';
import { restApi } from '@/components/mixins/restApi';
import { globalLinkActions } from '@/components/mixins/globalLinkActions';
import { showMessage } from '@/components/mixins/showMessage';
import { titleChange } from '@/components/mixins/titleChange';
import { newVersions } from '@/components/mixins/newVersions';
import { copyPaste } from '@/mixins/copyPaste';
import { externalHooks } from '@/mixins/externalHooks';
import { genericHelpers } from '@/mixins/genericHelpers';
import { mouseSelect } from '@/mixins/mouseSelect';
import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
import { restApi } from '@/mixins/restApi';
import { globalLinkActions } from '@/mixins/globalLinkActions';
import { showMessage } from '@/mixins/showMessage';
import { titleChange } from '@/mixins/titleChange';
import { newVersions } from '@/mixins/newVersions';
import { workflowHelpers } from '@/components/mixins/workflowHelpers';
import { workflowRun } from '@/components/mixins/workflowRun';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import { workflowRun } from '@/mixins/workflowRun';
import NodeDetailsView from '@/components/NodeDetailsView.vue';
import Node from '@/components/Node.vue';
@@ -172,7 +172,40 @@ import NodeSettings from '@/components/NodeSettings.vue';
import Sticky from '@/components/Sticky.vue';
import CanvasAddButton from './CanvasAddButton.vue';
import * as CanvasHelpers from './canvasHelpers';
import {
CONNECTOR_ARROW_OVERLAYS,
CONNECTOR_FLOWCHART_TYPE,
CONNECTOR_PAINT_STYLE_DEFAULT,
CONNECTOR_PAINT_STYLE_PRIMARY,
GRID_SIZE,
MAX_X_TO_PUSH_DOWNSTREAM_NODES,
NODE_SIZE,
PUSH_NODES_OFFSET,
WELCOME_STICKY_NODE,
addConnectionActionsOverlay,
addConnectionOutputSuccess,
getAccountAge,
getBackgroundStyles,
getConnectorLengths,
getFixedNodesList,
getMousePosition,
getNewNodePosition,
getNodeViewTab,
getInputEndpointUUID,
getOutputEndpointUUID,
getOutputSummary,
getRunItemsLabel,
hideConnectionActions,
moveBackInputLabelPosition,
showDropConnectionState,
showOrHideMidpointArrow,
showOrHideItemsLabel,
showPullConnectionState,
resetConnection,
resetConnectionAfterPull,
resetInputLabelPosition,
showConnectionActions,
} from '@/utils';
import mixins from 'vue-typed-mixins';
import { v4 as uuid } from 'uuid';
@@ -215,12 +248,10 @@ import {
INodeUpdatePropertiesInformation,
} from '@/Interface';
import { getAccountAge } from '@/stores/userHelpers';
import { debounceHelper } from '@/components/mixins/debounce';
import { debounceHelper } from '@/mixins/debounce';
import { useUIStore } from '@/stores/ui';
import { useSettingsStore } from '@/stores/settings';
import { useUsersStore } from '@/stores/users';
import { getNodeViewTab } from '@/components/helpers';
import { Route, RawLocation } from 'vue-router';
import { nodeViewEventBus } from '@/event-bus/node-view-event-bus';
import { useWorkflowsStore } from '@/stores/workflows';
@@ -457,7 +488,7 @@ export default mixins(
};
},
backgroundStyle(): object {
return CanvasHelpers.getBackgroundStyles(
return getBackgroundStyles(
this.nodeViewScale,
this.uiStore.nodeViewOffsetPosition,
this.isExecutionPreview,
@@ -518,7 +549,7 @@ export default mixins(
},
data() {
return {
GRID_SIZE: CanvasHelpers.GRID_SIZE,
GRID_SIZE,
STICKY_NODE_TYPE,
createNodeActive: false,
lastSelectedConnection: null as null | Connection,
@@ -750,7 +781,7 @@ export default mixins(
throw new Error('Invalid workflow object');
}
this.resetWorkspace();
data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
data.workflow.nodes = getFixedNodesList(data.workflow.nodes);
await this.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
@@ -789,7 +820,7 @@ export default mixins(
return;
}
data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes) as INodeUi[];
data.workflow.nodes = getFixedNodesList(data.workflow.nodes) as INodeUi[];
this.blankRedirect = true;
this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
@@ -1422,7 +1453,7 @@ export default mixins(
// Fix the node position as it could be totally offscreen
// and the pasted nodes would so not be directly visible to
// the user
this.updateNodePositions(workflowData, CanvasHelpers.getNewNodePosition(this.nodes, this.lastClickPosition));
this.updateNodePositions(workflowData, getNewNodePosition(this.nodes, this.lastClickPosition));
const data = await this.addNodesToWorkflow(workflowData);
@@ -1491,8 +1522,8 @@ export default mixins(
this.addNode(nodeTypeName, {
position: [
mousePosition[0] - CanvasHelpers.NODE_SIZE / 2,
mousePosition[1] - CanvasHelpers.NODE_SIZE / 2,
mousePosition[0] - NODE_SIZE / 2,
mousePosition[1] - NODE_SIZE / 2,
],
dragAndDrop: true,
});
@@ -1633,21 +1664,21 @@ export default mixins(
const lastSelectedNode = this.lastSelectedNode;
if (options.position) {
newNodeData.position = CanvasHelpers.getNewNodePosition(this.canvasStore.getNodesWithPlaceholderNode(), options.position);
newNodeData.position = getNewNodePosition(this.canvasStore.getNodesWithPlaceholderNode(), options.position);
} else if (lastSelectedNode) {
const lastSelectedConnection = this.lastSelectedConnection;
if (lastSelectedConnection) { // set when injecting into a connection
const [diffX] = CanvasHelpers.getConnectorLengths(lastSelectedConnection);
if (diffX <= CanvasHelpers.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
this.pushDownstreamNodes(lastSelectedNode.name, CanvasHelpers.PUSH_NODES_OFFSET);
const [diffX] = getConnectorLengths(lastSelectedConnection);
if (diffX <= MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
this.pushDownstreamNodes(lastSelectedNode.name, PUSH_NODES_OFFSET);
}
}
// set when pulling connections
if (this.newNodeInsertPosition) {
newNodeData.position = CanvasHelpers.getNewNodePosition(this.nodes, [
this.newNodeInsertPosition[0] + CanvasHelpers.GRID_SIZE,
this.newNodeInsertPosition[1] - CanvasHelpers.NODE_SIZE / 2,
newNodeData.position = getNewNodePosition(this.nodes, [
this.newNodeInsertPosition[0] + GRID_SIZE,
this.newNodeInsertPosition[1] - NODE_SIZE / 2,
]);
this.newNodeInsertPosition = null;
} else {
@@ -1665,9 +1696,9 @@ export default mixins(
// If a node is active then add the new node directly after the current one
// newNodeData.position = [activeNode.position[0], activeNode.position[1] + 60];
newNodeData.position = CanvasHelpers.getNewNodePosition(
newNodeData.position = getNewNodePosition(
this.nodes,
[lastSelectedNode.position[0] + CanvasHelpers.PUSH_NODES_OFFSET, lastSelectedNode.position[1] + yOffset],
[lastSelectedNode.position[0] + PUSH_NODES_OFFSET, lastSelectedNode.position[1] + yOffset],
[100, 0],
);
}
@@ -1679,7 +1710,7 @@ export default mixins(
// If no node is active find a free spot
: this.lastClickPosition as XYPosition;
newNodeData.position = CanvasHelpers.getNewNodePosition(this.nodes, position);
newNodeData.position = getNewNodePosition(this.nodes, position);
}
@@ -1789,12 +1820,12 @@ export default mixins(
},
initNodeView() {
this.instance.importDefaults({
Connector: CanvasHelpers.CONNECTOR_FLOWCHART_TYPE,
Connector: CONNECTOR_FLOWCHART_TYPE,
Endpoint: ['Dot', { radius: 5 }],
DragOptions: { cursor: 'pointer', zIndex: 5000 },
PaintStyle: CanvasHelpers.CONNECTOR_PAINT_STYLE_DEFAULT,
HoverPaintStyle: CanvasHelpers.CONNECTOR_PAINT_STYLE_PRIMARY,
ConnectionOverlays: CanvasHelpers.CONNECTOR_ARROW_OVERLAYS,
PaintStyle: CONNECTOR_PAINT_STYLE_DEFAULT,
HoverPaintStyle: CONNECTOR_PAINT_STYLE_PRIMARY,
ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
Container: '#node-view',
});
@@ -1890,7 +1921,7 @@ export default mixins(
};
}
CanvasHelpers.resetConnection(info.connection);
resetConnection(info.connection);
if (!this.isReadOnly) {
let exitTimer: NodeJS.Timeout | undefined;
@@ -1910,14 +1941,14 @@ export default mixins(
return;
}
CanvasHelpers.hideConnectionActions(activeConnection);
hideConnectionActions(activeConnection);
enterTimer = setTimeout(() => {
enterTimer = undefined;
if (info.connection) {
activeConnection = info.connection;
CanvasHelpers.showConectionActions(info.connection);
showConnectionActions(info.connection);
}
}, 150);
} catch (e) {
@@ -1944,7 +1975,7 @@ export default mixins(
exitTimer = undefined;
if (info.connection && activeConnection === info.connection) {
CanvasHelpers.hideConnectionActions(activeConnection);
hideConnectionActions(activeConnection);
activeConnection = null;
}
}, 500);
@@ -1953,7 +1984,7 @@ export default mixins(
}
});
CanvasHelpers.addConnectionActionsOverlay(info.connection,
addConnectionActionsOverlay(info.connection,
() => {
activeConnection = null;
this.__deleteJSPlumbConnection(info.connection);
@@ -1970,7 +2001,7 @@ export default mixins(
});
}
CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint);
moveBackInputLabelPosition(info.targetEndpoint);
this.workflowsStore.addConnection({
connection: [
@@ -1998,7 +2029,7 @@ export default mixins(
// calls the "connection" event but not the "connectionDetached" one. So we listen
// additionally to the "connectionMoved" event and then only delete the existing connection.
CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint);
resetInputLabelPosition(info.originalTargetEndpoint);
// @ts-ignore
const sourceInfo = info.originalSourceEndpoint.getParameters();
@@ -2026,7 +2057,7 @@ export default mixins(
this.instance.bind('connectionDetached', (info) => {
try {
CanvasHelpers.resetInputLabelPosition(info.targetEndpoint);
resetInputLabelPosition(info.targetEndpoint);
info.connection.removeOverlays();
this.__removeConnectionByConnectionInfo(info, false);
@@ -2049,7 +2080,7 @@ export default mixins(
this.pullConnActiveNodeName = null;
this.pullConnActive = true;
this.newNodeInsertPosition = null;
CanvasHelpers.resetConnection(connection);
resetConnection(connection);
const nodes = [...document.querySelectorAll('.node-default')];
@@ -2061,14 +2092,14 @@ export default mixins(
const element = document.querySelector('.jtk-endpoint.dropHover');
if (element) {
// @ts-ignore
CanvasHelpers.showDropConnectionState(connection, element._jsPlumb);
showDropConnectionState(connection, element._jsPlumb);
return;
}
const inputMargin = 24;
const intersecting = nodes.find((element: Element) => {
const { top, left, right, bottom } = element.getBoundingClientRect();
const [x, y] = CanvasHelpers.getMousePosition(e);
const [x, y] = getMousePosition(e);
if (top <= y && bottom >= y && (left - inputMargin) <= x && right >= x) {
const nodeName = (element as HTMLElement).dataset['name'] as string;
const node = this.workflowsStore.getNodeByName(nodeName) as INodeUi | null;
@@ -2080,7 +2111,7 @@ export default mixins(
if (endpointUUID) {
const endpoint = this.instance.getEndpoint(endpointUUID);
CanvasHelpers.showDropConnectionState(connection, endpoint);
showDropConnectionState(connection, endpoint);
return true;
}
@@ -2092,7 +2123,7 @@ export default mixins(
});
if (!intersecting) {
CanvasHelpers.showPullConnectionState(connection);
showPullConnectionState(connection);
this.pullConnActiveNodeName = null;
}
};
@@ -2100,7 +2131,7 @@ export default mixins(
const onMouseUp = (e: MouseEvent | TouchEvent) => {
this.pullConnActive = false;
this.newNodeInsertPosition = this.getMousePositionWithinNodeView(e);
CanvasHelpers.resetConnectionAfterPull(connection);
resetConnectionAfterPull(connection);
window.removeEventListener('mousemove', onMouseMove);
window.removeEventListener('mouseup', onMouseUp);
};
@@ -2143,19 +2174,19 @@ export default mixins(
// Inject welcome sticky note and zoom to fit
if (newWorkflow?.onboardingFlowEnabled && !this.isReadOnly) {
const collisionPadding = CanvasHelpers.GRID_SIZE + CanvasHelpers.NODE_SIZE;
const collisionPadding = GRID_SIZE + NODE_SIZE;
// Position the welcome sticky left to the added trigger node
let position: XYPosition = [...(this.triggerNodes[0].position as XYPosition)];
position[0] -= CanvasHelpers.WELCOME_STICKY_NODE.parameters.width + (CanvasHelpers.GRID_SIZE * 4);
position = CanvasHelpers.getNewNodePosition(this.nodes, position, [collisionPadding, collisionPadding]);
position[0] -= WELCOME_STICKY_NODE.parameters.width + (GRID_SIZE * 4);
position = getNewNodePosition(this.nodes, position, [collisionPadding, collisionPadding]);
await this.addNodes([{
id: uuid(),
...CanvasHelpers.WELCOME_STICKY_NODE,
...WELCOME_STICKY_NODE,
parameters: {
// Use parameters from the template but add translated content
...CanvasHelpers.WELCOME_STICKY_NODE.parameters,
...WELCOME_STICKY_NODE.parameters,
content: this.$locale.baseText('onboardingWorkflow.stickyContent'),
},
position,
@@ -2254,7 +2285,7 @@ export default mixins(
return null;
}
return CanvasHelpers.getOutputEndpointUUID(node.id, index);
return getOutputEndpointUUID(node.id, index);
},
getInputEndpointUUID(nodeName: string, index: number) {
const node = this.workflowsStore.getNodeByName(nodeName);
@@ -2262,7 +2293,7 @@ export default mixins(
return null;
}
return CanvasHelpers.getInputEndpointUUID(node.id, index);
return getInputEndpointUUID(node.id, index);
},
__addConnection(connection: [IConnection, IConnection], addVisualConnection = false) {
if (addVisualConnection) {
@@ -2377,7 +2408,7 @@ export default mixins(
type: newNodeData.type,
});
newNodeData.position = CanvasHelpers.getNewNodePosition(
newNodeData.position = getNewNodePosition(
this.nodes,
[node.position[0], node.position[1] + 140],
[0, 140],
@@ -2429,8 +2460,8 @@ export default mixins(
const sourceId = sourceNode.id;
const targetId = targetNode.id;
const sourceEndpoint = CanvasHelpers.getOutputEndpointUUID(sourceId, sourceOutputIndex);
const targetEndpoint = CanvasHelpers.getInputEndpointUUID(targetId, targetInputIndex);
const sourceEndpoint = getOutputEndpointUUID(sourceId, sourceOutputIndex);
const targetEndpoint = getInputEndpointUUID(targetId, targetInputIndex);
// @ts-ignore
const connections = this.instance.getConnections({
@@ -2477,8 +2508,8 @@ export default mixins(
const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
[...incoming, ...outgoing].forEach((connection: Connection) => {
CanvasHelpers.showOrHideMidpointArrow(connection);
CanvasHelpers.showOrHideItemsLabel(connection);
showOrHideMidpointArrow(connection);
showOrHideItemsLabel(connection);
});
},
onNodeRun({ name, data, waiting }: { name: string, data: ITaskData[] | null, waiting: boolean }) {
@@ -2497,7 +2528,7 @@ export default mixins(
}) as Connection[];
outgoing.forEach((connection: Connection) => {
CanvasHelpers.resetConnection(connection);
resetConnection(connection);
});
const endpoints = this.getJSPlumbEndpoints(sourceNodeName);
endpoints.forEach((endpoint: Endpoint) => {
@@ -2511,7 +2542,7 @@ export default mixins(
}
const nodeConnections = this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections || []);
const outputMap = getOutputSummary(data, nodeConnections || []);
Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
@@ -2523,10 +2554,10 @@ export default mixins(
const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
if (!output || !output.total) {
CanvasHelpers.resetConnection(connection);
resetConnection(connection);
}
else {
CanvasHelpers.addConnectionOutputSuccess(connection, output);
addConnectionOutputSuccess(connection, output);
}
}
}
@@ -2535,7 +2566,7 @@ export default mixins(
if (endpoint && endpoint.endpoint) {
const output = outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY][0];
if (output && output.total > 0) {
(endpoint.endpoint as N8nPlusEndpoint).setSuccessOutput(CanvasHelpers.getRunItemsLabel(output));
(endpoint.endpoint as N8nPlusEndpoint).setSuccessOutput(getRunItemsLabel(output));
}
else {
(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
@@ -3206,7 +3237,7 @@ export default mixins(
}) as Connection[];
connections.forEach((connection) => {
CanvasHelpers.addConnectionOutputSuccess(connection, {
addConnectionOutputSuccess(connection, {
total: pinData[nodeName].length,
iterations: 0,
});
@@ -3225,7 +3256,7 @@ export default mixins(
source: node.id,
}) as Connection[];
connections.forEach(CanvasHelpers.resetConnection);
connections.forEach(resetConnection);
});
},
onToggleNodeCreator({ source, createNodeActive }: { source?: string; createNodeActive: boolean }) {