UNPKG

20.2 kBJavaScriptView Raw
1import { p as parser, f as flowDb } from "./flowDb-c1833063.js";
2import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
3import { select, curveLinear, selectAll } from "d3";
4import { k as getStylesFromArray, m as evaluate, c as getConfig, r as renderKatex, e as common, l as log, n as interpolateToCurve, o as setupGraphViewbox } from "./mermaid-6dc72991.js";
5import { render } from "dagre-d3-es";
6import { applyStyle } from "dagre-d3-es/src/dagre-js/util.js";
7import { addHtmlLabel } from "dagre-d3-es/src/dagre-js/label/add-html-label.js";
8import { intersectPolygon } from "dagre-d3-es/src/dagre-js/intersect/intersect-polygon.js";
9import { intersectRect } from "dagre-d3-es/src/dagre-js/intersect/intersect-rect.js";
10import { f as flowRendererV2, a as flowStyles } from "./styles-483fbfea.js";
11import "ts-dedent";
12import "dayjs";
13import "@braintree/sanitize-url";
14import "dompurify";
15import "khroma";
16import "lodash-es/memoize.js";
17import "lodash-es/merge.js";
18import "stylis";
19import "lodash-es/isEmpty.js";
20import "./index-01f381cb.js";
21import "dagre-d3-es/src/dagre/index.js";
22import "dagre-d3-es/src/graphlib/json.js";
23import "./edges-066a5561.js";
24import "./createText-ca0c5216.js";
25import "mdast-util-from-markdown";
26function question(parent, bbox, node) {
27 const w = bbox.width;
28 const h = bbox.height;
29 const s = (w + h) * 0.9;
30 const points = [
31 { x: s / 2, y: 0 },
32 { x: s, y: -s / 2 },
33 { x: s / 2, y: -s },
34 { x: 0, y: -s / 2 }
35 ];
36 const shapeSvg = insertPolygonShape(parent, s, s, points);
37 node.intersect = function(point) {
38 return intersectPolygon(node, points, point);
39 };
40 return shapeSvg;
41}
42function hexagon(parent, bbox, node) {
43 const f = 4;
44 const h = bbox.height;
45 const m = h / f;
46 const w = bbox.width + 2 * m;
47 const points = [
48 { x: m, y: 0 },
49 { x: w - m, y: 0 },
50 { x: w, y: -h / 2 },
51 { x: w - m, y: -h },
52 { x: m, y: -h },
53 { x: 0, y: -h / 2 }
54 ];
55 const shapeSvg = insertPolygonShape(parent, w, h, points);
56 node.intersect = function(point) {
57 return intersectPolygon(node, points, point);
58 };
59 return shapeSvg;
60}
61function rect_left_inv_arrow(parent, bbox, node) {
62 const w = bbox.width;
63 const h = bbox.height;
64 const points = [
65 { x: -h / 2, y: 0 },
66 { x: w, y: 0 },
67 { x: w, y: -h },
68 { x: -h / 2, y: -h },
69 { x: 0, y: -h / 2 }
70 ];
71 const shapeSvg = insertPolygonShape(parent, w, h, points);
72 node.intersect = function(point) {
73 return intersectPolygon(node, points, point);
74 };
75 return shapeSvg;
76}
77function lean_right(parent, bbox, node) {
78 const w = bbox.width;
79 const h = bbox.height;
80 const points = [
81 { x: -2 * h / 6, y: 0 },
82 { x: w - h / 6, y: 0 },
83 { x: w + 2 * h / 6, y: -h },
84 { x: h / 6, y: -h }
85 ];
86 const shapeSvg = insertPolygonShape(parent, w, h, points);
87 node.intersect = function(point) {
88 return intersectPolygon(node, points, point);
89 };
90 return shapeSvg;
91}
92function lean_left(parent, bbox, node) {
93 const w = bbox.width;
94 const h = bbox.height;
95 const points = [
96 { x: 2 * h / 6, y: 0 },
97 { x: w + h / 6, y: 0 },
98 { x: w - 2 * h / 6, y: -h },
99 { x: -h / 6, y: -h }
100 ];
101 const shapeSvg = insertPolygonShape(parent, w, h, points);
102 node.intersect = function(point) {
103 return intersectPolygon(node, points, point);
104 };
105 return shapeSvg;
106}
107function trapezoid(parent, bbox, node) {
108 const w = bbox.width;
109 const h = bbox.height;
110 const points = [
111 { x: -2 * h / 6, y: 0 },
112 { x: w + 2 * h / 6, y: 0 },
113 { x: w - h / 6, y: -h },
114 { x: h / 6, y: -h }
115 ];
116 const shapeSvg = insertPolygonShape(parent, w, h, points);
117 node.intersect = function(point) {
118 return intersectPolygon(node, points, point);
119 };
120 return shapeSvg;
121}
122function inv_trapezoid(parent, bbox, node) {
123 const w = bbox.width;
124 const h = bbox.height;
125 const points = [
126 { x: h / 6, y: 0 },
127 { x: w - h / 6, y: 0 },
128 { x: w + 2 * h / 6, y: -h },
129 { x: -2 * h / 6, y: -h }
130 ];
131 const shapeSvg = insertPolygonShape(parent, w, h, points);
132 node.intersect = function(point) {
133 return intersectPolygon(node, points, point);
134 };
135 return shapeSvg;
136}
137function rect_right_inv_arrow(parent, bbox, node) {
138 const w = bbox.width;
139 const h = bbox.height;
140 const points = [
141 { x: 0, y: 0 },
142 { x: w + h / 2, y: 0 },
143 { x: w, y: -h / 2 },
144 { x: w + h / 2, y: -h },
145 { x: 0, y: -h }
146 ];
147 const shapeSvg = insertPolygonShape(parent, w, h, points);
148 node.intersect = function(point) {
149 return intersectPolygon(node, points, point);
150 };
151 return shapeSvg;
152}
153function stadium(parent, bbox, node) {
154 const h = bbox.height;
155 const w = bbox.width + h / 4;
156 const shapeSvg = parent.insert("rect", ":first-child").attr("rx", h / 2).attr("ry", h / 2).attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h);
157 node.intersect = function(point) {
158 return intersectRect(node, point);
159 };
160 return shapeSvg;
161}
162function subroutine(parent, bbox, node) {
163 const w = bbox.width;
164 const h = bbox.height;
165 const points = [
166 { x: 0, y: 0 },
167 { x: w, y: 0 },
168 { x: w, y: -h },
169 { x: 0, y: -h },
170 { x: 0, y: 0 },
171 { x: -8, y: 0 },
172 { x: w + 8, y: 0 },
173 { x: w + 8, y: -h },
174 { x: -8, y: -h },
175 { x: -8, y: 0 }
176 ];
177 const shapeSvg = insertPolygonShape(parent, w, h, points);
178 node.intersect = function(point) {
179 return intersectPolygon(node, points, point);
180 };
181 return shapeSvg;
182}
183function cylinder(parent, bbox, node) {
184 const w = bbox.width;
185 const rx = w / 2;
186 const ry = rx / (2.5 + w / 50);
187 const h = bbox.height + ry;
188 const shape = "M 0," + ry + " a " + rx + "," + ry + " 0,0,0 " + w + " 0 a " + rx + "," + ry + " 0,0,0 " + -w + " 0 l 0," + h + " a " + rx + "," + ry + " 0,0,0 " + w + " 0 l 0," + -h;
189 const shapeSvg = parent.attr("label-offset-y", ry).insert("path", ":first-child").attr("d", shape).attr("transform", "translate(" + -w / 2 + "," + -(h / 2 + ry) + ")");
190 node.intersect = function(point) {
191 const pos = intersectRect(node, point);
192 const x = pos.x - node.x;
193 if (rx != 0 && (Math.abs(x) < node.width / 2 || Math.abs(x) == node.width / 2 && Math.abs(pos.y - node.y) > node.height / 2 - ry)) {
194 let y = ry * ry * (1 - x * x / (rx * rx));
195 if (y != 0) {
196 y = Math.sqrt(y);
197 }
198 y = ry - y;
199 if (point.y - node.y > 0) {
200 y = -y;
201 }
202 pos.y += y;
203 }
204 return pos;
205 };
206 return shapeSvg;
207}
208function addToRender(render2) {
209 render2.shapes().question = question;
210 render2.shapes().hexagon = hexagon;
211 render2.shapes().stadium = stadium;
212 render2.shapes().subroutine = subroutine;
213 render2.shapes().cylinder = cylinder;
214 render2.shapes().rect_left_inv_arrow = rect_left_inv_arrow;
215 render2.shapes().lean_right = lean_right;
216 render2.shapes().lean_left = lean_left;
217 render2.shapes().trapezoid = trapezoid;
218 render2.shapes().inv_trapezoid = inv_trapezoid;
219 render2.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
220}
221function addToRenderV2(addShape) {
222 addShape({ question });
223 addShape({ hexagon });
224 addShape({ stadium });
225 addShape({ subroutine });
226 addShape({ cylinder });
227 addShape({ rect_left_inv_arrow });
228 addShape({ lean_right });
229 addShape({ lean_left });
230 addShape({ trapezoid });
231 addShape({ inv_trapezoid });
232 addShape({ rect_right_inv_arrow });
233}
234function insertPolygonShape(parent, w, h, points) {
235 return parent.insert("polygon", ":first-child").attr(
236 "points",
237 points.map(function(d) {
238 return d.x + "," + d.y;
239 }).join(" ")
240 ).attr("transform", "translate(" + -w / 2 + "," + h / 2 + ")");
241}
242const flowChartShapes = {
243 addToRender,
244 addToRenderV2
245};
246const conf = {};
247const setConf = function(cnf) {
248 const keys = Object.keys(cnf);
249 for (const key of keys) {
250 conf[key] = cnf[key];
251 }
252};
253const addVertices = async function(vert, g, svgId, root, _doc, diagObj) {
254 const svg = !root ? select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
255 const doc = !_doc ? document : _doc;
256 const keys = Object.keys(vert);
257 for (const id of keys) {
258 const vertex = vert[id];
259 let classStr = "default";
260 if (vertex.classes.length > 0) {
261 classStr = vertex.classes.join(" ");
262 }
263 const styles = getStylesFromArray(vertex.styles);
264 let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id;
265 let vertexNode;
266 if (evaluate(getConfig().flowchart.htmlLabels)) {
267 const node = {
268 label: await renderKatex(
269 vertexText.replace(
270 /fa[blrs]?:fa-[\w-]+/g,
271 // cspell:disable-line
272 (s) => `<i class='${s.replace(":", " ")}'></i>`
273 ),
274 getConfig()
275 )
276 };
277 vertexNode = addHtmlLabel(svg, node).node();
278 vertexNode.parentNode.removeChild(vertexNode);
279 } else {
280 const svgLabel = doc.createElementNS("http://www.w3.org/2000/svg", "text");
281 svgLabel.setAttribute("style", styles.labelStyle.replace("color:", "fill:"));
282 const rows = vertexText.split(common.lineBreakRegex);
283 for (const row of rows) {
284 const tspan = doc.createElementNS("http://www.w3.org/2000/svg", "tspan");
285 tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
286 tspan.setAttribute("dy", "1em");
287 tspan.setAttribute("x", "1");
288 tspan.textContent = row;
289 svgLabel.appendChild(tspan);
290 }
291 vertexNode = svgLabel;
292 }
293 let radius = 0;
294 let _shape = "";
295 switch (vertex.type) {
296 case "round":
297 radius = 5;
298 _shape = "rect";
299 break;
300 case "square":
301 _shape = "rect";
302 break;
303 case "diamond":
304 _shape = "question";
305 break;
306 case "hexagon":
307 _shape = "hexagon";
308 break;
309 case "odd":
310 _shape = "rect_left_inv_arrow";
311 break;
312 case "lean_right":
313 _shape = "lean_right";
314 break;
315 case "lean_left":
316 _shape = "lean_left";
317 break;
318 case "trapezoid":
319 _shape = "trapezoid";
320 break;
321 case "inv_trapezoid":
322 _shape = "inv_trapezoid";
323 break;
324 case "odd_right":
325 _shape = "rect_left_inv_arrow";
326 break;
327 case "circle":
328 _shape = "circle";
329 break;
330 case "ellipse":
331 _shape = "ellipse";
332 break;
333 case "stadium":
334 _shape = "stadium";
335 break;
336 case "subroutine":
337 _shape = "subroutine";
338 break;
339 case "cylinder":
340 _shape = "cylinder";
341 break;
342 case "group":
343 _shape = "rect";
344 break;
345 default:
346 _shape = "rect";
347 }
348 log.warn("Adding node", vertex.id, vertex.domId);
349 g.setNode(diagObj.db.lookUpDomId(vertex.id), {
350 labelType: "svg",
351 labelStyle: styles.labelStyle,
352 shape: _shape,
353 label: vertexNode,
354 rx: radius,
355 ry: radius,
356 class: classStr,
357 style: styles.style,
358 id: diagObj.db.lookUpDomId(vertex.id)
359 });
360 }
361};
362const addEdges = async function(edges, g, diagObj) {
363 let cnt = 0;
364 let defaultStyle;
365 let defaultLabelStyle;
366 if (edges.defaultStyle !== void 0) {
367 const defaultStyles = getStylesFromArray(edges.defaultStyle);
368 defaultStyle = defaultStyles.style;
369 defaultLabelStyle = defaultStyles.labelStyle;
370 }
371 for (const edge of edges) {
372 cnt++;
373 const linkId = "L-" + edge.start + "-" + edge.end;
374 const linkNameStart = "LS-" + edge.start;
375 const linkNameEnd = "LE-" + edge.end;
376 const edgeData = {};
377 if (edge.type === "arrow_open") {
378 edgeData.arrowhead = "none";
379 } else {
380 edgeData.arrowhead = "normal";
381 }
382 let style = "";
383 let labelStyle = "";
384 if (edge.style !== void 0) {
385 const styles = getStylesFromArray(edge.style);
386 style = styles.style;
387 labelStyle = styles.labelStyle;
388 } else {
389 switch (edge.stroke) {
390 case "normal":
391 style = "fill:none";
392 if (defaultStyle !== void 0) {
393 style = defaultStyle;
394 }
395 if (defaultLabelStyle !== void 0) {
396 labelStyle = defaultLabelStyle;
397 }
398 break;
399 case "dotted":
400 style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
401 break;
402 case "thick":
403 style = " stroke-width: 3.5px;fill:none";
404 break;
405 }
406 }
407 edgeData.style = style;
408 edgeData.labelStyle = labelStyle;
409 if (edge.interpolate !== void 0) {
410 edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
411 } else if (edges.defaultInterpolate !== void 0) {
412 edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
413 } else {
414 edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
415 }
416 if (edge.text === void 0) {
417 if (edge.style !== void 0) {
418 edgeData.arrowheadStyle = "fill: #333";
419 }
420 } else {
421 edgeData.arrowheadStyle = "fill: #333";
422 edgeData.labelpos = "c";
423 if (evaluate(getConfig().flowchart.htmlLabels)) {
424 edgeData.labelType = "html";
425 edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${edgeData.labelStyle}">${await renderKatex(
426 edge.text.replace(
427 /fa[blrs]?:fa-[\w-]+/g,
428 // cspell:disable-line
429 (s) => `<i class='${s.replace(":", " ")}'></i>`
430 ),
431 getConfig()
432 )}</span>`;
433 } else {
434 edgeData.labelType = "text";
435 edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
436 if (edge.style === void 0) {
437 edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none";
438 }
439 edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
440 }
441 }
442 edgeData.id = linkId;
443 edgeData.class = linkNameStart + " " + linkNameEnd;
444 edgeData.minlen = edge.length || 1;
445 g.setEdge(diagObj.db.lookUpDomId(edge.start), diagObj.db.lookUpDomId(edge.end), edgeData, cnt);
446 }
447};
448const getClasses = function(text, diagObj) {
449 log.info("Extracting classes");
450 return diagObj.db.getClasses();
451};
452const draw = async function(text, id, _version, diagObj) {
453 log.info("Drawing flowchart");
454 const { securityLevel, flowchart: conf2 } = getConfig();
455 let sandboxElement;
456 if (securityLevel === "sandbox") {
457 sandboxElement = select("#i" + id);
458 }
459 const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body");
460 const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
461 let dir = diagObj.db.getDirection();
462 if (dir === void 0) {
463 dir = "TD";
464 }
465 const nodeSpacing = conf2.nodeSpacing || 50;
466 const rankSpacing = conf2.rankSpacing || 50;
467 const g = new graphlib.Graph({
468 multigraph: true,
469 compound: true
470 }).setGraph({
471 rankdir: dir,
472 nodesep: nodeSpacing,
473 ranksep: rankSpacing,
474 marginx: 8,
475 marginy: 8
476 }).setDefaultEdgeLabel(function() {
477 return {};
478 });
479 let subG;
480 const subGraphs = diagObj.db.getSubGraphs();
481 for (let i2 = subGraphs.length - 1; i2 >= 0; i2--) {
482 subG = subGraphs[i2];
483 diagObj.db.addVertex(subG.id, subG.title, "group", void 0, subG.classes);
484 }
485 const vert = diagObj.db.getVertices();
486 log.warn("Get vertices", vert);
487 const edges = diagObj.db.getEdges();
488 let i = 0;
489 for (i = subGraphs.length - 1; i >= 0; i--) {
490 subG = subGraphs[i];
491 selectAll("cluster").append("text");
492 for (let j = 0; j < subG.nodes.length; j++) {
493 log.warn(
494 "Setting subgraph",
495 subG.nodes[j],
496 diagObj.db.lookUpDomId(subG.nodes[j]),
497 diagObj.db.lookUpDomId(subG.id)
498 );
499 g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id));
500 }
501 }
502 await addVertices(vert, g, id, root, doc, diagObj);
503 await addEdges(edges, g, diagObj);
504 const render$1 = new render();
505 flowChartShapes.addToRender(render$1);
506 render$1.arrows().none = function normal(parent, id2, edge, type) {
507 const marker = parent.append("marker").attr("id", id2).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 8).attr("markerHeight", 6).attr("orient", "auto");
508 const path = marker.append("path").attr("d", "M 0 0 L 0 0 L 0 0 z");
509 applyStyle(path, edge[type + "Style"]);
510 };
511 render$1.arrows().normal = function normal(parent, id2) {
512 const marker = parent.append("marker").attr("id", id2).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 8).attr("markerHeight", 6).attr("orient", "auto");
513 marker.append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").attr("class", "arrowheadPath").style("stroke-width", 1).style("stroke-dasharray", "1,0");
514 };
515 const svg = root.select(`[id="${id}"]`);
516 const element = root.select("#" + id + " g");
517 render$1(element, g);
518 element.selectAll("g.node").attr("title", function() {
519 return diagObj.db.getTooltip(this.id);
520 });
521 diagObj.db.indexNodes("subGraph" + i);
522 for (i = 0; i < subGraphs.length; i++) {
523 subG = subGraphs[i];
524 if (subG.title !== "undefined") {
525 const clusterRects = doc.querySelectorAll(
526 "#" + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"] rect'
527 );
528 const clusterEl = doc.querySelectorAll(
529 "#" + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"]'
530 );
531 const xPos = clusterRects[0].x.baseVal.value;
532 const yPos = clusterRects[0].y.baseVal.value;
533 const _width = clusterRects[0].width.baseVal.value;
534 const cluster = select(clusterEl[0]);
535 const te = cluster.select(".label");
536 te.attr("transform", `translate(${xPos + _width / 2}, ${yPos + 14})`);
537 te.attr("id", id + "Text");
538 for (let j = 0; j < subG.classes.length; j++) {
539 clusterEl[0].classList.add(subG.classes[j]);
540 }
541 }
542 }
543 if (!conf2.htmlLabels) {
544 const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
545 for (const label of labels) {
546 const dim = label.getBBox();
547 const rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
548 rect.setAttribute("rx", 0);
549 rect.setAttribute("ry", 0);
550 rect.setAttribute("width", dim.width);
551 rect.setAttribute("height", dim.height);
552 label.insertBefore(rect, label.firstChild);
553 }
554 }
555 setupGraphViewbox(g, svg, conf2.diagramPadding, conf2.useMaxWidth);
556 const keys = Object.keys(vert);
557 keys.forEach(function(key) {
558 const vertex = vert[key];
559 if (vertex.link) {
560 const node = root.select("#" + id + ' [id="' + diagObj.db.lookUpDomId(key) + '"]');
561 if (node) {
562 const link = doc.createElementNS("http://www.w3.org/2000/svg", "a");
563 link.setAttributeNS("http://www.w3.org/2000/svg", "class", vertex.classes.join(" "));
564 link.setAttributeNS("http://www.w3.org/2000/svg", "href", vertex.link);
565 link.setAttributeNS("http://www.w3.org/2000/svg", "rel", "noopener");
566 if (securityLevel === "sandbox") {
567 link.setAttributeNS("http://www.w3.org/2000/svg", "target", "_top");
568 } else if (vertex.linkTarget) {
569 link.setAttributeNS("http://www.w3.org/2000/svg", "target", vertex.linkTarget);
570 }
571 const linkNode = node.insert(function() {
572 return link;
573 }, ":first-child");
574 const shape = node.select(".label-container");
575 if (shape) {
576 linkNode.append(function() {
577 return shape.node();
578 });
579 }
580 const label = node.select(".label");
581 if (label) {
582 linkNode.append(function() {
583 return label.node();
584 });
585 }
586 }
587 }
588 });
589};
590const flowRenderer = {
591 setConf,
592 addVertices,
593 addEdges,
594 getClasses,
595 draw
596};
597const diagram = {
598 parser,
599 db: flowDb,
600 renderer: flowRendererV2,
601 styles: flowStyles,
602 init: (cnf) => {
603 if (!cnf.flowchart) {
604 cnf.flowchart = {};
605 }
606 cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
607 flowRenderer.setConf(cnf.flowchart);
608 flowDb.clear();
609 flowDb.setGen("gen-1");
610 }
611};
612export {
613 diagram
614};