@ichigo_san/graphing
Version:
A lightweight UML-style diagram editor built with React Flow and Tailwind CSS
64 lines (63 loc) • 1.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactflow = require("reactflow");
var _floatingUtils = require("./floatingUtils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const FloatingConnectionLine = _ref => {
let {
fromX,
fromY,
toX,
toY,
fromPosition,
toPosition,
fromNode
} = _ref;
if (!fromNode) {
return null;
}
const targetNode = {
id: 'connection-target',
position: {
x: toX,
y: toY
},
positionAbsolute: {
x: toX,
y: toY
},
width: 1,
height: 1
};
const {
sx,
sy
} = (0, _floatingUtils.getEdgeParams)(fromNode, targetNode);
const [path] = (0, _reactflow.getBezierPath)({
sourceX: sx,
sourceY: sy,
sourcePosition: fromPosition,
targetPosition: toPosition,
targetX: toX,
targetY: toY
});
return /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement("path", {
fill: "none",
stroke: "#222",
strokeWidth: 1.5,
className: "animated",
d: path
}), /*#__PURE__*/_react.default.createElement("circle", {
cx: toX,
cy: toY,
fill: "#fff",
r: 3,
stroke: "#222",
strokeWidth: 1.5
}));
};
var _default = exports.default = FloatingConnectionLine;