@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
81 lines • 5.92 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __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 React, { memo } from "react";
import { BaseEdge, EdgeText } from "@xyflow/react";
import { nodeContentUtils } from "../nodes/NodeContent.js";
import { ReactFlowVersions } from "../versionsupport.js";
import { edgeDefaultUtils } from "./EdgeDefault.js";
import { getStraightPath } from "./utils.js";
/**
* 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
*/
export var EdgeDefaultV12 = memo(function (_a) {
var _b, _c, _d, _e;
var id = _a.id, sourceX = _a.sourceX, sourceY = _a.sourceY, targetX = _a.targetX, targetY = _a.targetY, sourcePosition = _a.sourcePosition, targetPosition = _a.targetPosition, label = _a.label, labelStyle = _a.labelStyle, labelShowBg = _a.labelShowBg, labelBgStyle = _a.labelBgStyle, _f = _a.labelBgPadding, labelBgPadding = _f === void 0 ? [5, 5] : _f, _g = _a.labelBgBorderRadius, labelBgBorderRadius = _g === void 0 ? 3 : _g, _h = _a.data, data = _h === void 0 ? {} : _h, _j = _a.getPath, getPath = _j === void 0 ? getStraightPath : _j, edgeOriginalProperties = __rest(_a, ["id", "sourceX", "sourceY", "targetX", "targetY", "sourcePosition", "targetPosition", "label", "labelStyle", "labelShowBg", "labelBgStyle", "labelBgPadding", "labelBgBorderRadius", "data", "getPath"]);
var _k = data.pathGlowWidth, pathGlowWidth = _k === void 0 ? 10 : _k, highlightColor = data.highlightColor, renderLabel = data.renderLabel, edgeSvgProps = data.edgeSvgProps, intent = data.intent, _l = data.arrowDirection, arrowDirection = _l === void 0 ? "normal" : _l, strokeType = data.strokeType;
var _m = __read(getPath({
sourceX: sourceX,
sourceY: sourceY,
sourcePosition: sourcePosition,
targetX: targetX,
targetY: targetY,
targetPosition: targetPosition,
}), 3), edgePath = _m[0], labelX = _m[1], labelY = _m[2];
var edgeStyle = (_b = edgeOriginalProperties.style) !== null && _b !== void 0 ? _b : {};
var highlightCustomPropertySettings = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor).highlightCustomPropertySettings;
var renderedLabel = (_c = renderLabel === null || renderLabel === void 0 ? void 0 : renderLabel([labelX, labelY, sourceX, targetX])) !== null && _c !== void 0 ? _c : (label ? (React.createElement(EdgeText, { x: labelX, y: labelY, label: label, labelStyle: labelStyle, labelShowBg: labelShowBg, labelBgStyle: labelBgStyle, labelBgPadding: labelBgPadding || [5, 5], labelBgBorderRadius: labelBgBorderRadius || 3 })) : null);
var appearance = (_d = data.markerAppearance) !== null && _d !== void 0 ? _d : "arrow-closed";
var marker = appearance !== "none"
? {
markerStart: arrowDirection === "inversed" || arrowDirection === "bidirectional"
? "url(#react-flow__marker--".concat(appearance).concat(intent ? "-".concat(intent) : "-none", "-reverse)")
: undefined,
markerEnd: arrowDirection === "normal" || arrowDirection === "bidirectional"
? "url(#react-flow__marker--".concat(appearance).concat(intent ? "-".concat(intent) : "-none", ")")
: undefined,
}
: {};
return (React.createElement("g", __assign({}, edgeSvgProps, { className: edgeDefaultUtils.createEdgeDefaultClassName({ intent: intent }, "".concat((_e = edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.className) !== null && _e !== void 0 ? _e : ""), ReactFlowVersions.V12), tabIndex: 0, role: "button", "data-id": id, "aria-label": "Edge from ".concat(edgeOriginalProperties.source, " to ").concat(edgeOriginalProperties.target), "aria-describedby": "react-flow__edge-desc-".concat(id) }),
highlightColor && (React.createElement("path", { d: edgePath, className: edgeDefaultUtils.createEdgeDefaultClassName({ highlightColor: highlightColor }, "react-flow__edge-path-highlight"), strokeWidth: pathGlowWidth, style: __assign({}, highlightCustomPropertySettings) })),
React.createElement(BaseEdge, __assign({ id: id, path: edgePath }, marker, { className: edgeDefaultUtils.createEdgeDefaultClassName({ strokeType: strokeType }), interactionWidth: pathGlowWidth, style: __assign(__assign(__assign({}, edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.style), edgeStyle), { color: edgeStyle.color || edgeStyle.stroke }) })),
renderedLabel));
});
//# sourceMappingURL=EdgeDefaultV12.js.map