1 | import { i as isPlainObject, G as Graph } from "./layout-e57aec3f.js";
|
2 | import { _, C as Color, v as isFunction, p as getStylesFromArray, l as log, q as evaluate, c as getConfig, f as common, r as interpolateToCurve, o as curveLinear, j as select, x as utils, t as setupGraphViewbox, y as rgba } from "./mermaid-4b4b971d.js";
|
3 | import { f as flowDb } from "./flowDb-ab4144b2.js";
|
4 | import { r as render } from "./index-f7dc402e.js";
|
5 | import { s as selectAll } from "./selectAll-f3da6cb0.js";
|
6 | const channel = (color, channel2) => {
|
7 | return _.lang.round(Color.parse(color)[channel2]);
|
8 | };
|
9 | const channel$1 = channel;
|
10 | function isSubgraph(g, v) {
|
11 | return !!g.children(v).length;
|
12 | }
|
13 | function edgeToId(e) {
|
14 | return escapeId(e.v) + ":" + escapeId(e.w) + ":" + escapeId(e.name);
|
15 | }
|
16 | var ID_DELIM = /:/g;
|
17 | function escapeId(str) {
|
18 | return str ? String(str).replace(ID_DELIM, "\\:") : "";
|
19 | }
|
20 | function applyStyle(dom, styleFn) {
|
21 | if (styleFn) {
|
22 | dom.attr("style", styleFn);
|
23 | }
|
24 | }
|
25 | function applyClass(dom, classFn, otherClasses) {
|
26 | if (classFn) {
|
27 | dom.attr("class", classFn).attr("class", otherClasses + " " + dom.attr("class"));
|
28 | }
|
29 | }
|
30 | function applyTransition(selection, g) {
|
31 | var graph = g.graph();
|
32 | if (isPlainObject(graph)) {
|
33 | var transition = graph.transition;
|
34 | if (isFunction(transition)) {
|
35 | return transition(selection);
|
36 | }
|
37 | }
|
38 | return selection;
|
39 | }
|
40 | function addHtmlLabel(root, node) {
|
41 | var fo = root.append("foreignObject").attr("width", "100000");
|
42 | var div = fo.append("xhtml:div");
|
43 | div.attr("xmlns", "http://www.w3.org/1999/xhtml");
|
44 | var label = node.label;
|
45 | switch (typeof label) {
|
46 | case "function":
|
47 | div.insert(label);
|
48 | break;
|
49 | case "object":
|
50 | div.insert(function() {
|
51 | return label;
|
52 | });
|
53 | break;
|
54 | default:
|
55 | div.html(label);
|
56 | }
|
57 | applyStyle(div, node.labelStyle);
|
58 | div.style("display", "inline-block");
|
59 | div.style("white-space", "nowrap");
|
60 | var client = div.node().getBoundingClientRect();
|
61 | fo.attr("width", client.width).attr("height", client.height);
|
62 | return fo;
|
63 | }
|
64 | const conf = {};
|
65 | const setConf = function(cnf) {
|
66 | const keys = Object.keys(cnf);
|
67 | for (const key of keys) {
|
68 | conf[key] = cnf[key];
|
69 | }
|
70 | };
|
71 | const addVertices = function(vert, g, svgId, root, doc, diagObj) {
|
72 | const svg = root.select(`[id="${svgId}"]`);
|
73 | const keys = Object.keys(vert);
|
74 | keys.forEach(function(id) {
|
75 | const vertex = vert[id];
|
76 | let classStr = "default";
|
77 | if (vertex.classes.length > 0) {
|
78 | classStr = vertex.classes.join(" ");
|
79 | }
|
80 | classStr = classStr + " flowchart-label";
|
81 | const styles = getStylesFromArray(vertex.styles);
|
82 | let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id;
|
83 | let vertexNode;
|
84 | log.info("vertex", vertex, vertex.labelType);
|
85 | if (vertex.labelType === "markdown") {
|
86 | log.info("vertex", vertex, vertex.labelType);
|
87 | } else {
|
88 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
89 | const node = {
|
90 | label: vertexText.replace(
|
91 | /fa[blrs]?:fa-[\w-]+/g,
|
92 | (s) => `<i class='${s.replace(":", " ")}'></i>`
|
93 | )
|
94 | };
|
95 | vertexNode = addHtmlLabel(svg, node).node();
|
96 | vertexNode.parentNode.removeChild(vertexNode);
|
97 | } else {
|
98 | const svgLabel = doc.createElementNS("http://www.w3.org/2000/svg", "text");
|
99 | svgLabel.setAttribute("style", styles.labelStyle.replace("color:", "fill:"));
|
100 | const rows = vertexText.split(common.lineBreakRegex);
|
101 | for (const row of rows) {
|
102 | const tspan = doc.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
103 | tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
|
104 | tspan.setAttribute("dy", "1em");
|
105 | tspan.setAttribute("x", "1");
|
106 | tspan.textContent = row;
|
107 | svgLabel.appendChild(tspan);
|
108 | }
|
109 | vertexNode = svgLabel;
|
110 | }
|
111 | }
|
112 | let radious = 0;
|
113 | let _shape = "";
|
114 | switch (vertex.type) {
|
115 | case "round":
|
116 | radious = 5;
|
117 | _shape = "rect";
|
118 | break;
|
119 | case "square":
|
120 | _shape = "rect";
|
121 | break;
|
122 | case "diamond":
|
123 | _shape = "question";
|
124 | break;
|
125 | case "hexagon":
|
126 | _shape = "hexagon";
|
127 | break;
|
128 | case "odd":
|
129 | _shape = "rect_left_inv_arrow";
|
130 | break;
|
131 | case "lean_right":
|
132 | _shape = "lean_right";
|
133 | break;
|
134 | case "lean_left":
|
135 | _shape = "lean_left";
|
136 | break;
|
137 | case "trapezoid":
|
138 | _shape = "trapezoid";
|
139 | break;
|
140 | case "inv_trapezoid":
|
141 | _shape = "inv_trapezoid";
|
142 | break;
|
143 | case "odd_right":
|
144 | _shape = "rect_left_inv_arrow";
|
145 | break;
|
146 | case "circle":
|
147 | _shape = "circle";
|
148 | break;
|
149 | case "ellipse":
|
150 | _shape = "ellipse";
|
151 | break;
|
152 | case "stadium":
|
153 | _shape = "stadium";
|
154 | break;
|
155 | case "subroutine":
|
156 | _shape = "subroutine";
|
157 | break;
|
158 | case "cylinder":
|
159 | _shape = "cylinder";
|
160 | break;
|
161 | case "group":
|
162 | _shape = "rect";
|
163 | break;
|
164 | case "doublecircle":
|
165 | _shape = "doublecircle";
|
166 | break;
|
167 | default:
|
168 | _shape = "rect";
|
169 | }
|
170 | g.setNode(vertex.id, {
|
171 | labelStyle: styles.labelStyle,
|
172 | shape: _shape,
|
173 | labelText: vertexText,
|
174 | labelType: vertex.labelType,
|
175 | rx: radious,
|
176 | ry: radious,
|
177 | class: classStr,
|
178 | style: styles.style,
|
179 | id: vertex.id,
|
180 | link: vertex.link,
|
181 | linkTarget: vertex.linkTarget,
|
182 | tooltip: diagObj.db.getTooltip(vertex.id) || "",
|
183 | domId: diagObj.db.lookUpDomId(vertex.id),
|
184 | haveCallback: vertex.haveCallback,
|
185 | width: vertex.type === "group" ? 500 : void 0,
|
186 | dir: vertex.dir,
|
187 | type: vertex.type,
|
188 | props: vertex.props,
|
189 | padding: getConfig().flowchart.padding
|
190 | });
|
191 | log.info("setNode", {
|
192 | labelStyle: styles.labelStyle,
|
193 | labelType: vertex.labelType,
|
194 | shape: _shape,
|
195 | labelText: vertexText,
|
196 | rx: radious,
|
197 | ry: radious,
|
198 | class: classStr,
|
199 | style: styles.style,
|
200 | id: vertex.id,
|
201 | domId: diagObj.db.lookUpDomId(vertex.id),
|
202 | width: vertex.type === "group" ? 500 : void 0,
|
203 | type: vertex.type,
|
204 | dir: vertex.dir,
|
205 | props: vertex.props,
|
206 | padding: getConfig().flowchart.padding
|
207 | });
|
208 | });
|
209 | };
|
210 | const addEdges = function(edges, g, diagObj) {
|
211 | log.info("abc78 edges = ", edges);
|
212 | let cnt = 0;
|
213 | let linkIdCnt = {};
|
214 | let defaultStyle;
|
215 | let defaultLabelStyle;
|
216 | if (edges.defaultStyle !== void 0) {
|
217 | const defaultStyles = getStylesFromArray(edges.defaultStyle);
|
218 | defaultStyle = defaultStyles.style;
|
219 | defaultLabelStyle = defaultStyles.labelStyle;
|
220 | }
|
221 | edges.forEach(function(edge) {
|
222 | cnt++;
|
223 | const linkIdBase = "L-" + edge.start + "-" + edge.end;
|
224 | if (linkIdCnt[linkIdBase] === void 0) {
|
225 | linkIdCnt[linkIdBase] = 0;
|
226 | log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
|
227 | } else {
|
228 | linkIdCnt[linkIdBase]++;
|
229 | log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]);
|
230 | }
|
231 | let linkId = linkIdBase + "-" + linkIdCnt[linkIdBase];
|
232 | log.info("abc78 new link id to be used is", linkIdBase, linkId, linkIdCnt[linkIdBase]);
|
233 | const linkNameStart = "LS-" + edge.start;
|
234 | const linkNameEnd = "LE-" + edge.end;
|
235 | const edgeData = { style: "", labelStyle: "" };
|
236 | edgeData.minlen = edge.length || 1;
|
237 | if (edge.type === "arrow_open") {
|
238 | edgeData.arrowhead = "none";
|
239 | } else {
|
240 | edgeData.arrowhead = "normal";
|
241 | }
|
242 | edgeData.arrowTypeStart = "arrow_open";
|
243 | edgeData.arrowTypeEnd = "arrow_open";
|
244 | switch (edge.type) {
|
245 | case "double_arrow_cross":
|
246 | edgeData.arrowTypeStart = "arrow_cross";
|
247 | case "arrow_cross":
|
248 | edgeData.arrowTypeEnd = "arrow_cross";
|
249 | break;
|
250 | case "double_arrow_point":
|
251 | edgeData.arrowTypeStart = "arrow_point";
|
252 | case "arrow_point":
|
253 | edgeData.arrowTypeEnd = "arrow_point";
|
254 | break;
|
255 | case "double_arrow_circle":
|
256 | edgeData.arrowTypeStart = "arrow_circle";
|
257 | case "arrow_circle":
|
258 | edgeData.arrowTypeEnd = "arrow_circle";
|
259 | break;
|
260 | }
|
261 | let style = "";
|
262 | let labelStyle = "";
|
263 | switch (edge.stroke) {
|
264 | case "normal":
|
265 | style = "fill:none;";
|
266 | if (defaultStyle !== void 0) {
|
267 | style = defaultStyle;
|
268 | }
|
269 | if (defaultLabelStyle !== void 0) {
|
270 | labelStyle = defaultLabelStyle;
|
271 | }
|
272 | edgeData.thickness = "normal";
|
273 | edgeData.pattern = "solid";
|
274 | break;
|
275 | case "dotted":
|
276 | edgeData.thickness = "normal";
|
277 | edgeData.pattern = "dotted";
|
278 | edgeData.style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
|
279 | break;
|
280 | case "thick":
|
281 | edgeData.thickness = "thick";
|
282 | edgeData.pattern = "solid";
|
283 | edgeData.style = "stroke-width: 3.5px;fill:none;";
|
284 | break;
|
285 | case "invisible":
|
286 | edgeData.thickness = "invisible";
|
287 | edgeData.pattern = "solid";
|
288 | edgeData.style = "stroke-width: 0;fill:none;";
|
289 | break;
|
290 | }
|
291 | if (edge.style !== void 0) {
|
292 | const styles = getStylesFromArray(edge.style);
|
293 | style = styles.style;
|
294 | labelStyle = styles.labelStyle;
|
295 | }
|
296 | edgeData.style = edgeData.style += style;
|
297 | edgeData.labelStyle = edgeData.labelStyle += labelStyle;
|
298 | if (edge.interpolate !== void 0) {
|
299 | edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
|
300 | } else if (edges.defaultInterpolate !== void 0) {
|
301 | edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
|
302 | } else {
|
303 | edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
|
304 | }
|
305 | if (edge.text === void 0) {
|
306 | if (edge.style !== void 0) {
|
307 | edgeData.arrowheadStyle = "fill: #333";
|
308 | }
|
309 | } else {
|
310 | edgeData.arrowheadStyle = "fill: #333";
|
311 | edgeData.labelpos = "c";
|
312 | }
|
313 | edgeData.labelType = edge.labelType;
|
314 | edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
|
315 | if (edge.style === void 0) {
|
316 | edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none;";
|
317 | }
|
318 | edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
|
319 | edgeData.id = linkId;
|
320 | edgeData.classes = "flowchart-link " + linkNameStart + " " + linkNameEnd;
|
321 | g.setEdge(edge.start, edge.end, edgeData, cnt);
|
322 | });
|
323 | };
|
324 | const getClasses = function(text, diagObj) {
|
325 | log.info("Extracting classes");
|
326 | diagObj.db.clear();
|
327 | try {
|
328 | diagObj.parse(text);
|
329 | return diagObj.db.getClasses();
|
330 | } catch (e) {
|
331 | return;
|
332 | }
|
333 | };
|
334 | const draw = async function(text, id, _version, diagObj) {
|
335 | log.info("Drawing flowchart");
|
336 | diagObj.db.clear();
|
337 | flowDb.setGen("gen-2");
|
338 | diagObj.parser.parse(text);
|
339 | let dir = diagObj.db.getDirection();
|
340 | if (dir === void 0) {
|
341 | dir = "TD";
|
342 | }
|
343 | const { securityLevel, flowchart: conf2 } = getConfig();
|
344 | const nodeSpacing = conf2.nodeSpacing || 50;
|
345 | const rankSpacing = conf2.rankSpacing || 50;
|
346 | let sandboxElement;
|
347 | if (securityLevel === "sandbox") {
|
348 | sandboxElement = select("#i" + id);
|
349 | }
|
350 | const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body");
|
351 | const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
|
352 | const g = new Graph({
|
353 | multigraph: true,
|
354 | compound: true
|
355 | }).setGraph({
|
356 | rankdir: dir,
|
357 | nodesep: nodeSpacing,
|
358 | ranksep: rankSpacing,
|
359 | marginx: 0,
|
360 | marginy: 0
|
361 | }).setDefaultEdgeLabel(function() {
|
362 | return {};
|
363 | });
|
364 | let subG;
|
365 | const subGraphs = diagObj.db.getSubGraphs();
|
366 | log.info("Subgraphs - ", subGraphs);
|
367 | for (let i2 = subGraphs.length - 1; i2 >= 0; i2--) {
|
368 | subG = subGraphs[i2];
|
369 | log.info("Subgraph - ", subG);
|
370 | diagObj.db.addVertex(
|
371 | subG.id,
|
372 | { text: subG.title, type: subG.labelType },
|
373 | "group",
|
374 | void 0,
|
375 | subG.classes,
|
376 | subG.dir
|
377 | );
|
378 | }
|
379 | const vert = diagObj.db.getVertices();
|
380 | const edges = diagObj.db.getEdges();
|
381 | log.info("Edges", edges);
|
382 | let i = 0;
|
383 | for (i = subGraphs.length - 1; i >= 0; i--) {
|
384 | subG = subGraphs[i];
|
385 | selectAll("cluster").append("text");
|
386 | for (let j = 0; j < subG.nodes.length; j++) {
|
387 | log.info("Setting up subgraphs", subG.nodes[j], subG.id);
|
388 | g.setParent(subG.nodes[j], subG.id);
|
389 | }
|
390 | }
|
391 | addVertices(vert, g, id, root, doc, diagObj);
|
392 | addEdges(edges, g);
|
393 | const svg = root.select(`[id="${id}"]`);
|
394 | const element = root.select("#" + id + " g");
|
395 | await render(element, g, ["point", "circle", "cross"], "flowchart", id);
|
396 | utils.insertTitle(svg, "flowchartTitleText", conf2.titleTopMargin, diagObj.db.getDiagramTitle());
|
397 | setupGraphViewbox(g, svg, conf2.diagramPadding, conf2.useMaxWidth);
|
398 | diagObj.db.indexNodes("subGraph" + i);
|
399 | if (!conf2.htmlLabels) {
|
400 | const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
|
401 | for (const label of labels) {
|
402 | const dim = label.getBBox();
|
403 | const rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
|
404 | rect.setAttribute("rx", 0);
|
405 | rect.setAttribute("ry", 0);
|
406 | rect.setAttribute("width", dim.width);
|
407 | rect.setAttribute("height", dim.height);
|
408 | label.insertBefore(rect, label.firstChild);
|
409 | }
|
410 | }
|
411 | const keys = Object.keys(vert);
|
412 | keys.forEach(function(key) {
|
413 | const vertex = vert[key];
|
414 | if (vertex.link) {
|
415 | const node = select("#" + id + ' [id="' + key + '"]');
|
416 | if (node) {
|
417 | const link = doc.createElementNS("http://www.w3.org/2000/svg", "a");
|
418 | link.setAttributeNS("http://www.w3.org/2000/svg", "class", vertex.classes.join(" "));
|
419 | link.setAttributeNS("http://www.w3.org/2000/svg", "href", vertex.link);
|
420 | link.setAttributeNS("http://www.w3.org/2000/svg", "rel", "noopener");
|
421 | if (securityLevel === "sandbox") {
|
422 | link.setAttributeNS("http://www.w3.org/2000/svg", "target", "_top");
|
423 | } else if (vertex.linkTarget) {
|
424 | link.setAttributeNS("http://www.w3.org/2000/svg", "target", vertex.linkTarget);
|
425 | }
|
426 | const linkNode = node.insert(function() {
|
427 | return link;
|
428 | }, ":first-child");
|
429 | const shape = node.select(".label-container");
|
430 | if (shape) {
|
431 | linkNode.append(function() {
|
432 | return shape.node();
|
433 | });
|
434 | }
|
435 | const label = node.select(".label");
|
436 | if (label) {
|
437 | linkNode.append(function() {
|
438 | return label.node();
|
439 | });
|
440 | }
|
441 | }
|
442 | }
|
443 | });
|
444 | };
|
445 | const flowRendererV2 = {
|
446 | setConf,
|
447 | addVertices,
|
448 | addEdges,
|
449 | getClasses,
|
450 | draw
|
451 | };
|
452 | const fade = (color, opacity) => {
|
453 | const channel2 = channel$1;
|
454 | const r = channel2(color, "r");
|
455 | const g = channel2(color, "g");
|
456 | const b = channel2(color, "b");
|
457 | return rgba(r, g, b, opacity);
|
458 | };
|
459 | const getStyles = (options) => `.label {
|
460 | font-family: ${options.fontFamily};
|
461 | color: ${options.nodeTextColor || options.textColor};
|
462 | }
|
463 | .cluster-label text {
|
464 | fill: ${options.titleColor};
|
465 | }
|
466 | .cluster-label span,p {
|
467 | color: ${options.titleColor};
|
468 | }
|
469 |
|
470 | .label text,span,p {
|
471 | fill: ${options.nodeTextColor || options.textColor};
|
472 | color: ${options.nodeTextColor || options.textColor};
|
473 | }
|
474 |
|
475 | .node rect,
|
476 | .node circle,
|
477 | .node ellipse,
|
478 | .node polygon,
|
479 | .node path {
|
480 | fill: ${options.mainBkg};
|
481 | stroke: ${options.nodeBorder};
|
482 | stroke-width: 1px;
|
483 | }
|
484 | .flowchart-label text {
|
485 | text-anchor: middle;
|
486 | }
|
487 | // .flowchart-label .text-outer-tspan {
|
488 | // text-anchor: middle;
|
489 | // }
|
490 | // .flowchart-label .text-inner-tspan {
|
491 | // text-anchor: start;
|
492 | // }
|
493 |
|
494 | .node .label {
|
495 | text-align: center;
|
496 | }
|
497 | .node.clickable {
|
498 | cursor: pointer;
|
499 | }
|
500 |
|
501 | .arrowheadPath {
|
502 | fill: ${options.arrowheadColor};
|
503 | }
|
504 |
|
505 | .edgePath .path {
|
506 | stroke: ${options.lineColor};
|
507 | stroke-width: 2.0px;
|
508 | }
|
509 |
|
510 | .flowchart-link {
|
511 | stroke: ${options.lineColor};
|
512 | fill: none;
|
513 | }
|
514 |
|
515 | .edgeLabel {
|
516 | background-color: ${options.edgeLabelBackground};
|
517 | rect {
|
518 | opacity: 0.5;
|
519 | background-color: ${options.edgeLabelBackground};
|
520 | fill: ${options.edgeLabelBackground};
|
521 | }
|
522 | text-align: center;
|
523 | }
|
524 |
|
525 | /* For html labels only */
|
526 | .labelBkg {
|
527 | background-color: ${fade(options.edgeLabelBackground, 0.5)};
|
528 | // background-color:
|
529 | }
|
530 |
|
531 | .cluster rect {
|
532 | fill: ${options.clusterBkg};
|
533 | stroke: ${options.clusterBorder};
|
534 | stroke-width: 1px;
|
535 | }
|
536 |
|
537 | .cluster text {
|
538 | fill: ${options.titleColor};
|
539 | }
|
540 |
|
541 | .cluster span,p {
|
542 | color: ${options.titleColor};
|
543 | }
|
544 | /* .cluster div {
|
545 | color: ${options.titleColor};
|
546 | } */
|
547 |
|
548 | div.mermaidTooltip {
|
549 | position: absolute;
|
550 | text-align: center;
|
551 | max-width: 200px;
|
552 | padding: 2px;
|
553 | font-family: ${options.fontFamily};
|
554 | font-size: 12px;
|
555 | background: ${options.tertiaryColor};
|
556 | border: 1px solid ${options.border2};
|
557 | border-radius: 2px;
|
558 | pointer-events: none;
|
559 | z-index: 100;
|
560 | }
|
561 |
|
562 | .flowchartTitleText {
|
563 | text-anchor: middle;
|
564 | font-size: 18px;
|
565 | fill: ${options.textColor};
|
566 | }
|
567 | `;
|
568 | const flowStyles = getStyles;
|
569 | export {
|
570 | applyStyle as a,
|
571 | addHtmlLabel as b,
|
572 | applyTransition as c,
|
573 | applyClass as d,
|
574 | edgeToId as e,
|
575 | flowRendererV2 as f,
|
576 | flowStyles as g,
|
577 | isSubgraph as i
|
578 | };
|