fix snapping

This commit is contained in:
Mutasem 2021-11-15 14:41:39 +01:00
parent ef584e659d
commit 0ecd6a48ec
2 changed files with 452 additions and 495 deletions

View file

@ -1,146 +1,3 @@
(function () {
"use strict";
var root = this, _jp = root.jsPlumb, _ju = root.jsPlumbUtil;
_jp.Connectors.AbstractBezierConnector = function(params) {
params = params || {};
var showLoopback = params.showLoopback !== false,
curviness = params.curviness || 10,
margin = params.margin || 5,
proximityLimit = params.proximityLimit || 80,
clockwise = params.orientation && params.orientation === "clockwise",
loopbackRadius = params.loopbackRadius || 25,
isLoopbackCurrently = false,
_super;
this._compute = function (paintInfo, p) {
var sp = p.sourcePos,
tp = p.targetPos,
_w = Math.abs(sp[0] - tp[0]),
_h = Math.abs(sp[1] - tp[1]);
if (!showLoopback || (p.sourceEndpoint.elementId !== p.targetEndpoint.elementId)) {
isLoopbackCurrently = false;
this._computeBezier(paintInfo, p, sp, tp, _w, _h);
} else {
isLoopbackCurrently = true;
// a loopback connector. draw an arc from one anchor to the other.
var x1 = p.sourcePos[0], y1 = p.sourcePos[1] - margin,
cx = x1, cy = y1 - loopbackRadius,
// canvas sizing stuff, to ensure the whole painted area is visible.
_x = cx - loopbackRadius,
_y = cy - loopbackRadius;
_w = 2 * loopbackRadius;
_h = 2 * loopbackRadius;
paintInfo.points[0] = _x;
paintInfo.points[1] = _y;
paintInfo.points[2] = _w;
paintInfo.points[3] = _h;
// ADD AN ARC SEGMENT.
_super.addSegment(this, "Arc", {
loopback: true,
x1: (x1 - _x) + 4,
y1: y1 - _y,
startAngle: 0,
endAngle: 2 * Math.PI,
r: loopbackRadius,
ac: !clockwise,
x2: (x1 - _x) - 4,
y2: y1 - _y,
cx: cx - _x,
cy: cy - _y,
});
}
};
_super = _jp.Connectors.AbstractConnector.apply(this, arguments);
return _super;
};
_ju.extend(_jp.Connectors.AbstractBezierConnector, _jp.Connectors.AbstractConnector);
var Bezier = function (params) {
params = params || {};
this.type = "N8nBezier";
var _super = _jp.Connectors.AbstractBezierConnector.apply(this, arguments),
majorAnchor = params.curviness || 150,
minorAnchor = 10;
this.getCurviness = function () {
return majorAnchor;
};
this._findControlPoint = function (point, sourceAnchorPosition, targetAnchorPosition, sourceEndpoint, targetEndpoint, soo, too) {
// determine if the two anchors are perpendicular to each other in their orientation. we swap the control
// points around if so (code could be tightened up)
var perpendicular = soo[0] !== too[0] || soo[1] === too[1],
p = [];
if (!perpendicular) {
if (soo[0] === 0) {
p.push(sourceAnchorPosition[0] < targetAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
}
else {
p.push(point[0] - (majorAnchor * soo[0]));
}
if (soo[1] === 0) {
p.push(sourceAnchorPosition[1] < targetAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
}
else {
p.push(point[1] + (majorAnchor * too[1]));
}
}
else {
if (too[0] === 0) {
p.push(targetAnchorPosition[0] < sourceAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
}
else {
p.push(point[0] + (majorAnchor * too[0]));
}
if (too[1] === 0) {
p.push(targetAnchorPosition[1] < sourceAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
}
else {
p.push(point[1] + (majorAnchor * soo[1]));
}
}
return p;
};
this._computeBezier = function (paintInfo, p, sp, tp, _w, _h) {
var _CP, _CP2,
_sx = sp[0] < tp[0] ? _w : 0,
_sy = sp[1] < tp[1] ? _h : 0,
_tx = sp[0] < tp[0] ? 0 : _w,
_ty = sp[1] < tp[1] ? 0 : _h;
_CP = this._findControlPoint([_sx, _sy], sp, tp, p.sourceEndpoint, p.targetEndpoint, paintInfo.so, paintInfo.to);
_CP2 = this._findControlPoint([_tx, _ty], tp, sp, p.targetEndpoint, p.sourceEndpoint, paintInfo.to, paintInfo.so);
_super.addSegment(this, "Bezier", {
x1: _sx, y1: _sy, x2: _tx, y2: _ty,
cp1x: _CP[0], cp1y: _CP[1], cp2x: _CP2[0], cp2y: _CP2[1],
});
};
};
_jp.Connectors.N8nBezier = Bezier;
_ju.extend(Bezier, _jp.Connectors.AbstractBezierConnector);
}).call(typeof window !== 'undefined' ? window : this);
(function () {
"use strict";
@ -406,7 +263,7 @@
oProduct = ((so[0] * to[0]) + (so[1] * to[1]));
const sourceStubWithOffset = sourceStub + (getEndpointOffset && params.sourceEndpoint ? getEndpointOffset(params.sourceEndpoint) : 0);
const targetStubWithOffset = targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(params.targetEndpoint) : 0);
const targetStubWithOffset = targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(targetEndpoint) : 0);
var result = {
sx: sx, sy: sy, tx: tx, ty: ty, lw: lw,
@ -428,6 +285,10 @@
sourceAxis: so[0] === 0 ? "y" : "x",
points: [x, y, w, h, sx, sy, tx, ty ],
stubs:[sourceStubWithOffset, targetStubWithOffset],
sourceEndpoint: params.sourceEndpoint,
targetEndpoint: targetEndpoint,
sourcePos: params.sourcePos,
targetPos: targetEndpoint.anchor.getCurrentLocation(),
};
result.anchorOrientation = result.opposite ? "opposite" : result.orthogonal ? "orthogonal" : "perpendicular";
return result;
@ -472,7 +333,7 @@
paintInfo = _prepareCompute.call(this, params);
_clearSegments();
this._compute(paintInfo, params);
this._compute(paintInfo);
this.x = paintInfo.points[0];
this.y = paintInfo.points[1];
this.w = paintInfo.points[2];
@ -494,358 +355,454 @@
};
_ju.extend(_jp.Connectors.N8nAbstractConnector, AbstractComponent);
/**
* Custom flowchart type
* Based on jsplumb Flowchart type https://github.com/jsplumb/jsplumb/blob/fb5fce52794fa52306825bdaa62bf3855cdfd7e0/src/connectors-flowchart.js
*
* @param stub {number} length of stub segments
* @param getEndpointOffset {Function} callback to offset stub length based on endpoint
* @param midpoint {number} float percent of halfway point of segments
* @param loopbackVerticalLength {number} height of vertical segment when looping
* @param cornerRadius {number} radius of flowchart connectors
* @param loopbackMinimum {number} minimum threshold before looping behavior takes effect
* @param gap {number | [number, number]} gap between connector and source/target endpoints
*/
var Flowchart = function (params) {
this.type = "N8nFlowchart";
_jp.Connectors.N8nAbstractBezierConnector = function(params) {
params = params || {};
params.stub = params.stub == null ? 30 : params.stub;
params.getEndpointOffset = params.getEndpointOffset;
var segments,
_super = _jp.Connectors.N8nAbstractConnector.apply(this, arguments),
midpoint = params.midpoint == null ? 0.5 : params.midpoint,
alwaysRespectStubs = params.alwaysRespectStubs === true,
loopbackVerticalLength = params.loopbackVerticalLength || 0,
lastx = null, lasty = null, lastOrientation,
cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0,
loopbackMinimum = params.loopbackMinimum || 100,
var _super;
sgn = function (n) {
return n < 0 ? -1 : n === 0 ? 0 : 1;
},
segmentDirections = function(segment) {
return [
sgn( segment[2] - segment[0] ),
sgn( segment[3] - segment[1] ),
];
},
/**
* helper method to add a segment.
*/
addSegment = function (segments, x, y, paintInfo) {
if (lastx === x && lasty === y) {
return;
}
var lx = lastx == null ? paintInfo.sx : lastx,
ly = lasty == null ? paintInfo.sy : lasty,
o = lx === x ? "v" : "h";
lastx = x;
lasty = y;
segments.push([ lx, ly, x, y, o ]);
},
segLength = function (s) {
return Math.sqrt(Math.pow(s[0] - s[2], 2) + Math.pow(s[1] - s[3], 2));
},
_cloneArray = function (a) {
var _a = [];
_a.push.apply(_a, a);
return _a;
},
writeSegments = function (conn, segments, paintInfo) {
var current = null, next, currentDirection, nextDirection;
for (var i = 0; i < segments.length - 1; i++) {
current = current || _cloneArray(segments[i]);
next = _cloneArray(segments[i + 1]);
currentDirection = segmentDirections(current);
nextDirection = segmentDirections(next);
if (cornerRadius > 0 && current[4] !== next[4]) {
var minSegLength = Math.min(segLength(current), segLength(next));
var radiusToUse = Math.min(cornerRadius, minSegLength / 2);
current[2] -= currentDirection[0] * radiusToUse;
current[3] -= currentDirection[1] * radiusToUse;
next[0] += nextDirection[0] * radiusToUse;
next[1] += nextDirection[1] * radiusToUse;
var ac = (currentDirection[1] === nextDirection[0] && nextDirection[0] === 1) ||
((currentDirection[1] === nextDirection[0] && nextDirection[0] === 0) && currentDirection[0] !== nextDirection[1]) ||
(currentDirection[1] === nextDirection[0] && nextDirection[0] === -1),
sgny = next[1] > current[3] ? 1 : -1,
sgnx = next[0] > current[2] ? 1 : -1,
sgnEqual = sgny === sgnx,
cx = (sgnEqual && ac || (!sgnEqual && !ac)) ? next[0] : current[2],
cy = (sgnEqual && ac || (!sgnEqual && !ac)) ? current[3] : next[1];
_super.addSegment(conn, STRAIGHT, {
x1: current[0], y1: current[1], x2: current[2], y2: current[3],
});
_super.addSegment(conn, ARC, {
r: radiusToUse,
x1: current[2],
y1: current[3],
x2: next[0],
y2: next[1],
cx: cx,
cy: cy,
ac: ac,
});
}
else {
// dx + dy are used to adjust for line width.
var dx = (current[2] === current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2),
dy = (current[3] === current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2);
_super.addSegment(conn, STRAIGHT, {
x1: current[0] - dx, y1: current[1] - dy, x2: current[2] + dx, y2: current[3] + dy,
});
}
current = next;
}
if (next != null) {
// last segment
_super.addSegment(conn, STRAIGHT, {
x1: next[0], y1: next[1], x2: next[2], y2: next[3],
});
}
};
this._compute = function (paintInfo, connParams) {
segments = [];
lastx = null;
lasty = null;
lastOrientation = null;
var commonStubCalculator = function () {
return [paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY];
},
stubCalculators = {
perpendicular: commonStubCalculator,
orthogonal: commonStubCalculator,
opposite: function (axis) {
var pi = paintInfo,
idx = axis === "x" ? 0 : 1,
areInProximity = {
"x": function () {
return ( (pi.so[idx] === 1 && (
( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) ||
( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) ||
( (pi.so[idx] === -1 && (
( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) ||
( (pi.sx < pi.endStubX) && (pi.tx < pi.sx)))));
},
"y": function () {
return ( (pi.so[idx] === 1 && (
( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) ||
( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) ||
( (pi.so[idx] === -1 && (
( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) ||
( (pi.sy < pi.endStubY) && (pi.ty < pi.sy)))));
},
};
if (!alwaysRespectStubs && areInProximity[axis]()) {
return {
"x": [(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY],
"y": [paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2],
}[axis];
}
else {
return [paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY];
}
},
};
// calculate Stubs.
var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis),
idx = paintInfo.sourceAxis === "x" ? 0 : 1,
oidx = paintInfo.sourceAxis === "x" ? 1 : 0,
ss = stubs[idx],
oss = stubs[oidx],
es = stubs[idx + 2],
oes = stubs[oidx + 2];
// add the start stub segment. use stubs for loopback as it will look better, with the loop spaced
// away from the element.
addSegment(segments, stubs[0], stubs[1], paintInfo);
const diffX = paintInfo.endStubX - paintInfo.startStubX;
const diffY = paintInfo.endStubY - paintInfo.startStubY;
const direction = diffY >= 0 ? 1 : -1; // vertical direction of loop, above or below source
var midx = paintInfo.startStubX + ((paintInfo.endStubX - paintInfo.startStubX) * midpoint),
midy;
if (diffX < (-1 * loopbackMinimum)) {
// loop backward behavior
midy = paintInfo.startStubY - (diffX < 0 ? direction * loopbackVerticalLength : 0);
} else {
// original flowchart behavior
midy = paintInfo.startStubY + ((paintInfo.endStubY - paintInfo.startStubY) * midpoint);
}
var orientations = {x: [0, 1], y: [1, 0]},
lineCalculators = {
perpendicular: function (axis) {
var pi = paintInfo,
sis = {
x: [
[[1, 2, 3, 4], null, [2, 1, 4, 3]],
null,
[[4, 3, 2, 1], null, [3, 4, 1, 2]],
],
y: [
[[3, 2, 1, 4], null, [2, 3, 4, 1]],
null,
[[4, 1, 2, 3], null, [1, 4, 3, 2]],
],
},
stubs = {
x: [[pi.startStubX, pi.endStubX], null, [pi.endStubX, pi.startStubX]],
y: [[pi.startStubY, pi.endStubY], null, [pi.endStubY, pi.startStubY]],
},
midLines = {
x: [[midx, pi.startStubY], [midx, pi.endStubY]],
y: [[pi.startStubX, midy], [pi.endStubX, midy]],
},
linesToEnd = {
x: [[pi.endStubX, pi.startStubY]],
y: [[pi.startStubX, pi.endStubY]],
},
startToEnd = {
x: [[pi.startStubX, pi.endStubY], [pi.endStubX, pi.endStubY]],
y: [[pi.endStubX, pi.startStubY], [pi.endStubX, pi.endStubY]],
},
startToMidToEnd = {
x: [[pi.startStubX, midy], [pi.endStubX, midy], [pi.endStubX, pi.endStubY]],
y: [[midx, pi.startStubY], [midx, pi.endStubY], [pi.endStubX, pi.endStubY]],
},
otherStubs = {
x: [pi.startStubY, pi.endStubY],
y: [pi.startStubX, pi.endStubX],
},
soIdx = orientations[axis][0], toIdx = orientations[axis][1],
_so = pi.so[soIdx] + 1,
_to = pi.to[toIdx] + 1,
otherFlipped = (pi.to[toIdx] === -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.to[toIdx] === 1 && (otherStubs[axis][1] > otherStubs[axis][0])),
stub1 = stubs[axis][_so][0],
stub2 = stubs[axis][_so][1],
segmentIndexes = sis[axis][_so][_to];
if (pi.segment === segmentIndexes[3] || (pi.segment === segmentIndexes[2] && otherFlipped)) {
return midLines[axis];
}
else if (pi.segment === segmentIndexes[2] && stub2 < stub1) {
return linesToEnd[axis];
}
else if ((pi.segment === segmentIndexes[2] && stub2 >= stub1) || (pi.segment === segmentIndexes[1] && !otherFlipped)) {
return startToMidToEnd[axis];
}
else if (pi.segment === segmentIndexes[0] || (pi.segment === segmentIndexes[1] && otherFlipped)) {
return startToEnd[axis];
}
},
orthogonal: function (axis, startStub, otherStartStub, endStub, otherEndStub) {
var pi = paintInfo,
extent = {
"x": pi.so[0] === -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub),
"y": pi.so[1] === -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub),
}[axis];
return {
"x": [
[extent, otherStartStub],
[extent, otherEndStub],
[endStub, otherEndStub],
],
"y": [
[otherStartStub, extent],
[otherEndStub, extent],
[otherEndStub, endStub],
],
}[axis];
},
opposite: function (axis, ss, oss, es) {
var pi = paintInfo,
otherAxis = {"x": "y", "y": "x"}[axis],
dim = {"x": "height", "y": "width"}[axis],
comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"];
if (connParams.sourceEndpoint.elementId === connParams.targetEndpoint.elementId) {
var _val = oss + ((1 - connParams.sourceEndpoint.anchor[otherAxis]) * connParams.sourceInfo[dim]) + _super.maxStub;
return {
"x": [
[ss, _val],
[es, _val],
],
"y": [
[_val, ss],
[_val, es],
],
}[axis];
}
else if (!comparator || (pi.so[idx] === 1 && ss > es) || (pi.so[idx] === -1 && ss < es)) {
return {
"x": [
[ss, midy],
[es, midy],
],
"y": [
[midx, ss],
[midx, es],
],
}[axis];
}
else if ((pi.so[idx] === 1 && ss < es) || (pi.so[idx] === -1 && ss > es)) {
return {
"x": [
[midx, pi.sy],
[midx, pi.ty],
],
"y": [
[pi.sx, midy],
[pi.tx, midy],
],
}[axis];
}
},
};
// compute the rest of the line
var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes);
if (p) {
for (var i = 0; i < p.length; i++) {
addSegment(segments, p[i][0], p[i][1], paintInfo);
}
}
// line to end stub
addSegment(segments, stubs[2], stubs[3], paintInfo);
//}
// end stub to end (common)
addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo);
// write out the segments.
writeSegments(this, segments, paintInfo);
this._compute = function (paintInfo) {
var sp = paintInfo.sourcePos,
tp = paintInfo.targetPos,
_w = Math.abs(sp[0] - tp[0]),
_h = Math.abs(sp[1] - tp[1]);
this._computeBezier(paintInfo, sp, tp, _w, _h);
};
_super = _jp.Connectors.N8nAbstractConnector.apply(this, arguments);
return _super;
};
_ju.extend(_jp.Connectors.N8nAbstractBezierConnector, _jp.Connectors.N8nAbstractConnector);
var Bezier = function (params) {
params = params || {};
this.type = "N8nBezier";
var _super = _jp.Connectors.N8nAbstractBezierConnector.apply(this, arguments),
majorAnchor = params.curviness || 150,
minorAnchor = 10;
this.getCurviness = function () {
return majorAnchor;
};
this._findControlPoint = function (point, sourceAnchorPosition, targetAnchorPosition, sourceEndpoint, targetEndpoint, soo, too) {
// determine if the two anchors are perpendicular to each other in their orientation. we swap the control
// points around if so (code could be tightened up)
var perpendicular = soo[0] !== too[0] || soo[1] === too[1],
p = [];
if (!perpendicular) {
if (soo[0] === 0) {
p.push(sourceAnchorPosition[0] < targetAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
}
else {
p.push(point[0] - (majorAnchor * soo[0]));
}
if (soo[1] === 0) {
p.push(sourceAnchorPosition[1] < targetAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
}
else {
p.push(point[1] + (majorAnchor * too[1]));
}
}
else {
if (too[0] === 0) {
p.push(targetAnchorPosition[0] < sourceAnchorPosition[0] ? point[0] + minorAnchor : point[0] - minorAnchor);
}
else {
p.push(point[0] + (majorAnchor * too[0]));
}
if (too[1] === 0) {
p.push(targetAnchorPosition[1] < sourceAnchorPosition[1] ? point[1] + minorAnchor : point[1] - minorAnchor);
}
else {
p.push(point[1] + (majorAnchor * soo[1]));
}
}
return p;
};
this._computeBezier = function (paintInfo, sp, tp, _w, _h) {
var _CP, _CP2,
_sx = sp[0] < tp[0] ? _w : 0,
_sy = sp[1] < tp[1] ? _h : 0,
_tx = sp[0] < tp[0] ? 0 : _w,
_ty = sp[1] < tp[1] ? 0 : _h;
_CP = this._findControlPoint([_sx, _sy], sp, tp, paintInfo.sourceEndpoint, paintInfo.targetEndpoint, paintInfo.so, paintInfo.to);
_CP2 = this._findControlPoint([_tx, _ty], tp, sp, paintInfo.targetEndpoint, paintInfo.sourceEndpoint, paintInfo.to, paintInfo.so);
_super.addSegment(this, "Bezier", {
x1: _sx, y1: _sy, x2: _tx, y2: _ty,
cp1x: _CP[0], cp1y: _CP[1], cp2x: _CP2[0], cp2y: _CP2[1],
});
};
};
_jp.Connectors.N8nFlowchart = Flowchart;
_ju.extend(_jp.Connectors.N8nFlowchart, _jp.Connectors.N8nAbstractConnector);
_jp.Connectors.N8nBezier = Bezier;
_ju.extend(_jp.Connectors.N8nBezier, _jp.Connectors.N8nAbstractBezierConnector);
}).call(typeof window !== 'undefined' ? window : this);
// (function () {
// /**
// * Custom flowchart type
// * Based on jsplumb Flowchart type https://github.com/jsplumb/jsplumb/blob/fb5fce52794fa52306825bdaa62bf3855cdfd7e0/src/connectors-flowchart.js
// *
// * @param stub {number} length of stub segments
// * @param getEndpointOffset {Function} callback to offset stub length based on endpoint
// * @param midpoint {number} float percent of halfway point of segments
// * @param loopbackVerticalLength {number} height of vertical segment when looping
// * @param cornerRadius {number} radius of flowchart connectors
// * @param loopbackMinimum {number} minimum threshold before looping behavior takes effect
// * @param gap {number | [number, number]} gap between connector and source/target endpoints
// */
// var Flowchart = function (params) {
// this.type = "N8nFlowchart";
// params = params || {};
// params.stub = params.stub == null ? 30 : params.stub;
// params.getEndpointOffset = params.getEndpointOffset;
// var segments,
// _super = _jp.Connectors.N8nAbstractConnector.apply(this, arguments),
// midpoint = params.midpoint == null ? 0.5 : params.midpoint,
// alwaysRespectStubs = params.alwaysRespectStubs === true,
// loopbackVerticalLength = params.loopbackVerticalLength || 0,
// lastx = null, lasty = null, lastOrientation,
// cornerRadius = params.cornerRadius != null ? params.cornerRadius : 0,
// loopbackMinimum = params.loopbackMinimum || 100,
// sgn = function (n) {
// return n < 0 ? -1 : n === 0 ? 0 : 1;
// },
// segmentDirections = function(segment) {
// return [
// sgn( segment[2] - segment[0] ),
// sgn( segment[3] - segment[1] ),
// ];
// },
// /**
// * helper method to add a segment.
// */
// addSegment = function (segments, x, y, paintInfo) {
// if (lastx === x && lasty === y) {
// return;
// }
// var lx = lastx == null ? paintInfo.sx : lastx,
// ly = lasty == null ? paintInfo.sy : lasty,
// o = lx === x ? "v" : "h";
// lastx = x;
// lasty = y;
// segments.push([ lx, ly, x, y, o ]);
// },
// segLength = function (s) {
// return Math.sqrt(Math.pow(s[0] - s[2], 2) + Math.pow(s[1] - s[3], 2));
// },
// _cloneArray = function (a) {
// var _a = [];
// _a.push.apply(_a, a);
// return _a;
// },
// writeSegments = function (conn, segments, paintInfo) {
// var current = null, next, currentDirection, nextDirection;
// for (var i = 0; i < segments.length - 1; i++) {
// current = current || _cloneArray(segments[i]);
// next = _cloneArray(segments[i + 1]);
// currentDirection = segmentDirections(current);
// nextDirection = segmentDirections(next);
// if (cornerRadius > 0 && current[4] !== next[4]) {
// var minSegLength = Math.min(segLength(current), segLength(next));
// var radiusToUse = Math.min(cornerRadius, minSegLength / 2);
// current[2] -= currentDirection[0] * radiusToUse;
// current[3] -= currentDirection[1] * radiusToUse;
// next[0] += nextDirection[0] * radiusToUse;
// next[1] += nextDirection[1] * radiusToUse;
// var ac = (currentDirection[1] === nextDirection[0] && nextDirection[0] === 1) ||
// ((currentDirection[1] === nextDirection[0] && nextDirection[0] === 0) && currentDirection[0] !== nextDirection[1]) ||
// (currentDirection[1] === nextDirection[0] && nextDirection[0] === -1),
// sgny = next[1] > current[3] ? 1 : -1,
// sgnx = next[0] > current[2] ? 1 : -1,
// sgnEqual = sgny === sgnx,
// cx = (sgnEqual && ac || (!sgnEqual && !ac)) ? next[0] : current[2],
// cy = (sgnEqual && ac || (!sgnEqual && !ac)) ? current[3] : next[1];
// _super.addSegment(conn, STRAIGHT, {
// x1: current[0], y1: current[1], x2: current[2], y2: current[3],
// });
// _super.addSegment(conn, ARC, {
// r: radiusToUse,
// x1: current[2],
// y1: current[3],
// x2: next[0],
// y2: next[1],
// cx: cx,
// cy: cy,
// ac: ac,
// });
// }
// else {
// // dx + dy are used to adjust for line width.
// var dx = (current[2] === current[0]) ? 0 : (current[2] > current[0]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2),
// dy = (current[3] === current[1]) ? 0 : (current[3] > current[1]) ? (paintInfo.lw / 2) : -(paintInfo.lw / 2);
// _super.addSegment(conn, STRAIGHT, {
// x1: current[0] - dx, y1: current[1] - dy, x2: current[2] + dx, y2: current[3] + dy,
// });
// }
// current = next;
// }
// if (next != null) {
// // last segment
// _super.addSegment(conn, STRAIGHT, {
// x1: next[0], y1: next[1], x2: next[2], y2: next[3],
// });
// }
// };
// this._compute = function (paintInfo, connParams) {
// segments = [];
// lastx = null;
// lasty = null;
// lastOrientation = null;
// var commonStubCalculator = function () {
// return [paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY];
// },
// stubCalculators = {
// perpendicular: commonStubCalculator,
// orthogonal: commonStubCalculator,
// opposite: function (axis) {
// var pi = paintInfo,
// idx = axis === "x" ? 0 : 1,
// areInProximity = {
// "x": function () {
// return ( (pi.so[idx] === 1 && (
// ( (pi.startStubX > pi.endStubX) && (pi.tx > pi.startStubX) ) ||
// ( (pi.sx > pi.endStubX) && (pi.tx > pi.sx))))) ||
// ( (pi.so[idx] === -1 && (
// ( (pi.startStubX < pi.endStubX) && (pi.tx < pi.startStubX) ) ||
// ( (pi.sx < pi.endStubX) && (pi.tx < pi.sx)))));
// },
// "y": function () {
// return ( (pi.so[idx] === 1 && (
// ( (pi.startStubY > pi.endStubY) && (pi.ty > pi.startStubY) ) ||
// ( (pi.sy > pi.endStubY) && (pi.ty > pi.sy))))) ||
// ( (pi.so[idx] === -1 && (
// ( (pi.startStubY < pi.endStubY) && (pi.ty < pi.startStubY) ) ||
// ( (pi.sy < pi.endStubY) && (pi.ty < pi.sy)))));
// },
// };
// if (!alwaysRespectStubs && areInProximity[axis]()) {
// return {
// "x": [(paintInfo.sx + paintInfo.tx) / 2, paintInfo.startStubY, (paintInfo.sx + paintInfo.tx) / 2, paintInfo.endStubY],
// "y": [paintInfo.startStubX, (paintInfo.sy + paintInfo.ty) / 2, paintInfo.endStubX, (paintInfo.sy + paintInfo.ty) / 2],
// }[axis];
// }
// else {
// return [paintInfo.startStubX, paintInfo.startStubY, paintInfo.endStubX, paintInfo.endStubY];
// }
// },
// };
// // calculate Stubs.
// var stubs = stubCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis),
// idx = paintInfo.sourceAxis === "x" ? 0 : 1,
// oidx = paintInfo.sourceAxis === "x" ? 1 : 0,
// ss = stubs[idx],
// oss = stubs[oidx],
// es = stubs[idx + 2],
// oes = stubs[oidx + 2];
// // add the start stub segment. use stubs for loopback as it will look better, with the loop spaced
// // away from the element.
// addSegment(segments, stubs[0], stubs[1], paintInfo);
// const diffX = paintInfo.endStubX - paintInfo.startStubX;
// const diffY = paintInfo.endStubY - paintInfo.startStubY;
// const direction = diffY >= 0 ? 1 : -1; // vertical direction of loop, above or below source
// var midx = paintInfo.startStubX + ((paintInfo.endStubX - paintInfo.startStubX) * midpoint),
// midy;
// if (diffX < (-1 * loopbackMinimum)) {
// // loop backward behavior
// midy = paintInfo.startStubY - (diffX < 0 ? direction * loopbackVerticalLength : 0);
// } else {
// // original flowchart behavior
// midy = paintInfo.startStubY + ((paintInfo.endStubY - paintInfo.startStubY) * midpoint);
// }
// var orientations = {x: [0, 1], y: [1, 0]},
// lineCalculators = {
// perpendicular: function (axis) {
// var pi = paintInfo,
// sis = {
// x: [
// [[1, 2, 3, 4], null, [2, 1, 4, 3]],
// null,
// [[4, 3, 2, 1], null, [3, 4, 1, 2]],
// ],
// y: [
// [[3, 2, 1, 4], null, [2, 3, 4, 1]],
// null,
// [[4, 1, 2, 3], null, [1, 4, 3, 2]],
// ],
// },
// stubs = {
// x: [[pi.startStubX, pi.endStubX], null, [pi.endStubX, pi.startStubX]],
// y: [[pi.startStubY, pi.endStubY], null, [pi.endStubY, pi.startStubY]],
// },
// midLines = {
// x: [[midx, pi.startStubY], [midx, pi.endStubY]],
// y: [[pi.startStubX, midy], [pi.endStubX, midy]],
// },
// linesToEnd = {
// x: [[pi.endStubX, pi.startStubY]],
// y: [[pi.startStubX, pi.endStubY]],
// },
// startToEnd = {
// x: [[pi.startStubX, pi.endStubY], [pi.endStubX, pi.endStubY]],
// y: [[pi.endStubX, pi.startStubY], [pi.endStubX, pi.endStubY]],
// },
// startToMidToEnd = {
// x: [[pi.startStubX, midy], [pi.endStubX, midy], [pi.endStubX, pi.endStubY]],
// y: [[midx, pi.startStubY], [midx, pi.endStubY], [pi.endStubX, pi.endStubY]],
// },
// otherStubs = {
// x: [pi.startStubY, pi.endStubY],
// y: [pi.startStubX, pi.endStubX],
// },
// soIdx = orientations[axis][0], toIdx = orientations[axis][1],
// _so = pi.so[soIdx] + 1,
// _to = pi.to[toIdx] + 1,
// otherFlipped = (pi.to[toIdx] === -1 && (otherStubs[axis][1] < otherStubs[axis][0])) || (pi.to[toIdx] === 1 && (otherStubs[axis][1] > otherStubs[axis][0])),
// stub1 = stubs[axis][_so][0],
// stub2 = stubs[axis][_so][1],
// segmentIndexes = sis[axis][_so][_to];
// if (pi.segment === segmentIndexes[3] || (pi.segment === segmentIndexes[2] && otherFlipped)) {
// return midLines[axis];
// }
// else if (pi.segment === segmentIndexes[2] && stub2 < stub1) {
// return linesToEnd[axis];
// }
// else if ((pi.segment === segmentIndexes[2] && stub2 >= stub1) || (pi.segment === segmentIndexes[1] && !otherFlipped)) {
// return startToMidToEnd[axis];
// }
// else if (pi.segment === segmentIndexes[0] || (pi.segment === segmentIndexes[1] && otherFlipped)) {
// return startToEnd[axis];
// }
// },
// orthogonal: function (axis, startStub, otherStartStub, endStub, otherEndStub) {
// var pi = paintInfo,
// extent = {
// "x": pi.so[0] === -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub),
// "y": pi.so[1] === -1 ? Math.min(startStub, endStub) : Math.max(startStub, endStub),
// }[axis];
// return {
// "x": [
// [extent, otherStartStub],
// [extent, otherEndStub],
// [endStub, otherEndStub],
// ],
// "y": [
// [otherStartStub, extent],
// [otherEndStub, extent],
// [otherEndStub, endStub],
// ],
// }[axis];
// },
// opposite: function (axis, ss, oss, es) {
// var pi = paintInfo,
// otherAxis = {"x": "y", "y": "x"}[axis],
// dim = {"x": "height", "y": "width"}[axis],
// comparator = pi["is" + axis.toUpperCase() + "GreaterThanStubTimes2"];
// if (connParams.sourceEndpoint.elementId === connParams.targetEndpoint.elementId) {
// var _val = oss + ((1 - connParams.sourceEndpoint.anchor[otherAxis]) * connParams.sourceInfo[dim]) + _super.maxStub;
// return {
// "x": [
// [ss, _val],
// [es, _val],
// ],
// "y": [
// [_val, ss],
// [_val, es],
// ],
// }[axis];
// }
// else if (!comparator || (pi.so[idx] === 1 && ss > es) || (pi.so[idx] === -1 && ss < es)) {
// return {
// "x": [
// [ss, midy],
// [es, midy],
// ],
// "y": [
// [midx, ss],
// [midx, es],
// ],
// }[axis];
// }
// else if ((pi.so[idx] === 1 && ss < es) || (pi.so[idx] === -1 && ss > es)) {
// return {
// "x": [
// [midx, pi.sy],
// [midx, pi.ty],
// ],
// "y": [
// [pi.sx, midy],
// [pi.tx, midy],
// ],
// }[axis];
// }
// },
// };
// // compute the rest of the line
// var p = lineCalculators[paintInfo.anchorOrientation](paintInfo.sourceAxis, ss, oss, es, oes);
// if (p) {
// for (var i = 0; i < p.length; i++) {
// addSegment(segments, p[i][0], p[i][1], paintInfo);
// }
// }
// // line to end stub
// addSegment(segments, stubs[2], stubs[3], paintInfo);
// //}
// // end stub to end (common)
// addSegment(segments, paintInfo.tx, paintInfo.ty, paintInfo);
// // write out the segments.
// writeSegments(this, segments, paintInfo);
// };
// };
// _jp.Connectors.N8nFlowchart = Flowchart;
// _ju.extend(_jp.Connectors.N8nFlowchart, _jp.Connectors.N8nAbstractConnector);
// }).call(typeof window !== 'undefined' ? window : this);

View file

@ -663,7 +663,7 @@ export const getUniqueNodeName = (nodes: INodeUi[], originalName: string, additi
export const showDropConnectionState = (connection: Connection, targetEndpoint?: Endpoint) => {
if (connection && connection.connector) {
if (targetEndpoint) {
// connection.connector.setTargetEndpoint(targetEndpoint);
connection.connector.setTargetEndpoint(targetEndpoint);
}
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PRIMARY);
hideOverlay(connection, OVERLAY_DROP_NODE_ID);
@ -673,7 +673,7 @@ export const showDropConnectionState = (connection: Connection, targetEndpoint?:
export const showPullConnectionState = (connection: Connection) => {
if (connection && connection.connector) {
// connection.connector.resetTargetEndpoint();
connection.connector.resetTargetEndpoint();
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PULL);
showOverlay(connection, OVERLAY_DROP_NODE_ID);
hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
@ -682,7 +682,7 @@ export const showPullConnectionState = (connection: Connection) => {
export const resetConnectionAfterPull = (connection: Connection) => {
if (connection && connection.connector) {
// connection.connector.resetTargetEndpoint();
connection.connector.resetTargetEndpoint();
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
showOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
}