@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
56 lines • 4.32 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EdgeDefaultV12 = void 0;
const react_1 = require("react");
const react_2 = __importDefault(require("react"));
const react_3 = require("@xyflow/react");
const NodeContent_1 = require("../nodes/NodeContent");
const EdgeDefault_1 = require("./EdgeDefault");
/**
* This element cannot be used directly, it must be connected via a `edgeTypes` definition.
* @see https://reactflow.dev/docs/api/nodes/
* @deprecated (v26) will be removed when `EdgeDefault` supports v12 directly
*/
exports.EdgeDefaultV12 = (0, react_1.memo)((_a) => {
var _b, _c, _d;
var { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding = [5, 5], labelBgBorderRadius = 3, data = {} } = _a, edgeOriginalProperties = __rest(_a, ["id", "sourceX", "sourceY", "targetX", "targetY", "sourcePosition", "targetPosition", "label", "labelStyle", "labelShowBg", "labelBgStyle", "labelBgPadding", "labelBgBorderRadius", "data"]);
const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, inversePath, strokeType } = data;
const [edgePath, labelX, labelY] = (0, react_3.getBezierPath)({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const edgeStyle = (_b = edgeOriginalProperties.style) !== null && _b !== void 0 ? _b : {};
const { highlightCustomPropertySettings } = NodeContent_1.nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
const edgeCenter = (0, react_3.getEdgeCenter)({
sourceX,
sourceY,
targetX,
targetY,
});
const renderedLabel = (_c = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel([labelX, labelY, sourceX, targetX])) !== null && _c !== void 0 ? _c : (label ? (react_2.default.createElement(react_3.EdgeText, { x: edgeCenter[0], y: edgeCenter[1], label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding || [5, 5], labelBgBorderRadius: labelBgBorderRadius || 3 })) : null);
return (react_2.default.createElement("g", { className: "react-flow__edge " +
EdgeDefault_1.edgeDefaultUtils.createEdgeDefaultClassName({ intent }, `${edgeOriginalProperties.selected ? "selected" : ""}`), tabIndex: 0, role: "button", "data-id": id, "aria-label": `Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`, "aria-describedby": `react-flow__edge-desc-${id}` },
react_2.default.createElement("g", { className: (_d = edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.className) !== null && _d !== void 0 ? _d : "" },
highlightColor && (react_2.default.createElement("path", { d: edgePath, className: EdgeDefault_1.edgeDefaultUtils.createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight"), strokeWidth: 10, style: Object.assign({}, highlightCustomPropertySettings) })),
react_2.default.createElement(react_3.BaseEdge, { id: id, path: edgePath, markerStart: inversePath ? "url(#arrow-closed-reverse)" : undefined, markerEnd: !inversePath ? "url(#arrow-closed)" : undefined, className: EdgeDefault_1.edgeDefaultUtils.createEdgeDefaultClassName({ strokeType }), interactionWidth: pathGlowWidth, style: Object.assign(Object.assign(Object.assign({}, edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.style), edgeStyle), { color: edgeStyle.color || edgeStyle.stroke }) })),
renderedLabel));
});
//# sourceMappingURL=EdgeDefaultV12.js.map