UNPKG

vue-mermaid-string

Version:

A Vue.js component that turns a Mermaid string into a diagram.

532 lines (531 loc) 20.5 kB
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 };