1 | import { p as parser, f as flowDb } from "./flowDb-c1833063.js";
|
2 | import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
|
3 | import { select, curveLinear, selectAll } from "d3";
|
4 | import { 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";
|
5 | import { render } from "dagre-d3-es";
|
6 | import { applyStyle } from "dagre-d3-es/src/dagre-js/util.js";
|
7 | import { addHtmlLabel } from "dagre-d3-es/src/dagre-js/label/add-html-label.js";
|
8 | import { intersectPolygon } from "dagre-d3-es/src/dagre-js/intersect/intersect-polygon.js";
|
9 | import { intersectRect } from "dagre-d3-es/src/dagre-js/intersect/intersect-rect.js";
|
10 | import { f as flowRendererV2, a as flowStyles } from "./styles-483fbfea.js";
|
11 | import "ts-dedent";
|
12 | import "dayjs";
|
13 | import "@braintree/sanitize-url";
|
14 | import "dompurify";
|
15 | import "khroma";
|
16 | import "lodash-es/memoize.js";
|
17 | import "lodash-es/merge.js";
|
18 | import "stylis";
|
19 | import "lodash-es/isEmpty.js";
|
20 | import "./index-01f381cb.js";
|
21 | import "dagre-d3-es/src/dagre/index.js";
|
22 | import "dagre-d3-es/src/graphlib/json.js";
|
23 | import "./edges-066a5561.js";
|
24 | import "./createText-ca0c5216.js";
|
25 | import "mdast-util-from-markdown";
|
26 | function 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 | }
|
42 | function 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 | }
|
61 | function 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 | }
|
77 | function 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 | }
|
92 | function 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 | }
|
107 | function 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 | }
|
122 | function 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 | }
|
137 | function 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 | }
|
153 | function 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 | }
|
162 | function 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 | }
|
183 | function 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 | }
|
208 | function 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 | }
|
221 | function 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 | }
|
234 | function 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 | }
|
242 | const flowChartShapes = {
|
243 | addToRender,
|
244 | addToRenderV2
|
245 | };
|
246 | const conf = {};
|
247 | const setConf = function(cnf) {
|
248 | const keys = Object.keys(cnf);
|
249 | for (const key of keys) {
|
250 | conf[key] = cnf[key];
|
251 | }
|
252 | };
|
253 | const 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 |
|
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 | };
|
362 | const 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 | };
|
448 | const getClasses = function(text, diagObj) {
|
449 | log.info("Extracting classes");
|
450 | return diagObj.db.getClasses();
|
451 | };
|
452 | const 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 | };
|
590 | const flowRenderer = {
|
591 | setConf,
|
592 | addVertices,
|
593 | addEdges,
|
594 | getClasses,
|
595 | draw
|
596 | };
|
597 | const 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 | };
|
612 | export {
|
613 | diagram
|
614 | };
|