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