UNPKG

12.8 kBJavaScriptView Raw
1import { G as R } from "./graph-0ee63739.js";
2import { 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";
3import { r as Q } from "./index-bb6d8841.js";
4import { c as Y } from "./channel-ebbc4130.js";
5function Z(e) {
6 return typeof e == "string" ? new z([document.querySelectorAll(e)], [document.documentElement]) : new z([j(e)], F);
7}
8function fe(e, l) {
9 return !!e.children(l).length;
10}
11function pe(e) {
12 return A(e.v) + ":" + A(e.w) + ":" + A(e.name);
13}
14var O = /:/g;
15function A(e) {
16 return e ? String(e).replace(O, "\\:") : "";
17}
18function ee(e, l) {
19 l && e.attr("style", l);
20}
21function be(e, l, c) {
22 l && e.attr("class", l).attr("class", c + " " + e.attr("class"));
23}
24function 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}
33function 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}
53const 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;
423export {
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};