mirror of
https://github.com/n8n-io/n8n.git
synced 2025-03-05 20:50:17 -08:00
fix snapping
This commit is contained in:
Mutasem
parent
ef584e659d
commit
0ecd6a48ec
|
|
@ -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 () {
|
(function () {
|
||||||
|
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
@ -406,7 +263,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 && targetEndpoint ? getEndpointOffset(params.targetEndpoint) : 0);
|
const targetStubWithOffset = targetStub + (getEndpointOffset && targetEndpoint ? getEndpointOffset(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,
|
||||||
|
|
@ -428,6 +285,10 @@
|
||||||
sourceAxis: so[0] === 0 ? "y" : "x",
|
sourceAxis: so[0] === 0 ? "y" : "x",
|
||||||
points: [x, y, w, h, sx, sy, tx, ty ],
|
points: [x, y, w, h, sx, sy, tx, ty ],
|
||||||
stubs:[sourceStubWithOffset, targetStubWithOffset],
|
stubs:[sourceStubWithOffset, targetStubWithOffset],
|
||||||
|
sourceEndpoint: params.sourceEndpoint,
|
||||||
|
targetEndpoint: targetEndpoint,
|
||||||
|
sourcePos: params.sourcePos,
|
||||||
|
targetPos: targetEndpoint.anchor.getCurrentLocation(),
|
||||||
};
|
};
|
||||||
result.anchorOrientation = result.opposite ? "opposite" : result.orthogonal ? "orthogonal" : "perpendicular";
|
result.anchorOrientation = result.opposite ? "opposite" : result.orthogonal ? "orthogonal" : "perpendicular";
|
||||||
return result;
|
return result;
|
||||||
|
|
@ -472,7 +333,7 @@
|
||||||
paintInfo = _prepareCompute.call(this, params);
|
paintInfo = _prepareCompute.call(this, params);
|
||||||
|
|
||||||
_clearSegments();
|
_clearSegments();
|
||||||
this._compute(paintInfo, params);
|
this._compute(paintInfo);
|
||||||
this.x = paintInfo.points[0];
|
this.x = paintInfo.points[0];
|
||||||
this.y = paintInfo.points[1];
|
this.y = paintInfo.points[1];
|
||||||
this.w = paintInfo.points[2];
|
this.w = paintInfo.points[2];
|
||||||
|
|
@ -494,358 +355,454 @@
|
||||||
};
|
};
|
||||||
_ju.extend(_jp.Connectors.N8nAbstractConnector, AbstractComponent);
|
_ju.extend(_jp.Connectors.N8nAbstractConnector, AbstractComponent);
|
||||||
|
|
||||||
/**
|
_jp.Connectors.N8nAbstractBezierConnector = function(params) {
|
||||||
* 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 = params || {};
|
||||||
params.stub = params.stub == null ? 30 : params.stub;
|
var _super;
|
||||||
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) {
|
this._compute = function (paintInfo) {
|
||||||
return n < 0 ? -1 : n === 0 ? 0 : 1;
|
var sp = paintInfo.sourcePos,
|
||||||
},
|
tp = paintInfo.targetPos,
|
||||||
segmentDirections = function(segment) {
|
_w = Math.abs(sp[0] - tp[0]),
|
||||||
return [
|
_h = Math.abs(sp[1] - tp[1]);
|
||||||
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._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;
|
_jp.Connectors.N8nBezier = Bezier;
|
||||||
_ju.extend(_jp.Connectors.N8nFlowchart, _jp.Connectors.N8nAbstractConnector);
|
_ju.extend(_jp.Connectors.N8nBezier, _jp.Connectors.N8nAbstractBezierConnector);
|
||||||
|
|
||||||
}).call(typeof window !== 'undefined' ? window : this);
|
}).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);
|
||||||
|
|
|
||||||
|
|
@ -663,7 +663,7 @@ export const getUniqueNodeName = (nodes: INodeUi[], originalName: string, additi
|
||||||
export const showDropConnectionState = (connection: Connection, targetEndpoint?: Endpoint) => {
|
export const showDropConnectionState = (connection: Connection, targetEndpoint?: Endpoint) => {
|
||||||
if (connection && connection.connector) {
|
if (connection && connection.connector) {
|
||||||
if (targetEndpoint) {
|
if (targetEndpoint) {
|
||||||
// connection.connector.setTargetEndpoint(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);
|
||||||
|
|
@ -673,7 +673,7 @@ export const showDropConnectionState = (connection: Connection, targetEndpoint?:
|
||||||
|
|
||||||
export const showPullConnectionState = (connection: Connection) => {
|
export const showPullConnectionState = (connection: Connection) => {
|
||||||
if (connection && connection.connector) {
|
if (connection && connection.connector) {
|
||||||
// connection.connector.resetTargetEndpoint();
|
connection.connector.resetTargetEndpoint();
|
||||||
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PULL);
|
connection.setPaintStyle(CONNECTOR_PAINT_STYLE_PULL);
|
||||||
showOverlay(connection, OVERLAY_DROP_NODE_ID);
|
showOverlay(connection, OVERLAY_DROP_NODE_ID);
|
||||||
hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
|
hideOverlay(connection, OVERLAY_ENDPOINT_ARROW_ID);
|
||||||
|
|
@ -682,7 +682,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.resetTargetEndpoint();
|
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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue