UNPKG

40.6 kBJavaScriptView Raw
1import { p as parser$1, f as flowDb } from "./flowDb-ba9bd7fa.js";
2import { h as has, f as forEach, G as Graph } from "./graph-fe24fab6.js";
3import { j as d3select, n as curveLinear, o as getStylesFromArray, p as evaluate, c as getConfig, r as renderKatex, f as common, l as log, q as interpolateToCurve, t as setupGraphViewbox } from "./mermaid-dcacb631.js";
4import { u as uniqueId, r as range, p as pick, l as layout, d as defaults } from "./layout-163b9689.js";
5import { a as applyStyle, b as addHtmlLabel, i as isSubgraph, c as applyTransition, e as edgeToId, d as applyClass, s as selectAll, f as flowRendererV2, g as flowStyles } from "./styles-727cdd61.js";
6import { l as line } from "./line-87f517ef.js";
7import "./index-fc479858.js";
8import "./clone-9ea6bfeb.js";
9import "./edges-ce5cfb7c.js";
10import "./createText-b70fe78a.js";
11import "./channel-f9001828.js";
12import "./array-b7dcf730.js";
13import "./path-39bad7e2.js";
14function responseText(response) {
15 if (!response.ok)
16 throw new Error(response.status + " " + response.statusText);
17 return response.text();
18}
19function text(input, init) {
20 return fetch(input, init).then(responseText);
21}
22function parser(type) {
23 return (input, init) => text(input, init).then((text2) => new DOMParser().parseFromString(text2, type));
24}
25var svg = parser("image/svg+xml");
26var arrows = {
27 normal,
28 vee,
29 undirected
30};
31function setArrows(value) {
32 arrows = value;
33}
34function normal(parent, id, edge, type) {
35 var marker = parent.append("marker").attr("id", id).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 8).attr("markerHeight", 6).attr("orient", "auto");
36 var path = marker.append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style("stroke-width", 1).style("stroke-dasharray", "1,0");
37 applyStyle(path, edge[type + "Style"]);
38 if (edge[type + "Class"]) {
39 path.attr("class", edge[type + "Class"]);
40 }
41}
42function vee(parent, id, edge, type) {
43 var marker = parent.append("marker").attr("id", id).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 8).attr("markerHeight", 6).attr("orient", "auto");
44 var path = marker.append("path").attr("d", "M 0 0 L 10 5 L 0 10 L 4 5 z").style("stroke-width", 1).style("stroke-dasharray", "1,0");
45 applyStyle(path, edge[type + "Style"]);
46 if (edge[type + "Class"]) {
47 path.attr("class", edge[type + "Class"]);
48 }
49}
50function undirected(parent, id, edge, type) {
51 var marker = parent.append("marker").attr("id", id).attr("viewBox", "0 0 10 10").attr("refX", 9).attr("refY", 5).attr("markerUnits", "strokeWidth").attr("markerWidth", 8).attr("markerHeight", 6).attr("orient", "auto");
52 var path = marker.append("path").attr("d", "M 0 5 L 10 5").style("stroke-width", 1).style("stroke-dasharray", "1,0");
53 applyStyle(path, edge[type + "Style"]);
54 if (edge[type + "Class"]) {
55 path.attr("class", edge[type + "Class"]);
56 }
57}
58function addSVGLabel(root, node) {
59 var domNode = root;
60 domNode.node().appendChild(node.label);
61 applyStyle(domNode, node.labelStyle);
62 return domNode;
63}
64function addTextLabel(root, node) {
65 var domNode = root.append("text");
66 var lines = processEscapeSequences(node.label).split("\n");
67 for (var i = 0; i < lines.length; i++) {
68 domNode.append("tspan").attr("xml:space", "preserve").attr("dy", "1em").attr("x", "1").text(lines[i]);
69 }
70 applyStyle(domNode, node.labelStyle);
71 return domNode;
72}
73function processEscapeSequences(text2) {
74 var newText = "";
75 var escaped = false;
76 var ch;
77 for (var i = 0; i < text2.length; ++i) {
78 ch = text2[i];
79 if (escaped) {
80 switch (ch) {
81 case "n":
82 newText += "\n";
83 break;
84 default:
85 newText += ch;
86 }
87 escaped = false;
88 } else if (ch === "\\") {
89 escaped = true;
90 } else {
91 newText += ch;
92 }
93 }
94 return newText;
95}
96function addLabel(root, node, location2) {
97 var label = node.label;
98 var labelSvg = root.append("g");
99 if (node.labelType === "svg") {
100 addSVGLabel(labelSvg, node);
101 } else if (typeof label !== "string" || node.labelType === "html") {
102 addHtmlLabel(labelSvg, node);
103 } else {
104 addTextLabel(labelSvg, node);
105 }
106 var labelBBox = labelSvg.node().getBBox();
107 var y;
108 switch (location2) {
109 case "top":
110 y = -node.height / 2;
111 break;
112 case "bottom":
113 y = node.height / 2 - labelBBox.height;
114 break;
115 default:
116 y = -labelBBox.height / 2;
117 }
118 labelSvg.attr("transform", "translate(" + -labelBBox.width / 2 + "," + y + ")");
119 return labelSvg;
120}
121var createClusters = function(selection, g) {
122 var clusters = g.nodes().filter(function(v) {
123 return isSubgraph(g, v);
124 });
125 var svgClusters = selection.selectAll("g.cluster").data(clusters, function(v) {
126 return v;
127 });
128 applyTransition(svgClusters.exit(), g).style("opacity", 0).remove();
129 var enterSelection = svgClusters.enter().append("g").attr("class", "cluster").attr("id", function(v) {
130 var node = g.node(v);
131 return node.id;
132 }).style("opacity", 0).each(function(v) {
133 var node = g.node(v);
134 var thisGroup = d3select(this);
135 d3select(this).append("rect");
136 var labelGroup = thisGroup.append("g").attr("class", "label");
137 addLabel(labelGroup, node, node.clusterLabelPos);
138 });
139 svgClusters = svgClusters.merge(enterSelection);
140 svgClusters = applyTransition(svgClusters, g).style("opacity", 1);
141 svgClusters.selectAll("rect").each(function(c) {
142 var node = g.node(c);
143 var domCluster = d3select(this);
144 applyStyle(domCluster, node.style);
145 });
146 return svgClusters;
147};
148function setCreateClusters(value) {
149 createClusters = value;
150}
151let createEdgeLabels = function(selection, g) {
152 var svgEdgeLabels = selection.selectAll("g.edgeLabel").data(g.edges(), function(e) {
153 return edgeToId(e);
154 }).classed("update", true);
155 svgEdgeLabels.exit().remove();
156 svgEdgeLabels.enter().append("g").classed("edgeLabel", true).style("opacity", 0);
157 svgEdgeLabels = selection.selectAll("g.edgeLabel");
158 svgEdgeLabels.each(function(e) {
159 var root = d3select(this);
160 root.select(".label").remove();
161 var edge = g.edge(e);
162 var label = addLabel(root, g.edge(e), 0).classed("label", true);
163 var bbox = label.node().getBBox();
164 if (edge.labelId) {
165 label.attr("id", edge.labelId);
166 }
167 if (!has(edge, "width")) {
168 edge.width = bbox.width;
169 }
170 if (!has(edge, "height")) {
171 edge.height = bbox.height;
172 }
173 });
174 var exitSelection;
175 if (svgEdgeLabels.exit) {
176 exitSelection = svgEdgeLabels.exit();
177 } else {
178 exitSelection = svgEdgeLabels.selectAll(null);
179 }
180 applyTransition(exitSelection, g).style("opacity", 0).remove();
181 return svgEdgeLabels;
182};
183function setCreateEdgeLabels(value) {
184 createEdgeLabels = value;
185}
186function intersectNode(node, point) {
187 return node.intersect(point);
188}
189var createEdgePaths = function(selection, g, arrows2) {
190 var previousPaths = selection.selectAll("g.edgePath").data(g.edges(), function(e) {
191 return edgeToId(e);
192 }).classed("update", true);
193 var newPaths = enter(previousPaths, g);
194 exit(previousPaths, g);
195 var svgPaths = previousPaths.merge !== void 0 ? previousPaths.merge(newPaths) : previousPaths;
196 applyTransition(svgPaths, g).style("opacity", 1);
197 svgPaths.each(function(e) {
198 var domEdge = d3select(this);
199 var edge = g.edge(e);
200 edge.elem = this;
201 if (edge.id) {
202 domEdge.attr("id", edge.id);
203 }
204 applyClass(
205 domEdge,
206 edge["class"],
207 (domEdge.classed("update") ? "update " : "") + "edgePath"
208 );
209 });
210 svgPaths.selectAll("path.path").each(function(e) {
211 var edge = g.edge(e);
212 edge.arrowheadId = uniqueId("arrowhead");
213 var domEdge = d3select(this).attr("marker-end", function() {
214 return "url(" + makeFragmentRef(location.href, edge.arrowheadId) + ")";
215 }).style("fill", "none");
216 applyTransition(domEdge, g).attr("d", function(e2) {
217 return calcPoints(g, e2);
218 });
219 applyStyle(domEdge, edge.style);
220 });
221 svgPaths.selectAll("defs *").remove();
222 svgPaths.selectAll("defs").each(function(e) {
223 var edge = g.edge(e);
224 var arrowhead = arrows2[edge.arrowhead];
225 arrowhead(d3select(this), edge.arrowheadId, edge, "arrowhead");
226 });
227 return svgPaths;
228};
229function setCreateEdgePaths(value) {
230 createEdgePaths = value;
231}
232function makeFragmentRef(url, fragmentId) {
233 var baseUrl = url.split("#")[0];
234 return baseUrl + "#" + fragmentId;
235}
236function calcPoints(g, e) {
237 var edge = g.edge(e);
238 var tail = g.node(e.v);
239 var head = g.node(e.w);
240 var points = edge.points.slice(1, edge.points.length - 1);
241 points.unshift(intersectNode(tail, points[0]));
242 points.push(intersectNode(head, points[points.length - 1]));
243 return createLine(edge, points);
244}
245function createLine(edge, points) {
246 var line$1 = (line || svg.line)().x(function(d) {
247 return d.x;
248 }).y(function(d) {
249 return d.y;
250 });
251 (line$1.curve || line$1.interpolate)(edge.curve);
252 return line$1(points);
253}
254function getCoords(elem) {
255 var bbox = elem.getBBox();
256 var matrix = elem.ownerSVGElement.getScreenCTM().inverse().multiply(elem.getScreenCTM()).translate(bbox.width / 2, bbox.height / 2);
257 return { x: matrix.e, y: matrix.f };
258}
259function enter(svgPaths, g) {
260 var svgPathsEnter = svgPaths.enter().append("g").attr("class", "edgePath").style("opacity", 0);
261 svgPathsEnter.append("path").attr("class", "path").attr("d", function(e) {
262 var edge = g.edge(e);
263 var sourceElem = g.node(e.v).elem;
264 var points = range(edge.points.length).map(function() {
265 return getCoords(sourceElem);
266 });
267 return createLine(edge, points);
268 });
269 svgPathsEnter.append("defs");
270 return svgPathsEnter;
271}
272function exit(svgPaths, g) {
273 var svgPathExit = svgPaths.exit();
274 applyTransition(svgPathExit, g).style("opacity", 0).remove();
275}
276var createNodes = function(selection, g, shapes2) {
277 var simpleNodes = g.nodes().filter(function(v) {
278 return !isSubgraph(g, v);
279 });
280 var svgNodes = selection.selectAll("g.node").data(simpleNodes, function(v) {
281 return v;
282 }).classed("update", true);
283 svgNodes.exit().remove();
284 svgNodes.enter().append("g").attr("class", "node").style("opacity", 0);
285 svgNodes = selection.selectAll("g.node");
286 svgNodes.each(function(v) {
287 var node = g.node(v);
288 var thisGroup = d3select(this);
289 applyClass(
290 thisGroup,
291 node["class"],
292 (thisGroup.classed("update") ? "update " : "") + "node"
293 );
294 thisGroup.select("g.label").remove();
295 var labelGroup = thisGroup.append("g").attr("class", "label");
296 var labelDom = addLabel(labelGroup, node);
297 var shape = shapes2[node.shape];
298 var bbox = pick(labelDom.node().getBBox(), "width", "height");
299 node.elem = this;
300 if (node.id) {
301 thisGroup.attr("id", node.id);
302 }
303 if (node.labelId) {
304 labelGroup.attr("id", node.labelId);
305 }
306 if (has(node, "width")) {
307 bbox.width = node.width;
308 }
309 if (has(node, "height")) {
310 bbox.height = node.height;
311 }
312 bbox.width += node.paddingLeft + node.paddingRight;
313 bbox.height += node.paddingTop + node.paddingBottom;
314 labelGroup.attr(
315 "transform",
316 "translate(" + (node.paddingLeft - node.paddingRight) / 2 + "," + (node.paddingTop - node.paddingBottom) / 2 + ")"
317 );
318 var root = d3select(this);
319 root.select(".label-container").remove();
320 var shapeSvg = shape(root, bbox, node).classed("label-container", true);
321 applyStyle(shapeSvg, node.style);
322 var shapeBBox = shapeSvg.node().getBBox();
323 node.width = shapeBBox.width;
324 node.height = shapeBBox.height;
325 });
326 var exitSelection;
327 if (svgNodes.exit) {
328 exitSelection = svgNodes.exit();
329 } else {
330 exitSelection = svgNodes.selectAll(null);
331 }
332 applyTransition(exitSelection, g).style("opacity", 0).remove();
333 return svgNodes;
334};
335function setCreateNodes(value) {
336 createNodes = value;
337}
338function positionClusters(selection, g) {
339 var created = selection.filter(function() {
340 return !d3select(this).classed("update");
341 });
342 function translate(v) {
343 var node = g.node(v);
344 return "translate(" + node.x + "," + node.y + ")";
345 }
346 created.attr("transform", translate);
347 applyTransition(selection, g).style("opacity", 1).attr("transform", translate);
348 applyTransition(created.selectAll("rect"), g).attr("width", function(v) {
349 return g.node(v).width;
350 }).attr("height", function(v) {
351 return g.node(v).height;
352 }).attr("x", function(v) {
353 var node = g.node(v);
354 return -node.width / 2;
355 }).attr("y", function(v) {
356 var node = g.node(v);
357 return -node.height / 2;
358 });
359}
360function positionEdgeLabels(selection, g) {
361 var created = selection.filter(function() {
362 return !d3select(this).classed("update");
363 });
364 function translate(e) {
365 var edge = g.edge(e);
366 return has(edge, "x") ? "translate(" + edge.x + "," + edge.y + ")" : "";
367 }
368 created.attr("transform", translate);
369 applyTransition(selection, g).style("opacity", 1).attr("transform", translate);
370}
371function positionNodes(selection, g) {
372 var created = selection.filter(function() {
373 return !d3select(this).classed("update");
374 });
375 function translate(v) {
376 var node = g.node(v);
377 return "translate(" + node.x + "," + node.y + ")";
378 }
379 created.attr("transform", translate);
380 applyTransition(selection, g).style("opacity", 1).attr("transform", translate);
381}
382function intersectEllipse(node, rx, ry, point) {
383 var cx = node.x;
384 var cy = node.y;
385 var px = cx - point.x;
386 var py = cy - point.y;
387 var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
388 var dx = Math.abs(rx * ry * px / det);
389 if (point.x < cx) {
390 dx = -dx;
391 }
392 var dy = Math.abs(rx * ry * py / det);
393 if (point.y < cy) {
394 dy = -dy;
395 }
396 return { x: cx + dx, y: cy + dy };
397}
398function intersectCircle(node, rx, point) {
399 return intersectEllipse(node, rx, rx, point);
400}
401function intersectLine(p1, p2, q1, q2) {
402 var a1, a2, b1, b2, c1, c2;
403 var r1, r2, r3, r4;
404 var denom, offset, num;
405 var x, y;
406 a1 = p2.y - p1.y;
407 b1 = p1.x - p2.x;
408 c1 = p2.x * p1.y - p1.x * p2.y;
409 r3 = a1 * q1.x + b1 * q1.y + c1;
410 r4 = a1 * q2.x + b1 * q2.y + c1;
411 if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
412 return;
413 }
414 a2 = q2.y - q1.y;
415 b2 = q1.x - q2.x;
416 c2 = q2.x * q1.y - q1.x * q2.y;
417 r1 = a2 * p1.x + b2 * p1.y + c2;
418 r2 = a2 * p2.x + b2 * p2.y + c2;
419 if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
420 return;
421 }
422 denom = a1 * b2 - a2 * b1;
423 if (denom === 0) {
424 return;
425 }
426 offset = Math.abs(denom / 2);
427 num = b1 * c2 - b2 * c1;
428 x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
429 num = a2 * c1 - a1 * c2;
430 y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
431 return { x, y };
432}
433function sameSign(r1, r2) {
434 return r1 * r2 > 0;
435}
436function intersectPolygon(node, polyPoints, point) {
437 var x1 = node.x;
438 var y1 = node.y;
439 var intersections = [];
440 var minX = Number.POSITIVE_INFINITY;
441 var minY = Number.POSITIVE_INFINITY;
442 polyPoints.forEach(function(entry) {
443 minX = Math.min(minX, entry.x);
444 minY = Math.min(minY, entry.y);
445 });
446 var left = x1 - node.width / 2 - minX;
447 var top = y1 - node.height / 2 - minY;
448 for (var i = 0; i < polyPoints.length; i++) {
449 var p1 = polyPoints[i];
450 var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
451 var intersect = intersectLine(
452 node,
453 point,
454 { x: left + p1.x, y: top + p1.y },
455 { x: left + p2.x, y: top + p2.y }
456 );
457 if (intersect) {
458 intersections.push(intersect);
459 }
460 }
461 if (!intersections.length) {
462 console.log("NO INTERSECTION FOUND, RETURN NODE CENTER", node);
463 return node;
464 }
465 if (intersections.length > 1) {
466 intersections.sort(function(p, q) {
467 var pdx = p.x - point.x;
468 var pdy = p.y - point.y;
469 var distp = Math.sqrt(pdx * pdx + pdy * pdy);
470 var qdx = q.x - point.x;
471 var qdy = q.y - point.y;
472 var distq = Math.sqrt(qdx * qdx + qdy * qdy);
473 return distp < distq ? -1 : distp === distq ? 0 : 1;
474 });
475 }
476 return intersections[0];
477}
478function intersectRect(node, point) {
479 var x = node.x;
480 var y = node.y;
481 var dx = point.x - x;
482 var dy = point.y - y;
483 var w = node.width / 2;
484 var h = node.height / 2;
485 var sx, sy;
486 if (Math.abs(dy) * w > Math.abs(dx) * h) {
487 if (dy < 0) {
488 h = -h;
489 }
490 sx = dy === 0 ? 0 : h * dx / dy;
491 sy = h;
492 } else {
493 if (dx < 0) {
494 w = -w;
495 }
496 sx = w;
497 sy = dx === 0 ? 0 : w * dy / dx;
498 }
499 return { x: x + sx, y: y + sy };
500}
501var shapes = {
502 rect,
503 ellipse,
504 circle,
505 diamond
506};
507function setShapes(value) {
508 shapes = value;
509}
510function rect(parent, bbox, node) {
511 var shapeSvg = parent.insert("rect", ":first-child").attr("rx", node.rx).attr("ry", node.ry).attr("x", -bbox.width / 2).attr("y", -bbox.height / 2).attr("width", bbox.width).attr("height", bbox.height);
512 node.intersect = function(point) {
513 return intersectRect(node, point);
514 };
515 return shapeSvg;
516}
517function ellipse(parent, bbox, node) {
518 var rx = bbox.width / 2;
519 var ry = bbox.height / 2;
520 var shapeSvg = parent.insert("ellipse", ":first-child").attr("x", -bbox.width / 2).attr("y", -bbox.height / 2).attr("rx", rx).attr("ry", ry);
521 node.intersect = function(point) {
522 return intersectEllipse(node, rx, ry, point);
523 };
524 return shapeSvg;
525}
526function circle(parent, bbox, node) {
527 var r = Math.max(bbox.width, bbox.height) / 2;
528 var shapeSvg = parent.insert("circle", ":first-child").attr("x", -bbox.width / 2).attr("y", -bbox.height / 2).attr("r", r);
529 node.intersect = function(point) {
530 return intersectCircle(node, r, point);
531 };
532 return shapeSvg;
533}
534function diamond(parent, bbox, node) {
535 var w = bbox.width * Math.SQRT2 / 2;
536 var h = bbox.height * Math.SQRT2 / 2;
537 var points = [
538 { x: 0, y: -h },
539 { x: -w, y: 0 },
540 { x: 0, y: h },
541 { x: w, y: 0 }
542 ];
543 var shapeSvg = parent.insert("polygon", ":first-child").attr(
544 "points",
545 points.map(function(p) {
546 return p.x + "," + p.y;
547 }).join(" ")
548 );
549 node.intersect = function(p) {
550 return intersectPolygon(node, points, p);
551 };
552 return shapeSvg;
553}
554function render() {
555 var fn = function(svg2, g) {
556 preProcessGraph(g);
557 var outputGroup = createOrSelectGroup(svg2, "output");
558 var clustersGroup = createOrSelectGroup(outputGroup, "clusters");
559 var edgePathsGroup = createOrSelectGroup(outputGroup, "edgePaths");
560 var edgeLabels = createEdgeLabels(createOrSelectGroup(outputGroup, "edgeLabels"), g);
561 var nodes = createNodes(createOrSelectGroup(outputGroup, "nodes"), g, shapes);
562 layout(g);
563 positionNodes(nodes, g);
564 positionEdgeLabels(edgeLabels, g);
565 createEdgePaths(edgePathsGroup, g, arrows);
566 var clusters = createClusters(clustersGroup, g);
567 positionClusters(clusters, g);
568 postProcessGraph(g);
569 };
570 fn.createNodes = function(value) {
571 if (!arguments.length)
572 return createNodes;
573 setCreateNodes(value);
574 return fn;
575 };
576 fn.createClusters = function(value) {
577 if (!arguments.length)
578 return createClusters;
579 setCreateClusters(value);
580 return fn;
581 };
582 fn.createEdgeLabels = function(value) {
583 if (!arguments.length)
584 return createEdgeLabels;
585 setCreateEdgeLabels(value);
586 return fn;
587 };
588 fn.createEdgePaths = function(value) {
589 if (!arguments.length)
590 return createEdgePaths;
591 setCreateEdgePaths(value);
592 return fn;
593 };
594 fn.shapes = function(value) {
595 if (!arguments.length)
596 return shapes;
597 setShapes(value);
598 return fn;
599 };
600 fn.arrows = function(value) {
601 if (!arguments.length)
602 return arrows;
603 setArrows(value);
604 return fn;
605 };
606 return fn;
607}
608var NODE_DEFAULT_ATTRS = {
609 paddingLeft: 10,
610 paddingRight: 10,
611 paddingTop: 10,
612 paddingBottom: 10,
613 rx: 0,
614 ry: 0,
615 shape: "rect"
616};
617var EDGE_DEFAULT_ATTRS = {
618 arrowhead: "normal",
619 curve: curveLinear
620};
621function preProcessGraph(g) {
622 g.nodes().forEach(function(v) {
623 var node = g.node(v);
624 if (!has(node, "label") && !g.children(v).length) {
625 node.label = v;
626 }
627 if (has(node, "paddingX")) {
628 defaults(node, {
629 paddingLeft: node.paddingX,
630 paddingRight: node.paddingX
631 });
632 }
633 if (has(node, "paddingY")) {
634 defaults(node, {
635 paddingTop: node.paddingY,
636 paddingBottom: node.paddingY
637 });
638 }
639 if (has(node, "padding")) {
640 defaults(node, {
641 paddingLeft: node.padding,
642 paddingRight: node.padding,
643 paddingTop: node.padding,
644 paddingBottom: node.padding
645 });
646 }
647 defaults(node, NODE_DEFAULT_ATTRS);
648 forEach(["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"], function(k) {
649 node[k] = Number(node[k]);
650 });
651 if (has(node, "width")) {
652 node._prevWidth = node.width;
653 }
654 if (has(node, "height")) {
655 node._prevHeight = node.height;
656 }
657 });
658 g.edges().forEach(function(e) {
659 var edge = g.edge(e);
660 if (!has(edge, "label")) {
661 edge.label = "";
662 }
663 defaults(edge, EDGE_DEFAULT_ATTRS);
664 });
665}
666function postProcessGraph(g) {
667 forEach(g.nodes(), function(v) {
668 var node = g.node(v);
669 if (has(node, "_prevWidth")) {
670 node.width = node._prevWidth;
671 } else {
672 delete node.width;
673 }
674 if (has(node, "_prevHeight")) {
675 node.height = node._prevHeight;
676 } else {
677 delete node.height;
678 }
679 delete node._prevWidth;
680 delete node._prevHeight;
681 });
682}
683function createOrSelectGroup(root, name) {
684 var selection = root.select("g." + name);
685 if (selection.empty()) {
686 selection = root.append("g").attr("class", name);
687 }
688 return selection;
689}
690function question(parent, bbox, node) {
691 const w = bbox.width;
692 const h = bbox.height;
693 const s = (w + h) * 0.9;
694 const points = [
695 { x: s / 2, y: 0 },
696 { x: s, y: -s / 2 },
697 { x: s / 2, y: -s },
698 { x: 0, y: -s / 2 }
699 ];
700 const shapeSvg = insertPolygonShape(parent, s, s, points);
701 node.intersect = function(point) {
702 return intersectPolygon(node, points, point);
703 };
704 return shapeSvg;
705}
706function hexagon(parent, bbox, node) {
707 const f = 4;
708 const h = bbox.height;
709 const m = h / f;
710 const w = bbox.width + 2 * m;
711 const points = [
712 { x: m, y: 0 },
713 { x: w - m, y: 0 },
714 { x: w, y: -h / 2 },
715 { x: w - m, y: -h },
716 { x: m, y: -h },
717 { x: 0, y: -h / 2 }
718 ];
719 const shapeSvg = insertPolygonShape(parent, w, h, points);
720 node.intersect = function(point) {
721 return intersectPolygon(node, points, point);
722 };
723 return shapeSvg;
724}
725function rect_left_inv_arrow(parent, bbox, node) {
726 const w = bbox.width;
727 const h = bbox.height;
728 const points = [
729 { x: -h / 2, y: 0 },
730 { x: w, y: 0 },
731 { x: w, y: -h },
732 { x: -h / 2, y: -h },
733 { x: 0, y: -h / 2 }
734 ];
735 const shapeSvg = insertPolygonShape(parent, w, h, points);
736 node.intersect = function(point) {
737 return intersectPolygon(node, points, point);
738 };
739 return shapeSvg;
740}
741function lean_right(parent, bbox, node) {
742 const w = bbox.width;
743 const h = bbox.height;
744 const points = [
745 { x: -2 * h / 6, y: 0 },
746 { x: w - h / 6, y: 0 },
747 { x: w + 2 * h / 6, y: -h },
748 { x: h / 6, y: -h }
749 ];
750 const shapeSvg = insertPolygonShape(parent, w, h, points);
751 node.intersect = function(point) {
752 return intersectPolygon(node, points, point);
753 };
754 return shapeSvg;
755}
756function lean_left(parent, bbox, node) {
757 const w = bbox.width;
758 const h = bbox.height;
759 const points = [
760 { x: 2 * h / 6, y: 0 },
761 { x: w + h / 6, y: 0 },
762 { x: w - 2 * h / 6, y: -h },
763 { x: -h / 6, y: -h }
764 ];
765 const shapeSvg = insertPolygonShape(parent, w, h, points);
766 node.intersect = function(point) {
767 return intersectPolygon(node, points, point);
768 };
769 return shapeSvg;
770}
771function trapezoid(parent, bbox, node) {
772 const w = bbox.width;
773 const h = bbox.height;
774 const points = [
775 { x: -2 * h / 6, y: 0 },
776 { x: w + 2 * h / 6, y: 0 },
777 { x: w - h / 6, y: -h },
778 { x: h / 6, y: -h }
779 ];
780 const shapeSvg = insertPolygonShape(parent, w, h, points);
781 node.intersect = function(point) {
782 return intersectPolygon(node, points, point);
783 };
784 return shapeSvg;
785}
786function inv_trapezoid(parent, bbox, node) {
787 const w = bbox.width;
788 const h = bbox.height;
789 const points = [
790 { x: h / 6, y: 0 },
791 { x: w - h / 6, y: 0 },
792 { x: w + 2 * h / 6, y: -h },
793 { x: -2 * h / 6, y: -h }
794 ];
795 const shapeSvg = insertPolygonShape(parent, w, h, points);
796 node.intersect = function(point) {
797 return intersectPolygon(node, points, point);
798 };
799 return shapeSvg;
800}
801function rect_right_inv_arrow(parent, bbox, node) {
802 const w = bbox.width;
803 const h = bbox.height;
804 const points = [
805 { x: 0, y: 0 },
806 { x: w + h / 2, y: 0 },
807 { x: w, y: -h / 2 },
808 { x: w + h / 2, y: -h },
809 { x: 0, y: -h }
810 ];
811 const shapeSvg = insertPolygonShape(parent, w, h, points);
812 node.intersect = function(point) {
813 return intersectPolygon(node, points, point);
814 };
815 return shapeSvg;
816}
817function stadium(parent, bbox, node) {
818 const h = bbox.height;
819 const w = bbox.width + h / 4;
820 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);
821 node.intersect = function(point) {
822 return intersectRect(node, point);
823 };
824 return shapeSvg;
825}
826function subroutine(parent, bbox, node) {
827 const w = bbox.width;
828 const h = bbox.height;
829 const points = [
830 { x: 0, y: 0 },
831 { x: w, y: 0 },
832 { x: w, y: -h },
833 { x: 0, y: -h },
834 { x: 0, y: 0 },
835 { x: -8, y: 0 },
836 { x: w + 8, y: 0 },
837 { x: w + 8, y: -h },
838 { x: -8, y: -h },
839 { x: -8, y: 0 }
840 ];
841 const shapeSvg = insertPolygonShape(parent, w, h, points);
842 node.intersect = function(point) {
843 return intersectPolygon(node, points, point);
844 };
845 return shapeSvg;
846}
847function cylinder(parent, bbox, node) {
848 const w = bbox.width;
849 const rx = w / 2;
850 const ry = rx / (2.5 + w / 50);
851 const h = bbox.height + ry;
852 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;
853 const shapeSvg = parent.attr("label-offset-y", ry).insert("path", ":first-child").attr("d", shape).attr("transform", "translate(" + -w / 2 + "," + -(h / 2 + ry) + ")");
854 node.intersect = function(point) {
855 const pos = intersectRect(node, point);
856 const x = pos.x - node.x;
857 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)) {
858 let y = ry * ry * (1 - x * x / (rx * rx));
859 if (y != 0) {
860 y = Math.sqrt(y);
861 }
862 y = ry - y;
863 if (point.y - node.y > 0) {
864 y = -y;
865 }
866 pos.y += y;
867 }
868 return pos;
869 };
870 return shapeSvg;
871}
872function addToRender(render2) {
873 render2.shapes().question = question;
874 render2.shapes().hexagon = hexagon;
875 render2.shapes().stadium = stadium;
876 render2.shapes().subroutine = subroutine;
877 render2.shapes().cylinder = cylinder;
878 render2.shapes().rect_left_inv_arrow = rect_left_inv_arrow;
879 render2.shapes().lean_right = lean_right;
880 render2.shapes().lean_left = lean_left;
881 render2.shapes().trapezoid = trapezoid;
882 render2.shapes().inv_trapezoid = inv_trapezoid;
883 render2.shapes().rect_right_inv_arrow = rect_right_inv_arrow;
884}
885function addToRenderV2(addShape) {
886 addShape({ question });
887 addShape({ hexagon });
888 addShape({ stadium });
889 addShape({ subroutine });
890 addShape({ cylinder });
891 addShape({ rect_left_inv_arrow });
892 addShape({ lean_right });
893 addShape({ lean_left });
894 addShape({ trapezoid });
895 addShape({ inv_trapezoid });
896 addShape({ rect_right_inv_arrow });
897}
898function insertPolygonShape(parent, w, h, points) {
899 return parent.insert("polygon", ":first-child").attr(
900 "points",
901 points.map(function(d) {
902 return d.x + "," + d.y;
903 }).join(" ")
904 ).attr("transform", "translate(" + -w / 2 + "," + h / 2 + ")");
905}
906const flowChartShapes = {
907 addToRender,
908 addToRenderV2
909};
910const conf = {};
911const setConf = function(cnf) {
912 const keys = Object.keys(cnf);
913 for (const key of keys) {
914 conf[key] = cnf[key];
915 }
916};
917const addVertices = async function(vert, g, svgId, root, _doc, diagObj) {
918 const svg2 = !root ? d3select(`[id="${svgId}"]`) : root.select(`[id="${svgId}"]`);
919 const doc = !_doc ? document : _doc;
920 const keys = Object.keys(vert);
921 for (const id of keys) {
922 const vertex = vert[id];
923 let classStr = "default";
924 if (vertex.classes.length > 0) {
925 classStr = vertex.classes.join(" ");
926 }
927 const styles = getStylesFromArray(vertex.styles);
928 let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id;
929 let vertexNode;
930 if (evaluate(getConfig().flowchart.htmlLabels)) {
931 const node = {
932 label: await renderKatex(
933 vertexText.replace(
934 /fa[blrs]?:fa-[\w-]+/g,
935 // cspell:disable-line
936 (s) => `<i class='${s.replace(":", " ")}'></i>`
937 ),
938 getConfig()
939 )
940 };
941 vertexNode = addHtmlLabel(svg2, node).node();
942 vertexNode.parentNode.removeChild(vertexNode);
943 } else {
944 const svgLabel = doc.createElementNS("http://www.w3.org/2000/svg", "text");
945 svgLabel.setAttribute("style", styles.labelStyle.replace("color:", "fill:"));
946 const rows = vertexText.split(common.lineBreakRegex);
947 for (const row of rows) {
948 const tspan = doc.createElementNS("http://www.w3.org/2000/svg", "tspan");
949 tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
950 tspan.setAttribute("dy", "1em");
951 tspan.setAttribute("x", "1");
952 tspan.textContent = row;
953 svgLabel.appendChild(tspan);
954 }
955 vertexNode = svgLabel;
956 }
957 let radius = 0;
958 let _shape = "";
959 switch (vertex.type) {
960 case "round":
961 radius = 5;
962 _shape = "rect";
963 break;
964 case "square":
965 _shape = "rect";
966 break;
967 case "diamond":
968 _shape = "question";
969 break;
970 case "hexagon":
971 _shape = "hexagon";
972 break;
973 case "odd":
974 _shape = "rect_left_inv_arrow";
975 break;
976 case "lean_right":
977 _shape = "lean_right";
978 break;
979 case "lean_left":
980 _shape = "lean_left";
981 break;
982 case "trapezoid":
983 _shape = "trapezoid";
984 break;
985 case "inv_trapezoid":
986 _shape = "inv_trapezoid";
987 break;
988 case "odd_right":
989 _shape = "rect_left_inv_arrow";
990 break;
991 case "circle":
992 _shape = "circle";
993 break;
994 case "ellipse":
995 _shape = "ellipse";
996 break;
997 case "stadium":
998 _shape = "stadium";
999 break;
1000 case "subroutine":
1001 _shape = "subroutine";
1002 break;
1003 case "cylinder":
1004 _shape = "cylinder";
1005 break;
1006 case "group":
1007 _shape = "rect";
1008 break;
1009 default:
1010 _shape = "rect";
1011 }
1012 log.warn("Adding node", vertex.id, vertex.domId);
1013 g.setNode(diagObj.db.lookUpDomId(vertex.id), {
1014 labelType: "svg",
1015 labelStyle: styles.labelStyle,
1016 shape: _shape,
1017 label: vertexNode,
1018 rx: radius,
1019 ry: radius,
1020 class: classStr,
1021 style: styles.style,
1022 id: diagObj.db.lookUpDomId(vertex.id)
1023 });
1024 }
1025};
1026const addEdges = async function(edges, g, diagObj) {
1027 let cnt = 0;
1028 let defaultStyle;
1029 let defaultLabelStyle;
1030 if (edges.defaultStyle !== void 0) {
1031 const defaultStyles = getStylesFromArray(edges.defaultStyle);
1032 defaultStyle = defaultStyles.style;
1033 defaultLabelStyle = defaultStyles.labelStyle;
1034 }
1035 for (const edge of edges) {
1036 cnt++;
1037 const linkId = "L-" + edge.start + "-" + edge.end;
1038 const linkNameStart = "LS-" + edge.start;
1039 const linkNameEnd = "LE-" + edge.end;
1040 const edgeData = {};
1041 if (edge.type === "arrow_open") {
1042 edgeData.arrowhead = "none";
1043 } else {
1044 edgeData.arrowhead = "normal";
1045 }
1046 let style = "";
1047 let labelStyle = "";
1048 if (edge.style !== void 0) {
1049 const styles = getStylesFromArray(edge.style);
1050 style = styles.style;
1051 labelStyle = styles.labelStyle;
1052 } else {
1053 switch (edge.stroke) {
1054 case "normal":
1055 style = "fill:none";
1056 if (defaultStyle !== void 0) {
1057 style = defaultStyle;
1058 }
1059 if (defaultLabelStyle !== void 0) {
1060 labelStyle = defaultLabelStyle;
1061 }
1062 break;
1063 case "dotted":
1064 style = "fill:none;stroke-width:2px;stroke-dasharray:3;";
1065 break;
1066 case "thick":
1067 style = " stroke-width: 3.5px;fill:none";
1068 break;
1069 }
1070 }
1071 edgeData.style = style;
1072 edgeData.labelStyle = labelStyle;
1073 if (edge.interpolate !== void 0) {
1074 edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear);
1075 } else if (edges.defaultInterpolate !== void 0) {
1076 edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear);
1077 } else {
1078 edgeData.curve = interpolateToCurve(conf.curve, curveLinear);
1079 }
1080 if (edge.text === void 0) {
1081 if (edge.style !== void 0) {
1082 edgeData.arrowheadStyle = "fill: #333";
1083 }
1084 } else {
1085 edgeData.arrowheadStyle = "fill: #333";
1086 edgeData.labelpos = "c";
1087 if (evaluate(getConfig().flowchart.htmlLabels)) {
1088 edgeData.labelType = "html";
1089 edgeData.label = `<span id="L-${linkId}" class="edgeLabel L-${linkNameStart}' L-${linkNameEnd}" style="${edgeData.labelStyle}">${await renderKatex(
1090 edge.text.replace(
1091 /fa[blrs]?:fa-[\w-]+/g,
1092 // cspell:disable-line
1093 (s) => `<i class='${s.replace(":", " ")}'></i>`
1094 ),
1095 getConfig()
1096 )}</span>`;
1097 } else {
1098 edgeData.labelType = "text";
1099 edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
1100 if (edge.style === void 0) {
1101 edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none";
1102 }
1103 edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
1104 }
1105 }
1106 edgeData.id = linkId;
1107 edgeData.class = linkNameStart + " " + linkNameEnd;
1108 edgeData.minlen = edge.length || 1;
1109 g.setEdge(diagObj.db.lookUpDomId(edge.start), diagObj.db.lookUpDomId(edge.end), edgeData, cnt);
1110 }
1111};
1112const getClasses = function(text2, diagObj) {
1113 log.info("Extracting classes");
1114 return diagObj.db.getClasses();
1115};
1116const draw = async function(text2, id, _version, diagObj) {
1117 log.info("Drawing flowchart");
1118 const { securityLevel, flowchart: conf2 } = getConfig();
1119 let sandboxElement;
1120 if (securityLevel === "sandbox") {
1121 sandboxElement = d3select("#i" + id);
1122 }
1123 const root = securityLevel === "sandbox" ? d3select(sandboxElement.nodes()[0].contentDocument.body) : d3select("body");
1124 const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
1125 let dir = diagObj.db.getDirection();
1126 if (dir === void 0) {
1127 dir = "TD";
1128 }
1129 const nodeSpacing = conf2.nodeSpacing || 50;
1130 const rankSpacing = conf2.rankSpacing || 50;
1131 const g = new Graph({
1132 multigraph: true,
1133 compound: true
1134 }).setGraph({
1135 rankdir: dir,
1136 nodesep: nodeSpacing,
1137 ranksep: rankSpacing,
1138 marginx: 8,
1139 marginy: 8
1140 }).setDefaultEdgeLabel(function() {
1141 return {};
1142 });
1143 let subG;
1144 const subGraphs = diagObj.db.getSubGraphs();
1145 for (let i2 = subGraphs.length - 1; i2 >= 0; i2--) {
1146 subG = subGraphs[i2];
1147 diagObj.db.addVertex(subG.id, subG.title, "group", void 0, subG.classes);
1148 }
1149 const vert = diagObj.db.getVertices();
1150 log.warn("Get vertices", vert);
1151 const edges = diagObj.db.getEdges();
1152 let i = 0;
1153 for (i = subGraphs.length - 1; i >= 0; i--) {
1154 subG = subGraphs[i];
1155 selectAll("cluster").append("text");
1156 for (let j = 0; j < subG.nodes.length; j++) {
1157 log.warn(
1158 "Setting subgraph",
1159 subG.nodes[j],
1160 diagObj.db.lookUpDomId(subG.nodes[j]),
1161 diagObj.db.lookUpDomId(subG.id)
1162 );
1163 g.setParent(diagObj.db.lookUpDomId(subG.nodes[j]), diagObj.db.lookUpDomId(subG.id));
1164 }
1165 }
1166 await addVertices(vert, g, id, root, doc, diagObj);
1167 await addEdges(edges, g, diagObj);
1168 const render$1 = new render();
1169 flowChartShapes.addToRender(render$1);
1170 render$1.arrows().none = function normal2(parent, id2, edge, type) {
1171 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");
1172 const path = marker.append("path").attr("d", "M 0 0 L 0 0 L 0 0 z");
1173 applyStyle(path, edge[type + "Style"]);
1174 };
1175 render$1.arrows().normal = function normal2(parent, id2) {
1176 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");
1177 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");
1178 };
1179 const svg2 = root.select(`[id="${id}"]`);
1180 const element = root.select("#" + id + " g");
1181 render$1(element, g);
1182 element.selectAll("g.node").attr("title", function() {
1183 return diagObj.db.getTooltip(this.id);
1184 });
1185 diagObj.db.indexNodes("subGraph" + i);
1186 for (i = 0; i < subGraphs.length; i++) {
1187 subG = subGraphs[i];
1188 if (subG.title !== "undefined") {
1189 const clusterRects = doc.querySelectorAll(
1190 "#" + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"] rect'
1191 );
1192 const clusterEl = doc.querySelectorAll(
1193 "#" + id + ' [id="' + diagObj.db.lookUpDomId(subG.id) + '"]'
1194 );
1195 const xPos = clusterRects[0].x.baseVal.value;
1196 const yPos = clusterRects[0].y.baseVal.value;
1197 const _width = clusterRects[0].width.baseVal.value;
1198 const cluster = d3select(clusterEl[0]);
1199 const te = cluster.select(".label");
1200 te.attr("transform", `translate(${xPos + _width / 2}, ${yPos + 14})`);
1201 te.attr("id", id + "Text");
1202 for (let j = 0; j < subG.classes.length; j++) {
1203 clusterEl[0].classList.add(subG.classes[j]);
1204 }
1205 }
1206 }
1207 if (!conf2.htmlLabels) {
1208 const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
1209 for (const label of labels) {
1210 const dim = label.getBBox();
1211 const rect2 = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
1212 rect2.setAttribute("rx", 0);
1213 rect2.setAttribute("ry", 0);
1214 rect2.setAttribute("width", dim.width);
1215 rect2.setAttribute("height", dim.height);
1216 label.insertBefore(rect2, label.firstChild);
1217 }
1218 }
1219 setupGraphViewbox(g, svg2, conf2.diagramPadding, conf2.useMaxWidth);
1220 const keys = Object.keys(vert);
1221 keys.forEach(function(key) {
1222 const vertex = vert[key];
1223 if (vertex.link) {
1224 const node = root.select("#" + id + ' [id="' + diagObj.db.lookUpDomId(key) + '"]');
1225 if (node) {
1226 const link = doc.createElementNS("http://www.w3.org/2000/svg", "a");
1227 link.setAttributeNS("http://www.w3.org/2000/svg", "class", vertex.classes.join(" "));
1228 link.setAttributeNS("http://www.w3.org/2000/svg", "href", vertex.link);
1229 link.setAttributeNS("http://www.w3.org/2000/svg", "rel", "noopener");
1230 if (securityLevel === "sandbox") {
1231 link.setAttributeNS("http://www.w3.org/2000/svg", "target", "_top");
1232 } else if (vertex.linkTarget) {
1233 link.setAttributeNS("http://www.w3.org/2000/svg", "target", vertex.linkTarget);
1234 }
1235 const linkNode = node.insert(function() {
1236 return link;
1237 }, ":first-child");
1238 const shape = node.select(".label-container");
1239 if (shape) {
1240 linkNode.append(function() {
1241 return shape.node();
1242 });
1243 }
1244 const label = node.select(".label");
1245 if (label) {
1246 linkNode.append(function() {
1247 return label.node();
1248 });
1249 }
1250 }
1251 }
1252 });
1253};
1254const flowRenderer = {
1255 setConf,
1256 addVertices,
1257 addEdges,
1258 getClasses,
1259 draw
1260};
1261const diagram = {
1262 parser: parser$1,
1263 db: flowDb,
1264 renderer: flowRendererV2,
1265 styles: flowStyles,
1266 init: (cnf) => {
1267 if (!cnf.flowchart) {
1268 cnf.flowchart = {};
1269 }
1270 cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
1271 flowRenderer.setConf(cnf.flowchart);
1272 flowDb.clear();
1273 flowDb.setGen("gen-1");
1274 }
1275};
1276export {
1277 diagram
1278};