1 | import { G as R } from "./graph-0ee63739.js";
|
2 | import { S as z, v as F, x as j, y as U, z as H, o as N, l as g, p as K, c as v, f as G, r as q, q as E, n as L, j as C, A as W, t as X, B as J } from "./mermaid-9f2aa176.js";
|
3 | import { r as Q } from "./index-bb6d8841.js";
|
4 | import { c as Y } from "./channel-ebbc4130.js";
|
5 | function Z(e) {
|
6 | return typeof e == "string" ? new z([document.querySelectorAll(e)], [document.documentElement]) : new z([j(e)], F);
|
7 | }
|
8 | function fe(e, l) {
|
9 | return !!e.children(l).length;
|
10 | }
|
11 | function pe(e) {
|
12 | return A(e.v) + ":" + A(e.w) + ":" + A(e.name);
|
13 | }
|
14 | var O = /:/g;
|
15 | function A(e) {
|
16 | return e ? String(e).replace(O, "\\:") : "";
|
17 | }
|
18 | function ee(e, l) {
|
19 | l && e.attr("style", l);
|
20 | }
|
21 | function be(e, l, c) {
|
22 | l && e.attr("class", l).attr("class", c + " " + e.attr("class"));
|
23 | }
|
24 | function ue(e, l) {
|
25 | var c = l.graph();
|
26 | if (U(c)) {
|
27 | var a = c.transition;
|
28 | if (H(a))
|
29 | return a(e);
|
30 | }
|
31 | return e;
|
32 | }
|
33 | function te(e, l) {
|
34 | var c = e.append("foreignObject").attr("width", "100000"), a = c.append("xhtml:div");
|
35 | a.attr("xmlns", "http://www.w3.org/1999/xhtml");
|
36 | var i = l.label;
|
37 | switch (typeof i) {
|
38 | case "function":
|
39 | a.insert(i);
|
40 | break;
|
41 | case "object":
|
42 | a.insert(function() {
|
43 | return i;
|
44 | });
|
45 | break;
|
46 | default:
|
47 | a.html(i);
|
48 | }
|
49 | ee(a, l.labelStyle), a.style("display", "inline-block"), a.style("white-space", "nowrap");
|
50 | var d = a.node().getBoundingClientRect();
|
51 | return c.attr("width", d.width).attr("height", d.height), c;
|
52 | }
|
53 | const P = {}, re = function(e) {
|
54 | const l = Object.keys(e);
|
55 | for (const c of l)
|
56 | P[c] = e[c];
|
57 | }, V = async function(e, l, c, a, i, d) {
|
58 | const u = a.select(`[id="${c}"]`), o = Object.keys(e);
|
59 | for (const f of o) {
|
60 | const r = e[f];
|
61 | let y = "default";
|
62 | r.classes.length > 0 && (y = r.classes.join(" ")), y = y + " flowchart-label";
|
63 | const w = N(r.styles);
|
64 | let t = r.text !== void 0 ? r.text : r.id, s;
|
65 | if (g.info("vertex", r, r.labelType), r.labelType === "markdown")
|
66 | g.info("vertex", r, r.labelType);
|
67 | else if (K(v().flowchart.htmlLabels))
|
68 | s = te(u, {
|
69 | label: t
|
70 | }).node(), s.parentNode.removeChild(s);
|
71 | else {
|
72 | const k = i.createElementNS("http://www.w3.org/2000/svg", "text");
|
73 | k.setAttribute("style", w.labelStyle.replace("color:", "fill:"));
|
74 | const _ = t.split(G.lineBreakRegex);
|
75 | for (const $ of _) {
|
76 | const S = i.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
77 | S.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve"), S.setAttribute("dy", "1em"), S.setAttribute("x", "1"), S.textContent = $, k.appendChild(S);
|
78 | }
|
79 | s = k;
|
80 | }
|
81 | let p = 0, n = "";
|
82 | switch (r.type) {
|
83 | case "round":
|
84 | p = 5, n = "rect";
|
85 | break;
|
86 | case "square":
|
87 | n = "rect";
|
88 | break;
|
89 | case "diamond":
|
90 | n = "question";
|
91 | break;
|
92 | case "hexagon":
|
93 | n = "hexagon";
|
94 | break;
|
95 | case "odd":
|
96 | n = "rect_left_inv_arrow";
|
97 | break;
|
98 | case "lean_right":
|
99 | n = "lean_right";
|
100 | break;
|
101 | case "lean_left":
|
102 | n = "lean_left";
|
103 | break;
|
104 | case "trapezoid":
|
105 | n = "trapezoid";
|
106 | break;
|
107 | case "inv_trapezoid":
|
108 | n = "inv_trapezoid";
|
109 | break;
|
110 | case "odd_right":
|
111 | n = "rect_left_inv_arrow";
|
112 | break;
|
113 | case "circle":
|
114 | n = "circle";
|
115 | break;
|
116 | case "ellipse":
|
117 | n = "ellipse";
|
118 | break;
|
119 | case "stadium":
|
120 | n = "stadium";
|
121 | break;
|
122 | case "subroutine":
|
123 | n = "subroutine";
|
124 | break;
|
125 | case "cylinder":
|
126 | n = "cylinder";
|
127 | break;
|
128 | case "group":
|
129 | n = "rect";
|
130 | break;
|
131 | case "doublecircle":
|
132 | n = "doublecircle";
|
133 | break;
|
134 | default:
|
135 | n = "rect";
|
136 | }
|
137 | const T = await q(t, v());
|
138 | l.setNode(r.id, {
|
139 | labelStyle: w.labelStyle,
|
140 | shape: n,
|
141 | labelText: T,
|
142 | labelType: r.labelType,
|
143 | rx: p,
|
144 | ry: p,
|
145 | class: y,
|
146 | style: w.style,
|
147 | id: r.id,
|
148 | link: r.link,
|
149 | linkTarget: r.linkTarget,
|
150 | tooltip: d.db.getTooltip(r.id) || "",
|
151 | domId: d.db.lookUpDomId(r.id),
|
152 | haveCallback: r.haveCallback,
|
153 | width: r.type === "group" ? 500 : void 0,
|
154 | dir: r.dir,
|
155 | type: r.type,
|
156 | props: r.props,
|
157 | padding: v().flowchart.padding
|
158 | }), g.info("setNode", {
|
159 | labelStyle: w.labelStyle,
|
160 | labelType: r.labelType,
|
161 | shape: n,
|
162 | labelText: T,
|
163 | rx: p,
|
164 | ry: p,
|
165 | class: y,
|
166 | style: w.style,
|
167 | id: r.id,
|
168 | domId: d.db.lookUpDomId(r.id),
|
169 | width: r.type === "group" ? 500 : void 0,
|
170 | type: r.type,
|
171 | dir: r.dir,
|
172 | props: r.props,
|
173 | padding: v().flowchart.padding
|
174 | });
|
175 | }
|
176 | }, M = async function(e, l, c) {
|
177 | g.info("abc78 edges = ", e);
|
178 | let a = 0, i = {}, d, u;
|
179 | if (e.defaultStyle !== void 0) {
|
180 | const o = N(e.defaultStyle);
|
181 | d = o.style, u = o.labelStyle;
|
182 | }
|
183 | for (const o of e) {
|
184 | a++;
|
185 | const f = "L-" + o.start + "-" + o.end;
|
186 | i[f] === void 0 ? (i[f] = 0, g.info("abc78 new entry", f, i[f])) : (i[f]++, g.info("abc78 new entry", f, i[f]));
|
187 | let r = f + "-" + i[f];
|
188 | g.info("abc78 new link id to be used is", f, r, i[f]);
|
189 | const y = "LS-" + o.start, w = "LE-" + o.end, t = { style: "", labelStyle: "" };
|
190 | switch (t.minlen = o.length || 1, o.type === "arrow_open" ? t.arrowhead = "none" : t.arrowhead = "normal", t.arrowTypeStart = "arrow_open", t.arrowTypeEnd = "arrow_open", o.type) {
|
191 | case "double_arrow_cross":
|
192 | t.arrowTypeStart = "arrow_cross";
|
193 | case "arrow_cross":
|
194 | t.arrowTypeEnd = "arrow_cross";
|
195 | break;
|
196 | case "double_arrow_point":
|
197 | t.arrowTypeStart = "arrow_point";
|
198 | case "arrow_point":
|
199 | t.arrowTypeEnd = "arrow_point";
|
200 | break;
|
201 | case "double_arrow_circle":
|
202 | t.arrowTypeStart = "arrow_circle";
|
203 | case "arrow_circle":
|
204 | t.arrowTypeEnd = "arrow_circle";
|
205 | break;
|
206 | }
|
207 | let s = "", p = "";
|
208 | switch (o.stroke) {
|
209 | case "normal":
|
210 | s = "fill:none;", d !== void 0 && (s = d), u !== void 0 && (p = u), t.thickness = "normal", t.pattern = "solid";
|
211 | break;
|
212 | case "dotted":
|
213 | t.thickness = "normal", t.pattern = "dotted", t.style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
|
214 | break;
|
215 | case "thick":
|
216 | t.thickness = "thick", t.pattern = "solid", t.style = "stroke-width: 3.5px;fill:none;";
|
217 | break;
|
218 | case "invisible":
|
219 | t.thickness = "invisible", t.pattern = "solid", t.style = "stroke-width: 0;fill:none;";
|
220 | break;
|
221 | }
|
222 | if (o.style !== void 0) {
|
223 | const n = N(o.style);
|
224 | s = n.style, p = n.labelStyle;
|
225 | }
|
226 | t.style = t.style += s, t.labelStyle = t.labelStyle += p, o.interpolate !== void 0 ? t.curve = E(o.interpolate, L) : e.defaultInterpolate !== void 0 ? t.curve = E(e.defaultInterpolate, L) : t.curve = E(P.curve, L), o.text === void 0 ? o.style !== void 0 && (t.arrowheadStyle = "fill: #333") : (t.arrowheadStyle = "fill: #333", t.labelpos = "c"), t.labelType = o.labelType, t.label = await q(o.text.replace(G.lineBreakRegex, `
|
227 | `), v()), o.style === void 0 && (t.style = t.style || "stroke: #333; stroke-width: 1.5px;fill:none;"), t.labelStyle = t.labelStyle.replace("color:", "fill:"), t.id = r, t.classes = "flowchart-link " + y + " " + w, l.setEdge(o.start, o.end, t, a);
|
228 | }
|
229 | }, le = function(e, l) {
|
230 | return l.db.getClasses();
|
231 | }, ae = async function(e, l, c, a) {
|
232 | g.info("Drawing flowchart");
|
233 | let i = a.db.getDirection();
|
234 | i === void 0 && (i = "TD");
|
235 | const { securityLevel: d, flowchart: u } = v(), o = u.nodeSpacing || 50, f = u.rankSpacing || 50;
|
236 | let r;
|
237 | d === "sandbox" && (r = C("#i" + l));
|
238 | const y = d === "sandbox" ? C(r.nodes()[0].contentDocument.body) : C("body"), w = d === "sandbox" ? r.nodes()[0].contentDocument : document, t = new R({
|
239 | multigraph: !0,
|
240 | compound: !0
|
241 | }).setGraph({
|
242 | rankdir: i,
|
243 | nodesep: o,
|
244 | ranksep: f,
|
245 | marginx: 0,
|
246 | marginy: 0
|
247 | }).setDefaultEdgeLabel(function() {
|
248 | return {};
|
249 | });
|
250 | let s;
|
251 | const p = a.db.getSubGraphs();
|
252 | g.info("Subgraphs - ", p);
|
253 | for (let b = p.length - 1; b >= 0; b--)
|
254 | s = p[b], g.info("Subgraph - ", s), a.db.addVertex(
|
255 | s.id,
|
256 | { text: s.title, type: s.labelType },
|
257 | "group",
|
258 | void 0,
|
259 | s.classes,
|
260 | s.dir
|
261 | );
|
262 | const n = a.db.getVertices(), T = a.db.getEdges();
|
263 | g.info("Edges", T);
|
264 | let k = 0;
|
265 | for (k = p.length - 1; k >= 0; k--) {
|
266 | s = p[k], Z("cluster").append("text");
|
267 | for (let b = 0; b < s.nodes.length; b++)
|
268 | g.info("Setting up subgraphs", s.nodes[b], s.id), t.setParent(s.nodes[b], s.id);
|
269 | }
|
270 | await V(n, t, l, y, w, a), await M(T, t);
|
271 | const _ = y.select(`[id="${l}"]`), $ = y.select("#" + l + " g");
|
272 | if (await Q($, t, ["point", "circle", "cross"], "flowchart", l), W.insertTitle(_, "flowchartTitleText", u.titleTopMargin, a.db.getDiagramTitle()), X(t, _, u.diagramPadding, u.useMaxWidth), a.db.indexNodes("subGraph" + k), !u.htmlLabels) {
|
273 | const b = w.querySelectorAll('[id="' + l + '"] .edgeLabel .label');
|
274 | for (const x of b) {
|
275 | const m = x.getBBox(), h = w.createElementNS("http://www.w3.org/2000/svg", "rect");
|
276 | h.setAttribute("rx", 0), h.setAttribute("ry", 0), h.setAttribute("width", m.width), h.setAttribute("height", m.height), x.insertBefore(h, x.firstChild);
|
277 | }
|
278 | }
|
279 | Object.keys(n).forEach(function(b) {
|
280 | const x = n[b];
|
281 | if (x.link) {
|
282 | const m = C("#" + l + ' [id="' + b + '"]');
|
283 | if (m) {
|
284 | const h = w.createElementNS("http://www.w3.org/2000/svg", "a");
|
285 | h.setAttributeNS("http://www.w3.org/2000/svg", "class", x.classes.join(" ")), h.setAttributeNS("http://www.w3.org/2000/svg", "href", x.link), h.setAttributeNS("http://www.w3.org/2000/svg", "rel", "noopener"), d === "sandbox" ? h.setAttributeNS("http://www.w3.org/2000/svg", "target", "_top") : x.linkTarget && h.setAttributeNS("http://www.w3.org/2000/svg", "target", x.linkTarget);
|
286 | const B = m.insert(function() {
|
287 | return h;
|
288 | }, ":first-child"), I = m.select(".label-container");
|
289 | I && B.append(function() {
|
290 | return I.node();
|
291 | });
|
292 | const D = m.select(".label");
|
293 | D && B.append(function() {
|
294 | return D.node();
|
295 | });
|
296 | }
|
297 | }
|
298 | });
|
299 | }, we = {
|
300 | setConf: re,
|
301 | addVertices: V,
|
302 | addEdges: M,
|
303 | getClasses: le,
|
304 | draw: ae
|
305 | }, ne = (e, l) => {
|
306 | const c = Y, a = c(e, "r"), i = c(e, "g"), d = c(e, "b");
|
307 | return J(a, i, d, l);
|
308 | }, oe = (e) => `.label {
|
309 | font-family: ${e.fontFamily};
|
310 | color: ${e.nodeTextColor || e.textColor};
|
311 | }
|
312 | .cluster-label text {
|
313 | fill: ${e.titleColor};
|
314 | }
|
315 | .cluster-label span,p {
|
316 | color: ${e.titleColor};
|
317 | }
|
318 |
|
319 | .label text,span,p {
|
320 | fill: ${e.nodeTextColor || e.textColor};
|
321 | color: ${e.nodeTextColor || e.textColor};
|
322 | }
|
323 |
|
324 | .node rect,
|
325 | .node circle,
|
326 | .node ellipse,
|
327 | .node polygon,
|
328 | .node path {
|
329 | fill: ${e.mainBkg};
|
330 | stroke: ${e.nodeBorder};
|
331 | stroke-width: 1px;
|
332 | }
|
333 | .flowchart-label text {
|
334 | text-anchor: middle;
|
335 | }
|
336 | // .flowchart-label .text-outer-tspan {
|
337 | // text-anchor: middle;
|
338 | // }
|
339 | // .flowchart-label .text-inner-tspan {
|
340 | // text-anchor: start;
|
341 | // }
|
342 |
|
343 | .node .katex path {
|
344 | fill: #000;
|
345 | stroke: #000;
|
346 | stroke-width: 1px;
|
347 | }
|
348 |
|
349 | .node .label {
|
350 | text-align: center;
|
351 | }
|
352 | .node.clickable {
|
353 | cursor: pointer;
|
354 | }
|
355 |
|
356 | .arrowheadPath {
|
357 | fill: ${e.arrowheadColor};
|
358 | }
|
359 |
|
360 | .edgePath .path {
|
361 | stroke: ${e.lineColor};
|
362 | stroke-width: 2.0px;
|
363 | }
|
364 |
|
365 | .flowchart-link {
|
366 | stroke: ${e.lineColor};
|
367 | fill: none;
|
368 | }
|
369 |
|
370 | .edgeLabel {
|
371 | background-color: ${e.edgeLabelBackground};
|
372 | rect {
|
373 | opacity: 0.5;
|
374 | background-color: ${e.edgeLabelBackground};
|
375 | fill: ${e.edgeLabelBackground};
|
376 | }
|
377 | text-align: center;
|
378 | }
|
379 |
|
380 | /* For html labels only */
|
381 | .labelBkg {
|
382 | background-color: ${ne(e.edgeLabelBackground, 0.5)};
|
383 | // background-color:
|
384 | }
|
385 |
|
386 | .cluster rect {
|
387 | fill: ${e.clusterBkg};
|
388 | stroke: ${e.clusterBorder};
|
389 | stroke-width: 1px;
|
390 | }
|
391 |
|
392 | .cluster text {
|
393 | fill: ${e.titleColor};
|
394 | }
|
395 |
|
396 | .cluster span,p {
|
397 | color: ${e.titleColor};
|
398 | }
|
399 | /* .cluster div {
|
400 | color: ${e.titleColor};
|
401 | } */
|
402 |
|
403 | div.mermaidTooltip {
|
404 | position: absolute;
|
405 | text-align: center;
|
406 | max-width: 200px;
|
407 | padding: 2px;
|
408 | font-family: ${e.fontFamily};
|
409 | font-size: 12px;
|
410 | background: ${e.tertiaryColor};
|
411 | border: 1px solid ${e.border2};
|
412 | border-radius: 2px;
|
413 | pointer-events: none;
|
414 | z-index: 100;
|
415 | }
|
416 |
|
417 | .flowchartTitleText {
|
418 | text-anchor: middle;
|
419 | font-size: 18px;
|
420 | fill: ${e.textColor};
|
421 | }
|
422 | `, he = oe;
|
423 | export {
|
424 | ee as a,
|
425 | te as b,
|
426 | ue as c,
|
427 | be as d,
|
428 | pe as e,
|
429 | we as f,
|
430 | he as g,
|
431 | fe as i,
|
432 | Z as s
|
433 | };
|