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

only delete target connection, add maximum to push nodes out

Browse source
This commit is contained in:
Mutasem 2021-10-21 14:23:15 +02:00
parent 6ebef7aafa
commit d5198e3971
5 changed files with 65 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/editor-ui/src/Interface.ts
View file

@ -44,6 +44,7 @@ declare module 'jsplumb' {
setPaintStyle(arg0: PaintStyle): void; setPaintStyle(arg0: PaintStyle): void;
addOverlay(arg0: any[]): void; // tslint:disable-line:no-any addOverlay(arg0: any[]): void; // tslint:disable-line:no-any
setConnector(arg0: any[]): void; // tslint:disable-line:no-any setConnector(arg0: any[]): void; // tslint:disable-line:no-any
getUuids(): [string, string];
} }
interface Endpoint { interface Endpoint {

2
packages/editor-ui/src/components/mixins/mouseSelect.ts
View file

@ -195,6 +195,8 @@ export const mouseSelect = mixins(
this.$store.commit('setLastSelectedNode', null); this.$store.commit('setLastSelectedNode', null);
this.$store.commit('setLastSelectedNodeOutputIndex', null); this.$store.commit('setLastSelectedNodeOutputIndex', null);
this.$store.commit('setActiveNode', null); this.$store.commit('setActiveNode', null);
// @ts-ignore
this.lastSelectedConnction = null;
}, },
}, },
}); });

2
packages/editor-ui/src/components/mixins/nodeBase.ts
View file

@ -33,7 +33,7 @@ export const nodeBase = mixins(
return this.$store.getters.getNodeIndex(this.data.name).toString(); return this.$store.getters.getNodeIndex(this.data.name).toString();
}, },
nodePosition (): object { nodePosition (): object {
const node = this.$store.getters.nodesByName[this.name]; const node = this.$store.getters.nodesByName[this.name]; // position responsive to store changes
const returnStyles: { const returnStyles: {
[key: string]: string; [key: string]: string;
} = { } = {

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

@ -135,7 +135,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
import NodeSettings from '@/components/NodeSettings.vue'; import NodeSettings from '@/components/NodeSettings.vue';
import RunData from '@/components/RunData.vue'; import RunData from '@/components/RunData.vue';
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 { 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, getConnectorLengths } from './canvasHelpers';
import mixins from 'vue-typed-mixins'; import mixins from 'vue-typed-mixins';
import { v4 as uuidv4} from 'uuid'; import { v4 as uuidv4} from 'uuid';
@ -278,6 +278,8 @@ const CONNECTOR_DROP_NODE_OVERLAY: OverlaySpec[] = [
], ],
]; ];
const MINIMUM_X_TO_PUSH_DOWNSTREAM_NODES = 500;
const addOverlays = (connection: Connection, overlays: OverlaySpec[]) => { const addOverlays = (connection: Connection, overlays: OverlaySpec[]) => {
overlays.forEach((overlay: OverlaySpec) => { overlays.forEach((overlay: OverlaySpec) => {
connection.addOverlay(overlay); connection.addOverlay(overlay);
@ -421,6 +423,7 @@ export default mixins(
return { return {
createNodeActive: false, createNodeActive: false,
instance: jsPlumb.getInstance(), instance: jsPlumb.getInstance(),
lastSelectedConnection: null as null | Connection,
lastClickPosition: [450, 450] as XYPositon, lastClickPosition: [450, 450] as XYPositon,
nodeViewScale: 1, nodeViewScale: 1,
ctrlKeyPressed: false, ctrlKeyPressed: false,
@ -933,13 +936,31 @@ export default mixins(
this.nodeSelectedByName(lastSelectedNode.name); this.nodeSelectedByName(lastSelectedNode.name);
}, },
pushDownstreamNodes (margin: number) { // getJSPlumbConnection (sourceNodeName: string, targetNodeName: string, sourceOutputIndex: number, targetInputIndex: number): Connection | undefined {
const lastSelectedNode = this.lastSelectedNode; // const sourceIndex = this.getNodeIndex(sourceNodeName);
if (lastSelectedNode === null) { // const sourceId = `${NODE_NAME_PREFIX}${sourceIndex}`;
return;
} // const targetIndex = this.getNodeIndex(targetNodeName);
// const targetId = `${NODE_NAME_PREFIX}${targetIndex}`;
// const sourceEndpoint = `${sourceIndex}-output${sourceOutputIndex}`;
// const targetEndpoint = `${targetIndex}-input${targetInputIndex}`;
// // @ts-ignore
// const connections = this.instance.getConnections({
// source: sourceId,
// target: targetId,
// }) as Connection[];
// return connections.find((connection: Connection) => {
// const uuids = connection.getUuids();
// return uuids[0] === sourceEndpoint && uuids[1] === targetEndpoint;
// });
// },
pushDownstreamNodes (sourceNodeName: string, margin: number) {
const workflow = this.getWorkflow(); const workflow = this.getWorkflow();
for (const nodeName of workflow.getChildNodes(lastSelectedNode.name)) { for (const nodeName of workflow.getChildNodes(sourceNodeName)) {
const node = this.$store.getters.nodesByName[nodeName] as INodeUi; const node = this.$store.getters.nodesByName[nodeName] as INodeUi;
const updateInformation = { const updateInformation = {
name: nodeName, name: nodeName,
@ -949,6 +970,7 @@ export default mixins(
}; };
this.$store.commit('updateNodeProperties', updateInformation); this.$store.commit('updateNodeProperties', updateInformation);
this.onNodeMoved(node);
} }
}, },
@ -1227,6 +1249,7 @@ export default mixins(
this.$store.commit('setLastSelectedNode', node.name); this.$store.commit('setLastSelectedNode', node.name);
this.$store.commit('setLastSelectedNodeOutputIndex', null); this.$store.commit('setLastSelectedNodeOutputIndex', null);
this.lastSelectedConnection = null;
if (setActive === true) { if (setActive === true) {
this.$store.commit('setActiveNode', node.name); this.$store.commit('setActiveNode', node.name);
@ -1315,7 +1338,14 @@ export default mixins(
const lastSelectedNode = this.lastSelectedNode; const lastSelectedNode = this.lastSelectedNode;
const lastSelectedNodeOutputIndex = this.$store.getters.lastSelectedNodeOutputIndex; const lastSelectedNodeOutputIndex = this.$store.getters.lastSelectedNodeOutputIndex;
if (lastSelectedNode) { if (lastSelectedNode) {
this.pushDownstreamNodes(_PUSH_NODES_LENGTH); const lastSelectedConnection = this.lastSelectedConnection;
if (lastSelectedConnection) {
const [diffX] = getConnectorLengths(lastSelectedConnection);
if (diffX <= MINIMUM_X_TO_PUSH_DOWNSTREAM_NODES) {
this.pushDownstreamNodes(lastSelectedNode.name, _PUSH_NODES_LENGTH);
}
}
// If a node is active then add the new node directly after the current one // 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 = [activeNode.position[0], activeNode.position[1] + 60];
newNodeData.position = getNewNodePosition( newNodeData.position = getNewNodePosition(
@ -1423,15 +1453,18 @@ export default mixins(
Container: '#node-view', Container: '#node-view',
}); });
const insertNodeAfterSelected = (info: {sourceId: string, index: number, eventSource: string}) => { const insertNodeAfterSelected = (info: {sourceId: string, index: number, eventSource: string, connection?: Connection}) => {
// Get the node and set it as active that new nodes // Get the node and set it as active that new nodes
// which get created get automatically connected // which get created get automatically connected
// to it. // to it.
const sourceNodeName = this.$store.getters.getNodeNameByIndex(info.sourceId.slice(NODE_NAME_PREFIX.length)); const sourceNodeName = this.$store.getters.getNodeNameByIndex(info.sourceId.slice(NODE_NAME_PREFIX.length));
this.$store.commit('setLastSelectedNode', sourceNodeName); this.$store.commit('setLastSelectedNode', sourceNodeName);
this.$store.commit('setLastSelectedNodeOutputIndex', info.index); this.$store.commit('setLastSelectedNodeOutputIndex', info.index);
if (info.connection) {
this.lastSelectedConnection = info.connection;
}
this.openNodeCreator(info.eventSource); this.openNodeCreator(info.eventSource);
}; };
@ -1457,9 +1490,6 @@ export default mixins(
const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex); const sourceNodeName = this.$store.getters.getNodeNameByIndex(sourceInfo.nodeIndex);
const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex); const targetNodeName = this.$store.getters.getNodeNameByIndex(targetInfo.nodeIndex);
const sourceNode = this.$store.getters.getNodeByName(sourceNodeName);
const targetNode = this.$store.getters.getNodeByName(targetNodeName);
info.connection.removeOverlay(OVERLAY_DROP_NODE_ID); info.connection.removeOverlay(OVERLAY_DROP_NODE_ID);
if (this.isReadOnly === false) { if (this.isReadOnly === false) {
@ -1500,13 +1530,14 @@ export default mixins(
mousedown: (overlay: Overlay, event: MouseEvent) => { mousedown: (overlay: Overlay, event: MouseEvent) => {
const element = event.target as HTMLElement; const element = event.target as HTMLElement;
if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) { if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) {
this.__removeConnectionByConnectionInfo(info, true); this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
} }
if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) { else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) {
setTimeout(() => { setTimeout(() => {
insertNodeAfterSelected({ insertNodeAfterSelected({
sourceId: info.sourceId, sourceId: info.sourceId,
index: sourceInfo.index, index: sourceInfo.index,
connection: info.connection,
eventSource: 'node_connection_action', eventSource: 'node_connection_action',
}); });
}, 150); }, 150);
@ -1764,7 +1795,11 @@ export default mixins(
}, },
] as [IConnection, IConnection]; ] as [IConnection, IConnection];
this.__removeConnection(connectionInfo, removeVisualConnection); if (removeVisualConnection) {
this.instance.deleteConnection(info.connection);
}
this.$store.commit('removeConnection', { connection: connectionInfo });
}, },
async duplicateNode (nodeName: string) { async duplicateNode (nodeName: string) {
if (this.editAllowedCheck() === false) { if (this.editAllowedCheck() === false) {

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

@ -129,16 +129,22 @@ export const showOrHideMidpointArrow = (connection: Connection) => {
} }
}; };
export const getConnectorLengths = (connection: Connection): [number, number] => {
// @ts-ignore
const bounds = connection.connector.bounds;
const diffX = Math.abs(bounds.maxX - bounds.minX);
const diffY = Math.abs(bounds.maxY - bounds.minY);
return [diffX, diffY];
};
export const showOrHideItemsLabel = (connection: Connection) => { export const showOrHideItemsLabel = (connection: Connection) => {
const overlay = connection.getOverlay(OVERLAY_RUN_ITEMS_ID); const overlay = connection.getOverlay(OVERLAY_RUN_ITEMS_ID);
if (!overlay) { if (!overlay) {
return; return;
} }
// @ts-ignore const [diffX, diffY] = getConnectorLengths(connection);
const bounds = connection.connector.bounds;
const diffX = Math.abs(bounds.maxX - bounds.minX);
const diffY = Math.abs(bounds.maxY - bounds.minY);
if (diffX < _MIN_X_TO_SHOW_OUTPUT_LABEL && diffY < _MIN_Y_TO_SHOW_OUTPUT_LABEL) { if (diffX < _MIN_X_TO_SHOW_OUTPUT_LABEL && diffY < _MIN_Y_TO_SHOW_OUTPUT_LABEL) {
overlay.setVisible(false); overlay.setVisible(false);