ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
499 lines (498 loc) • 20.8 kB
JavaScript
import { n as ce } from "./mermaid-parser.core-uIDZYuBu.js";
import { n as $ } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as J, p as j } from "./src-DtRLxcYO.js";
import { D as he, H as pe, K as ue, U as de, a as fe, b as ee, c as me, f as ge, v as ye, w as Se, y as ve } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { t as Z } from "./ordinal-BMN81JG2.js";
import { t as R } from "./defaultLocale-0M_kMcEH.js";
import { i as Q } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as xe } from "./chunk-VAUOI2AC-izt0o4id.js";
import { t as we } from "./chunk-JWPE2WC7-CGEmUMMZ.js";
import { t as be } from "./chunk-VR4S4FIN-CJi5okl4.js";
import { i as V, n as Ce } from "./chunk-C7G6YPKG-CA-DNpvI.js";
function $e(t) {
var a = 0, n = t.children, r = n && n.length;
if (!r) a = 1;
else for (; --r >= 0; ) a += n[r].value;
t.value = a;
}
function Te() {
return this.eachAfter($e);
}
function Le(t, a) {
let n = -1;
for (const r of this) t.call(a, r, ++n, this);
return this;
}
function _e(t, a) {
for (var n = this, r = [n], i, s, c = -1; n = r.pop(); )
if (t.call(a, n, ++c, this), i = n.children) for (s = i.length - 1; s >= 0; --s) r.push(i[s]);
return this;
}
function Ne(t, a) {
for (var n = this, r = [n], i = [], s, c, p, f = -1; n = r.pop(); )
if (i.push(n), s = n.children) for (c = 0, p = s.length; c < p; ++c) r.push(s[c]);
for (; n = i.pop(); ) t.call(a, n, ++f, this);
return this;
}
function ke(t, a) {
let n = -1;
for (const r of this) if (t.call(a, r, ++n, this)) return r;
}
function Fe(t) {
return this.eachAfter(function(a) {
for (var n = +t(a.data) || 0, r = a.children, i = r && r.length; --i >= 0; ) n += r[i].value;
a.value = n;
});
}
function Me(t) {
return this.eachBefore(function(a) {
a.children && a.children.sort(t);
});
}
function ze(t) {
for (var a = this, n = Ae(a, t), r = [a]; a !== n; )
a = a.parent, r.push(a);
for (var i = r.length; t !== n; )
r.splice(i, 0, t), t = t.parent;
return r;
}
function Ae(t, a) {
if (t === a) return t;
var n = t.ancestors(), r = a.ancestors(), i = null;
for (t = n.pop(), a = r.pop(); t === a; )
i = t, t = n.pop(), a = r.pop();
return i;
}
function De() {
for (var t = this, a = [t]; t = t.parent; ) a.push(t);
return a;
}
function Ve() {
return Array.from(this);
}
function Pe() {
var t = [];
return this.eachBefore(function(a) {
a.children || t.push(a);
}), t;
}
function Be() {
var t = this, a = [];
return t.each(function(n) {
n !== t && a.push({
source: n.parent,
target: n
});
}), a;
}
function* Ee() {
var t = this, a, n = [t], r, i, s;
do
for (a = n.reverse(), n = []; t = a.pop(); )
if (yield t, r = t.children) for (i = 0, s = r.length; i < s; ++i) n.push(r[i]);
while (n.length);
}
function te(t, a) {
t instanceof Map ? (t = [void 0, t], a === void 0 && (a = We)) : a === void 0 && (a = Re);
for (var n = new U(t), r, i = [n], s, c, p, f; r = i.pop(); ) if ((c = a(r.data)) && (f = (c = Array.from(c)).length))
for (r.children = c, p = f - 1; p >= 0; --p)
i.push(s = c[p] = new U(c[p])), s.parent = r, s.depth = r.depth + 1;
return n.eachBefore(Ge);
}
function Ie() {
return te(this).eachBefore(He);
}
function Re(t) {
return t.children;
}
function We(t) {
return Array.isArray(t) ? t[1] : null;
}
function He(t) {
t.data.value !== void 0 && (t.value = t.data.value), t.data = t.data.data;
}
function Ge(t) {
var a = 0;
do
t.height = a;
while ((t = t.parent) && t.height < ++a);
}
function U(t) {
this.data = t, this.depth = this.height = 0, this.parent = null;
}
U.prototype = te.prototype = {
constructor: U,
count: Te,
each: Le,
eachAfter: Ne,
eachBefore: _e,
find: ke,
sum: Fe,
sort: Me,
path: ze,
ancestors: De,
descendants: Ve,
leaves: Pe,
links: Be,
copy: Ie,
[Symbol.iterator]: Ee
};
function Oe(t) {
if (typeof t != "function") throw new Error();
return t;
}
function W() {
return 0;
}
function H(t) {
return function() {
return t;
};
}
function qe(t) {
t.x0 = Math.round(t.x0), t.y0 = Math.round(t.y0), t.x1 = Math.round(t.x1), t.y1 = Math.round(t.y1);
}
function je(t, a, n, r, i) {
for (var s = t.children, c, p = -1, f = s.length, o = t.value && (r - a) / t.value; ++p < f; )
c = s[p], c.y0 = n, c.y1 = i, c.x0 = a, c.x1 = a += c.value * o;
}
function Ue(t, a, n, r, i) {
for (var s = t.children, c, p = -1, f = s.length, o = t.value && (i - n) / t.value; ++p < f; )
c = s[p], c.x0 = a, c.x1 = r, c.y0 = n, c.y1 = n += c.value * o;
}
var Ye = (1 + Math.sqrt(5)) / 2;
function Ke(t, a, n, r, i, s) {
for (var c = [], p = a.children, f, o, u = 0, x = 0, l = p.length, v, y, S = a.value, d, m, M, N, z, B, _; u < l; ) {
v = i - n, y = s - r;
do
d = p[x++].value;
while (!d && x < l);
for (m = M = d, B = Math.max(y / v, v / y) / (S * t), _ = d * d * B, z = Math.max(M / _, _ / m); x < l; ++x) {
if (d += o = p[x].value, o < m && (m = o), o > M && (M = o), _ = d * d * B, N = Math.max(M / _, _ / m), N > z) {
d -= o;
break;
}
z = N;
}
c.push(f = {
value: d,
dice: v < y,
children: p.slice(u, x)
}), f.dice ? je(f, n, r, i, S ? r += y * d / S : s) : Ue(f, n, r, S ? n += v * d / S : i, s), S -= d, u = x;
}
return c;
}
var Xe = (function t(a) {
function n(r, i, s, c, p) {
Ke(a, r, i, s, c, p);
}
return n.ratio = function(r) {
return t((r = +r) > 1 ? r : 1);
}, n;
})(Ye);
function Ze() {
var t = Xe, a = !1, n = 1, r = 1, i = [0], s = W, c = W, p = W, f = W, o = W;
function u(l) {
return l.x0 = l.y0 = 0, l.x1 = n, l.y1 = r, l.eachBefore(x), i = [0], a && l.eachBefore(qe), l;
}
function x(l) {
var v = i[l.depth], y = l.x0 + v, S = l.y0 + v, d = l.x1 - v, m = l.y1 - v;
d < y && (y = d = (y + d) / 2), m < S && (S = m = (S + m) / 2), l.x0 = y, l.y0 = S, l.x1 = d, l.y1 = m, l.children && (v = i[l.depth + 1] = s(l) / 2, y += o(l) - v, S += c(l) - v, d -= p(l) - v, m -= f(l) - v, d < y && (y = d = (y + d) / 2), m < S && (S = m = (S + m) / 2), t(l, y, S, d, m));
}
return u.round = function(l) {
return arguments.length ? (a = !!l, u) : a;
}, u.size = function(l) {
return arguments.length ? (n = +l[0], r = +l[1], u) : [n, r];
}, u.tile = function(l) {
return arguments.length ? (t = Oe(l), u) : t;
}, u.padding = function(l) {
return arguments.length ? u.paddingInner(l).paddingOuter(l) : u.paddingInner();
}, u.paddingInner = function(l) {
return arguments.length ? (s = typeof l == "function" ? l : H(+l), u) : s;
}, u.paddingOuter = function(l) {
return arguments.length ? u.paddingTop(l).paddingRight(l).paddingBottom(l).paddingLeft(l) : u.paddingTop();
}, u.paddingTop = function(l) {
return arguments.length ? (c = typeof l == "function" ? l : H(+l), u) : c;
}, u.paddingRight = function(l) {
return arguments.length ? (p = typeof l == "function" ? l : H(+l), u) : p;
}, u.paddingBottom = function(l) {
return arguments.length ? (f = typeof l == "function" ? l : H(+l), u) : f;
}, u.paddingLeft = function(l) {
return arguments.length ? (o = typeof l == "function" ? l : H(+l), u) : o;
}, u;
}
var re = class {
constructor() {
this.nodes = [], this.levels = /* @__PURE__ */ new Map(), this.outerNodes = [], this.classes = /* @__PURE__ */ new Map(), this.setAccTitle = de, this.getAccTitle = ve, this.setDiagramTitle = ue, this.getDiagramTitle = Se, this.getAccDescription = ye, this.setAccDescription = pe;
}
static {
$(this, "TreeMapDB");
}
getNodes() {
return this.nodes;
}
getConfig() {
const t = ge, a = ee();
return Q({
...t.treemap,
...a.treemap ?? {}
});
}
addNode(t, a) {
this.nodes.push(t), this.levels.set(t, a), a === 0 && (this.outerNodes.push(t), this.root ??= t);
}
getRoot() {
return {
name: "",
children: this.outerNodes
};
}
addClass(t, a) {
const n = this.classes.get(t) ?? {
id: t,
styles: [],
textStyles: []
}, r = a.replace(/\\,/g, "§§§").replace(/,/g, ";").replace(/§§§/g, ",").split(";");
r && r.forEach((i) => {
Ce(i) && (n?.textStyles ? n.textStyles.push(i) : n.textStyles = [i]), n?.styles ? n.styles.push(i) : n.styles = [i];
}), this.classes.set(t, n);
}
getClasses() {
return this.classes;
}
getStylesForClass(t) {
return this.classes.get(t)?.styles ?? [];
}
clear() {
fe(), this.nodes = [], this.levels = /* @__PURE__ */ new Map(), this.outerNodes = [], this.classes = /* @__PURE__ */ new Map(), this.root = void 0;
}
};
function le(t) {
if (!t.length) return [];
const a = [], n = [];
return t.forEach((r) => {
const i = {
name: r.name,
children: r.type === "Leaf" ? void 0 : []
};
for (i.classSelector = r?.classSelector, r?.cssCompiledStyles && (i.cssCompiledStyles = r.cssCompiledStyles), r.type === "Leaf" && r.value !== void 0 && (i.value = r.value); n.length > 0 && n[n.length - 1].level >= r.level; ) n.pop();
if (n.length === 0) a.push(i);
else {
const s = n[n.length - 1].node;
s.children ? s.children.push(i) : s.children = [i];
}
r.type !== "Leaf" && n.push({
node: i,
level: r.level
});
}), a;
}
$(le, "buildHierarchy");
var Je = /* @__PURE__ */ $((t, a) => {
we(t, a);
const n = [];
for (const s of t.TreemapRows ?? []) s.$type === "ClassDefStatement" && a.addClass(s.className ?? "", s.styleText ?? "");
for (const s of t.TreemapRows ?? []) {
const c = s.item;
if (!c) continue;
const p = s.indent ? parseInt(s.indent) : 0, f = Qe(c), o = c.classSelector ? a.getStylesForClass(c.classSelector) : [], u = o.length > 0 ? o : void 0, x = {
level: p,
name: f,
type: c.$type,
value: c.value,
classSelector: c.classSelector,
cssCompiledStyles: u
};
n.push(x);
}
const r = le(n), i = /* @__PURE__ */ $((s, c) => {
for (const p of s)
a.addNode(p, c), p.children && p.children.length > 0 && i(p.children, c + 1);
}, "addNodesRecursively");
i(r, 0);
}, "populate"), Qe = /* @__PURE__ */ $((t) => t.name ? String(t.name) : "", "getItemName"), se = {
parser: { yy: void 0 },
parse: /* @__PURE__ */ $(async (t) => {
try {
const a = await ce("treemap", t);
J.debug("Treemap AST:", a);
const n = se.parser?.yy;
if (!(n instanceof re)) throw new Error("parser.parser?.yy was not a TreemapDB. This is due to a bug within Mermaid, please report this issue at https://github.com/mermaid-js/mermaid/issues.");
Je(a, n);
} catch (a) {
throw J.error("Error parsing treemap:", a), a;
}
}, "parse")
}, et = 10, P = 10, G = 25, tt = {
draw: /* @__PURE__ */ $((t, a, n, r) => {
const i = r.db, s = i.getConfig(), c = s.padding ?? et, p = i.getDiagramTitle(), f = i.getRoot(), { themeVariables: o } = ee();
if (!f) return;
const u = p ? 30 : 0, x = xe(a), l = s.nodeWidth ? s.nodeWidth * P : 960, v = s.nodeHeight ? s.nodeHeight * P : 500, y = l, S = v + u;
x.attr("viewBox", `0 0 ${y} ${S}`), me(x, S, y, s.useMaxWidth);
let d;
try {
const e = s.valueFormat || ",";
if (e === "$0,0") d = /* @__PURE__ */ $((h) => "$" + R(",")(h), "valueFormat");
else if (e.startsWith("$") && e.includes(",")) {
const h = /\.\d+/.exec(e), b = h ? h[0] : "";
d = /* @__PURE__ */ $((L) => "$" + R("," + b)(L), "valueFormat");
} else if (e.startsWith("$")) {
const h = e.substring(1);
d = /* @__PURE__ */ $((b) => "$" + R(h || "")(b), "valueFormat");
} else d = R(e);
} catch (e) {
J.error("Error creating format function:", e), d = R(",");
}
const m = Z().range([
"transparent",
o.cScale0,
o.cScale1,
o.cScale2,
o.cScale3,
o.cScale4,
o.cScale5,
o.cScale6,
o.cScale7,
o.cScale8,
o.cScale9,
o.cScale10,
o.cScale11
]), M = Z().range([
"transparent",
o.cScalePeer0,
o.cScalePeer1,
o.cScalePeer2,
o.cScalePeer3,
o.cScalePeer4,
o.cScalePeer5,
o.cScalePeer6,
o.cScalePeer7,
o.cScalePeer8,
o.cScalePeer9,
o.cScalePeer10,
o.cScalePeer11
]), N = Z().range([
o.cScaleLabel0,
o.cScaleLabel1,
o.cScaleLabel2,
o.cScaleLabel3,
o.cScaleLabel4,
o.cScaleLabel5,
o.cScaleLabel6,
o.cScaleLabel7,
o.cScaleLabel8,
o.cScaleLabel9,
o.cScaleLabel10,
o.cScaleLabel11
]);
p && x.append("text").attr("x", y / 2).attr("y", u / 2).attr("class", "treemapTitle").attr("text-anchor", "middle").attr("dominant-baseline", "middle").text(p);
const z = x.append("g").attr("transform", `translate(0, ${u})`).attr("class", "treemapContainer"), B = te(f).sum((e) => e.value ?? 0).sort((e, h) => (h.value ?? 0) - (e.value ?? 0)), _ = Ze().size([l, v]).paddingTop((e) => e.children && e.children.length > 0 ? G + P : 0).paddingInner(c).paddingLeft((e) => e.children && e.children.length > 0 ? P : 0).paddingRight((e) => e.children && e.children.length > 0 ? P : 0).paddingBottom((e) => e.children && e.children.length > 0 ? P : 0).round(!0)(B), ie = _.descendants().filter((e) => e.children && e.children.length > 0), E = z.selectAll(".treemapSection").data(ie).enter().append("g").attr("class", "treemapSection").attr("transform", (e) => `translate(${e.x0},${e.y0})`);
E.append("rect").attr("width", (e) => e.x1 - e.x0).attr("height", G).attr("class", "treemapSectionHeader").attr("fill", "none").attr("fill-opacity", 0.6).attr("stroke-width", 0.6).attr("style", (e) => e.depth === 0 ? "display: none;" : ""), E.append("clipPath").attr("id", (e, h) => `clip-section-${a}-${h}`).append("rect").attr("width", (e) => Math.max(0, e.x1 - e.x0 - 12)).attr("height", G), E.append("rect").attr("width", (e) => e.x1 - e.x0).attr("height", (e) => e.y1 - e.y0).attr("class", (e, h) => `treemapSection section${h}`).attr("fill", (e) => m(e.data.name)).attr("fill-opacity", 0.6).attr("stroke", (e) => M(e.data.name)).attr("stroke-width", 2).attr("stroke-opacity", 0.4).attr("style", (e) => {
if (e.depth === 0) return "display: none;";
const h = V({ cssCompiledStyles: e.data.cssCompiledStyles });
return h.nodeStyles + ";" + h.borderStyles.join(";");
}), E.append("text").attr("class", "treemapSectionLabel").attr("x", 6).attr("y", G / 2).attr("dominant-baseline", "middle").text((e) => e.depth === 0 ? "" : e.data.name).attr("font-weight", "bold").attr("clip-path", (e, h) => `url(#clip-section-${a}-${h})`).attr("style", (e) => e.depth === 0 ? "display: none;" : "dominant-baseline: middle; font-size: 12px; fill:" + N(e.data.name) + "; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" + V({ cssCompiledStyles: e.data.cssCompiledStyles }).labelStyles.replace("color:", "fill:")).each(function(e) {
if (e.depth === 0) return;
const h = j(this), b = e.data.name;
h.text(b);
const L = e.x1 - e.x0, F = 6;
let T;
s.showValues !== !1 && e.value ? T = L - 10 - 30 - 10 - F : T = L - F - 6;
const C = Math.max(15, T), g = h.node();
if (g.getComputedTextLength() > C) {
let w = b;
for (; w.length > 0; ) {
if (w = b.substring(0, w.length - 1), w.length === 0) {
h.text("..."), g.getComputedTextLength() > C && h.text("");
break;
}
if (h.text(w + "..."), g.getComputedTextLength() <= C) break;
}
}
}), s.showValues !== !1 && E.append("text").attr("class", "treemapSectionValue").attr("x", (e) => e.x1 - e.x0 - 10).attr("y", G / 2).attr("text-anchor", "end").attr("dominant-baseline", "middle").text((e) => e.value ? d(e.value) : "").attr("font-style", "italic").attr("style", (e) => e.depth === 0 ? "display: none;" : "text-anchor: end; dominant-baseline: middle; font-size: 10px; fill:" + N(e.data.name) + "; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" + V({ cssCompiledStyles: e.data.cssCompiledStyles }).labelStyles.replace("color:", "fill:"));
const ae = _.leaves(), k = ae.length > 20, oe = k ? 16 : 38, O = k ? 14 : 28, A = k ? 4 : 8, D = k ? 4 : 6, Y = k ? 2 : 4, ne = k ? 8 : 10, K = k ? 1 : 2, q = z.selectAll(".treemapLeafGroup").data(ae).enter().append("g").attr("class", (e, h) => `treemapNode treemapLeafGroup leaf${h}${e.data.classSelector ? ` ${e.data.classSelector}` : ""}x`).attr("transform", (e) => `translate(${e.x0},${e.y0})`);
q.append("rect").attr("width", (e) => e.x1 - e.x0).attr("height", (e) => e.y1 - e.y0).attr("class", "treemapLeaf").attr("fill", (e) => e.parent ? m(e.parent.data.name) : m(e.data.name)).attr("style", (e) => V({ cssCompiledStyles: e.data.cssCompiledStyles }).nodeStyles).attr("fill-opacity", 0.3).attr("stroke", (e) => e.parent ? m(e.parent.data.name) : m(e.data.name)).attr("stroke-width", 3), q.append("clipPath").attr("id", (e, h) => `clip-${a}-${h}`).append("rect").attr("width", (e) => Math.max(0, e.x1 - e.x0 - 4)).attr("height", (e) => Math.max(0, e.y1 - e.y0 - 4)), q.append("text").attr("class", "treemapLabel").attr("x", (e) => (e.x1 - e.x0) / 2).attr("y", (e) => (e.y1 - e.y0) / 2).attr("style", (e) => `text-anchor: middle; dominant-baseline: middle; font-size: ${oe}px;fill:` + N(e.data.name) + ";" + V({ cssCompiledStyles: e.data.cssCompiledStyles }).labelStyles.replace("color:", "fill:")).attr("clip-path", (e, h) => `url(#clip-${a}-${h})`).text((e) => e.data.name).each(function(e) {
const h = j(this), b = e.x1 - e.x0, L = e.y1 - e.y0, F = h.node(), T = b - 2 * Y, C = L - 2 * Y;
if (T < ne || C < ne) {
h.style("display", "none");
return;
}
let g = parseInt(h.style("font-size"), 10);
const I = 0.6;
for (; F.getComputedTextLength() > T && g > A; )
g--, h.style("font-size", `${g}px`);
let w = Math.max(D, Math.min(O, Math.round(g * I))), X = g + K + w;
for (; X > C && g > A && (g--, w = Math.max(D, Math.min(O, Math.round(g * I))), !(w < D && g === A)); )
h.style("font-size", `${g}px`), X = g + K + w, w <= D && X > C;
h.style("font-size", `${g}px`), k ? (g < A || C < A) && h.style("display", "none") : (F.getComputedTextLength() > T || g < A || C < g) && h.style("display", "none");
}), s.showValues !== !1 && q.append("text").attr("class", "treemapValue").attr("x", (e) => (e.x1 - e.x0) / 2).attr("y", function(e) {
return (e.y1 - e.y0) / 2;
}).attr("style", (e) => `text-anchor: middle; dominant-baseline: hanging; font-size: ${O}px;fill:` + N(e.data.name) + ";" + V({ cssCompiledStyles: e.data.cssCompiledStyles }).labelStyles.replace("color:", "fill:")).attr("clip-path", (e, h) => `url(#clip-${a}-${h})`).text((e) => e.value ? d(e.value) : "").each(function(e) {
const h = j(this), b = this.parentNode;
if (!b) {
h.style("display", "none");
return;
}
const L = j(b).select(".treemapLabel");
if (L.empty() || L.style("display") === "none") {
h.style("display", "none");
return;
}
const F = parseFloat(L.style("font-size")), T = Math.max(D, Math.min(O, Math.round(F * 0.6)));
h.style("font-size", `${T}px`);
const C = (e.y1 - e.y0) / 2 + F / 2 + K;
h.attr("y", C);
const g = e.x1 - e.x0, I = e.y1 - e.y0 - 4, w = g - 2 * Y;
h.node().getComputedTextLength() > w || C + T > I || T < D ? h.style("display", "none") : h.style("display", null);
}), be(x, s.diagramPadding ?? 8, "flowchart", s?.useMaxWidth || !1);
}, "draw"),
getClasses: /* @__PURE__ */ $(function(t, a) {
return a.db.getClasses();
}, "getClasses")
}, at = {
sectionStrokeColor: "black",
sectionStrokeWidth: "1",
sectionFillColor: "#efefef",
leafStrokeColor: "black",
leafStrokeWidth: "1",
leafFillColor: "#efefef",
labelFontSize: "12px",
valueFontSize: "10px",
titleFontSize: "14px"
}, ft = {
parser: se,
get db() {
return new re();
},
renderer: tt,
styles: /* @__PURE__ */ $(({ treemap: t } = {}) => {
const a = Q(he(), ee().themeVariables), n = Q(at, t), r = n.titleColor ?? a.titleColor, i = n.labelColor ?? a.textColor, s = n.valueColor ?? a.textColor;
return `
.treemapNode.section {
stroke: ${n.sectionStrokeColor};
stroke-width: ${n.sectionStrokeWidth};
fill: ${n.sectionFillColor};
}
.treemapNode.leaf {
stroke: ${n.leafStrokeColor};
stroke-width: ${n.leafStrokeWidth};
fill: ${n.leafFillColor};
}
.treemapLabel {
fill: ${i};
font-size: ${n.labelFontSize};
}
.treemapValue {
fill: ${s};
font-size: ${n.valueFontSize};
}
.treemapTitle {
fill: ${r};
font-size: ${n.titleFontSize};
}
`;
}, "getStyles")
};
export {
ft as diagram
};