mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
update overrides for connectors
This commit is contained in:
parent
15a910c5cb
commit
04cef86f7d
|
@ -43,8 +43,8 @@ declare module 'jsplumb' {
|
|||
targetOutputIndex: number,
|
||||
};
|
||||
connector?: {
|
||||
setTargetPos: (pos: XYPosition) => void;
|
||||
resetTargetPos: () => void;
|
||||
setTargetEndpoint: (endpoint: Endpoint) => void;
|
||||
resetTargetEndpoint: () => void;
|
||||
bounds: {
|
||||
minX: number;
|
||||
maxX: number;
|
||||
|
|
|
@ -205,23 +205,33 @@
|
|||
return totalLength;
|
||||
};
|
||||
|
||||
this.setTargetPos = function (pos) {
|
||||
this.overrideTargetPos = pos;
|
||||
this.setTargetEndpoint = function (endpoint) {
|
||||
this.overrideTargetEndpoint = endpoint;
|
||||
};
|
||||
|
||||
this.resetTargetPos = function () {
|
||||
this.overrideTargetPos = null;
|
||||
this.resetTargetEndpoint = function () {
|
||||
this.overrideTargetEndpoint = null;
|
||||
};
|
||||
|
||||
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;
|
||||
const targetPos = this.overrideTargetPos || params.targetPos;
|
||||
var segment = _jg.quadrant(params.sourcePos, targetPos),
|
||||
swapX = targetPos[0] < params.sourcePos[0],
|
||||
swapY = targetPos[1] < params.sourcePos[1],
|
||||
lw = params.strokeWidth || 1,
|
||||
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],
|
||||
y = swapY ? targetPos[1] : params.sourcePos[1],
|
||||
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
|
||||
// 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) {
|
||||
// var index = w > h ? 0 : 1, oIndex = [1, 0][index];
|
||||
const index = 0, // always use horizontal axis to determine orientation
|
||||
oIndex = 1;
|
||||
var index = w > h ? 0 : 1, oIndex = [1, 0][index];
|
||||
so = [];
|
||||
to = [];
|
||||
so[index] = 1; //params.sourcePos[index] > targetPos[index] ? -1 : 1; // always default to orienting right
|
||||
to[index] = -1;//params.sourcePos[index] > targetPos[index] ? 1 : -1; // always default to orienting left
|
||||
so[index] = params.sourcePos[index] > targetPos[index] ? -1 : 1;
|
||||
to[index] = params.sourcePos[index] > targetPos[index] ? 1 : -1;
|
||||
so[oIndex] = 0;
|
||||
to[oIndex] = 0;
|
||||
}
|
||||
|
@ -249,7 +257,7 @@
|
|||
oProduct = ((so[0] * to[0]) + (so[1] * to[1]));
|
||||
|
||||
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 = {
|
||||
sx: sx, sy: sy, tx: tx, ty: ty, lw: lw,
|
||||
|
|
|
@ -108,7 +108,7 @@
|
|||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import {
|
||||
Connection,
|
||||
Connection, Endpoint,
|
||||
} from 'jsplumb';
|
||||
import { MessageBoxInputData } from 'element-ui/types/message-box';
|
||||
import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
|
||||
|
@ -1481,11 +1481,8 @@ export default mixins(
|
|||
|
||||
const element = document.querySelector('.jtk-endpoint.dropHover');
|
||||
if (element) {
|
||||
const {top, left, right, bottom} = element.getBoundingClientRect();
|
||||
const x = left + (right - left) / 2;
|
||||
const y = top + (bottom - top) / 2;
|
||||
const pos = CanvasHelpers.getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
|
||||
CanvasHelpers.showDropConnectionState(connection, pos);
|
||||
// @ts-ignore
|
||||
CanvasHelpers.showDropConnectionState(connection, element._jsPlumb);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -1493,17 +1490,15 @@ export default mixins(
|
|||
const intersecting = nodes.find((element: Element) => {
|
||||
const {top, left, right, bottom} = element.getBoundingClientRect();
|
||||
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;
|
||||
if (node) {
|
||||
const nodeType = this.$store.getters.nodeType(node.type) as INodeTypeDescription;
|
||||
if (nodeType.inputs.length === 1) {
|
||||
this.pullConnActiveNodeName = node.name;
|
||||
const endpoint = this.instance.getEndpoint(this.getInputEndpointUUID(nodeName, 0));
|
||||
|
||||
const x = left + 1;
|
||||
const y = top + (bottom - top) / 2;
|
||||
const pos = CanvasHelpers.getRelativePosition(x, y, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
|
||||
CanvasHelpers.showDropConnectionState(connection, pos);
|
||||
CanvasHelpers.showDropConnectionState(connection, endpoint);
|
||||
|
||||
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) {
|
||||
if (addVisualConnection === true) {
|
||||
const uuid: [string, string] = [
|
||||
`${this.getNodeIndex(connection[0].node)}-output${connection[0].index}`,
|
||||
`${this.getNodeIndex(connection[1].node)}-input${connection[1].index}`,
|
||||
this.getOutputEndpointUUID(connection[0].node, connection[0].index),
|
||||
this.getInputEndpointUUID(connection[1].node, connection[1].index),
|
||||
];
|
||||
|
||||
// Create connections in DOM
|
||||
|
|
|
@ -541,9 +541,11 @@ export const getUniqueNodeName = (nodes: INodeUi[], originalName: string, additi
|
|||
return uniqueName;
|
||||
};
|
||||
|
||||
export const showDropConnectionState = (connection: Connection, targetPos: XYPosition) => {
|
||||
export const showDropConnectionState = (connection: Connection, targetEndpoint?: Endpoint) => {
|
||||
if (connection && connection.connector) {
|
||||
connection.connector.setTargetPos(targetPos);
|
||||
if (targetEndpoint) {
|
||||
connection.connector.setTargetEndpoint(targetEndpoint);
|
||||
}
|
||||
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PRIMARY);
|
||||
hideOverlay(connection, OVERLAY_DROP_NODE_ID);
|
||||
showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
|
||||
|
@ -552,7 +554,7 @@ export const showDropConnectionState = (connection: Connection, targetPos: XYPos
|
|||
|
||||
export const showPullConnectionState = (connection: Connection) => {
|
||||
if (connection && connection.connector) {
|
||||
connection.connector.resetTargetPos();
|
||||
connection.connector.resetTargetEndpoint();
|
||||
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
|
||||
showOverlay(connection, OVERLAY_DROP_NODE_ID);
|
||||
hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
|
||||
|
@ -561,7 +563,7 @@ export const showPullConnectionState = (connection: Connection) => {
|
|||
|
||||
export const resetConnectionAfterPull = (connection: Connection) => {
|
||||
if (connection && connection.connector) {
|
||||
connection.connector.resetTargetPos();
|
||||
connection.connector.resetTargetEndpoint();
|
||||
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
|
||||
showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue