mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update overrides for connectors

Browse source
This commit is contained in:
Mutasem 2021-11-04 13:26:39 +01:00
parent 15a910c5cb
commit 04cef86f7d
4 changed files with 42 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -43,8 +43,8 @@ declare module 'jsplumb' {
targetOutputIndex: number, targetOutputIndex: number,
}; };
connector?: { connector?: {
setTargetPos: (pos: XYPosition) => void; setTargetEndpoint: (endpoint: Endpoint) => void;
resetTargetPos: () => void; resetTargetEndpoint: () => void;
bounds: { bounds: {
minX: number; minX: number;
maxX: number; maxX: number;

32
packages/editor-ui/src/plugins/N8nFlowchartType.js
View file

@ -205,23 +205,33 @@
return totalLength; return totalLength;
}; };
this.setTargetPos = function (pos) { this.setTargetEndpoint = function (endpoint) {
this.overrideTargetPos = pos; this.overrideTargetEndpoint = endpoint;
}; };
this.resetTargetPos = function () { this.resetTargetEndpoint = function () {
this.overrideTargetPos = null; this.overrideTargetEndpoint = null;
}; };
var _prepareCompute = function (params) { var _prepareCompute = function (params) {
let { targetPos, targetEndpoint } = params;
// if has override, use override
if (
this.overrideTargetEndpoint
) {
const target = this.overrideTargetEndpoint.anchor.lastReturnValue;
targetPos = [target[0], target[1]];
targetEndpoint = this.overrideTargetEndpoint;
}
this.strokeWidth = params.strokeWidth; this.strokeWidth = params.strokeWidth;
const targetPos = this.overrideTargetPos || params.targetPos;
var segment = _jg.quadrant(params.sourcePos, targetPos), var segment = _jg.quadrant(params.sourcePos, targetPos),
swapX = targetPos[0] < params.sourcePos[0], swapX = targetPos[0] < params.sourcePos[0],
swapY = targetPos[1] < params.sourcePos[1], swapY = targetPos[1] < params.sourcePos[1],
lw = params.strokeWidth || 1, lw = params.strokeWidth || 1,
so = params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint), so = params.sourceEndpoint.anchor.getOrientation(params.sourceEndpoint),
to = params.targetEndpoint.anchor.getOrientation(params.targetEndpoint), to = targetEndpoint.anchor.getOrientation(targetEndpoint),
x = swapX ? targetPos[0] : params.sourcePos[0], x = swapX ? targetPos[0] : params.sourcePos[0],
y = swapY ? targetPos[1] : params.sourcePos[1], y = swapY ? targetPos[1] : params.sourcePos[1],
w = Math.abs(targetPos[0] - params.sourcePos[0]), w = Math.abs(targetPos[0] - params.sourcePos[0]),
@ -231,13 +241,11 @@
// positions. we fix the axis to be the one in which the two elements are further apart, and // positions. we fix the axis to be the one in which the two elements are further apart, and
// point each anchor at the other element. this is also used when dragging a new connection. // point each anchor at the other element. this is also used when dragging a new connection.
if (so[0] === 0 && so[1] === 0 || to[0] === 0 && to[1] === 0) { if (so[0] === 0 && so[1] === 0 || to[0] === 0 && to[1] === 0) {
// var index = w > h ? 0 : 1, oIndex = [1, 0][index]; var index = w > h ? 0 : 1, oIndex = [1, 0][index];
const index = 0, // always use horizontal axis to determine orientation
oIndex = 1;
so = []; so = [];
to = []; to = [];
so[index] = 1; //params.sourcePos[index] > targetPos[index] ? -1 : 1; // always default to orienting right so[index] = params.sourcePos[index] > targetPos[index] ? -1 : 1;
to[index] = -1;//params.sourcePos[index] > targetPos[index] ? 1 : -1; // always default to orienting left to[index] = params.sourcePos[index] > targetPos[index] ? 1 : -1;
so[oIndex] = 0; so[oIndex] = 0;
to[oIndex] = 0; to[oIndex] = 0;
} }
@ -249,7 +257,7 @@
oProduct = ((so[0] * to[0]) + (so[1] * to[1])); oProduct = ((so[0] * to[0]) + (so[1] * to[1]));
const sourceStubWithOffset = sourceStub + (getEndpointOffset && params.sourceEndpoint ? getEndpointOffset(params.sourceEndpoint) : 0); const sourceStubWithOffset = sourceStub + (getEndpointOffset && params.sourceEndpoint ? getEndpointOffset(params.sourceEndpoint) : 0);
const targetStubWithOffset = targetStub + (getEndpointOffset && params.targetEndpoint ? getEndpointOffset(params.targetEndpoint) : 0); const targetStubWithOffset = targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(params.targetEndpoint) : 0);
var result = { var result = {
sx: sx, sy: sy, tx: tx, ty: ty, lw: lw, sx: sx, sy: sy, tx: tx, ty: ty, lw: lw,

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

@ -108,7 +108,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { import {
Connection, Connection, Endpoint,
} from 'jsplumb'; } from 'jsplumb';
import { MessageBoxInputData } from 'element-ui/types/message-box'; import { MessageBoxInputData } from 'element-ui/types/message-box';
import { jsPlumb, OnConnectionBindInfo } from 'jsplumb'; import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
@ -1481,11 +1481,8 @@ export default mixins(
const element = document.querySelector('.jtk-endpoint.dropHover'); const element = document.querySelector('.jtk-endpoint.dropHover');
if (element) { if (element) {
const {top, left, right, bottom} = element.getBoundingClientRect(); // @ts-ignore
const x = left + (right - left) / 2; CanvasHelpers.showDropConnectionState(connection, element._jsPlumb);
const y = top + (bottom - top) / 2;
const pos = CanvasHelpers.getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
CanvasHelpers.showDropConnectionState(connection, pos);
return; return;
} }
@ -1493,17 +1490,15 @@ export default mixins(
const intersecting = nodes.find((element: Element) => { const intersecting = nodes.find((element: Element) => {
const {top, left, right, bottom} = element.getBoundingClientRect(); const {top, left, right, bottom} = element.getBoundingClientRect();
if (top <= e.pageY && bottom >= e.pageY && (left - inputMargin) <= e.pageX && right >= e.pageX) { if (top <= e.pageY && bottom >= e.pageY && (left - inputMargin) <= e.pageX && right >= e.pageX) {
const nodeName = (element as HTMLElement).dataset['name']; const nodeName = (element as HTMLElement).dataset['name'] as string;
const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null; const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
if (node) { if (node) {
const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription; const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription;
if (nodeType.inputs.length === 1) { if (nodeType.inputs.length === 1) {
this.pullConnActiveNodeName = node.name; this.pullConnActiveNodeName = node.name;
const endpoint = this.instance.getEndpoint(this.getInputEndpointUUID(nodeName, 0));
const x = left + 1; CanvasHelpers.showDropConnectionState(connection, endpoint);
const y = top + (bottom - top) / 2;
const pos = CanvasHelpers.getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
CanvasHelpers.showDropConnectionState(connection, pos);
return true; return true;
} }
@ -1608,11 +1603,17 @@ export default mixins(
} }
}); });
}, },
getOutputEndpointUUID(nodeName: string, index: number) {
return `${this.getNodeIndex(nodeName)}-output${index}`;
},
getInputEndpointUUID(nodeName: string, index: number) {
return `${this.getNodeIndex(nodeName)}-input${index}`;
},
__addConnection (connection: [IConnection, IConnection], addVisualConnection = false) { __addConnection (connection: [IConnection, IConnection], addVisualConnection = false) {
if (addVisualConnection === true) { if (addVisualConnection === true) {
const uuid: [string, string] = [ const uuid: [string, string] = [
`${this.getNodeIndex(connection[0].node)}-output${connection[0].index}`, this.getOutputEndpointUUID(connection[0].node, connection[0].index),
`${this.getNodeIndex(connection[1].node)}-input${connection[1].index}`, this.getInputEndpointUUID(connection[1].node, connection[1].index),
]; ];
// Create connections in DOM // Create connections in DOM

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

@ -541,9 +541,11 @@ export const getUniqueNodeName = (nodes: INodeUi[], originalName: string, additi
return uniqueName; return uniqueName;
}; };
export const showDropConnectionState = (connection: Connection, targetPos: XYPosition) => { export const showDropConnectionState = (connection: Connection, targetEndpoint?: Endpoint) => {
if (connection && connection.connector) { if (connection && connection.connector) {
connection.connector.setTargetPos(targetPos); if (targetEndpoint) {
connection.connector.setTargetEndpoint(targetEndpoint);
}
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PRIMARY); connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PRIMARY);
hideOverlay(connection, OVERLAY_DROP_NODE_ID); hideOverlay(connection, OVERLAY_DROP_NODE_ID);
showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID); showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
@ -552,7 +554,7 @@ export const showDropConnectionState = (connection: Connection, targetPos: XYPos
export const showPullConnectionState = (connection: Connection) => { export const showPullConnectionState = (connection: Connection) => {
if (connection && connection.connector) { if (connection && connection.connector) {
connection.connector.resetTargetPos(); connection.connector.resetTargetEndpoint();
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT); connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
showOverlay(connection, OVERLAY_DROP_NODE_ID); showOverlay(connection, OVERLAY_DROP_NODE_ID);
hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID); hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
@ -561,7 +563,7 @@ export const showPullConnectionState = (connection: Connection) => {
export const resetConnectionAfterPull = (connection: Connection) => { export const resetConnectionAfterPull = (connection: Connection) => {
if (connection && connection.connector) { if (connection && connection.connector) {
connection.connector.resetTargetPos(); connection.connector.resetTargetEndpoint();
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT); connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID); showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
} }