@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
80 lines • 5.61 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.EdgeDefaultV12 = void 0;
const react_1 = __importStar(require("react"));
const react_2 = require("@xyflow/react");
const NodeContent_1 = require("../nodes/NodeContent");
const versionsupport_1 = require("../versionsupport");
const EdgeDefault_1 = require("./EdgeDefault");
const utils_1 = require("./utils");
/**
* 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, _e;
var { id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, label, labelStyle, labelShowBg, labelBgStyle, labelBgPadding = [5, 5], labelBgBorderRadius = 3, data = {}, getPath = utils_1.getStraightPath } = _a, edgeOriginalProperties = __rest(_a, ["id", "sourceX", "sourceY", "targetX", "targetY", "sourcePosition", "targetPosition", "label", "labelStyle", "labelShowBg", "labelBgStyle", "labelBgPadding", "labelBgBorderRadius", "data", "getPath"]);
const { pathGlowWidth = 10, highlightColor, renderLabel, edgeSvgProps, intent, arrowDirection = "normal", strokeType, } = data;
const [edgePath, labelX, labelY] = getPath({
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 renderedLabel = (_c = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel([labelX, labelY, sourceX, targetX])) !== null && _c !== void 0 ? _c : (label ? (react_1.default.createElement(react_2.EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding || [5, 5], labelBgBorderRadius: labelBgBorderRadius || 3 })) : null);
const appearance = (_d = data.markerAppearance) !== null && _d !== void 0 ? _d : "arrow-closed";
const marker = appearance !== "none"
? {
markerStart: arrowDirection === "inversed" || arrowDirection === "bidirectional"
? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"}-reverse)`
: undefined,
markerEnd: arrowDirection === "normal" || arrowDirection === "bidirectional"
? `url(#react-flow__marker--${appearance}${intent ? `-${intent}` : "-none"})`
: undefined,
}
: {};
return (react_1.default.createElement("g", Object.assign({}, edgeSvgProps, { className: EdgeDefault_1.edgeDefaultUtils.createEdgeDefaultClassName({ intent }, `${(_e = edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.className) !== null && _e !== void 0 ? _e : ""}`, versionsupport_1.ReactFlowVersions.V12), tabIndex: 0, role: "button", "data-id": id, "aria-label": `Edge from ${edgeOriginalProperties.source} to ${edgeOriginalProperties.target}`, "aria-describedby": `react-flow__edge-desc-${id}` }),
highlightColor && (react_1.default.createElement("path", { d: edgePath, className: EdgeDefault_1.edgeDefaultUtils.createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight"), strokeWidth: pathGlowWidth, style: Object.assign({}, highlightCustomPropertySettings) })),
react_1.default.createElement(react_2.BaseEdge, Object.assign({ id: id, path: edgePath }, marker, { 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