@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
73 lines • 4.46 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 { intentClassName } from "../../../common/Intent/index.js";
import { CLASSPREFIX as eccgui } from "../../../configuration/constants.js";
import { Depiction, Icon, OverflowText } from "../../../index.js";
export var EdgeLabel = memo(function (_a) {
var depiction = _a.depiction, text = _a.text, actions = _a.actions, large = _a.large, fullWidth = _a.fullWidth, loose = _a.loose, intent = _a.intent, title = _a.title, className = _a.className, otherDivProps = __rest(_a, ["depiction", "text", "actions", "large", "fullWidth", "loose", "intent", "title", "className"]);
var depEl = !!depiction && typeof depiction === "string" ? (React.createElement(Depiction, { image: React.createElement(Icon, { name: depiction }) })) : (depiction);
return (React.createElement("div", __assign({ className: "".concat(eccgui, "-graphviz__edge-label") +
(large ? " ".concat(eccgui, "-graphviz__edge-label--large") : "") +
(fullWidth ? " ".concat(eccgui, "-graphviz__edge-label--fullwidth") : "") +
(loose ? " ".concat(eccgui, "-graphviz__edge-label--loose") : "") +
(intent ? " ".concat(intentClassName(intent)) : "") +
(className ? " ".concat(className) : "") }, otherDivProps),
!!depEl && (React.createElement("div", { className: "".concat(eccgui, "-graphviz__edge-label__depiction") }, React.cloneElement(depEl, {
padding: "tiny",
ratio: "1:1",
resizing: "contain",
forceInlineSvg: true,
border: false,
backgroundColor: undefined,
}))),
React.createElement("div", { className: "".concat(eccgui, "-graphviz__edge-label__text"), title: title }, typeof text === "string" ? React.createElement(OverflowText, null, text) : text),
!!actions && React.createElement("div", { className: "".concat(eccgui, "-graphviz__edge-label__aux") }, actions)));
});
export var EdgeLabelObject = memo(function (_a) {
var children = _a.children, edgeCenter = _a.edgeCenter, _b = _a.resizeTimeout, resizeTimeout = _b === void 0 ? -1 : _b, otherForeignObjectProps = __rest(_a, ["children", "edgeCenter", "resizeTimeout"]);
var containerCallback = React.useCallback(function (containerRef) {
if (containerRef)
labelSize(containerRef);
}, [edgeCenter]);
var labelSize = function (container) {
var labelElement = container.getElementsByClassName("".concat(eccgui, "-graphviz__edge-label"));
if (labelElement.length > 0) {
var width = labelElement[0].offsetWidth;
var height = labelElement[0].offsetHeight;
container.setAttribute("x", (edgeCenter[0] - width / 2).toString());
container.setAttribute("y", (edgeCenter[1] - height / 2).toString());
container.setAttribute("width", width.toString());
container.setAttribute("height", height.toString());
}
else if (resizeTimeout > 0) {
// Content is not ready yet, recall resizing process after timeout.
// This can happen in case the children is actually not a `EdgeLabel`.
setTimeout(function () {
labelSize(container);
}, resizeTimeout);
}
};
return (React.createElement("foreignObject", __assign({ ref: containerCallback, className: "".concat(eccgui, "-graphviz__edge-labelobject"), width: "1", height: "1" }, otherForeignObjectProps, { requiredExtensions: "http://www.w3.org/1999/xhtml" }), children));
});
//# sourceMappingURL=EdgeLabel.js.map