@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
84 lines • 5.89 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;
};
import React, { memo } from "react";
import { EdgeText, getEdgeCenter, getMarkerEnd } from "react-flow-renderer";
import { intentClassName } from "../../../common/Intent/index.js";
import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
import { ReactFlowVersions, useReactFlowVersion } from "../versionsupport.js";
import { nodeContentUtils } from "./../nodes/NodeContent.js";
import { EdgeDefaultV12 } from "./EdgeDefaultV12.js";
import { drawEdgeStep, drawEdgeStraight } from "./utils.js";
var EdgeDefaultV9 = memo(function (_a) {
var _b, _c, _d, _e;
var _f = _a.data, data = _f === void 0 ? {} : _f, _g = _a.drawSvgPath, drawSvgPath = _g === void 0 ? drawEdgeStraight : _g, edgeOriginalProperties = __rest(_a, ["data", "drawSvgPath"]);
var _h = data.pathGlowWidth, pathGlowWidth = _h === void 0 ? 10 : _h, markerStart = data.markerStart, strokeType = data.strokeType, intent = data.intent, highlightColor = data.highlightColor, edgeSvgProps = data.edgeSvgProps;
var pathDisplay = drawSvgPath(__assign(__assign({}, edgeOriginalProperties), { data: data }));
var markerEnd = getMarkerEnd(edgeOriginalProperties.arrowHeadType, edgeOriginalProperties.markerEndId);
var edgeCenter = getEdgeCenter({
sourceX: edgeOriginalProperties.sourceX,
sourceY: edgeOriginalProperties.sourceY,
targetX: edgeOriginalProperties.targetX,
targetY: edgeOriginalProperties.targetY,
});
var edgeLabel = (_c = (_b = data.renderLabel) === null || _b === void 0 ? void 0 : _b.call(data, edgeCenter)) !== null && _c !== void 0 ? _c : (edgeOriginalProperties.label ? (React.createElement(EdgeText, { x: edgeCenter[0], y: edgeCenter[1], label: edgeOriginalProperties.label, labelStyle: edgeOriginalProperties.labelStyle, labelShowBg: edgeOriginalProperties.labelShowBg, labelBgStyle: edgeOriginalProperties.labelBgStyle, labelBgPadding: edgeOriginalProperties.labelBgPadding || [5, 5], labelBgBorderRadius: edgeOriginalProperties.labelBgBorderRadius || 3 })) : null);
var edgeStyle = (_d = edgeOriginalProperties.style) !== null && _d !== void 0 ? _d : {};
var highlightCustomPropertySettings = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor).highlightCustomPropertySettings;
return (React.createElement("g", __assign({}, edgeSvgProps, { className: createEdgeDefaultClassName({ intent: intent }, "".concat((_e = edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.className) !== null && _e !== void 0 ? _e : ""), ReactFlowVersions.V9), style: __assign(__assign(__assign({}, edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.style), edgeStyle), { color: edgeStyle.color || edgeStyle.stroke }) }),
highlightColor && (React.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({ highlightColor: highlightColor }, "react-flow__edge-path-highlight"), strokeWidth: pathGlowWidth, style: __assign({}, highlightCustomPropertySettings) })),
pathGlowWidth && (React.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({}, "react-flow__edge-path-glow"), strokeWidth: pathGlowWidth })),
React.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({ strokeType: strokeType }), markerStart: markerStart, markerEnd: markerEnd }),
edgeLabel));
});
/**
* This element cannot be used directly, it must be connected via a `edgeTypes` definition.
* @see https://reactflow.dev/docs/api/nodes/
*/
export var EdgeDefault = memo(function (props) {
var flowVersionCheck = useReactFlowVersion();
switch (flowVersionCheck) {
case ReactFlowVersions.V9:
return React.createElement(EdgeDefaultV9, __assign({}, props));
case ReactFlowVersions.V12:
return React.createElement(EdgeDefaultV12, __assign({}, props));
default:
return React.createElement(React.Fragment, null);
}
});
var createEdgeDefaultClassName = function (_a, baseClass, flowVersion) {
var strokeType = _a.strokeType, intent = _a.intent, highlightColor = _a.highlightColor;
if (baseClass === void 0) { baseClass = "react-flow__edge-path"; }
var highlightClassNameSuffix = nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor).highlightClassNameSuffix;
return (baseClass +
(flowVersion ? " react-flow__edge--".concat(flowVersion) : "") +
(strokeType ? " ".concat(baseClass, "--stroke-").concat(strokeType) : "") +
(intent ? " ".concat(intentClassName(intent)) : "") +
(highlightClassNameSuffix.length > 0
? highlightClassNameSuffix.map(function (highlight) { return " ".concat(eccgui, "-graphviz__edge--highlight-").concat(highlight); }).join("")
: ""));
};
export var edgeDefaultUtils = {
createEdgeDefaultClassName: createEdgeDefaultClassName,
drawEdgeStep: drawEdgeStep,
drawEdgeStraight: drawEdgeStraight,
};
//# sourceMappingURL=EdgeDefault.js.map