UNPKG

21.4 kBJavaScriptView Raw
1import { layout } from "dagre-d3-es/src/dagre/index.js";
2import * as graphlibJson from "dagre-d3-es/src/graphlib/json.js";
3import { c as createLabel, i as intersectRect, a as insertMarkers, b as clear$2, d as clear$3, u as updateNodeBounds, s as setNodeElem, e as insertNode, f as insertEdgeLabel, p as positionNode, g as insertEdge, h as positionEdgeLabel } from "./edges-97052da4.js";
4import { l as log, n as evaluate, c as getConfig } from "./mermaid-a953d906.js";
5import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
6import { c as createText } from "./createText-2f679d62.js";
7import { select } from "d3";
8let clusterDb = {};
9let descendants = {};
10let parents = {};
11const clear$1 = () => {
12 descendants = {};
13 parents = {};
14 clusterDb = {};
15};
16const isDescendant = (id, ancenstorId) => {
17 log.trace("In isDecendant", ancenstorId, " ", id, " = ", descendants[ancenstorId].includes(id));
18 if (descendants[ancenstorId].includes(id)) {
19 return true;
20 }
21 return false;
22};
23const edgeInCluster = (edge, clusterId) => {
24 log.info("Decendants of ", clusterId, " is ", descendants[clusterId]);
25 log.info("Edge is ", edge);
26 if (edge.v === clusterId) {
27 return false;
28 }
29 if (edge.w === clusterId) {
30 return false;
31 }
32 if (!descendants[clusterId]) {
33 log.debug("Tilt, ", clusterId, ",not in decendants");
34 return false;
35 }
36 return descendants[clusterId].includes(edge.v) || isDescendant(edge.v, clusterId) || isDescendant(edge.w, clusterId) || descendants[clusterId].includes(edge.w);
37};
38const copy = (clusterId, graph, newGraph, rootId) => {
39 log.warn(
40 "Copying children of ",
41 clusterId,
42 "root",
43 rootId,
44 "data",
45 graph.node(clusterId),
46 rootId
47 );
48 const nodes = graph.children(clusterId) || [];
49 if (clusterId !== rootId) {
50 nodes.push(clusterId);
51 }
52 log.warn("Copying (nodes) clusterId", clusterId, "nodes", nodes);
53 nodes.forEach((node) => {
54 if (graph.children(node).length > 0) {
55 copy(node, graph, newGraph, rootId);
56 } else {
57 const data = graph.node(node);
58 log.info("cp ", node, " to ", rootId, " with parent ", clusterId);
59 newGraph.setNode(node, data);
60 if (rootId !== graph.parent(node)) {
61 log.warn("Setting parent", node, graph.parent(node));
62 newGraph.setParent(node, graph.parent(node));
63 }
64 if (clusterId !== rootId && node !== clusterId) {
65 log.debug("Setting parent", node, clusterId);
66 newGraph.setParent(node, clusterId);
67 } else {
68 log.info("In copy ", clusterId, "root", rootId, "data", graph.node(clusterId), rootId);
69 log.debug(
70 "Not Setting parent for node=",
71 node,
72 "cluster!==rootId",
73 clusterId !== rootId,
74 "node!==clusterId",
75 node !== clusterId
76 );
77 }
78 const edges = graph.edges(node);
79 log.debug("Copying Edges", edges);
80 edges.forEach((edge) => {
81 log.info("Edge", edge);
82 const data2 = graph.edge(edge.v, edge.w, edge.name);
83 log.info("Edge data", data2, rootId);
84 try {
85 if (edgeInCluster(edge, rootId)) {
86 log.info("Copying as ", edge.v, edge.w, data2, edge.name);
87 newGraph.setEdge(edge.v, edge.w, data2, edge.name);
88 log.info("newGraph edges ", newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
89 } else {
90 log.info(
91 "Skipping copy of edge ",
92 edge.v,
93 "-->",
94 edge.w,
95 " rootId: ",
96 rootId,
97 " clusterId:",
98 clusterId
99 );
100 }
101 } catch (e) {
102 log.error(e);
103 }
104 });
105 }
106 log.debug("Removing node", node);
107 graph.removeNode(node);
108 });
109};
110const extractDescendants = (id, graph) => {
111 const children = graph.children(id);
112 let res = [...children];
113 for (const child of children) {
114 parents[child] = id;
115 res = [...res, ...extractDescendants(child, graph)];
116 }
117 return res;
118};
119const findNonClusterChild = (id, graph) => {
120 log.trace("Searching", id);
121 const children = graph.children(id);
122 log.trace("Searching children of id ", id, children);
123 if (children.length < 1) {
124 log.trace("This is a valid node", id);
125 return id;
126 }
127 for (const child of children) {
128 const _id = findNonClusterChild(child, graph);
129 if (_id) {
130 log.trace("Found replacement for", id, " => ", _id);
131 return _id;
132 }
133 }
134};
135const getAnchorId = (id) => {
136 if (!clusterDb[id]) {
137 return id;
138 }
139 if (!clusterDb[id].externalConnections) {
140 return id;
141 }
142 if (clusterDb[id]) {
143 return clusterDb[id].id;
144 }
145 return id;
146};
147const adjustClustersAndEdges = (graph, depth) => {
148 if (!graph || depth > 10) {
149 log.debug("Opting out, no graph ");
150 return;
151 } else {
152 log.debug("Opting in, graph ");
153 }
154 graph.nodes().forEach(function(id) {
155 const children = graph.children(id);
156 if (children.length > 0) {
157 log.warn(
158 "Cluster identified",
159 id,
160 " Replacement id in edges: ",
161 findNonClusterChild(id, graph)
162 );
163 descendants[id] = extractDescendants(id, graph);
164 clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
165 }
166 });
167 graph.nodes().forEach(function(id) {
168 const children = graph.children(id);
169 const edges = graph.edges();
170 if (children.length > 0) {
171 log.debug("Cluster identified", id, descendants);
172 edges.forEach((edge) => {
173 if (edge.v !== id && edge.w !== id) {
174 const d1 = isDescendant(edge.v, id);
175 const d2 = isDescendant(edge.w, id);
176 if (d1 ^ d2) {
177 log.warn("Edge: ", edge, " leaves cluster ", id);
178 log.warn("Decendants of XXX ", id, ": ", descendants[id]);
179 clusterDb[id].externalConnections = true;
180 }
181 }
182 });
183 } else {
184 log.debug("Not a cluster ", id, descendants);
185 }
186 });
187 graph.edges().forEach(function(e) {
188 const edge = graph.edge(e);
189 log.warn("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(e));
190 log.warn("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(graph.edge(e)));
191 let v = e.v;
192 let w = e.w;
193 log.warn(
194 "Fix XXX",
195 clusterDb,
196 "ids:",
197 e.v,
198 e.w,
199 "Translating: ",
200 clusterDb[e.v],
201 " --- ",
202 clusterDb[e.w]
203 );
204 if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {
205 log.warn("Fixing and trixing link to self - removing XXX", e.v, e.w, e.name);
206 log.warn("Fixing and trixing - removing XXX", e.v, e.w, e.name);
207 v = getAnchorId(e.v);
208 w = getAnchorId(e.w);
209 graph.removeEdge(e.v, e.w, e.name);
210 const specialId = e.w + "---" + e.v;
211 graph.setNode(specialId, {
212 domId: specialId,
213 id: specialId,
214 labelStyle: "",
215 labelText: edge.label,
216 padding: 0,
217 shape: "labelRect",
218 style: ""
219 });
220 const edge1 = JSON.parse(JSON.stringify(edge));
221 const edge2 = JSON.parse(JSON.stringify(edge));
222 edge1.label = "";
223 edge1.arrowTypeEnd = "none";
224 edge2.label = "";
225 edge1.fromCluster = e.v;
226 edge2.toCluster = e.v;
227 graph.setEdge(v, specialId, edge1, e.name + "-cyclic-special");
228 graph.setEdge(specialId, w, edge2, e.name + "-cyclic-special");
229 } else if (clusterDb[e.v] || clusterDb[e.w]) {
230 log.warn("Fixing and trixing - removing XXX", e.v, e.w, e.name);
231 v = getAnchorId(e.v);
232 w = getAnchorId(e.w);
233 graph.removeEdge(e.v, e.w, e.name);
234 if (v !== e.v) {
235 edge.fromCluster = e.v;
236 }
237 if (w !== e.w) {
238 edge.toCluster = e.w;
239 }
240 log.warn("Fix Replacing with XXX", v, w, e.name);
241 graph.setEdge(v, w, edge, e.name);
242 }
243 });
244 log.warn("Adjusted Graph", graphlibJson.write(graph));
245 extractor(graph, 0);
246 log.trace(clusterDb);
247};
248const extractor = (graph, depth) => {
249 log.warn("extractor - ", depth, graphlibJson.write(graph), graph.children("D"));
250 if (depth > 10) {
251 log.error("Bailing out");
252 return;
253 }
254 let nodes = graph.nodes();
255 let hasChildren = false;
256 for (const node of nodes) {
257 const children = graph.children(node);
258 hasChildren = hasChildren || children.length > 0;
259 }
260 if (!hasChildren) {
261 log.debug("Done, no node has children", graph.nodes());
262 return;
263 }
264 log.debug("Nodes = ", nodes, depth);
265 for (const node of nodes) {
266 log.debug(
267 "Extracting node",
268 node,
269 clusterDb,
270 clusterDb[node] && !clusterDb[node].externalConnections,
271 !graph.parent(node),
272 graph.node(node),
273 graph.children("D"),
274 " Depth ",
275 depth
276 );
277 if (!clusterDb[node]) {
278 log.debug("Not a cluster", node, depth);
279 } else if (!clusterDb[node].externalConnections && // !graph.parent(node) &&
280 graph.children(node) && graph.children(node).length > 0) {
281 log.warn(
282 "Cluster without external connections, without a parent and with children",
283 node,
284 depth
285 );
286 const graphSettings = graph.graph();
287 let dir = graphSettings.rankdir === "TB" ? "LR" : "TB";
288 if (clusterDb[node] && clusterDb[node].clusterData && clusterDb[node].clusterData.dir) {
289 dir = clusterDb[node].clusterData.dir;
290 log.warn("Fixing dir", clusterDb[node].clusterData.dir, dir);
291 }
292 const clusterGraph = new graphlib.Graph({
293 multigraph: true,
294 compound: true
295 }).setGraph({
296 rankdir: dir,
297 // Todo: set proper spacing
298 nodesep: 50,
299 ranksep: 50,
300 marginx: 8,
301 marginy: 8
302 }).setDefaultEdgeLabel(function() {
303 return {};
304 });
305 log.warn("Old graph before copy", graphlibJson.write(graph));
306 copy(node, graph, clusterGraph, node);
307 graph.setNode(node, {
308 clusterNode: true,
309 id: node,
310 clusterData: clusterDb[node].clusterData,
311 labelText: clusterDb[node].labelText,
312 graph: clusterGraph
313 });
314 log.warn("New graph after copy node: (", node, ")", graphlibJson.write(clusterGraph));
315 log.debug("Old graph after copy", graphlibJson.write(graph));
316 } else {
317 log.warn(
318 "Cluster ** ",
319 node,
320 " **not meeting the criteria !externalConnections:",
321 !clusterDb[node].externalConnections,
322 " no parent: ",
323 !graph.parent(node),
324 " children ",
325 graph.children(node) && graph.children(node).length > 0,
326 graph.children("D"),
327 depth
328 );
329 log.debug(clusterDb);
330 }
331 }
332 nodes = graph.nodes();
333 log.warn("New list of nodes", nodes);
334 for (const node of nodes) {
335 const data = graph.node(node);
336 log.warn(" Now next level", node, data);
337 if (data.clusterNode) {
338 extractor(data.graph, depth + 1);
339 }
340 }
341};
342const sorter = (graph, nodes) => {
343 if (nodes.length === 0) {
344 return [];
345 }
346 let result = Object.assign(nodes);
347 nodes.forEach((node) => {
348 const children = graph.children(node);
349 const sorted = sorter(graph, children);
350 result = [...result, ...sorted];
351 });
352 return result;
353};
354const sortNodesByHierarchy = (graph) => sorter(graph, graph.children());
355const rect = (parent, node) => {
356 log.info("Creating subgraph rect for ", node.id, node);
357 const shapeSvg = parent.insert("g").attr("class", "cluster" + (node.class ? " " + node.class : "")).attr("id", node.id);
358 const rect2 = shapeSvg.insert("rect", ":first-child");
359 const useHtmlLabels = evaluate(getConfig().flowchart.htmlLabels);
360 const label = shapeSvg.insert("g").attr("class", "cluster-label");
361 const text = node.labelType === "markdown" ? createText(label, node.labelText, { style: node.labelStyle, useHtmlLabels }) : label.node().appendChild(createLabel(node.labelText, node.labelStyle, void 0, true));
362 let bbox = text.getBBox();
363 if (evaluate(getConfig().flowchart.htmlLabels)) {
364 const div = text.children[0];
365 const dv = select(text);
366 bbox = div.getBoundingClientRect();
367 dv.attr("width", bbox.width);
368 dv.attr("height", bbox.height);
369 }
370 const padding = 0 * node.padding;
371 const halfPadding = padding / 2;
372 const width = node.width <= bbox.width + padding ? bbox.width + padding : node.width;
373 if (node.width <= bbox.width + padding) {
374 node.diff = (bbox.width - node.width) / 2 - node.padding / 2;
375 } else {
376 node.diff = -node.padding / 2;
377 }
378 log.trace("Data ", node, JSON.stringify(node));
379 rect2.attr("style", node.style).attr("rx", node.rx).attr("ry", node.ry).attr("x", node.x - width / 2).attr("y", node.y - node.height / 2 - halfPadding).attr("width", width).attr("height", node.height + padding);
380 if (useHtmlLabels) {
381 label.attr(
382 "transform",
383 // This puts the labal on top of the box instead of inside it
384 "translate(" + (node.x - bbox.width / 2) + ", " + (node.y - node.height / 2) + ")"
385 );
386 } else {
387 label.attr(
388 "transform",
389 // This puts the labal on top of the box instead of inside it
390 "translate(" + node.x + ", " + (node.y - node.height / 2) + ")"
391 );
392 }
393 const rectBox = rect2.node().getBBox();
394 node.width = rectBox.width;
395 node.height = rectBox.height;
396 node.intersect = function(point) {
397 return intersectRect(node, point);
398 };
399 return shapeSvg;
400};
401const noteGroup = (parent, node) => {
402 const shapeSvg = parent.insert("g").attr("class", "note-cluster").attr("id", node.id);
403 const rect2 = shapeSvg.insert("rect", ":first-child");
404 const padding = 0 * node.padding;
405 const halfPadding = padding / 2;
406 rect2.attr("rx", node.rx).attr("ry", node.ry).attr("x", node.x - node.width / 2 - halfPadding).attr("y", node.y - node.height / 2 - halfPadding).attr("width", node.width + padding).attr("height", node.height + padding).attr("fill", "none");
407 const rectBox = rect2.node().getBBox();
408 node.width = rectBox.width;
409 node.height = rectBox.height;
410 node.intersect = function(point) {
411 return intersectRect(node, point);
412 };
413 return shapeSvg;
414};
415const roundedWithTitle = (parent, node) => {
416 const shapeSvg = parent.insert("g").attr("class", node.classes).attr("id", node.id);
417 const rect2 = shapeSvg.insert("rect", ":first-child");
418 const label = shapeSvg.insert("g").attr("class", "cluster-label");
419 const innerRect = shapeSvg.append("rect");
420 const text = label.node().appendChild(createLabel(node.labelText, node.labelStyle, void 0, true));
421 let bbox = text.getBBox();
422 if (evaluate(getConfig().flowchart.htmlLabels)) {
423 const div = text.children[0];
424 const dv = select(text);
425 bbox = div.getBoundingClientRect();
426 dv.attr("width", bbox.width);
427 dv.attr("height", bbox.height);
428 }
429 bbox = text.getBBox();
430 const padding = 0 * node.padding;
431 const halfPadding = padding / 2;
432 const width = node.width <= bbox.width + node.padding ? bbox.width + node.padding : node.width;
433 if (node.width <= bbox.width + node.padding) {
434 node.diff = (bbox.width + node.padding * 0 - node.width) / 2;
435 } else {
436 node.diff = -node.padding / 2;
437 }
438 rect2.attr("class", "outer").attr("x", node.x - width / 2 - halfPadding).attr("y", node.y - node.height / 2 - halfPadding).attr("width", width + padding).attr("height", node.height + padding);
439 innerRect.attr("class", "inner").attr("x", node.x - width / 2 - halfPadding).attr("y", node.y - node.height / 2 - halfPadding + bbox.height - 1).attr("width", width + padding).attr("height", node.height + padding - bbox.height - 3);
440 label.attr(
441 "transform",
442 "translate(" + (node.x - bbox.width / 2) + ", " + (node.y - node.height / 2 - node.padding / 3 + (evaluate(getConfig().flowchart.htmlLabels) ? 5 : 3)) + ")"
443 );
444 const rectBox = rect2.node().getBBox();
445 node.height = rectBox.height;
446 node.intersect = function(point) {
447 return intersectRect(node, point);
448 };
449 return shapeSvg;
450};
451const divider = (parent, node) => {
452 const shapeSvg = parent.insert("g").attr("class", node.classes).attr("id", node.id);
453 const rect2 = shapeSvg.insert("rect", ":first-child");
454 const padding = 0 * node.padding;
455 const halfPadding = padding / 2;
456 rect2.attr("class", "divider").attr("x", node.x - node.width / 2 - halfPadding).attr("y", node.y - node.height / 2).attr("width", node.width + padding).attr("height", node.height + padding);
457 const rectBox = rect2.node().getBBox();
458 node.width = rectBox.width;
459 node.height = rectBox.height;
460 node.diff = -node.padding / 2;
461 node.intersect = function(point) {
462 return intersectRect(node, point);
463 };
464 return shapeSvg;
465};
466const shapes = { rect, roundedWithTitle, noteGroup, divider };
467let clusterElems = {};
468const insertCluster = (elem, node) => {
469 log.trace("Inserting cluster");
470 const shape = node.shape || "rect";
471 clusterElems[node.id] = shapes[shape](elem, node);
472};
473const clear = () => {
474 clusterElems = {};
475};
476const recursiveRender = async (_elem, graph, diagramtype, parentCluster) => {
477 log.info("Graph in recursive render: XXX", graphlibJson.write(graph), parentCluster);
478 const dir = graph.graph().rankdir;
479 log.trace("Dir in recursive render - dir:", dir);
480 const elem = _elem.insert("g").attr("class", "root");
481 if (!graph.nodes()) {
482 log.info("No nodes found for", graph);
483 } else {
484 log.info("Recursive render XXX", graph.nodes());
485 }
486 if (graph.edges().length > 0) {
487 log.trace("Recursive edges", graph.edge(graph.edges()[0]));
488 }
489 const clusters = elem.insert("g").attr("class", "clusters");
490 const edgePaths = elem.insert("g").attr("class", "edgePaths");
491 const edgeLabels = elem.insert("g").attr("class", "edgeLabels");
492 const nodes = elem.insert("g").attr("class", "nodes");
493 await Promise.all(
494 graph.nodes().map(async function(v) {
495 const node = graph.node(v);
496 if (parentCluster !== void 0) {
497 const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
498 log.info("Setting data for cluster XXX (", v, ") ", data, parentCluster);
499 graph.setNode(parentCluster.id, data);
500 if (!graph.parent(v)) {
501 log.trace("Setting parent", v, parentCluster.id);
502 graph.setParent(v, parentCluster.id, data);
503 }
504 }
505 log.info("(Insert) Node XXX" + v + ": " + JSON.stringify(graph.node(v)));
506 if (node && node.clusterNode) {
507 log.info("Cluster identified", v, node.width, graph.node(v));
508 const o = await recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
509 const newEl = o.elem;
510 updateNodeBounds(node, newEl);
511 node.diff = o.diff || 0;
512 log.info("Node bounds (abc123)", v, node, node.width, node.x, node.y);
513 setNodeElem(newEl, node);
514 log.warn("Recursive render complete ", newEl, node);
515 } else {
516 if (graph.children(v).length > 0) {
517 log.info("Cluster - the non recursive path XXX", v, node.id, node, graph);
518 log.info(findNonClusterChild(node.id, graph));
519 clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
520 } else {
521 log.info("Node - the non recursive path", v, node.id, node);
522 await insertNode(nodes, graph.node(v), dir);
523 }
524 }
525 })
526 );
527 graph.edges().forEach(function(e) {
528 const edge = graph.edge(e.v, e.w, e.name);
529 log.info("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(e));
530 log.info("Edge " + e.v + " -> " + e.w + ": ", e, " ", JSON.stringify(graph.edge(e)));
531 log.info("Fix", clusterDb, "ids:", e.v, e.w, "Translateing: ", clusterDb[e.v], clusterDb[e.w]);
532 insertEdgeLabel(edgeLabels, edge);
533 });
534 graph.edges().forEach(function(e) {
535 log.info("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(e));
536 });
537 log.info("#############################################");
538 log.info("### Layout ###");
539 log.info("#############################################");
540 log.info(graph);
541 layout(graph);
542 log.info("Graph after layout:", graphlibJson.write(graph));
543 let diff = 0;
544 sortNodesByHierarchy(graph).forEach(function(v) {
545 const node = graph.node(v);
546 log.info("Position " + v + ": " + JSON.stringify(graph.node(v)));
547 log.info(
548 "Position " + v + ": (" + node.x,
549 "," + node.y,
550 ") width: ",
551 node.width,
552 " height: ",
553 node.height
554 );
555 if (node && node.clusterNode) {
556 positionNode(node);
557 } else {
558 if (graph.children(v).length > 0) {
559 insertCluster(clusters, node);
560 clusterDb[node.id].node = node;
561 } else {
562 positionNode(node);
563 }
564 }
565 });
566 graph.edges().forEach(function(e) {
567 const edge = graph.edge(e);
568 log.info("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(edge), edge);
569 const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph);
570 positionEdgeLabel(edge, paths);
571 });
572 graph.nodes().forEach(function(v) {
573 const n = graph.node(v);
574 log.info(v, n.type, n.diff);
575 if (n.type === "group") {
576 diff = n.diff;
577 }
578 });
579 return { elem, diff };
580};
581const render = async (elem, graph, markers, diagramtype, id) => {
582 insertMarkers(elem, markers, diagramtype, id);
583 clear$2();
584 clear$3();
585 clear();
586 clear$1();
587 log.warn("Graph at first:", graphlibJson.write(graph));
588 adjustClustersAndEdges(graph);
589 log.warn("Graph after:", graphlibJson.write(graph));
590 await recursiveRender(elem, graph, diagramtype);
591};
592export {
593 render as r
594};