1 | import { l as log, p as evaluate, c as getConfig, b7 as decodeEntities, j as d3select, d as sanitizeText, A as utils, F as curveBasis } from "./mermaid-dcacb631.js";
|
2 | import { a as createText } from "./createText-b70fe78a.js";
|
3 | import { l as line } from "./line-87f517ef.js";
|
4 | const insertMarkers = (elem, markerArray, type, id) => {
|
5 | markerArray.forEach((markerName) => {
|
6 | markers[markerName](elem, type, id);
|
7 | });
|
8 | };
|
9 | const extension = (elem, type, id) => {
|
10 | log.trace("Making markers for ", id);
|
11 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-extensionStart").attr("class", "marker extension " + type).attr("refX", 18).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("path").attr("d", "M 1,7 L18,13 V 1 Z");
|
12 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-extensionEnd").attr("class", "marker extension " + type).attr("refX", 1).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 1,1 V 13 L18,7 Z");
|
13 | };
|
14 | const composition = (elem, type, id) => {
|
15 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-compositionStart").attr("class", "marker composition " + type).attr("refX", 18).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
|
16 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-compositionEnd").attr("class", "marker composition " + type).attr("refX", 1).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
|
17 | };
|
18 | const aggregation = (elem, type, id) => {
|
19 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-aggregationStart").attr("class", "marker aggregation " + type).attr("refX", 18).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
|
20 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-aggregationEnd").attr("class", "marker aggregation " + type).attr("refX", 1).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L1,7 L9,1 Z");
|
21 | };
|
22 | const dependency = (elem, type, id) => {
|
23 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-dependencyStart").attr("class", "marker dependency " + type).attr("refX", 6).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("path").attr("d", "M 5,7 L9,13 L1,7 L9,1 Z");
|
24 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-dependencyEnd").attr("class", "marker dependency " + type).attr("refX", 13).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 18,7 L9,13 L14,7 L9,1 Z");
|
25 | };
|
26 | const lollipop = (elem, type, id) => {
|
27 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-lollipopStart").attr("class", "marker lollipop " + type).attr("refX", 13).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("circle").attr("stroke", "black").attr("fill", "transparent").attr("cx", 7).attr("cy", 7).attr("r", 6);
|
28 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-lollipopEnd").attr("class", "marker lollipop " + type).attr("refX", 1).attr("refY", 7).attr("markerWidth", 190).attr("markerHeight", 240).attr("orient", "auto").append("circle").attr("stroke", "black").attr("fill", "transparent").attr("cx", 7).attr("cy", 7).attr("r", 6);
|
29 | };
|
30 | const point = (elem, type, id) => {
|
31 | elem.append("marker").attr("id", id + "_" + type + "-pointEnd").attr("class", "marker " + type).attr("viewBox", "0 0 10 10").attr("refX", 6).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto").append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").attr("class", "arrowMarkerPath").style("stroke-width", 1).style("stroke-dasharray", "1,0");
|
32 | elem.append("marker").attr("id", id + "_" + type + "-pointStart").attr("class", "marker " + type).attr("viewBox", "0 0 10 10").attr("refX", 4.5).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 12).attr("markerHeight", 12).attr("orient", "auto").append("path").attr("d", "M 0 5 L 10 10 L 10 0 z").attr("class", "arrowMarkerPath").style("stroke-width", 1).style("stroke-dasharray", "1,0");
|
33 | };
|
34 | const circle$1 = (elem, type, id) => {
|
35 | elem.append("marker").attr("id", id + "_" + type + "-circleEnd").attr("class", "marker " + type).attr("viewBox", "0 0 10 10").attr("refX", 11).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 11).attr("markerHeight", 11).attr("orient", "auto").append("circle").attr("cx", "5").attr("cy", "5").attr("r", "5").attr("class", "arrowMarkerPath").style("stroke-width", 1).style("stroke-dasharray", "1,0");
|
36 | elem.append("marker").attr("id", id + "_" + type + "-circleStart").attr("class", "marker " + type).attr("viewBox", "0 0 10 10").attr("refX", -1).attr("refY", 5).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 11).attr("markerHeight", 11).attr("orient", "auto").append("circle").attr("cx", "5").attr("cy", "5").attr("r", "5").attr("class", "arrowMarkerPath").style("stroke-width", 1).style("stroke-dasharray", "1,0");
|
37 | };
|
38 | const cross = (elem, type, id) => {
|
39 | elem.append("marker").attr("id", id + "_" + type + "-crossEnd").attr("class", "marker cross " + type).attr("viewBox", "0 0 11 11").attr("refX", 12).attr("refY", 5.2).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 11).attr("markerHeight", 11).attr("orient", "auto").append("path").attr("d", "M 1,1 l 9,9 M 10,1 l -9,9").attr("class", "arrowMarkerPath").style("stroke-width", 2).style("stroke-dasharray", "1,0");
|
40 | elem.append("marker").attr("id", id + "_" + type + "-crossStart").attr("class", "marker cross " + type).attr("viewBox", "0 0 11 11").attr("refX", -1).attr("refY", 5.2).attr("markerUnits", "userSpaceOnUse").attr("markerWidth", 11).attr("markerHeight", 11).attr("orient", "auto").append("path").attr("d", "M 1,1 l 9,9 M 10,1 l -9,9").attr("class", "arrowMarkerPath").style("stroke-width", 2).style("stroke-dasharray", "1,0");
|
41 | };
|
42 | const barb = (elem, type, id) => {
|
43 | elem.append("defs").append("marker").attr("id", id + "_" + type + "-barbEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 14).attr("markerUnits", "strokeWidth").attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
|
44 | };
|
45 | const markers = {
|
46 | extension,
|
47 | composition,
|
48 | aggregation,
|
49 | dependency,
|
50 | lollipop,
|
51 | point,
|
52 | circle: circle$1,
|
53 | cross,
|
54 | barb
|
55 | };
|
56 | const insertMarkers$1 = insertMarkers;
|
57 | function applyStyle(dom, styleFn) {
|
58 | if (styleFn) {
|
59 | dom.attr("style", styleFn);
|
60 | }
|
61 | }
|
62 | function addHtmlLabel(node) {
|
63 | const fo = d3select(document.createElementNS("http://www.w3.org/2000/svg", "foreignObject"));
|
64 | const div = fo.append("xhtml:div");
|
65 | const label = node.label;
|
66 | const labelClass = node.isNode ? "nodeLabel" : "edgeLabel";
|
67 | div.html(
|
68 | '<span class="' + labelClass + '" ' + (node.labelStyle ? 'style="' + node.labelStyle + '"' : "") + ">" + label + "</span>"
|
69 | );
|
70 | applyStyle(div, node.labelStyle);
|
71 | div.style("display", "inline-block");
|
72 | div.style("white-space", "nowrap");
|
73 | div.attr("xmlns", "http://www.w3.org/1999/xhtml");
|
74 | return fo.node();
|
75 | }
|
76 | const createLabel = (_vertexText, style, isTitle, isNode) => {
|
77 | let vertexText = _vertexText || "";
|
78 | if (typeof vertexText === "object") {
|
79 | vertexText = vertexText[0];
|
80 | }
|
81 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
82 | vertexText = vertexText.replace(/\\n|\n/g, "<br />");
|
83 | log.debug("vertexText" + vertexText);
|
84 | const node = {
|
85 | isNode,
|
86 | label: decodeEntities(vertexText).replace(
|
87 | /fa[blrs]?:fa-[\w-]+/g,
|
88 |
|
89 | (s) => `<i class='${s.replace(":", " ")}'></i>`
|
90 | ),
|
91 | labelStyle: style.replace("fill:", "color:")
|
92 | };
|
93 | let vertexNode = addHtmlLabel(node);
|
94 | return vertexNode;
|
95 | } else {
|
96 | const svgLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
|
97 | svgLabel.setAttribute("style", style.replace("color:", "fill:"));
|
98 | let rows = [];
|
99 | if (typeof vertexText === "string") {
|
100 | rows = vertexText.split(/\\n|\n|<br\s*\/?>/gi);
|
101 | } else if (Array.isArray(vertexText)) {
|
102 | rows = vertexText;
|
103 | } else {
|
104 | rows = [];
|
105 | }
|
106 | for (const row of rows) {
|
107 | const tspan = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
|
108 | tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve");
|
109 | tspan.setAttribute("dy", "1em");
|
110 | tspan.setAttribute("x", "0");
|
111 | if (isTitle) {
|
112 | tspan.setAttribute("class", "title-row");
|
113 | } else {
|
114 | tspan.setAttribute("class", "row");
|
115 | }
|
116 | tspan.textContent = row.trim();
|
117 | svgLabel.appendChild(tspan);
|
118 | }
|
119 | return svgLabel;
|
120 | }
|
121 | };
|
122 | const createLabel$1 = createLabel;
|
123 | const labelHelper = async (parent, node, _classes, isNode) => {
|
124 | let classes;
|
125 | const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig().flowchart.htmlLabels);
|
126 | if (!_classes) {
|
127 | classes = "node default";
|
128 | } else {
|
129 | classes = _classes;
|
130 | }
|
131 | const shapeSvg = parent.insert("g").attr("class", classes).attr("id", node.domId || node.id);
|
132 | const label = shapeSvg.insert("g").attr("class", "label").attr("style", node.labelStyle);
|
133 | let labelText;
|
134 | if (node.labelText === void 0) {
|
135 | labelText = "";
|
136 | } else {
|
137 | labelText = typeof node.labelText === "string" ? node.labelText : node.labelText[0];
|
138 | }
|
139 | const textNode = label.node();
|
140 | let text;
|
141 | if (node.labelType === "markdown") {
|
142 | text = createText(label, sanitizeText(decodeEntities(labelText), getConfig()), {
|
143 | useHtmlLabels,
|
144 | width: node.width || getConfig().flowchart.wrappingWidth,
|
145 | classes: "markdown-node-label"
|
146 | });
|
147 | } else {
|
148 | text = textNode.appendChild(
|
149 | createLabel$1(
|
150 | sanitizeText(decodeEntities(labelText), getConfig()),
|
151 | node.labelStyle,
|
152 | false,
|
153 | isNode
|
154 | )
|
155 | );
|
156 | }
|
157 | let bbox = text.getBBox();
|
158 | const halfPadding = node.padding / 2;
|
159 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
160 | const div = text.children[0];
|
161 | const dv = d3select(text);
|
162 | const images = div.getElementsByTagName("img");
|
163 | if (images) {
|
164 | const noImgText = labelText.replace(/<img[^>]*>/g, "").trim() === "";
|
165 | await Promise.all(
|
166 | [...images].map(
|
167 | (img) => new Promise((res) => {
|
168 | function setupImage() {
|
169 | img.style.display = "flex";
|
170 | img.style.flexDirection = "column";
|
171 | if (noImgText) {
|
172 | const bodyFontSize = getConfig().fontSize ? getConfig().fontSize : window.getComputedStyle(document.body).fontSize;
|
173 | const enlargingFactor = 5;
|
174 | const width = parseInt(bodyFontSize, 10) * enlargingFactor + "px";
|
175 | img.style.minWidth = width;
|
176 | img.style.maxWidth = width;
|
177 | } else {
|
178 | img.style.width = "100%";
|
179 | }
|
180 | res(img);
|
181 | }
|
182 | setTimeout(() => {
|
183 | if (img.complete) {
|
184 | setupImage();
|
185 | }
|
186 | });
|
187 | img.addEventListener("error", setupImage);
|
188 | img.addEventListener("load", setupImage);
|
189 | })
|
190 | )
|
191 | );
|
192 | }
|
193 | bbox = div.getBoundingClientRect();
|
194 | dv.attr("width", bbox.width);
|
195 | dv.attr("height", bbox.height);
|
196 | }
|
197 | if (useHtmlLabels) {
|
198 | label.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")");
|
199 | } else {
|
200 | label.attr("transform", "translate(0, " + -bbox.height / 2 + ")");
|
201 | }
|
202 | if (node.centerLabel) {
|
203 | label.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")");
|
204 | }
|
205 | label.insert("rect", ":first-child");
|
206 | return { shapeSvg, bbox, halfPadding, label };
|
207 | };
|
208 | const updateNodeBounds = (node, element) => {
|
209 | const bbox = element.node().getBBox();
|
210 | node.width = bbox.width;
|
211 | node.height = bbox.height;
|
212 | };
|
213 | function insertPolygonShape(parent, w, h, points) {
|
214 | return parent.insert("polygon", ":first-child").attr(
|
215 | "points",
|
216 | points.map(function(d) {
|
217 | return d.x + "," + d.y;
|
218 | }).join(" ")
|
219 | ).attr("class", "label-container").attr("transform", "translate(" + -w / 2 + "," + h / 2 + ")");
|
220 | }
|
221 | function intersectNode(node, point2) {
|
222 | return node.intersect(point2);
|
223 | }
|
224 | function intersectEllipse(node, rx, ry, point2) {
|
225 | var cx = node.x;
|
226 | var cy = node.y;
|
227 | var px = cx - point2.x;
|
228 | var py = cy - point2.y;
|
229 | var det = Math.sqrt(rx * rx * py * py + ry * ry * px * px);
|
230 | var dx = Math.abs(rx * ry * px / det);
|
231 | if (point2.x < cx) {
|
232 | dx = -dx;
|
233 | }
|
234 | var dy = Math.abs(rx * ry * py / det);
|
235 | if (point2.y < cy) {
|
236 | dy = -dy;
|
237 | }
|
238 | return { x: cx + dx, y: cy + dy };
|
239 | }
|
240 | function intersectCircle(node, rx, point2) {
|
241 | return intersectEllipse(node, rx, rx, point2);
|
242 | }
|
243 | function intersectLine(p1, p2, q1, q2) {
|
244 | var a1, a2, b1, b2, c1, c2;
|
245 | var r1, r2, r3, r4;
|
246 | var denom, offset, num;
|
247 | var x, y;
|
248 | a1 = p2.y - p1.y;
|
249 | b1 = p1.x - p2.x;
|
250 | c1 = p2.x * p1.y - p1.x * p2.y;
|
251 | r3 = a1 * q1.x + b1 * q1.y + c1;
|
252 | r4 = a1 * q2.x + b1 * q2.y + c1;
|
253 | if (r3 !== 0 && r4 !== 0 && sameSign(r3, r4)) {
|
254 | return;
|
255 | }
|
256 | a2 = q2.y - q1.y;
|
257 | b2 = q1.x - q2.x;
|
258 | c2 = q2.x * q1.y - q1.x * q2.y;
|
259 | r1 = a2 * p1.x + b2 * p1.y + c2;
|
260 | r2 = a2 * p2.x + b2 * p2.y + c2;
|
261 | if (r1 !== 0 && r2 !== 0 && sameSign(r1, r2)) {
|
262 | return;
|
263 | }
|
264 | denom = a1 * b2 - a2 * b1;
|
265 | if (denom === 0) {
|
266 | return;
|
267 | }
|
268 | offset = Math.abs(denom / 2);
|
269 | num = b1 * c2 - b2 * c1;
|
270 | x = num < 0 ? (num - offset) / denom : (num + offset) / denom;
|
271 | num = a2 * c1 - a1 * c2;
|
272 | y = num < 0 ? (num - offset) / denom : (num + offset) / denom;
|
273 | return { x, y };
|
274 | }
|
275 | function sameSign(r1, r2) {
|
276 | return r1 * r2 > 0;
|
277 | }
|
278 | function intersectPolygon(node, polyPoints, point2) {
|
279 | var x1 = node.x;
|
280 | var y1 = node.y;
|
281 | var intersections = [];
|
282 | var minX = Number.POSITIVE_INFINITY;
|
283 | var minY = Number.POSITIVE_INFINITY;
|
284 | if (typeof polyPoints.forEach === "function") {
|
285 | polyPoints.forEach(function(entry) {
|
286 | minX = Math.min(minX, entry.x);
|
287 | minY = Math.min(minY, entry.y);
|
288 | });
|
289 | } else {
|
290 | minX = Math.min(minX, polyPoints.x);
|
291 | minY = Math.min(minY, polyPoints.y);
|
292 | }
|
293 | var left = x1 - node.width / 2 - minX;
|
294 | var top = y1 - node.height / 2 - minY;
|
295 | for (var i = 0; i < polyPoints.length; i++) {
|
296 | var p1 = polyPoints[i];
|
297 | var p2 = polyPoints[i < polyPoints.length - 1 ? i + 1 : 0];
|
298 | var intersect2 = intersectLine(
|
299 | node,
|
300 | point2,
|
301 | { x: left + p1.x, y: top + p1.y },
|
302 | { x: left + p2.x, y: top + p2.y }
|
303 | );
|
304 | if (intersect2) {
|
305 | intersections.push(intersect2);
|
306 | }
|
307 | }
|
308 | if (!intersections.length) {
|
309 | return node;
|
310 | }
|
311 | if (intersections.length > 1) {
|
312 | intersections.sort(function(p, q) {
|
313 | var pdx = p.x - point2.x;
|
314 | var pdy = p.y - point2.y;
|
315 | var distp = Math.sqrt(pdx * pdx + pdy * pdy);
|
316 | var qdx = q.x - point2.x;
|
317 | var qdy = q.y - point2.y;
|
318 | var distq = Math.sqrt(qdx * qdx + qdy * qdy);
|
319 | return distp < distq ? -1 : distp === distq ? 0 : 1;
|
320 | });
|
321 | }
|
322 | return intersections[0];
|
323 | }
|
324 | const intersectRect = (node, point2) => {
|
325 | var x = node.x;
|
326 | var y = node.y;
|
327 | var dx = point2.x - x;
|
328 | var dy = point2.y - y;
|
329 | var w = node.width / 2;
|
330 | var h = node.height / 2;
|
331 | var sx, sy;
|
332 | if (Math.abs(dy) * w > Math.abs(dx) * h) {
|
333 | if (dy < 0) {
|
334 | h = -h;
|
335 | }
|
336 | sx = dy === 0 ? 0 : h * dx / dy;
|
337 | sy = h;
|
338 | } else {
|
339 | if (dx < 0) {
|
340 | w = -w;
|
341 | }
|
342 | sx = w;
|
343 | sy = dx === 0 ? 0 : w * dy / dx;
|
344 | }
|
345 | return { x: x + sx, y: y + sy };
|
346 | };
|
347 | const intersectRect$1 = intersectRect;
|
348 | const intersect = {
|
349 | node: intersectNode,
|
350 | circle: intersectCircle,
|
351 | ellipse: intersectEllipse,
|
352 | polygon: intersectPolygon,
|
353 | rect: intersectRect$1
|
354 | };
|
355 | const note = async (parent, node) => {
|
356 | const useHtmlLabels = node.useHtmlLabels || getConfig().flowchart.htmlLabels;
|
357 | if (!useHtmlLabels) {
|
358 | node.centerLabel = true;
|
359 | }
|
360 | const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
361 | parent,
|
362 | node,
|
363 | "node " + node.classes,
|
364 | true
|
365 | );
|
366 | log.info("Classes = ", node.classes);
|
367 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
368 | rect2.attr("rx", node.rx).attr("ry", node.ry).attr("x", -bbox.width / 2 - halfPadding).attr("y", -bbox.height / 2 - halfPadding).attr("width", bbox.width + node.padding).attr("height", bbox.height + node.padding);
|
369 | updateNodeBounds(node, rect2);
|
370 | node.intersect = function(point2) {
|
371 | return intersect.rect(node, point2);
|
372 | };
|
373 | return shapeSvg;
|
374 | };
|
375 | const note$1 = note;
|
376 | const expandAndDeduplicateDirections = (directions) => {
|
377 | const uniqueDirections = new Set();
|
378 | for (const direction of directions) {
|
379 | switch (direction) {
|
380 | case "x":
|
381 | uniqueDirections.add("right");
|
382 | uniqueDirections.add("left");
|
383 | break;
|
384 | case "y":
|
385 | uniqueDirections.add("up");
|
386 | uniqueDirections.add("down");
|
387 | break;
|
388 | default:
|
389 | uniqueDirections.add(direction);
|
390 | break;
|
391 | }
|
392 | }
|
393 | return uniqueDirections;
|
394 | };
|
395 | const getArrowPoints = (duplicatedDirections, bbox, node) => {
|
396 | const directions = expandAndDeduplicateDirections(duplicatedDirections);
|
397 | const f = 2;
|
398 | const height = bbox.height + 2 * node.padding;
|
399 | const midpoint = height / f;
|
400 | const width = bbox.width + 2 * midpoint + node.padding;
|
401 | const padding = node.padding / 2;
|
402 | if (directions.has("right") && directions.has("left") && directions.has("up") && directions.has("down")) {
|
403 | return [
|
404 |
|
405 | { x: 0, y: 0 },
|
406 | { x: midpoint, y: 0 },
|
407 | { x: width / 2, y: 2 * padding },
|
408 | { x: width - midpoint, y: 0 },
|
409 | { x: width, y: 0 },
|
410 |
|
411 | { x: width, y: -height / 3 },
|
412 | { x: width + 2 * padding, y: -height / 2 },
|
413 | { x: width, y: -2 * height / 3 },
|
414 | { x: width, y: -height },
|
415 |
|
416 | { x: width - midpoint, y: -height },
|
417 | { x: width / 2, y: -height - 2 * padding },
|
418 | { x: midpoint, y: -height },
|
419 |
|
420 | { x: 0, y: -height },
|
421 | { x: 0, y: -2 * height / 3 },
|
422 | { x: -2 * padding, y: -height / 2 },
|
423 | { x: 0, y: -height / 3 }
|
424 | ];
|
425 | }
|
426 | if (directions.has("right") && directions.has("left") && directions.has("up")) {
|
427 | return [
|
428 | { x: midpoint, y: 0 },
|
429 | { x: width - midpoint, y: 0 },
|
430 | { x: width, y: -height / 2 },
|
431 | { x: width - midpoint, y: -height },
|
432 | { x: midpoint, y: -height },
|
433 | { x: 0, y: -height / 2 }
|
434 | ];
|
435 | }
|
436 | if (directions.has("right") && directions.has("left") && directions.has("down")) {
|
437 | return [
|
438 | { x: 0, y: 0 },
|
439 | { x: midpoint, y: -height },
|
440 | { x: width - midpoint, y: -height },
|
441 | { x: width, y: 0 }
|
442 | ];
|
443 | }
|
444 | if (directions.has("right") && directions.has("up") && directions.has("down")) {
|
445 | return [
|
446 | { x: 0, y: 0 },
|
447 | { x: width, y: -midpoint },
|
448 | { x: width, y: -height + midpoint },
|
449 | { x: 0, y: -height }
|
450 | ];
|
451 | }
|
452 | if (directions.has("left") && directions.has("up") && directions.has("down")) {
|
453 | return [
|
454 | { x: width, y: 0 },
|
455 | { x: 0, y: -midpoint },
|
456 | { x: 0, y: -height + midpoint },
|
457 | { x: width, y: -height }
|
458 | ];
|
459 | }
|
460 | if (directions.has("right") && directions.has("left")) {
|
461 | return [
|
462 | { x: midpoint, y: 0 },
|
463 | { x: midpoint, y: -padding },
|
464 | { x: width - midpoint, y: -padding },
|
465 | { x: width - midpoint, y: 0 },
|
466 | { x: width, y: -height / 2 },
|
467 | { x: width - midpoint, y: -height },
|
468 | { x: width - midpoint, y: -height + padding },
|
469 | { x: midpoint, y: -height + padding },
|
470 | { x: midpoint, y: -height },
|
471 | { x: 0, y: -height / 2 }
|
472 | ];
|
473 | }
|
474 | if (directions.has("up") && directions.has("down")) {
|
475 | return [
|
476 |
|
477 | { x: width / 2, y: 0 },
|
478 |
|
479 | { x: 0, y: -padding },
|
480 | { x: midpoint, y: -padding },
|
481 |
|
482 | { x: midpoint, y: -height + padding },
|
483 | { x: 0, y: -height + padding },
|
484 |
|
485 | { x: width / 2, y: -height },
|
486 | { x: width, y: -height + padding },
|
487 |
|
488 | { x: width - midpoint, y: -height + padding },
|
489 | { x: width - midpoint, y: -padding },
|
490 | { x: width, y: -padding }
|
491 | ];
|
492 | }
|
493 | if (directions.has("right") && directions.has("up")) {
|
494 | return [
|
495 | { x: 0, y: 0 },
|
496 | { x: width, y: -midpoint },
|
497 | { x: 0, y: -height }
|
498 | ];
|
499 | }
|
500 | if (directions.has("right") && directions.has("down")) {
|
501 | return [
|
502 | { x: 0, y: 0 },
|
503 | { x: width, y: 0 },
|
504 | { x: 0, y: -height }
|
505 | ];
|
506 | }
|
507 | if (directions.has("left") && directions.has("up")) {
|
508 | return [
|
509 | { x: width, y: 0 },
|
510 | { x: 0, y: -midpoint },
|
511 | { x: width, y: -height }
|
512 | ];
|
513 | }
|
514 | if (directions.has("left") && directions.has("down")) {
|
515 | return [
|
516 | { x: width, y: 0 },
|
517 | { x: 0, y: 0 },
|
518 | { x: width, y: -height }
|
519 | ];
|
520 | }
|
521 | if (directions.has("right")) {
|
522 | return [
|
523 | { x: midpoint, y: -padding },
|
524 | { x: midpoint, y: -padding },
|
525 | { x: width - midpoint, y: -padding },
|
526 | { x: width - midpoint, y: 0 },
|
527 | { x: width, y: -height / 2 },
|
528 | { x: width - midpoint, y: -height },
|
529 | { x: width - midpoint, y: -height + padding },
|
530 |
|
531 | { x: midpoint, y: -height + padding },
|
532 | { x: midpoint, y: -height + padding }
|
533 | ];
|
534 | }
|
535 | if (directions.has("left")) {
|
536 | return [
|
537 | { x: midpoint, y: 0 },
|
538 | { x: midpoint, y: -padding },
|
539 |
|
540 | { x: width - midpoint, y: -padding },
|
541 | { x: width - midpoint, y: -height + padding },
|
542 | { x: midpoint, y: -height + padding },
|
543 | { x: midpoint, y: -height },
|
544 | { x: 0, y: -height / 2 }
|
545 | ];
|
546 | }
|
547 | if (directions.has("up")) {
|
548 | return [
|
549 |
|
550 | { x: midpoint, y: -padding },
|
551 |
|
552 | { x: midpoint, y: -height + padding },
|
553 | { x: 0, y: -height + padding },
|
554 |
|
555 | { x: width / 2, y: -height },
|
556 | { x: width, y: -height + padding },
|
557 |
|
558 | { x: width - midpoint, y: -height + padding },
|
559 | { x: width - midpoint, y: -padding }
|
560 | ];
|
561 | }
|
562 | if (directions.has("down")) {
|
563 | return [
|
564 |
|
565 | { x: width / 2, y: 0 },
|
566 |
|
567 | { x: 0, y: -padding },
|
568 | { x: midpoint, y: -padding },
|
569 |
|
570 | { x: midpoint, y: -height + padding },
|
571 | { x: width - midpoint, y: -height + padding },
|
572 | { x: width - midpoint, y: -padding },
|
573 | { x: width, y: -padding }
|
574 | ];
|
575 | }
|
576 | return [{ x: 0, y: 0 }];
|
577 | };
|
578 | const formatClass = (str) => {
|
579 | if (str) {
|
580 | return " " + str;
|
581 | }
|
582 | return "";
|
583 | };
|
584 | const getClassesFromNode = (node, otherClasses) => {
|
585 | return `${otherClasses ? otherClasses : "node default"}${formatClass(node.classes)} ${formatClass(
|
586 | node.class
|
587 | )}`;
|
588 | };
|
589 | const question = async (parent, node) => {
|
590 | const { shapeSvg, bbox } = await labelHelper(
|
591 | parent,
|
592 | node,
|
593 | getClassesFromNode(node, void 0),
|
594 | true
|
595 | );
|
596 | const w = bbox.width + node.padding;
|
597 | const h = bbox.height + node.padding;
|
598 | const s = w + h;
|
599 | const points = [
|
600 | { x: s / 2, y: 0 },
|
601 | { x: s, y: -s / 2 },
|
602 | { x: s / 2, y: -s },
|
603 | { x: 0, y: -s / 2 }
|
604 | ];
|
605 | log.info("Question main (Circle)");
|
606 | const questionElem = insertPolygonShape(shapeSvg, s, s, points);
|
607 | questionElem.attr("style", node.style);
|
608 | updateNodeBounds(node, questionElem);
|
609 | node.intersect = function(point2) {
|
610 | log.warn("Intersect called");
|
611 | return intersect.polygon(node, points, point2);
|
612 | };
|
613 | return shapeSvg;
|
614 | };
|
615 | const choice = (parent, node) => {
|
616 | const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id);
|
617 | const s = 28;
|
618 | const points = [
|
619 | { x: 0, y: s / 2 },
|
620 | { x: s / 2, y: 0 },
|
621 | { x: 0, y: -s / 2 },
|
622 | { x: -s / 2, y: 0 }
|
623 | ];
|
624 | const choice2 = shapeSvg.insert("polygon", ":first-child").attr(
|
625 | "points",
|
626 | points.map(function(d) {
|
627 | return d.x + "," + d.y;
|
628 | }).join(" ")
|
629 | );
|
630 | choice2.attr("class", "state-start").attr("r", 7).attr("width", 28).attr("height", 28);
|
631 | node.width = 28;
|
632 | node.height = 28;
|
633 | node.intersect = function(point2) {
|
634 | return intersect.circle(node, 14, point2);
|
635 | };
|
636 | return shapeSvg;
|
637 | };
|
638 | const hexagon = async (parent, node) => {
|
639 | const { shapeSvg, bbox } = await labelHelper(
|
640 | parent,
|
641 | node,
|
642 | getClassesFromNode(node, void 0),
|
643 | true
|
644 | );
|
645 | const f = 4;
|
646 | const h = bbox.height + node.padding;
|
647 | const m = h / f;
|
648 | const w = bbox.width + 2 * m + node.padding;
|
649 | const points = [
|
650 | { x: m, y: 0 },
|
651 | { x: w - m, y: 0 },
|
652 | { x: w, y: -h / 2 },
|
653 | { x: w - m, y: -h },
|
654 | { x: m, y: -h },
|
655 | { x: 0, y: -h / 2 }
|
656 | ];
|
657 | const hex = insertPolygonShape(shapeSvg, w, h, points);
|
658 | hex.attr("style", node.style);
|
659 | updateNodeBounds(node, hex);
|
660 | node.intersect = function(point2) {
|
661 | return intersect.polygon(node, points, point2);
|
662 | };
|
663 | return shapeSvg;
|
664 | };
|
665 | const block_arrow = async (parent, node) => {
|
666 | const { shapeSvg, bbox } = await labelHelper(parent, node, void 0, true);
|
667 | const f = 2;
|
668 | const h = bbox.height + 2 * node.padding;
|
669 | const m = h / f;
|
670 | const w = bbox.width + 2 * m + node.padding;
|
671 | const points = getArrowPoints(node.directions, bbox, node);
|
672 | const blockArrow = insertPolygonShape(shapeSvg, w, h, points);
|
673 | blockArrow.attr("style", node.style);
|
674 | updateNodeBounds(node, blockArrow);
|
675 | node.intersect = function(point2) {
|
676 | return intersect.polygon(node, points, point2);
|
677 | };
|
678 | return shapeSvg;
|
679 | };
|
680 | const rect_left_inv_arrow = async (parent, node) => {
|
681 | const { shapeSvg, bbox } = await labelHelper(
|
682 | parent,
|
683 | node,
|
684 | getClassesFromNode(node, void 0),
|
685 | true
|
686 | );
|
687 | const w = bbox.width + node.padding;
|
688 | const h = bbox.height + node.padding;
|
689 | const points = [
|
690 | { x: -h / 2, y: 0 },
|
691 | { x: w, y: 0 },
|
692 | { x: w, y: -h },
|
693 | { x: -h / 2, y: -h },
|
694 | { x: 0, y: -h / 2 }
|
695 | ];
|
696 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
697 | el.attr("style", node.style);
|
698 | node.width = w + h;
|
699 | node.height = h;
|
700 | node.intersect = function(point2) {
|
701 | return intersect.polygon(node, points, point2);
|
702 | };
|
703 | return shapeSvg;
|
704 | };
|
705 | const lean_right = async (parent, node) => {
|
706 | const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
|
707 | const w = bbox.width + node.padding;
|
708 | const h = bbox.height + node.padding;
|
709 | const points = [
|
710 | { x: -2 * h / 6, y: 0 },
|
711 | { x: w - h / 6, y: 0 },
|
712 | { x: w + 2 * h / 6, y: -h },
|
713 | { x: h / 6, y: -h }
|
714 | ];
|
715 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
716 | el.attr("style", node.style);
|
717 | updateNodeBounds(node, el);
|
718 | node.intersect = function(point2) {
|
719 | return intersect.polygon(node, points, point2);
|
720 | };
|
721 | return shapeSvg;
|
722 | };
|
723 | const lean_left = async (parent, node) => {
|
724 | const { shapeSvg, bbox } = await labelHelper(
|
725 | parent,
|
726 | node,
|
727 | getClassesFromNode(node, void 0),
|
728 | true
|
729 | );
|
730 | const w = bbox.width + node.padding;
|
731 | const h = bbox.height + node.padding;
|
732 | const points = [
|
733 | { x: 2 * h / 6, y: 0 },
|
734 | { x: w + h / 6, y: 0 },
|
735 | { x: w - 2 * h / 6, y: -h },
|
736 | { x: -h / 6, y: -h }
|
737 | ];
|
738 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
739 | el.attr("style", node.style);
|
740 | updateNodeBounds(node, el);
|
741 | node.intersect = function(point2) {
|
742 | return intersect.polygon(node, points, point2);
|
743 | };
|
744 | return shapeSvg;
|
745 | };
|
746 | const trapezoid = async (parent, node) => {
|
747 | const { shapeSvg, bbox } = await labelHelper(
|
748 | parent,
|
749 | node,
|
750 | getClassesFromNode(node, void 0),
|
751 | true
|
752 | );
|
753 | const w = bbox.width + node.padding;
|
754 | const h = bbox.height + node.padding;
|
755 | const points = [
|
756 | { x: -2 * h / 6, y: 0 },
|
757 | { x: w + 2 * h / 6, y: 0 },
|
758 | { x: w - h / 6, y: -h },
|
759 | { x: h / 6, y: -h }
|
760 | ];
|
761 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
762 | el.attr("style", node.style);
|
763 | updateNodeBounds(node, el);
|
764 | node.intersect = function(point2) {
|
765 | return intersect.polygon(node, points, point2);
|
766 | };
|
767 | return shapeSvg;
|
768 | };
|
769 | const inv_trapezoid = async (parent, node) => {
|
770 | const { shapeSvg, bbox } = await labelHelper(
|
771 | parent,
|
772 | node,
|
773 | getClassesFromNode(node, void 0),
|
774 | true
|
775 | );
|
776 | const w = bbox.width + node.padding;
|
777 | const h = bbox.height + node.padding;
|
778 | const points = [
|
779 | { x: h / 6, y: 0 },
|
780 | { x: w - h / 6, y: 0 },
|
781 | { x: w + 2 * h / 6, y: -h },
|
782 | { x: -2 * h / 6, y: -h }
|
783 | ];
|
784 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
785 | el.attr("style", node.style);
|
786 | updateNodeBounds(node, el);
|
787 | node.intersect = function(point2) {
|
788 | return intersect.polygon(node, points, point2);
|
789 | };
|
790 | return shapeSvg;
|
791 | };
|
792 | const rect_right_inv_arrow = async (parent, node) => {
|
793 | const { shapeSvg, bbox } = await labelHelper(
|
794 | parent,
|
795 | node,
|
796 | getClassesFromNode(node, void 0),
|
797 | true
|
798 | );
|
799 | const w = bbox.width + node.padding;
|
800 | const h = bbox.height + node.padding;
|
801 | const points = [
|
802 | { x: 0, y: 0 },
|
803 | { x: w + h / 2, y: 0 },
|
804 | { x: w, y: -h / 2 },
|
805 | { x: w + h / 2, y: -h },
|
806 | { x: 0, y: -h }
|
807 | ];
|
808 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
809 | el.attr("style", node.style);
|
810 | updateNodeBounds(node, el);
|
811 | node.intersect = function(point2) {
|
812 | return intersect.polygon(node, points, point2);
|
813 | };
|
814 | return shapeSvg;
|
815 | };
|
816 | const cylinder = async (parent, node) => {
|
817 | const { shapeSvg, bbox } = await labelHelper(
|
818 | parent,
|
819 | node,
|
820 | getClassesFromNode(node, void 0),
|
821 | true
|
822 | );
|
823 | const w = bbox.width + node.padding;
|
824 | const rx = w / 2;
|
825 | const ry = rx / (2.5 + w / 50);
|
826 | const h = bbox.height + ry + node.padding;
|
827 | 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;
|
828 | const el = shapeSvg.attr("label-offset-y", ry).insert("path", ":first-child").attr("style", node.style).attr("d", shape).attr("transform", "translate(" + -w / 2 + "," + -(h / 2 + ry) + ")");
|
829 | updateNodeBounds(node, el);
|
830 | node.intersect = function(point2) {
|
831 | const pos = intersect.rect(node, point2);
|
832 | const x = pos.x - node.x;
|
833 | 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)) {
|
834 | let y = ry * ry * (1 - x * x / (rx * rx));
|
835 | if (y != 0) {
|
836 | y = Math.sqrt(y);
|
837 | }
|
838 | y = ry - y;
|
839 | if (point2.y - node.y > 0) {
|
840 | y = -y;
|
841 | }
|
842 | pos.y += y;
|
843 | }
|
844 | return pos;
|
845 | };
|
846 | return shapeSvg;
|
847 | };
|
848 | const rect = async (parent, node) => {
|
849 | const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
850 | parent,
|
851 | node,
|
852 | "node " + node.classes + " " + node.class,
|
853 | true
|
854 | );
|
855 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
856 | const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
|
857 | const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
|
858 | const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
|
859 | const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
|
860 | rect2.attr("class", "basic label-container").attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("x", x).attr("y", y).attr("width", totalWidth).attr("height", totalHeight);
|
861 | if (node.props) {
|
862 | const propKeys = new Set(Object.keys(node.props));
|
863 | if (node.props.borders) {
|
864 | applyNodePropertyBorders(rect2, node.props.borders, totalWidth, totalHeight);
|
865 | propKeys.delete("borders");
|
866 | }
|
867 | propKeys.forEach((propKey) => {
|
868 | log.warn(`Unknown node property ${propKey}`);
|
869 | });
|
870 | }
|
871 | updateNodeBounds(node, rect2);
|
872 | node.intersect = function(point2) {
|
873 | return intersect.rect(node, point2);
|
874 | };
|
875 | return shapeSvg;
|
876 | };
|
877 | const composite = async (parent, node) => {
|
878 | const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
879 | parent,
|
880 | node,
|
881 | "node " + node.classes,
|
882 | true
|
883 | );
|
884 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
885 | const totalWidth = node.positioned ? node.width : bbox.width + node.padding;
|
886 | const totalHeight = node.positioned ? node.height : bbox.height + node.padding;
|
887 | const x = node.positioned ? -totalWidth / 2 : -bbox.width / 2 - halfPadding;
|
888 | const y = node.positioned ? -totalHeight / 2 : -bbox.height / 2 - halfPadding;
|
889 | rect2.attr("class", "basic cluster composite label-container").attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("x", x).attr("y", y).attr("width", totalWidth).attr("height", totalHeight);
|
890 | if (node.props) {
|
891 | const propKeys = new Set(Object.keys(node.props));
|
892 | if (node.props.borders) {
|
893 | applyNodePropertyBorders(rect2, node.props.borders, totalWidth, totalHeight);
|
894 | propKeys.delete("borders");
|
895 | }
|
896 | propKeys.forEach((propKey) => {
|
897 | log.warn(`Unknown node property ${propKey}`);
|
898 | });
|
899 | }
|
900 | updateNodeBounds(node, rect2);
|
901 | node.intersect = function(point2) {
|
902 | return intersect.rect(node, point2);
|
903 | };
|
904 | return shapeSvg;
|
905 | };
|
906 | const labelRect = async (parent, node) => {
|
907 | const { shapeSvg } = await labelHelper(parent, node, "label", true);
|
908 | log.trace("Classes = ", node.class);
|
909 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
910 | const totalWidth = 0;
|
911 | const totalHeight = 0;
|
912 | rect2.attr("width", totalWidth).attr("height", totalHeight);
|
913 | shapeSvg.attr("class", "label edgeLabel");
|
914 | if (node.props) {
|
915 | const propKeys = new Set(Object.keys(node.props));
|
916 | if (node.props.borders) {
|
917 | applyNodePropertyBorders(rect2, node.props.borders, totalWidth, totalHeight);
|
918 | propKeys.delete("borders");
|
919 | }
|
920 | propKeys.forEach((propKey) => {
|
921 | log.warn(`Unknown node property ${propKey}`);
|
922 | });
|
923 | }
|
924 | updateNodeBounds(node, rect2);
|
925 | node.intersect = function(point2) {
|
926 | return intersect.rect(node, point2);
|
927 | };
|
928 | return shapeSvg;
|
929 | };
|
930 | function applyNodePropertyBorders(rect2, borders, totalWidth, totalHeight) {
|
931 | const strokeDashArray = [];
|
932 | const addBorder = (length) => {
|
933 | strokeDashArray.push(length, 0);
|
934 | };
|
935 | const skipBorder = (length) => {
|
936 | strokeDashArray.push(0, length);
|
937 | };
|
938 | if (borders.includes("t")) {
|
939 | log.debug("add top border");
|
940 | addBorder(totalWidth);
|
941 | } else {
|
942 | skipBorder(totalWidth);
|
943 | }
|
944 | if (borders.includes("r")) {
|
945 | log.debug("add right border");
|
946 | addBorder(totalHeight);
|
947 | } else {
|
948 | skipBorder(totalHeight);
|
949 | }
|
950 | if (borders.includes("b")) {
|
951 | log.debug("add bottom border");
|
952 | addBorder(totalWidth);
|
953 | } else {
|
954 | skipBorder(totalWidth);
|
955 | }
|
956 | if (borders.includes("l")) {
|
957 | log.debug("add left border");
|
958 | addBorder(totalHeight);
|
959 | } else {
|
960 | skipBorder(totalHeight);
|
961 | }
|
962 | rect2.attr("stroke-dasharray", strokeDashArray.join(" "));
|
963 | }
|
964 | const rectWithTitle = (parent, node) => {
|
965 | let classes;
|
966 | if (!node.classes) {
|
967 | classes = "node default";
|
968 | } else {
|
969 | classes = "node " + node.classes;
|
970 | }
|
971 | const shapeSvg = parent.insert("g").attr("class", classes).attr("id", node.domId || node.id);
|
972 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
973 | const innerLine = shapeSvg.insert("line");
|
974 | const label = shapeSvg.insert("g").attr("class", "label");
|
975 | const text2 = node.labelText.flat ? node.labelText.flat() : node.labelText;
|
976 | let title = "";
|
977 | if (typeof text2 === "object") {
|
978 | title = text2[0];
|
979 | } else {
|
980 | title = text2;
|
981 | }
|
982 | log.info("Label text abc79", title, text2, typeof text2 === "object");
|
983 | const text = label.node().appendChild(createLabel$1(title, node.labelStyle, true, true));
|
984 | let bbox = { width: 0, height: 0 };
|
985 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
986 | const div = text.children[0];
|
987 | const dv = d3select(text);
|
988 | bbox = div.getBoundingClientRect();
|
989 | dv.attr("width", bbox.width);
|
990 | dv.attr("height", bbox.height);
|
991 | }
|
992 | log.info("Text 2", text2);
|
993 | const textRows = text2.slice(1, text2.length);
|
994 | let titleBox = text.getBBox();
|
995 | const descr = label.node().appendChild(
|
996 | createLabel$1(textRows.join ? textRows.join("<br/>") : textRows, node.labelStyle, true, true)
|
997 | );
|
998 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
999 | const div = descr.children[0];
|
1000 | const dv = d3select(descr);
|
1001 | bbox = div.getBoundingClientRect();
|
1002 | dv.attr("width", bbox.width);
|
1003 | dv.attr("height", bbox.height);
|
1004 | }
|
1005 | const halfPadding = node.padding / 2;
|
1006 | d3select(descr).attr(
|
1007 | "transform",
|
1008 | "translate( " +
|
1009 | (bbox.width > titleBox.width ? 0 : (titleBox.width - bbox.width) / 2) + ", " + (titleBox.height + halfPadding + 5) + ")"
|
1010 | );
|
1011 | d3select(text).attr(
|
1012 | "transform",
|
1013 | "translate( " +
|
1014 | (bbox.width < titleBox.width ? 0 : -(titleBox.width - bbox.width) / 2) + ", 0)"
|
1015 | );
|
1016 | bbox = label.node().getBBox();
|
1017 | label.attr(
|
1018 | "transform",
|
1019 | "translate(" + -bbox.width / 2 + ", " + (-bbox.height / 2 - halfPadding + 3) + ")"
|
1020 | );
|
1021 | rect2.attr("class", "outer title-state").attr("x", -bbox.width / 2 - halfPadding).attr("y", -bbox.height / 2 - halfPadding).attr("width", bbox.width + node.padding).attr("height", bbox.height + node.padding);
|
1022 | innerLine.attr("class", "divider").attr("x1", -bbox.width / 2 - halfPadding).attr("x2", bbox.width / 2 + halfPadding).attr("y1", -bbox.height / 2 - halfPadding + titleBox.height + halfPadding).attr("y2", -bbox.height / 2 - halfPadding + titleBox.height + halfPadding);
|
1023 | updateNodeBounds(node, rect2);
|
1024 | node.intersect = function(point2) {
|
1025 | return intersect.rect(node, point2);
|
1026 | };
|
1027 | return shapeSvg;
|
1028 | };
|
1029 | const stadium = async (parent, node) => {
|
1030 | const { shapeSvg, bbox } = await labelHelper(
|
1031 | parent,
|
1032 | node,
|
1033 | getClassesFromNode(node, void 0),
|
1034 | true
|
1035 | );
|
1036 | const h = bbox.height + node.padding;
|
1037 | const w = bbox.width + h / 4 + node.padding;
|
1038 | const rect2 = shapeSvg.insert("rect", ":first-child").attr("style", node.style).attr("rx", h / 2).attr("ry", h / 2).attr("x", -w / 2).attr("y", -h / 2).attr("width", w).attr("height", h);
|
1039 | updateNodeBounds(node, rect2);
|
1040 | node.intersect = function(point2) {
|
1041 | return intersect.rect(node, point2);
|
1042 | };
|
1043 | return shapeSvg;
|
1044 | };
|
1045 | const circle = async (parent, node) => {
|
1046 | const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
1047 | parent,
|
1048 | node,
|
1049 | getClassesFromNode(node, void 0),
|
1050 | true
|
1051 | );
|
1052 | const circle2 = shapeSvg.insert("circle", ":first-child");
|
1053 | circle2.attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("r", bbox.width / 2 + halfPadding).attr("width", bbox.width + node.padding).attr("height", bbox.height + node.padding);
|
1054 | log.info("Circle main");
|
1055 | updateNodeBounds(node, circle2);
|
1056 | node.intersect = function(point2) {
|
1057 | log.info("Circle intersect", node, bbox.width / 2 + halfPadding, point2);
|
1058 | return intersect.circle(node, bbox.width / 2 + halfPadding, point2);
|
1059 | };
|
1060 | return shapeSvg;
|
1061 | };
|
1062 | const doublecircle = async (parent, node) => {
|
1063 | const { shapeSvg, bbox, halfPadding } = await labelHelper(
|
1064 | parent,
|
1065 | node,
|
1066 | getClassesFromNode(node, void 0),
|
1067 | true
|
1068 | );
|
1069 | const gap = 5;
|
1070 | const circleGroup = shapeSvg.insert("g", ":first-child");
|
1071 | const outerCircle = circleGroup.insert("circle");
|
1072 | const innerCircle = circleGroup.insert("circle");
|
1073 | circleGroup.attr("class", node.class);
|
1074 | outerCircle.attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("r", bbox.width / 2 + halfPadding + gap).attr("width", bbox.width + node.padding + gap * 2).attr("height", bbox.height + node.padding + gap * 2);
|
1075 | innerCircle.attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("r", bbox.width / 2 + halfPadding).attr("width", bbox.width + node.padding).attr("height", bbox.height + node.padding);
|
1076 | log.info("DoubleCircle main");
|
1077 | updateNodeBounds(node, outerCircle);
|
1078 | node.intersect = function(point2) {
|
1079 | log.info("DoubleCircle intersect", node, bbox.width / 2 + halfPadding + gap, point2);
|
1080 | return intersect.circle(node, bbox.width / 2 + halfPadding + gap, point2);
|
1081 | };
|
1082 | return shapeSvg;
|
1083 | };
|
1084 | const subroutine = async (parent, node) => {
|
1085 | const { shapeSvg, bbox } = await labelHelper(
|
1086 | parent,
|
1087 | node,
|
1088 | getClassesFromNode(node, void 0),
|
1089 | true
|
1090 | );
|
1091 | const w = bbox.width + node.padding;
|
1092 | const h = bbox.height + node.padding;
|
1093 | const points = [
|
1094 | { x: 0, y: 0 },
|
1095 | { x: w, y: 0 },
|
1096 | { x: w, y: -h },
|
1097 | { x: 0, y: -h },
|
1098 | { x: 0, y: 0 },
|
1099 | { x: -8, y: 0 },
|
1100 | { x: w + 8, y: 0 },
|
1101 | { x: w + 8, y: -h },
|
1102 | { x: -8, y: -h },
|
1103 | { x: -8, y: 0 }
|
1104 | ];
|
1105 | const el = insertPolygonShape(shapeSvg, w, h, points);
|
1106 | el.attr("style", node.style);
|
1107 | updateNodeBounds(node, el);
|
1108 | node.intersect = function(point2) {
|
1109 | return intersect.polygon(node, points, point2);
|
1110 | };
|
1111 | return shapeSvg;
|
1112 | };
|
1113 | const start = (parent, node) => {
|
1114 | const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id);
|
1115 | const circle2 = shapeSvg.insert("circle", ":first-child");
|
1116 | circle2.attr("class", "state-start").attr("r", 7).attr("width", 14).attr("height", 14);
|
1117 | updateNodeBounds(node, circle2);
|
1118 | node.intersect = function(point2) {
|
1119 | return intersect.circle(node, 7, point2);
|
1120 | };
|
1121 | return shapeSvg;
|
1122 | };
|
1123 | const forkJoin = (parent, node, dir) => {
|
1124 | const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id);
|
1125 | let width = 70;
|
1126 | let height = 10;
|
1127 | if (dir === "LR") {
|
1128 | width = 10;
|
1129 | height = 70;
|
1130 | }
|
1131 | const shape = shapeSvg.append("rect").attr("x", -1 * width / 2).attr("y", -1 * height / 2).attr("width", width).attr("height", height).attr("class", "fork-join");
|
1132 | updateNodeBounds(node, shape);
|
1133 | node.height = node.height + node.padding / 2;
|
1134 | node.width = node.width + node.padding / 2;
|
1135 | node.intersect = function(point2) {
|
1136 | return intersect.rect(node, point2);
|
1137 | };
|
1138 | return shapeSvg;
|
1139 | };
|
1140 | const end = (parent, node) => {
|
1141 | const shapeSvg = parent.insert("g").attr("class", "node default").attr("id", node.domId || node.id);
|
1142 | const innerCircle = shapeSvg.insert("circle", ":first-child");
|
1143 | const circle2 = shapeSvg.insert("circle", ":first-child");
|
1144 | circle2.attr("class", "state-start").attr("r", 7).attr("width", 14).attr("height", 14);
|
1145 | innerCircle.attr("class", "state-end").attr("r", 5).attr("width", 10).attr("height", 10);
|
1146 | updateNodeBounds(node, circle2);
|
1147 | node.intersect = function(point2) {
|
1148 | return intersect.circle(node, 7, point2);
|
1149 | };
|
1150 | return shapeSvg;
|
1151 | };
|
1152 | const class_box = (parent, node) => {
|
1153 | const halfPadding = node.padding / 2;
|
1154 | const rowPadding = 4;
|
1155 | const lineHeight = 8;
|
1156 | let classes;
|
1157 | if (!node.classes) {
|
1158 | classes = "node default";
|
1159 | } else {
|
1160 | classes = "node " + node.classes;
|
1161 | }
|
1162 | const shapeSvg = parent.insert("g").attr("class", classes).attr("id", node.domId || node.id);
|
1163 | const rect2 = shapeSvg.insert("rect", ":first-child");
|
1164 | const topLine = shapeSvg.insert("line");
|
1165 | const bottomLine = shapeSvg.insert("line");
|
1166 | let maxWidth = 0;
|
1167 | let maxHeight = rowPadding;
|
1168 | const labelContainer = shapeSvg.insert("g").attr("class", "label");
|
1169 | let verticalPos = 0;
|
1170 | const hasInterface = node.classData.annotations && node.classData.annotations[0];
|
1171 | const interfaceLabelText = node.classData.annotations[0] ? "«" + node.classData.annotations[0] + "»" : "";
|
1172 | const interfaceLabel = labelContainer.node().appendChild(createLabel$1(interfaceLabelText, node.labelStyle, true, true));
|
1173 | let interfaceBBox = interfaceLabel.getBBox();
|
1174 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
1175 | const div = interfaceLabel.children[0];
|
1176 | const dv = d3select(interfaceLabel);
|
1177 | interfaceBBox = div.getBoundingClientRect();
|
1178 | dv.attr("width", interfaceBBox.width);
|
1179 | dv.attr("height", interfaceBBox.height);
|
1180 | }
|
1181 | if (node.classData.annotations[0]) {
|
1182 | maxHeight += interfaceBBox.height + rowPadding;
|
1183 | maxWidth += interfaceBBox.width;
|
1184 | }
|
1185 | let classTitleString = node.classData.label;
|
1186 | if (node.classData.type !== void 0 && node.classData.type !== "") {
|
1187 | if (getConfig().flowchart.htmlLabels) {
|
1188 | classTitleString += "<" + node.classData.type + ">";
|
1189 | } else {
|
1190 | classTitleString += "<" + node.classData.type + ">";
|
1191 | }
|
1192 | }
|
1193 | const classTitleLabel = labelContainer.node().appendChild(createLabel$1(classTitleString, node.labelStyle, true, true));
|
1194 | d3select(classTitleLabel).attr("class", "classTitle");
|
1195 | let classTitleBBox = classTitleLabel.getBBox();
|
1196 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
1197 | const div = classTitleLabel.children[0];
|
1198 | const dv = d3select(classTitleLabel);
|
1199 | classTitleBBox = div.getBoundingClientRect();
|
1200 | dv.attr("width", classTitleBBox.width);
|
1201 | dv.attr("height", classTitleBBox.height);
|
1202 | }
|
1203 | maxHeight += classTitleBBox.height + rowPadding;
|
1204 | if (classTitleBBox.width > maxWidth) {
|
1205 | maxWidth = classTitleBBox.width;
|
1206 | }
|
1207 | const classAttributes = [];
|
1208 | node.classData.members.forEach((member) => {
|
1209 | const parsedInfo = member.getDisplayDetails();
|
1210 | let parsedText = parsedInfo.displayText;
|
1211 | if (getConfig().flowchart.htmlLabels) {
|
1212 | parsedText = parsedText.replace(/</g, "<").replace(/>/g, ">");
|
1213 | }
|
1214 | const lbl = labelContainer.node().appendChild(
|
1215 | createLabel$1(
|
1216 | parsedText,
|
1217 | parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,
|
1218 | true,
|
1219 | true
|
1220 | )
|
1221 | );
|
1222 | let bbox = lbl.getBBox();
|
1223 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
1224 | const div = lbl.children[0];
|
1225 | const dv = d3select(lbl);
|
1226 | bbox = div.getBoundingClientRect();
|
1227 | dv.attr("width", bbox.width);
|
1228 | dv.attr("height", bbox.height);
|
1229 | }
|
1230 | if (bbox.width > maxWidth) {
|
1231 | maxWidth = bbox.width;
|
1232 | }
|
1233 | maxHeight += bbox.height + rowPadding;
|
1234 | classAttributes.push(lbl);
|
1235 | });
|
1236 | maxHeight += lineHeight;
|
1237 | const classMethods = [];
|
1238 | node.classData.methods.forEach((member) => {
|
1239 | const parsedInfo = member.getDisplayDetails();
|
1240 | let displayText = parsedInfo.displayText;
|
1241 | if (getConfig().flowchart.htmlLabels) {
|
1242 | displayText = displayText.replace(/</g, "<").replace(/>/g, ">");
|
1243 | }
|
1244 | const lbl = labelContainer.node().appendChild(
|
1245 | createLabel$1(
|
1246 | displayText,
|
1247 | parsedInfo.cssStyle ? parsedInfo.cssStyle : node.labelStyle,
|
1248 | true,
|
1249 | true
|
1250 | )
|
1251 | );
|
1252 | let bbox = lbl.getBBox();
|
1253 | if (evaluate(getConfig().flowchart.htmlLabels)) {
|
1254 | const div = lbl.children[0];
|
1255 | const dv = d3select(lbl);
|
1256 | bbox = div.getBoundingClientRect();
|
1257 | dv.attr("width", bbox.width);
|
1258 | dv.attr("height", bbox.height);
|
1259 | }
|
1260 | if (bbox.width > maxWidth) {
|
1261 | maxWidth = bbox.width;
|
1262 | }
|
1263 | maxHeight += bbox.height + rowPadding;
|
1264 | classMethods.push(lbl);
|
1265 | });
|
1266 | maxHeight += lineHeight;
|
1267 | if (hasInterface) {
|
1268 | let diffX2 = (maxWidth - interfaceBBox.width) / 2;
|
1269 | d3select(interfaceLabel).attr(
|
1270 | "transform",
|
1271 | "translate( " + (-1 * maxWidth / 2 + diffX2) + ", " + -1 * maxHeight / 2 + ")"
|
1272 | );
|
1273 | verticalPos = interfaceBBox.height + rowPadding;
|
1274 | }
|
1275 | let diffX = (maxWidth - classTitleBBox.width) / 2;
|
1276 | d3select(classTitleLabel).attr(
|
1277 | "transform",
|
1278 | "translate( " + (-1 * maxWidth / 2 + diffX) + ", " + (-1 * maxHeight / 2 + verticalPos) + ")"
|
1279 | );
|
1280 | verticalPos += classTitleBBox.height + rowPadding;
|
1281 | topLine.attr("class", "divider").attr("x1", -maxWidth / 2 - halfPadding).attr("x2", maxWidth / 2 + halfPadding).attr("y1", -maxHeight / 2 - halfPadding + lineHeight + verticalPos).attr("y2", -maxHeight / 2 - halfPadding + lineHeight + verticalPos);
|
1282 | verticalPos += lineHeight;
|
1283 | classAttributes.forEach((lbl) => {
|
1284 | d3select(lbl).attr(
|
1285 | "transform",
|
1286 | "translate( " + -maxWidth / 2 + ", " + (-1 * maxHeight / 2 + verticalPos + lineHeight / 2) + ")"
|
1287 | );
|
1288 | const memberBBox = lbl == null ? void 0 : lbl.getBBox();
|
1289 | verticalPos += ((memberBBox == null ? void 0 : memberBBox.height) ?? 0) + rowPadding;
|
1290 | });
|
1291 | verticalPos += lineHeight;
|
1292 | bottomLine.attr("class", "divider").attr("x1", -maxWidth / 2 - halfPadding).attr("x2", maxWidth / 2 + halfPadding).attr("y1", -maxHeight / 2 - halfPadding + lineHeight + verticalPos).attr("y2", -maxHeight / 2 - halfPadding + lineHeight + verticalPos);
|
1293 | verticalPos += lineHeight;
|
1294 | classMethods.forEach((lbl) => {
|
1295 | d3select(lbl).attr(
|
1296 | "transform",
|
1297 | "translate( " + -maxWidth / 2 + ", " + (-1 * maxHeight / 2 + verticalPos) + ")"
|
1298 | );
|
1299 | const memberBBox = lbl == null ? void 0 : lbl.getBBox();
|
1300 | verticalPos += ((memberBBox == null ? void 0 : memberBBox.height) ?? 0) + rowPadding;
|
1301 | });
|
1302 | rect2.attr("style", node.style).attr("class", "outer title-state").attr("x", -maxWidth / 2 - halfPadding).attr("y", -(maxHeight / 2) - halfPadding).attr("width", maxWidth + node.padding).attr("height", maxHeight + node.padding);
|
1303 | updateNodeBounds(node, rect2);
|
1304 | node.intersect = function(point2) {
|
1305 | return intersect.rect(node, point2);
|
1306 | };
|
1307 | return shapeSvg;
|
1308 | };
|
1309 | const shapes = {
|
1310 | rhombus: question,
|
1311 | composite,
|
1312 | question,
|
1313 | rect,
|
1314 | labelRect,
|
1315 | rectWithTitle,
|
1316 | choice,
|
1317 | circle,
|
1318 | doublecircle,
|
1319 | stadium,
|
1320 | hexagon,
|
1321 | block_arrow,
|
1322 | rect_left_inv_arrow,
|
1323 | lean_right,
|
1324 | lean_left,
|
1325 | trapezoid,
|
1326 | inv_trapezoid,
|
1327 | rect_right_inv_arrow,
|
1328 | cylinder,
|
1329 | start,
|
1330 | end,
|
1331 | note: note$1,
|
1332 | subroutine,
|
1333 | fork: forkJoin,
|
1334 | join: forkJoin,
|
1335 | class_box
|
1336 | };
|
1337 | let nodeElems = {};
|
1338 | const insertNode = async (elem, node, dir) => {
|
1339 | let newEl;
|
1340 | let el;
|
1341 | if (node.link) {
|
1342 | let target;
|
1343 | if (getConfig().securityLevel === "sandbox") {
|
1344 | target = "_top";
|
1345 | } else if (node.linkTarget) {
|
1346 | target = node.linkTarget || "_blank";
|
1347 | }
|
1348 | newEl = elem.insert("svg:a").attr("xlink:href", node.link).attr("target", target);
|
1349 | el = await shapes[node.shape](newEl, node, dir);
|
1350 | } else {
|
1351 | el = await shapes[node.shape](elem, node, dir);
|
1352 | newEl = el;
|
1353 | }
|
1354 | if (node.tooltip) {
|
1355 | el.attr("title", node.tooltip);
|
1356 | }
|
1357 | if (node.class) {
|
1358 | el.attr("class", "node default " + node.class);
|
1359 | }
|
1360 | newEl.attr("data-node", "true");
|
1361 | newEl.attr("data-id", node.id);
|
1362 | nodeElems[node.id] = newEl;
|
1363 | if (node.haveCallback) {
|
1364 | nodeElems[node.id].attr("class", nodeElems[node.id].attr("class") + " clickable");
|
1365 | }
|
1366 | return newEl;
|
1367 | };
|
1368 | const setNodeElem = (elem, node) => {
|
1369 | nodeElems[node.id] = elem;
|
1370 | };
|
1371 | const clear$1 = () => {
|
1372 | nodeElems = {};
|
1373 | };
|
1374 | const positionNode = (node) => {
|
1375 | const el = nodeElems[node.id];
|
1376 | log.trace(
|
1377 | "Transforming node",
|
1378 | node.diff,
|
1379 | node,
|
1380 | "translate(" + (node.x - node.width / 2 - 5) + ", " + node.width / 2 + ")"
|
1381 | );
|
1382 | const padding = 8;
|
1383 | const diff = node.diff || 0;
|
1384 | if (node.clusterNode) {
|
1385 | el.attr(
|
1386 | "transform",
|
1387 | "translate(" + (node.x + diff - node.width / 2) + ", " + (node.y - node.height / 2 - padding) + ")"
|
1388 | );
|
1389 | } else {
|
1390 | el.attr("transform", "translate(" + node.x + ", " + node.y + ")");
|
1391 | }
|
1392 | return diff;
|
1393 | };
|
1394 | const getSubGraphTitleMargins = ({
|
1395 | flowchart
|
1396 | }) => {
|
1397 | var _a, _b;
|
1398 | const subGraphTitleTopMargin = ((_a = flowchart == null ? void 0 : flowchart.subGraphTitleMargin) == null ? void 0 : _a.top) ?? 0;
|
1399 | const subGraphTitleBottomMargin = ((_b = flowchart == null ? void 0 : flowchart.subGraphTitleMargin) == null ? void 0 : _b.bottom) ?? 0;
|
1400 | const subGraphTitleTotalMargin = subGraphTitleTopMargin + subGraphTitleBottomMargin;
|
1401 | return {
|
1402 | subGraphTitleTopMargin,
|
1403 | subGraphTitleBottomMargin,
|
1404 | subGraphTitleTotalMargin
|
1405 | };
|
1406 | };
|
1407 | const markerOffsets = {
|
1408 | aggregation: 18,
|
1409 | extension: 18,
|
1410 | composition: 18,
|
1411 | dependency: 6,
|
1412 | lollipop: 13.5,
|
1413 | arrow_point: 5.3
|
1414 | };
|
1415 | function calculateDeltaAndAngle(point1, point2) {
|
1416 | if (point1 === void 0 || point2 === void 0) {
|
1417 | return { angle: 0, deltaX: 0, deltaY: 0 };
|
1418 | }
|
1419 | point1 = pointTransformer(point1);
|
1420 | point2 = pointTransformer(point2);
|
1421 | const [x1, y1] = [point1.x, point1.y];
|
1422 | const [x2, y2] = [point2.x, point2.y];
|
1423 | const deltaX = x2 - x1;
|
1424 | const deltaY = y2 - y1;
|
1425 | return { angle: Math.atan(deltaY / deltaX), deltaX, deltaY };
|
1426 | }
|
1427 | const pointTransformer = (data) => {
|
1428 | if (Array.isArray(data)) {
|
1429 | return { x: data[0], y: data[1] };
|
1430 | }
|
1431 | return data;
|
1432 | };
|
1433 | const getLineFunctionsWithOffset = (edge) => {
|
1434 | return {
|
1435 | x: function(d, i, data) {
|
1436 | let offset = 0;
|
1437 | if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
|
1438 | const { angle, deltaX } = calculateDeltaAndAngle(data[0], data[1]);
|
1439 | offset = markerOffsets[edge.arrowTypeStart] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1);
|
1440 | } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
|
1441 | const { angle, deltaX } = calculateDeltaAndAngle(
|
1442 | data[data.length - 1],
|
1443 | data[data.length - 2]
|
1444 | );
|
1445 | offset = markerOffsets[edge.arrowTypeEnd] * Math.cos(angle) * (deltaX >= 0 ? 1 : -1);
|
1446 | }
|
1447 | return pointTransformer(d).x + offset;
|
1448 | },
|
1449 | y: function(d, i, data) {
|
1450 | let offset = 0;
|
1451 | if (i === 0 && Object.hasOwn(markerOffsets, edge.arrowTypeStart)) {
|
1452 | const { angle, deltaY } = calculateDeltaAndAngle(data[0], data[1]);
|
1453 | offset = markerOffsets[edge.arrowTypeStart] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
|
1454 | } else if (i === data.length - 1 && Object.hasOwn(markerOffsets, edge.arrowTypeEnd)) {
|
1455 | const { angle, deltaY } = calculateDeltaAndAngle(
|
1456 | data[data.length - 1],
|
1457 | data[data.length - 2]
|
1458 | );
|
1459 | offset = markerOffsets[edge.arrowTypeEnd] * Math.abs(Math.sin(angle)) * (deltaY >= 0 ? 1 : -1);
|
1460 | }
|
1461 | return pointTransformer(d).y + offset;
|
1462 | }
|
1463 | };
|
1464 | };
|
1465 | const addEdgeMarkers = (svgPath, edge, url, id, diagramType) => {
|
1466 | if (edge.arrowTypeStart) {
|
1467 | addEdgeMarker(svgPath, "start", edge.arrowTypeStart, url, id, diagramType);
|
1468 | }
|
1469 | if (edge.arrowTypeEnd) {
|
1470 | addEdgeMarker(svgPath, "end", edge.arrowTypeEnd, url, id, diagramType);
|
1471 | }
|
1472 | };
|
1473 | const arrowTypesMap = {
|
1474 | arrow_cross: "cross",
|
1475 | arrow_point: "point",
|
1476 | arrow_barb: "barb",
|
1477 | arrow_circle: "circle",
|
1478 | aggregation: "aggregation",
|
1479 | extension: "extension",
|
1480 | composition: "composition",
|
1481 | dependency: "dependency",
|
1482 | lollipop: "lollipop"
|
1483 | };
|
1484 | const addEdgeMarker = (svgPath, position, arrowType, url, id, diagramType) => {
|
1485 | const endMarkerType = arrowTypesMap[arrowType];
|
1486 | if (!endMarkerType) {
|
1487 | log.warn(`Unknown arrow type: ${arrowType}`);
|
1488 | return;
|
1489 | }
|
1490 | const suffix = position === "start" ? "Start" : "End";
|
1491 | svgPath.attr(`marker-${position}`, `url(${url}#${id}_${diagramType}-${endMarkerType}${suffix})`);
|
1492 | };
|
1493 | let edgeLabels = {};
|
1494 | let terminalLabels = {};
|
1495 | const clear = () => {
|
1496 | edgeLabels = {};
|
1497 | terminalLabels = {};
|
1498 | };
|
1499 | const insertEdgeLabel = (elem, edge) => {
|
1500 | const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
|
1501 | const labelElement = edge.labelType === "markdown" ? createText(elem, edge.label, {
|
1502 | style: edge.labelStyle,
|
1503 | useHtmlLabels,
|
1504 | addSvgBackground: true
|
1505 | }) : createLabel$1(edge.label, edge.labelStyle);
|
1506 | const edgeLabel = elem.insert("g").attr("class", "edgeLabel");
|
1507 | const label = edgeLabel.insert("g").attr("class", "label");
|
1508 | label.node().appendChild(labelElement);
|
1509 | let bbox = labelElement.getBBox();
|
1510 | if (useHtmlLabels) {
|
1511 | const div = labelElement.children[0];
|
1512 | const dv = d3select(labelElement);
|
1513 | bbox = div.getBoundingClientRect();
|
1514 | dv.attr("width", bbox.width);
|
1515 | dv.attr("height", bbox.height);
|
1516 | }
|
1517 | label.attr("transform", "translate(" + -bbox.width / 2 + ", " + -bbox.height / 2 + ")");
|
1518 | edgeLabels[edge.id] = edgeLabel;
|
1519 | edge.width = bbox.width;
|
1520 | edge.height = bbox.height;
|
1521 | let fo;
|
1522 | if (edge.startLabelLeft) {
|
1523 | const startLabelElement = createLabel$1(edge.startLabelLeft, edge.labelStyle);
|
1524 | const startEdgeLabelLeft = elem.insert("g").attr("class", "edgeTerminals");
|
1525 | const inner = startEdgeLabelLeft.insert("g").attr("class", "inner");
|
1526 | fo = inner.node().appendChild(startLabelElement);
|
1527 | const slBox = startLabelElement.getBBox();
|
1528 | inner.attr("transform", "translate(" + -slBox.width / 2 + ", " + -slBox.height / 2 + ")");
|
1529 | if (!terminalLabels[edge.id]) {
|
1530 | terminalLabels[edge.id] = {};
|
1531 | }
|
1532 | terminalLabels[edge.id].startLeft = startEdgeLabelLeft;
|
1533 | setTerminalWidth(fo, edge.startLabelLeft);
|
1534 | }
|
1535 | if (edge.startLabelRight) {
|
1536 | const startLabelElement = createLabel$1(edge.startLabelRight, edge.labelStyle);
|
1537 | const startEdgeLabelRight = elem.insert("g").attr("class", "edgeTerminals");
|
1538 | const inner = startEdgeLabelRight.insert("g").attr("class", "inner");
|
1539 | fo = startEdgeLabelRight.node().appendChild(startLabelElement);
|
1540 | inner.node().appendChild(startLabelElement);
|
1541 | const slBox = startLabelElement.getBBox();
|
1542 | inner.attr("transform", "translate(" + -slBox.width / 2 + ", " + -slBox.height / 2 + ")");
|
1543 | if (!terminalLabels[edge.id]) {
|
1544 | terminalLabels[edge.id] = {};
|
1545 | }
|
1546 | terminalLabels[edge.id].startRight = startEdgeLabelRight;
|
1547 | setTerminalWidth(fo, edge.startLabelRight);
|
1548 | }
|
1549 | if (edge.endLabelLeft) {
|
1550 | const endLabelElement = createLabel$1(edge.endLabelLeft, edge.labelStyle);
|
1551 | const endEdgeLabelLeft = elem.insert("g").attr("class", "edgeTerminals");
|
1552 | const inner = endEdgeLabelLeft.insert("g").attr("class", "inner");
|
1553 | fo = inner.node().appendChild(endLabelElement);
|
1554 | const slBox = endLabelElement.getBBox();
|
1555 | inner.attr("transform", "translate(" + -slBox.width / 2 + ", " + -slBox.height / 2 + ")");
|
1556 | endEdgeLabelLeft.node().appendChild(endLabelElement);
|
1557 | if (!terminalLabels[edge.id]) {
|
1558 | terminalLabels[edge.id] = {};
|
1559 | }
|
1560 | terminalLabels[edge.id].endLeft = endEdgeLabelLeft;
|
1561 | setTerminalWidth(fo, edge.endLabelLeft);
|
1562 | }
|
1563 | if (edge.endLabelRight) {
|
1564 | const endLabelElement = createLabel$1(edge.endLabelRight, edge.labelStyle);
|
1565 | const endEdgeLabelRight = elem.insert("g").attr("class", "edgeTerminals");
|
1566 | const inner = endEdgeLabelRight.insert("g").attr("class", "inner");
|
1567 | fo = inner.node().appendChild(endLabelElement);
|
1568 | const slBox = endLabelElement.getBBox();
|
1569 | inner.attr("transform", "translate(" + -slBox.width / 2 + ", " + -slBox.height / 2 + ")");
|
1570 | endEdgeLabelRight.node().appendChild(endLabelElement);
|
1571 | if (!terminalLabels[edge.id]) {
|
1572 | terminalLabels[edge.id] = {};
|
1573 | }
|
1574 | terminalLabels[edge.id].endRight = endEdgeLabelRight;
|
1575 | setTerminalWidth(fo, edge.endLabelRight);
|
1576 | }
|
1577 | return labelElement;
|
1578 | };
|
1579 | function setTerminalWidth(fo, value) {
|
1580 | if (getConfig().flowchart.htmlLabels && fo) {
|
1581 | fo.style.width = value.length * 9 + "px";
|
1582 | fo.style.height = "12px";
|
1583 | }
|
1584 | }
|
1585 | const positionEdgeLabel = (edge, paths) => {
|
1586 | log.debug("Moving label abc88 ", edge.id, edge.label, edgeLabels[edge.id], paths);
|
1587 | let path = paths.updatedPath ? paths.updatedPath : paths.originalPath;
|
1588 | const siteConfig = getConfig();
|
1589 | const { subGraphTitleTotalMargin } = getSubGraphTitleMargins(siteConfig);
|
1590 | if (edge.label) {
|
1591 | const el = edgeLabels[edge.id];
|
1592 | let x = edge.x;
|
1593 | let y = edge.y;
|
1594 | if (path) {
|
1595 | const pos = utils.calcLabelPosition(path);
|
1596 | log.debug(
|
1597 | "Moving label " + edge.label + " from (",
|
1598 | x,
|
1599 | ",",
|
1600 | y,
|
1601 | ") to (",
|
1602 | pos.x,
|
1603 | ",",
|
1604 | pos.y,
|
1605 | ") abc88"
|
1606 | );
|
1607 | if (paths.updatedPath) {
|
1608 | x = pos.x;
|
1609 | y = pos.y;
|
1610 | }
|
1611 | }
|
1612 | el.attr("transform", `translate(${x}, ${y + subGraphTitleTotalMargin / 2})`);
|
1613 | }
|
1614 | if (edge.startLabelLeft) {
|
1615 | const el = terminalLabels[edge.id].startLeft;
|
1616 | let x = edge.x;
|
1617 | let y = edge.y;
|
1618 | if (path) {
|
1619 | const pos = utils.calcTerminalLabelPosition(edge.arrowTypeStart ? 10 : 0, "start_left", path);
|
1620 | x = pos.x;
|
1621 | y = pos.y;
|
1622 | }
|
1623 | el.attr("transform", `translate(${x}, ${y})`);
|
1624 | }
|
1625 | if (edge.startLabelRight) {
|
1626 | const el = terminalLabels[edge.id].startRight;
|
1627 | let x = edge.x;
|
1628 | let y = edge.y;
|
1629 | if (path) {
|
1630 | const pos = utils.calcTerminalLabelPosition(
|
1631 | edge.arrowTypeStart ? 10 : 0,
|
1632 | "start_right",
|
1633 | path
|
1634 | );
|
1635 | x = pos.x;
|
1636 | y = pos.y;
|
1637 | }
|
1638 | el.attr("transform", `translate(${x}, ${y})`);
|
1639 | }
|
1640 | if (edge.endLabelLeft) {
|
1641 | const el = terminalLabels[edge.id].endLeft;
|
1642 | let x = edge.x;
|
1643 | let y = edge.y;
|
1644 | if (path) {
|
1645 | const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, "end_left", path);
|
1646 | x = pos.x;
|
1647 | y = pos.y;
|
1648 | }
|
1649 | el.attr("transform", `translate(${x}, ${y})`);
|
1650 | }
|
1651 | if (edge.endLabelRight) {
|
1652 | const el = terminalLabels[edge.id].endRight;
|
1653 | let x = edge.x;
|
1654 | let y = edge.y;
|
1655 | if (path) {
|
1656 | const pos = utils.calcTerminalLabelPosition(edge.arrowTypeEnd ? 10 : 0, "end_right", path);
|
1657 | x = pos.x;
|
1658 | y = pos.y;
|
1659 | }
|
1660 | el.attr("transform", `translate(${x}, ${y})`);
|
1661 | }
|
1662 | };
|
1663 | const outsideNode = (node, point2) => {
|
1664 | const x = node.x;
|
1665 | const y = node.y;
|
1666 | const dx = Math.abs(point2.x - x);
|
1667 | const dy = Math.abs(point2.y - y);
|
1668 | const w = node.width / 2;
|
1669 | const h = node.height / 2;
|
1670 | if (dx >= w || dy >= h) {
|
1671 | return true;
|
1672 | }
|
1673 | return false;
|
1674 | };
|
1675 | const intersection = (node, outsidePoint, insidePoint) => {
|
1676 | log.debug(`intersection calc abc89:
|
1677 | outsidePoint: ${JSON.stringify(outsidePoint)}
|
1678 | insidePoint : ${JSON.stringify(insidePoint)}
|
1679 | node : x:${node.x} y:${node.y} w:${node.width} h:${node.height}`);
|
1680 | const x = node.x;
|
1681 | const y = node.y;
|
1682 | const dx = Math.abs(x - insidePoint.x);
|
1683 | const w = node.width / 2;
|
1684 | let r = insidePoint.x < outsidePoint.x ? w - dx : w + dx;
|
1685 | const h = node.height / 2;
|
1686 | const Q = Math.abs(outsidePoint.y - insidePoint.y);
|
1687 | const R = Math.abs(outsidePoint.x - insidePoint.x);
|
1688 | if (Math.abs(y - outsidePoint.y) * w > Math.abs(x - outsidePoint.x) * h) {
|
1689 | let q = insidePoint.y < outsidePoint.y ? outsidePoint.y - h - y : y - h - outsidePoint.y;
|
1690 | r = R * q / Q;
|
1691 | const res = {
|
1692 | x: insidePoint.x < outsidePoint.x ? insidePoint.x + r : insidePoint.x - R + r,
|
1693 | y: insidePoint.y < outsidePoint.y ? insidePoint.y + Q - q : insidePoint.y - Q + q
|
1694 | };
|
1695 | if (r === 0) {
|
1696 | res.x = outsidePoint.x;
|
1697 | res.y = outsidePoint.y;
|
1698 | }
|
1699 | if (R === 0) {
|
1700 | res.x = outsidePoint.x;
|
1701 | }
|
1702 | if (Q === 0) {
|
1703 | res.y = outsidePoint.y;
|
1704 | }
|
1705 | log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);
|
1706 | return res;
|
1707 | } else {
|
1708 | if (insidePoint.x < outsidePoint.x) {
|
1709 | r = outsidePoint.x - w - x;
|
1710 | } else {
|
1711 | r = x - w - outsidePoint.x;
|
1712 | }
|
1713 | let q = Q * r / R;
|
1714 | let _x = insidePoint.x < outsidePoint.x ? insidePoint.x + R - r : insidePoint.x - R + r;
|
1715 | let _y = insidePoint.y < outsidePoint.y ? insidePoint.y + q : insidePoint.y - q;
|
1716 | log.debug(`sides calc abc89, Q ${Q}, q ${q}, R ${R}, r ${r}`, { _x, _y });
|
1717 | if (r === 0) {
|
1718 | _x = outsidePoint.x;
|
1719 | _y = outsidePoint.y;
|
1720 | }
|
1721 | if (R === 0) {
|
1722 | _x = outsidePoint.x;
|
1723 | }
|
1724 | if (Q === 0) {
|
1725 | _y = outsidePoint.y;
|
1726 | }
|
1727 | return { x: _x, y: _y };
|
1728 | }
|
1729 | };
|
1730 | const cutPathAtIntersect = (_points, boundaryNode) => {
|
1731 | log.debug("abc88 cutPathAtIntersect", _points, boundaryNode);
|
1732 | let points = [];
|
1733 | let lastPointOutside = _points[0];
|
1734 | let isInside = false;
|
1735 | _points.forEach((point2) => {
|
1736 | if (!outsideNode(boundaryNode, point2) && !isInside) {
|
1737 | const inter = intersection(boundaryNode, lastPointOutside, point2);
|
1738 | let pointPresent = false;
|
1739 | points.forEach((p) => {
|
1740 | pointPresent = pointPresent || p.x === inter.x && p.y === inter.y;
|
1741 | });
|
1742 | if (!points.some((e) => e.x === inter.x && e.y === inter.y)) {
|
1743 | points.push(inter);
|
1744 | }
|
1745 | isInside = true;
|
1746 | } else {
|
1747 | lastPointOutside = point2;
|
1748 | if (!isInside) {
|
1749 | points.push(point2);
|
1750 | }
|
1751 | }
|
1752 | });
|
1753 | return points;
|
1754 | };
|
1755 | const insertEdge = function(elem, e, edge, clusterDb, diagramType, graph, id) {
|
1756 | let points = edge.points;
|
1757 | log.debug("abc88 InsertEdge: edge=", edge, "e=", e);
|
1758 | let pointsHasChanged = false;
|
1759 | const tail = graph.node(e.v);
|
1760 | var head = graph.node(e.w);
|
1761 | if ((head == null ? void 0 : head.intersect) && (tail == null ? void 0 : tail.intersect)) {
|
1762 | points = points.slice(1, edge.points.length - 1);
|
1763 | points.unshift(tail.intersect(points[0]));
|
1764 | points.push(head.intersect(points[points.length - 1]));
|
1765 | }
|
1766 | if (edge.toCluster) {
|
1767 | log.debug("to cluster abc88", clusterDb[edge.toCluster]);
|
1768 | points = cutPathAtIntersect(edge.points, clusterDb[edge.toCluster].node);
|
1769 | pointsHasChanged = true;
|
1770 | }
|
1771 | if (edge.fromCluster) {
|
1772 | log.debug("from cluster abc88", clusterDb[edge.fromCluster]);
|
1773 | points = cutPathAtIntersect(points.reverse(), clusterDb[edge.fromCluster].node).reverse();
|
1774 | pointsHasChanged = true;
|
1775 | }
|
1776 | const lineData = points.filter((p) => !Number.isNaN(p.y));
|
1777 | let curve = curveBasis;
|
1778 | if (edge.curve && (diagramType === "graph" || diagramType === "flowchart")) {
|
1779 | curve = edge.curve;
|
1780 | }
|
1781 | const { x, y } = getLineFunctionsWithOffset(edge);
|
1782 | const lineFunction = line().x(x).y(y).curve(curve);
|
1783 | let strokeClasses;
|
1784 | switch (edge.thickness) {
|
1785 | case "normal":
|
1786 | strokeClasses = "edge-thickness-normal";
|
1787 | break;
|
1788 | case "thick":
|
1789 | strokeClasses = "edge-thickness-thick";
|
1790 | break;
|
1791 | case "invisible":
|
1792 | strokeClasses = "edge-thickness-thick";
|
1793 | break;
|
1794 | default:
|
1795 | strokeClasses = "";
|
1796 | }
|
1797 | switch (edge.pattern) {
|
1798 | case "solid":
|
1799 | strokeClasses += " edge-pattern-solid";
|
1800 | break;
|
1801 | case "dotted":
|
1802 | strokeClasses += " edge-pattern-dotted";
|
1803 | break;
|
1804 | case "dashed":
|
1805 | strokeClasses += " edge-pattern-dashed";
|
1806 | break;
|
1807 | }
|
1808 | const svgPath = elem.append("path").attr("d", lineFunction(lineData)).attr("id", edge.id).attr("class", " " + strokeClasses + (edge.classes ? " " + edge.classes : "")).attr("style", edge.style);
|
1809 | let url = "";
|
1810 | if (getConfig().flowchart.arrowMarkerAbsolute || getConfig().state.arrowMarkerAbsolute) {
|
1811 | url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
|
1812 | url = url.replace(/\(/g, "\\(");
|
1813 | url = url.replace(/\)/g, "\\)");
|
1814 | }
|
1815 | addEdgeMarkers(svgPath, edge, url, id, diagramType);
|
1816 | let paths = {};
|
1817 | if (pointsHasChanged) {
|
1818 | paths.updatedPath = points;
|
1819 | }
|
1820 | paths.originalPath = edge.points;
|
1821 | return paths;
|
1822 | };
|
1823 | export {
|
1824 | insertMarkers$1 as a,
|
1825 | clear$1 as b,
|
1826 | createLabel$1 as c,
|
1827 | clear as d,
|
1828 | insertNode as e,
|
1829 | insertEdgeLabel as f,
|
1830 | getSubGraphTitleMargins as g,
|
1831 | insertEdge as h,
|
1832 | intersectRect$1 as i,
|
1833 | positionEdgeLabel as j,
|
1834 | getLineFunctionsWithOffset as k,
|
1835 | labelHelper as l,
|
1836 | addEdgeMarkers as m,
|
1837 | positionNode as p,
|
1838 | setNodeElem as s,
|
1839 | updateNodeBounds as u
|
1840 | };
|