@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
119 lines • 6.16 kB
JavaScript
/**
* Copied from `react-flow` because we need to change there routing.
* We use the 10.2.0cversion minus commit 87d518f8b5540a91a3f9c163a2315c2de47abc31
* @see https://github.com/wbkd/react-flow/commit/87d518f8b5540a91a3f9c163a2315c2de47abc31
*/
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { getEdgeCenter as getCenter, Position } from "react-flow-renderer";
// These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines.
var bottomLeftCorner = function (x, y, size) {
return "L ".concat(x, ",").concat(y - size, "Q ").concat(x, ",").concat(y, " ").concat(x + size, ",").concat(y);
};
var leftBottomCorner = function (x, y, size) {
return "L ".concat(x + size, ",").concat(y, "Q ").concat(x, ",").concat(y, " ").concat(x, ",").concat(y - size);
};
var bottomRightCorner = function (x, y, size) {
return "L ".concat(x, ",").concat(y - size, "Q ").concat(x, ",").concat(y, " ").concat(x - size, ",").concat(y);
};
var rightBottomCorner = function (x, y, size) {
return "L ".concat(x - size, ",").concat(y, "Q ").concat(x, ",").concat(y, " ").concat(x, ",").concat(y - size);
};
var leftTopCorner = function (x, y, size) { return "L ".concat(x + size, ",").concat(y, "Q ").concat(x, ",").concat(y, " ").concat(x, ",").concat(y + size); };
var topLeftCorner = function (x, y, size) { return "L ".concat(x, ",").concat(y + size, "Q ").concat(x, ",").concat(y, " ").concat(x + size, ",").concat(y); };
var topRightCorner = function (x, y, size) { return "L ".concat(x, ",").concat(y + size, "Q ").concat(x, ",").concat(y, " ").concat(x - size, ",").concat(y); };
var rightTopCorner = function (x, y, size) { return "L ".concat(x - size, ",").concat(y, "Q ").concat(x, ",").concat(y, " ").concat(x, ",").concat(y + size); };
export function getSmoothStepPath(_a) {
var sourceX = _a.sourceX, sourceY = _a.sourceY, _b = _a.sourcePosition, sourcePosition = _b === void 0 ? Position.Bottom : _b, targetX = _a.targetX, targetY = _a.targetY, _c = _a.targetPosition, targetPosition = _c === void 0 ? Position.Top : _c, _d = _a.borderRadius, borderRadius = _d === void 0 ? 5 : _d, centerX = _a.centerX, centerY = _a.centerY;
var _e = __read(getCenter({ sourceX: sourceX, sourceY: sourceY, targetX: targetX, targetY: targetY }), 4), _centerX = _e[0], _centerY = _e[1], offsetX = _e[2], offsetY = _e[3];
var cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
var cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
var cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
var cX = typeof centerX !== "undefined" ? centerX : _centerX;
var cY = typeof centerY !== "undefined" ? centerY : _centerY;
var firstCornerPath = "";
var secondCornerPath = "";
if (sourceX <= targetX) {
if (sourceY <= targetY) {
firstCornerPath = bottomLeftCorner(sourceX, cY, cornerSize);
secondCornerPath = rightTopCorner(targetX, cY, cornerSize);
if (sourcePosition === Position.Right) {
if (targetPosition === Position.Left) {
firstCornerPath = rightTopCorner(cX, sourceY, cornerSize);
secondCornerPath = bottomLeftCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === Position.Left) {
// no change
}
}
}
else {
firstCornerPath = topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath = rightBottomCorner(targetX, cY, cornerSize);
if (sourcePosition === Position.Right) {
if (targetPosition === Position.Left) {
firstCornerPath = rightBottomCorner(cX, sourceY, cornerSize);
secondCornerPath = topLeftCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === Position.Left) {
// no change
}
}
}
}
else {
if (sourceY <= targetY) {
firstCornerPath = bottomRightCorner(sourceX, cY, cornerSize);
secondCornerPath = leftTopCorner(targetX, cY, cornerSize);
if (sourcePosition === Position.Left) {
if (targetPosition === Position.Right) {
firstCornerPath = leftTopCorner(cX, sourceY, cornerSize);
secondCornerPath = bottomRightCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === Position.Right) {
// no change
}
}
}
else {
firstCornerPath = topRightCorner(sourceX, cY, cornerSize);
secondCornerPath = leftBottomCorner(targetX, cY, cornerSize);
if (sourcePosition === Position.Left) {
if (targetPosition === Position.Right) {
firstCornerPath = leftBottomCorner(cX, sourceY, cornerSize);
secondCornerPath = topRightCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === Position.Right) {
// no change
}
}
}
}
return "M ".concat(sourceX, ",").concat(sourceY).concat(firstCornerPath).concat(secondCornerPath, "L ").concat(targetX, ",").concat(targetY);
}
//# sourceMappingURL=getSmoothStepPath.js.map