@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
79 lines • 5.56 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.edgeDefaultUtils = exports.EdgeDefault = void 0;
const react_1 = __importStar(require("react"));
const react_flow_renderer_1 = require("react-flow-renderer");
const Intent_1 = require("../../../common/Intent");
const constants_1 = require("../../../configuration/constants");
const NodeContent_1 = require("./../nodes/NodeContent");
const utils_1 = require("./utils");
exports.EdgeDefault = (0, react_1.memo)((_a) => {
var _b, _c, _d, _e;
var { data = {}, drawSvgPath = utils_1.drawEdgeStraight } = _a, edgeOriginalProperties = __rest(_a, ["data", "drawSvgPath"]);
const { pathGlowWidth = 10, markerStart, strokeType, intent, highlightColor, edgeSvgProps } = data;
const pathDisplay = drawSvgPath(Object.assign(Object.assign({}, edgeOriginalProperties), { data }));
const markerEnd = (0, react_flow_renderer_1.getMarkerEnd)(edgeOriginalProperties.arrowHeadType, edgeOriginalProperties.markerEndId);
const edgeCenter = (0, react_flow_renderer_1.getEdgeCenter)({
sourceX: edgeOriginalProperties.sourceX,
sourceY: edgeOriginalProperties.sourceY,
targetX: edgeOriginalProperties.targetX,
targetY: edgeOriginalProperties.targetY,
});
const edgeLabel = (_c = (_b = data.renderLabel) === null || _b === void 0 ? void 0 : _b.call(data, edgeCenter)) !== null && _c !== void 0 ? _c : (edgeOriginalProperties.label ? (react_1.default.createElement(react_flow_renderer_1.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);
const edgeStyle = (_d = edgeOriginalProperties.style) !== null && _d !== void 0 ? _d : {};
const { highlightCustomPropertySettings } = NodeContent_1.nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
return (react_1.default.createElement("g", Object.assign({}, edgeSvgProps, { className: createEdgeDefaultClassName({ intent }, (_e = edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.className) !== null && _e !== void 0 ? _e : ""), style: Object.assign(Object.assign(Object.assign({}, edgeSvgProps === null || edgeSvgProps === void 0 ? void 0 : edgeSvgProps.style), edgeStyle), { color: edgeStyle.color || edgeStyle.stroke }) }),
highlightColor && (react_1.default.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({ highlightColor }, "react-flow__edge-path-highlight"), strokeWidth: pathGlowWidth, style: Object.assign({}, highlightCustomPropertySettings) })),
pathGlowWidth && (react_1.default.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({}, "react-flow__edge-path-glow"), strokeWidth: pathGlowWidth })),
react_1.default.createElement("path", { d: pathDisplay, className: createEdgeDefaultClassName({ strokeType }), markerStart: markerStart, markerEnd: markerEnd }),
edgeLabel));
});
const createEdgeDefaultClassName = ({ strokeType, intent, highlightColor }, baseClass = "react-flow__edge-path") => {
const { highlightClassNameSuffix } = NodeContent_1.nodeContentUtils.evaluateHighlightColors("--edge-highlight", highlightColor);
return (baseClass +
(strokeType ? ` ${baseClass}--stroke-${strokeType}` : "") +
(intent ? ` ${(0, Intent_1.intentClassName)(intent)}` : "") +
(highlightClassNameSuffix.length > 0
? highlightClassNameSuffix.map((highlight) => ` ${constants_1.CLASSPREFIX}-graphviz__edge--highlight-${highlight}`).join("")
: ""));
};
exports.edgeDefaultUtils = {
createEdgeDefaultClassName,
drawEdgeStep: utils_1.drawEdgeStep,
drawEdgeStraight: utils_1.drawEdgeStraight,
};
//# sourceMappingURL=EdgeDefault.js.map