@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
97 lines • 5.18 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
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.getSmoothStepPath = getSmoothStepPath;
const react_flow_renderer_1 = require("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.
const bottomLeftCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
const leftBottomCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
const bottomRightCorner = (x, y, size) => `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
const rightBottomCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
const leftTopCorner = (x, y, size) => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
const topLeftCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
const topRightCorner = (x, y, size) => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
const rightTopCorner = (x, y, size) => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
function getSmoothStepPath({ sourceX, sourceY, sourcePosition = react_flow_renderer_1.Position.Bottom, targetX, targetY, targetPosition = react_flow_renderer_1.Position.Top, borderRadius = 5, centerX, centerY, }) {
const [_centerX, _centerY, offsetX, offsetY] = (0, react_flow_renderer_1.getEdgeCenter)({ sourceX, sourceY, targetX, targetY });
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
const cX = typeof centerX !== "undefined" ? centerX : _centerX;
const cY = typeof centerY !== "undefined" ? centerY : _centerY;
let firstCornerPath = "";
let secondCornerPath = "";
if (sourceX <= targetX) {
if (sourceY <= targetY) {
firstCornerPath = bottomLeftCorner(sourceX, cY, cornerSize);
secondCornerPath = rightTopCorner(targetX, cY, cornerSize);
if (sourcePosition === react_flow_renderer_1.Position.Right) {
if (targetPosition === react_flow_renderer_1.Position.Left) {
firstCornerPath = rightTopCorner(cX, sourceY, cornerSize);
secondCornerPath = bottomLeftCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === react_flow_renderer_1.Position.Left) {
// no change
}
}
}
else {
firstCornerPath = topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath = rightBottomCorner(targetX, cY, cornerSize);
if (sourcePosition === react_flow_renderer_1.Position.Right) {
if (targetPosition === react_flow_renderer_1.Position.Left) {
firstCornerPath = rightBottomCorner(cX, sourceY, cornerSize);
secondCornerPath = topLeftCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === react_flow_renderer_1.Position.Left) {
// no change
}
}
}
}
else {
if (sourceY <= targetY) {
firstCornerPath = bottomRightCorner(sourceX, cY, cornerSize);
secondCornerPath = leftTopCorner(targetX, cY, cornerSize);
if (sourcePosition === react_flow_renderer_1.Position.Left) {
if (targetPosition === react_flow_renderer_1.Position.Right) {
firstCornerPath = leftTopCorner(cX, sourceY, cornerSize);
secondCornerPath = bottomRightCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === react_flow_renderer_1.Position.Right) {
// no change
}
}
}
else {
firstCornerPath = topRightCorner(sourceX, cY, cornerSize);
secondCornerPath = leftBottomCorner(targetX, cY, cornerSize);
if (sourcePosition === react_flow_renderer_1.Position.Left) {
if (targetPosition === react_flow_renderer_1.Position.Right) {
firstCornerPath = leftBottomCorner(cX, sourceY, cornerSize);
secondCornerPath = topRightCorner(cX, targetY, cornerSize);
}
}
else {
if (targetPosition === react_flow_renderer_1.Position.Right) {
// no change
}
}
}
}
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
}
//# sourceMappingURL=getSmoothStepPath.js.map