mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(editor): Upgrade to jsPlumb 5 (#4989)

Browse Source 
* WIP: Nodeview

* Replace types

* Finish N8nPlus endpoint type

* Working on connector

* Apply prettier

* Fixed prettier issues

* Debugging rendering

* Fixed connectorrs position recalc

* Fix snapping and output labels, WIP dragging

* Fix N8nPlus endpoint rendering issues

* Cleanup

* Fix undo/redo and canvas add button position, cleanup

* Cleanup

* Revert accidental CLI changes

* Fix pnpm-lock

* Address bugs that came up during review

* Reset CLI package from master

* Various fixes

* Fix run items label toggling

* Linter fixes

* Fix stalk size for larger run items label

* Remove comment

* Correctly reset workspace after renaming the node

* Fix canvas e2e tests

* Fix undo/redo tests

* Fix stalk positioning and triggering of endpoint overlays

* Repaint connections on pin removal

* Limit repaintings

* Unbind jsPlumb events on deactivation

* Fix jsPlumb managment of Sticky and minor memort managment improvments

* Address rest of PR points

* Lint fix

* Copy patches folder to docker

* Fix e2e tests

* set allowNonAppliedPatches to allow build

* fix(editor): Handling router errors when navigation is canceled by user (#5271)

* 🔨 Handling router errors in main sidebar, removing unused code
* 🔨 Handling router errors in modals

* ci(core): Fix docker nightly/custom image build (no-changelog) (#5284)

* ci(core): Copy patches dir to Docker (no-changelog)

* Update patch

* Update package-lock

* reapply the patch

* skip patchedDependencies after the frontend is built

---------

Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

* Fix connector hover state on success

* Remove allowNonAppliedPatches from package.json

---------

Co-authored-by: Milorad FIlipović <milorad@n8n.io>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
This commit is contained in:
OlegIvaniv
2023-01-30 18:20:50 +01:00
committed by GitHub
parent 5cb7e5007d
commit 766501723b
30 changed files with 1756 additions and 2268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor-ui/src/mixins/mouseSelect.ts
View File

@@ -203,12 +203,12 @@ export const mouseSelect = mixins(deviceSupportHelpers).extend({
nodeDeselected(node: INodeUi) {
this.uiStore.removeNodeFromSelection(node);
// @ts-ignore
this.instance.removeFromDragSelection(node.id);
this.instance.removeFromDragSelection(this.$refs[`node-${node.id}`][0].$el);
},
nodeSelected(node: INodeUi) {
this.uiStore.addSelectedNode(node);
// @ts-ignore
this.instance.addToDragSelection(node.id);
this.instance.addToDragSelection(this.$refs[`node-${node.id}`][0].$el);
},
deselectAllNodes() {
// @ts-ignore

210
packages/editor-ui/src/mixins/nodeBase.ts
View File

@@ -1,18 +1,19 @@
import { PropType } from 'vue';
import mixins from 'vue-typed-mixins';
import { IJsPlumbInstance, IEndpointOptions, INodeUi, XYPosition } from '@/Interface';
import { INodeUi } from '@/Interface';
import { deviceSupportHelpers } from '@/mixins/deviceSupportHelpers';
import { NO_OP_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
import { NO_OP_NODE_TYPE } from '@/constants';
import { INodeTypeDescription } from 'n8n-workflow';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui';
import { useWorkflowsStore } from '@/stores/workflows';
import { useNodeTypesStore } from '@/stores/nodeTypes';
import { BrowserJsPlumbInstance } from '@jsplumb/browser-ui';
import { EndpointOptions } from '@jsplumb/core';
import * as NodeViewUtils from '@/utils/nodeViewUtils';
import { getStyleTokenValue } from '@/utils';
import { useHistoryStore } from '@/stores/history';
import { MoveNodeCommand } from '@/models/history';
import { useCanvasStore } from '@/stores/canvas';
export const nodeBase = mixins(deviceSupportHelpers).extend({
mounted() {
@@ -27,7 +28,7 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
}
},
computed: {
...mapStores(useNodeTypesStore, useUIStore, useWorkflowsStore, useHistoryStore),
...mapStores(useNodeTypesStore, useUIStore, useCanvasStore, useWorkflowsStore, useHistoryStore),
data(): INodeUi | null {
return this.workflowsStore.getNodeByName(this.name);
},
@@ -40,7 +41,7 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
type: String,
},
instance: {
type: Object as PropType<IJsPlumbInstance>,
type: Object as PropType<BrowserJsPlumbInstance>,
},
isReadOnly: {
type: Boolean,
@@ -79,18 +80,15 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
const anchorPosition =
NodeViewUtils.ANCHOR_POSITIONS.input[nodeTypeData.inputs.length][index];
const newEndpointData: IEndpointOptions = {
const newEndpointData: EndpointOptions = {
uuid: NodeViewUtils.getInputEndpointUUID(this.nodeId, index),
anchor: anchorPosition,
maxConnections: -1,
endpoint: 'Rectangle',
endpointStyle: NodeViewUtils.getInputEndpointStyle(
nodeTypeData,
'--color-foreground-xdark',
),
endpointHoverStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-primary'),
isSource: false,
isTarget: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
paintStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-foreground-xdark'),
hoverPaintStyle: NodeViewUtils.getInputEndpointStyle(nodeTypeData, '--color-primary'),
source: false,
target: !this.isReadOnly && nodeTypeData.inputs.length > 1, // only enabled for nodes with multiple inputs.. otherwise attachment handled by connectionDrag event in NodeView,
parameters: {
nodeId: this.nodeId,
type: inputName,
@@ -99,20 +97,17 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
enabled: !this.isReadOnly, // enabled in default case to allow dragging
cssClass: 'rect-input-endpoint',
dragAllowedWhenFull: true,
dropOptions: {
tolerance: 'touch',
hoverClass: 'dropHover',
},
hoverClass: 'dropHover',
};
const endpoint = this.instance?.addEndpoint(
this.$refs[this.data.name] as Element,
newEndpointData,
);
if (nodeTypeData.inputNames) {
// Apply input names if they got set
newEndpointData.overlays = [
NodeViewUtils.getInputNameOverlay(nodeTypeData.inputNames[index]),
];
endpoint.addOverlay(NodeViewUtils.getInputNameOverlay(nodeTypeData.inputNames[index]));
}
const endpoint = this.instance.addEndpoint(this.nodeId, newEndpointData);
if (!Array.isArray(endpoint)) {
endpoint.__meta = {
nodeName: node.name,
@@ -133,6 +128,9 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
// this.instance.makeTarget(this.nodeId, newEndpointData);
// }
});
if (nodeTypeData.inputs.length === 0) {
this.instance.manage(this.$refs[this.data.name] as Element);
}
},
__addOutputEndpoints(node: INodeUi, nodeTypeData: INodeTypeDescription) {
let index;
@@ -153,37 +151,46 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
const anchorPosition =
NodeViewUtils.ANCHOR_POSITIONS.output[nodeTypeData.outputs.length][index];
const newEndpointData: IEndpointOptions = {
const newEndpointData: EndpointOptions = {
uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
anchor: anchorPosition,
maxConnections: -1,
endpoint: 'Dot',
endpointStyle: NodeViewUtils.getOutputEndpointStyle(
endpoint: {
type: 'Dot',
options: {
radius: nodeTypeData && nodeTypeData.outputs.length > 2 ? 7 : 9,
},
},
paintStyle: NodeViewUtils.getOutputEndpointStyle(
nodeTypeData,
'--color-foreground-xdark',
),
endpointHoverStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-primary'),
isSource: true,
isTarget: false,
hoverPaintStyle: NodeViewUtils.getOutputEndpointStyle(nodeTypeData, '--color-primary'),
source: true,
target: false,
enabled: !this.isReadOnly,
parameters: {
nodeId: this.nodeId,
type: inputName,
index,
},
hoverClass: 'dot-output-endpoint-hover',
connectionsDirected: true,
cssClass: 'dot-output-endpoint',
dragAllowedWhenFull: false,
dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }],
};
const endpoint = this.instance.addEndpoint(
this.$refs[this.data.name] as Element,
newEndpointData,
);
if (nodeTypeData.outputNames) {
// Apply output names if they got set
newEndpointData.overlays = [
NodeViewUtils.getOutputNameOverlay(nodeTypeData.outputNames[index]),
];
const overlaySpec = NodeViewUtils.getOutputNameOverlay(nodeTypeData.outputNames[index]);
const overlay = endpoint.addOverlay(overlaySpec);
}
const endpoint = this.instance.addEndpoint(this.nodeId, { ...newEndpointData });
if (!Array.isArray(endpoint)) {
endpoint.__meta = {
nodeName: node.name,
@@ -194,26 +201,28 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
}
if (!this.isReadOnly) {
const plusEndpointData: IEndpointOptions = {
const plusEndpointData: EndpointOptions = {
uuid: NodeViewUtils.getOutputEndpointUUID(this.nodeId, index),
anchor: anchorPosition,
maxConnections: -1,
endpoint: 'N8nPlus',
isSource: true,
isTarget: false,
enabled: !this.isReadOnly,
endpointStyle: {
fill: getStyleTokenValue('--color-xdark'),
outlineStroke: 'none',
hover: false,
showOutputLabel: nodeTypeData.outputs.length === 1,
size: nodeTypeData.outputs.length >= 3 ? 'small' : 'medium',
hoverMessage: this.$locale.baseText('nodeBase.clickToAddNodeOrDragToConnect'),
endpoint: {
type: 'N8nPlus',
options: {
dimensions: 24,
connectedEndpoint: endpoint,
showOutputLabel: nodeTypeData.outputs.length === 1,
size: nodeTypeData.outputs.length >= 3 ? 'small' : 'medium',
hoverMessage: this.$locale.baseText('nodeBase.clickToAddNodeOrDragToConnect'),
},
},
endpointHoverStyle: {
fill: getStyleTokenValue('--color-primary'),
source: true,
target: false,
enabled: !this.isReadOnly,
paintStyle: {
outlineStroke: 'none',
},
hoverPaintStyle: {
outlineStroke: 'none',
hover: true, // hack to distinguish hover state
},
parameters: {
nodeId: this.nodeId,
@@ -222,10 +231,12 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
},
cssClass: 'plus-draggable-endpoint',
dragAllowedWhenFull: false,
dragProxy: ['Rectangle', { width: 1, height: 1, strokeWidth: 0 }],
};
const plusEndpoint = this.instance.addEndpoint(
this.$refs[this.data.name] as Element,
plusEndpointData,
);
const plusEndpoint = this.instance.addEndpoint(this.nodeId, plusEndpointData);
if (!Array.isArray(plusEndpoint)) {
plusEndpoint.__meta = {
nodeName: node.name,
@@ -237,105 +248,12 @@ export const nodeBase = mixins(deviceSupportHelpers).extend({
}
});
},
__makeInstanceDraggable(node: INodeUi) {
// TODO: This caused problems with displaying old information
// https://github.com/jsplumb/katavorio/wiki
// https://jsplumb.github.io/jsplumb/home.html
// Make nodes draggable
this.instance.draggable(this.nodeId, {
grid: [NodeViewUtils.GRID_SIZE, NodeViewUtils.GRID_SIZE],
start: (params: { e: MouseEvent }) => {
if (this.isReadOnly === true) {
// Do not allow to move nodes in readOnly mode
return false;
}
// @ts-ignore
this.dragging = true;
const isSelected = this.uiStore.isNodeSelected(this.data.name);
const nodeName = this.data.name;
if (this.data.type === STICKY_NODE_TYPE && !isSelected) {
setTimeout(() => {
this.$emit('nodeSelected', nodeName, false, true);
}, 0);
}
if (params.e && !isSelected) {
// Only the node which gets dragged directly gets an event, for all others it is
// undefined. So check if the currently dragged node is selected and if not clear
// the drag-selection.
this.instance.clearDragSelection();
this.uiStore.resetSelectedNodes();
}
this.uiStore.addActiveAction('dragActive');
return true;
},
stop: (params: { e: MouseEvent }) => {
// @ts-ignore
this.dragging = false;
if (this.uiStore.isActionActive('dragActive')) {
const moveNodes = this.uiStore.getSelectedNodes.slice();
const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name);
if (!selectedNodeNames.includes(this.data.name)) {
// If the current node is not in selected add it to the nodes which
// got moved manually
moveNodes.push(this.data);
}
if (moveNodes.length > 1) {
this.historyStore.startRecordingUndo();
}
// This does for some reason just get called once for the node that got clicked
// even though "start" and "drag" gets called for all. So lets do for now
// some dirty DOM query to get the new positions till I have more time to
// create a proper solution
let newNodePosition: XYPosition;
moveNodes.forEach((node: INodeUi) => {
const element = document.getElementById(node.id);
if (element === null) {
return;
}
newNodePosition = [
parseInt(element.style.left!.slice(0, -2), 10),
parseInt(element.style.top!.slice(0, -2), 10),
];
const updateInformation = {
name: node.name,
properties: {
// @ts-ignore, draggable does not have definitions
position: newNodePosition,
},
};
const oldPosition = node.position;
if (oldPosition[0] !== newNodePosition[0] || oldPosition[1] !== newNodePosition[1]) {
this.historyStore.pushCommandToUndo(
new MoveNodeCommand(node.name, oldPosition, newNodePosition, this),
);
this.workflowsStore.updateNodeProperties(updateInformation);
this.$emit('moved', node);
}
});
if (moveNodes.length > 1) {
this.historyStore.stopRecordingUndo();
}
}
},
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',
});
},
__addNode(node: INodeUi) {
let nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
if (!nodeTypeData) {
// If node type is not know use by default the base.noOp data to display it
nodeTypeData = this.nodeTypesStore.getNodeType(NO_OP_NODE_TYPE);
}
const nodeTypeData = (this.nodeTypesStore.getNodeType(node.type, node.typeVersion) ??
this.nodeTypesStore.getNodeType(NO_OP_NODE_TYPE)) as INodeTypeDescription;
this.__addInputEndpoints(node, nodeTypeData);
this.__addOutputEndpoints(node, nodeTypeData);
this.__makeInstanceDraggable(node);
},
touchEnd(e: MouseEvent) {
if (this.isTouchDevice) {

2
packages/editor-ui/src/mixins/nodeHelpers.ts
View File

@@ -505,7 +505,7 @@ export const nodeHelpers = mixins(restApi).extend({
this.updateNodeCredentialIssues(node);
if (trackHistory) {
this.historyStore.pushCommandToUndo(
new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true, this),
new EnableNodeToggleCommand(node.name, oldState === true, node.disabled === true),
);
}
}