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