UNPKG

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