UNPKG

18.4 kBJavaScriptView Raw
1import { d as db, p as parser, s as styles } from "./styles-f80da881.js";
2import { c as getConfig, F as curveBasis, A as utils, f as common, l as log, j as d3select, k as configureSvgSize } from "./mermaid-dcacb631.js";
3import { G as Graph } from "./graph-fe24fab6.js";
4import { l as layout } from "./layout-163b9689.js";
5import { l as line } from "./line-87f517ef.js";
6import "./array-b7dcf730.js";
7import "./path-39bad7e2.js";
8const idCache = {};
9const set = (key, val) => {
10 idCache[key] = val;
11};
12const get = (k) => idCache[k];
13const keys = () => Object.keys(idCache);
14const size = () => keys().length;
15const idCache$1 = {
16 get,
17 set,
18 keys,
19 size
20};
21const drawStartState = (g) => g.append("circle").attr("class", "start-state").attr("r", getConfig().state.sizeUnit).attr("cx", getConfig().state.padding + getConfig().state.sizeUnit).attr("cy", getConfig().state.padding + getConfig().state.sizeUnit);
22const drawDivider = (g) => g.append("line").style("stroke", "grey").style("stroke-dasharray", "3").attr("x1", getConfig().state.textHeight).attr("class", "divider").attr("x2", getConfig().state.textHeight * 2).attr("y1", 0).attr("y2", 0);
23const drawSimpleState = (g, stateDef) => {
24 const state = g.append("text").attr("x", 2 * getConfig().state.padding).attr("y", getConfig().state.textHeight + 2 * getConfig().state.padding).attr("font-size", getConfig().state.fontSize).attr("class", "state-title").text(stateDef.id);
25 const classBox = state.node().getBBox();
26 g.insert("rect", ":first-child").attr("x", getConfig().state.padding).attr("y", getConfig().state.padding).attr("width", classBox.width + 2 * getConfig().state.padding).attr("height", classBox.height + 2 * getConfig().state.padding).attr("rx", getConfig().state.radius);
27 return state;
28};
29const drawDescrState = (g, stateDef) => {
30 const addTspan = function(textEl, txt, isFirst2) {
31 const tSpan = textEl.append("tspan").attr("x", 2 * getConfig().state.padding).text(txt);
32 if (!isFirst2) {
33 tSpan.attr("dy", getConfig().state.textHeight);
34 }
35 };
36 const title = g.append("text").attr("x", 2 * getConfig().state.padding).attr("y", getConfig().state.textHeight + 1.3 * getConfig().state.padding).attr("font-size", getConfig().state.fontSize).attr("class", "state-title").text(stateDef.descriptions[0]);
37 const titleBox = title.node().getBBox();
38 const titleHeight = titleBox.height;
39 const description = g.append("text").attr("x", getConfig().state.padding).attr(
40 "y",
41 titleHeight + getConfig().state.padding * 0.4 + getConfig().state.dividerMargin + getConfig().state.textHeight
42 ).attr("class", "state-description");
43 let isFirst = true;
44 let isSecond = true;
45 stateDef.descriptions.forEach(function(descr) {
46 if (!isFirst) {
47 addTspan(description, descr, isSecond);
48 isSecond = false;
49 }
50 isFirst = false;
51 });
52 const descrLine = g.append("line").attr("x1", getConfig().state.padding).attr("y1", getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2).attr("y2", getConfig().state.padding + titleHeight + getConfig().state.dividerMargin / 2).attr("class", "descr-divider");
53 const descrBox = description.node().getBBox();
54 const width = Math.max(descrBox.width, titleBox.width);
55 descrLine.attr("x2", width + 3 * getConfig().state.padding);
56 g.insert("rect", ":first-child").attr("x", getConfig().state.padding).attr("y", getConfig().state.padding).attr("width", width + 2 * getConfig().state.padding).attr("height", descrBox.height + titleHeight + 2 * getConfig().state.padding).attr("rx", getConfig().state.radius);
57 return g;
58};
59const addTitleAndBox = (g, stateDef, altBkg) => {
60 const pad = getConfig().state.padding;
61 const dblPad = 2 * getConfig().state.padding;
62 const orgBox = g.node().getBBox();
63 const orgWidth = orgBox.width;
64 const orgX = orgBox.x;
65 const title = g.append("text").attr("x", 0).attr("y", getConfig().state.titleShift).attr("font-size", getConfig().state.fontSize).attr("class", "state-title").text(stateDef.id);
66 const titleBox = title.node().getBBox();
67 const titleWidth = titleBox.width + dblPad;
68 let width = Math.max(titleWidth, orgWidth);
69 if (width === orgWidth) {
70 width = width + dblPad;
71 }
72 let startX;
73 const graphBox = g.node().getBBox();
74 if (stateDef.doc)
75 ;
76 startX = orgX - pad;
77 if (titleWidth > orgWidth) {
78 startX = (orgWidth - width) / 2 + pad;
79 }
80 if (Math.abs(orgX - graphBox.x) < pad && titleWidth > orgWidth) {
81 startX = orgX - (titleWidth - orgWidth) / 2;
82 }
83 const lineY = 1 - getConfig().state.textHeight;
84 g.insert("rect", ":first-child").attr("x", startX).attr("y", lineY).attr("class", altBkg ? "alt-composit" : "composit").attr("width", width).attr(
85 "height",
86 graphBox.height + getConfig().state.textHeight + getConfig().state.titleShift + 1
87 ).attr("rx", "0");
88 title.attr("x", startX + pad);
89 if (titleWidth <= orgWidth) {
90 title.attr("x", orgX + (width - dblPad) / 2 - titleWidth / 2 + pad);
91 }
92 g.insert("rect", ":first-child").attr("x", startX).attr(
93 "y",
94 getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
95 ).attr("width", width).attr("height", getConfig().state.textHeight * 3).attr("rx", getConfig().state.radius);
96 g.insert("rect", ":first-child").attr("x", startX).attr(
97 "y",
98 getConfig().state.titleShift - getConfig().state.textHeight - getConfig().state.padding
99 ).attr("width", width).attr("height", graphBox.height + 3 + 2 * getConfig().state.textHeight).attr("rx", getConfig().state.radius);
100 return g;
101};
102const drawEndState = (g) => {
103 g.append("circle").attr("class", "end-state-outer").attr("r", getConfig().state.sizeUnit + getConfig().state.miniPadding).attr(
104 "cx",
105 getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
106 ).attr(
107 "cy",
108 getConfig().state.padding + getConfig().state.sizeUnit + getConfig().state.miniPadding
109 );
110 return g.append("circle").attr("class", "end-state-inner").attr("r", getConfig().state.sizeUnit).attr("cx", getConfig().state.padding + getConfig().state.sizeUnit + 2).attr("cy", getConfig().state.padding + getConfig().state.sizeUnit + 2);
111};
112const drawForkJoinState = (g, stateDef) => {
113 let width = getConfig().state.forkWidth;
114 let height = getConfig().state.forkHeight;
115 if (stateDef.parentId) {
116 let tmp = width;
117 width = height;
118 height = tmp;
119 }
120 return g.append("rect").style("stroke", "black").style("fill", "black").attr("width", width).attr("height", height).attr("x", getConfig().state.padding).attr("y", getConfig().state.padding);
121};
122const _drawLongText = (_text, x, y, g) => {
123 let textHeight = 0;
124 const textElem = g.append("text");
125 textElem.style("text-anchor", "start");
126 textElem.attr("class", "noteText");
127 let text = _text.replace(/\r\n/g, "<br/>");
128 text = text.replace(/\n/g, "<br/>");
129 const lines = text.split(common.lineBreakRegex);
130 let tHeight = 1.25 * getConfig().state.noteMargin;
131 for (const line2 of lines) {
132 const txt = line2.trim();
133 if (txt.length > 0) {
134 const span = textElem.append("tspan");
135 span.text(txt);
136 if (tHeight === 0) {
137 const textBounds = span.node().getBBox();
138 tHeight += textBounds.height;
139 }
140 textHeight += tHeight;
141 span.attr("x", x + getConfig().state.noteMargin);
142 span.attr("y", y + textHeight + 1.25 * getConfig().state.noteMargin);
143 }
144 }
145 return { textWidth: textElem.node().getBBox().width, textHeight };
146};
147const drawNote = (text, g) => {
148 g.attr("class", "state-note");
149 const note = g.append("rect").attr("x", 0).attr("y", getConfig().state.padding);
150 const rectElem = g.append("g");
151 const { textWidth, textHeight } = _drawLongText(text, 0, 0, rectElem);
152 note.attr("height", textHeight + 2 * getConfig().state.noteMargin);
153 note.attr("width", textWidth + getConfig().state.noteMargin * 2);
154 return note;
155};
156const drawState = function(elem, stateDef) {
157 const id = stateDef.id;
158 const stateInfo = {
159 id,
160 label: stateDef.id,
161 width: 0,
162 height: 0
163 };
164 const g = elem.append("g").attr("id", id).attr("class", "stateGroup");
165 if (stateDef.type === "start") {
166 drawStartState(g);
167 }
168 if (stateDef.type === "end") {
169 drawEndState(g);
170 }
171 if (stateDef.type === "fork" || stateDef.type === "join") {
172 drawForkJoinState(g, stateDef);
173 }
174 if (stateDef.type === "note") {
175 drawNote(stateDef.note.text, g);
176 }
177 if (stateDef.type === "divider") {
178 drawDivider(g);
179 }
180 if (stateDef.type === "default" && stateDef.descriptions.length === 0) {
181 drawSimpleState(g, stateDef);
182 }
183 if (stateDef.type === "default" && stateDef.descriptions.length > 0) {
184 drawDescrState(g, stateDef);
185 }
186 const stateBox = g.node().getBBox();
187 stateInfo.width = stateBox.width + 2 * getConfig().state.padding;
188 stateInfo.height = stateBox.height + 2 * getConfig().state.padding;
189 idCache$1.set(id, stateInfo);
190 return stateInfo;
191};
192let edgeCount = 0;
193const drawEdge = function(elem, path, relation) {
194 const getRelationType = function(type) {
195 switch (type) {
196 case db.relationType.AGGREGATION:
197 return "aggregation";
198 case db.relationType.EXTENSION:
199 return "extension";
200 case db.relationType.COMPOSITION:
201 return "composition";
202 case db.relationType.DEPENDENCY:
203 return "dependency";
204 }
205 };
206 path.points = path.points.filter((p) => !Number.isNaN(p.y));
207 const lineData = path.points;
208 const lineFunction = line().x(function(d) {
209 return d.x;
210 }).y(function(d) {
211 return d.y;
212 }).curve(curveBasis);
213 const svgPath = elem.append("path").attr("d", lineFunction(lineData)).attr("id", "edge" + edgeCount).attr("class", "transition");
214 let url = "";
215 if (getConfig().state.arrowMarkerAbsolute) {
216 url = window.location.protocol + "//" + window.location.host + window.location.pathname + window.location.search;
217 url = url.replace(/\(/g, "\\(");
218 url = url.replace(/\)/g, "\\)");
219 }
220 svgPath.attr(
221 "marker-end",
222 "url(" + url + "#" + getRelationType(db.relationType.DEPENDENCY) + "End)"
223 );
224 if (relation.title !== void 0) {
225 const label = elem.append("g").attr("class", "stateLabel");
226 const { x, y } = utils.calcLabelPosition(path.points);
227 const rows = common.getRows(relation.title);
228 let titleHeight = 0;
229 const titleRows = [];
230 let maxWidth = 0;
231 let minX = 0;
232 for (let i = 0; i <= rows.length; i++) {
233 const title = label.append("text").attr("text-anchor", "middle").text(rows[i]).attr("x", x).attr("y", y + titleHeight);
234 const boundsTmp = title.node().getBBox();
235 maxWidth = Math.max(maxWidth, boundsTmp.width);
236 minX = Math.min(minX, boundsTmp.x);
237 log.info(boundsTmp.x, x, y + titleHeight);
238 if (titleHeight === 0) {
239 const titleBox = title.node().getBBox();
240 titleHeight = titleBox.height;
241 log.info("Title height", titleHeight, y);
242 }
243 titleRows.push(title);
244 }
245 let boxHeight = titleHeight * rows.length;
246 if (rows.length > 1) {
247 const heightAdj = (rows.length - 1) * titleHeight * 0.5;
248 titleRows.forEach((title, i) => title.attr("y", y + i * titleHeight - heightAdj));
249 boxHeight = titleHeight * rows.length;
250 }
251 const bounds = label.node().getBBox();
252 label.insert("rect", ":first-child").attr("class", "box").attr("x", x - maxWidth / 2 - getConfig().state.padding / 2).attr("y", y - boxHeight / 2 - getConfig().state.padding / 2 - 3.5).attr("width", maxWidth + getConfig().state.padding).attr("height", boxHeight + getConfig().state.padding);
253 log.info(bounds);
254 }
255 edgeCount++;
256};
257let conf;
258const transformationLog = {};
259const setConf = function() {
260};
261const insertMarkers = function(elem) {
262 elem.append("defs").append("marker").attr("id", "dependencyEnd").attr("refX", 19).attr("refY", 7).attr("markerWidth", 20).attr("markerHeight", 28).attr("orient", "auto").append("path").attr("d", "M 19,7 L9,13 L14,7 L9,1 Z");
263};
264const draw = function(text, id, _version, diagObj) {
265 conf = getConfig().state;
266 const securityLevel = getConfig().securityLevel;
267 let sandboxElement;
268 if (securityLevel === "sandbox") {
269 sandboxElement = d3select("#i" + id);
270 }
271 const root = securityLevel === "sandbox" ? d3select(sandboxElement.nodes()[0].contentDocument.body) : d3select("body");
272 const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
273 log.debug("Rendering diagram " + text);
274 const diagram2 = root.select(`[id='${id}']`);
275 insertMarkers(diagram2);
276 const rootDoc = diagObj.db.getRootDoc();
277 renderDoc(rootDoc, diagram2, void 0, false, root, doc, diagObj);
278 const padding = conf.padding;
279 const bounds = diagram2.node().getBBox();
280 const width = bounds.width + padding * 2;
281 const height = bounds.height + padding * 2;
282 const svgWidth = width * 1.75;
283 configureSvgSize(diagram2, height, svgWidth, conf.useMaxWidth);
284 diagram2.attr(
285 "viewBox",
286 `${bounds.x - conf.padding} ${bounds.y - conf.padding} ` + width + " " + height
287 );
288};
289const getLabelWidth = (text) => {
290 return text ? text.length * conf.fontSizeFactor : 1;
291};
292const renderDoc = (doc, diagram2, parentId, altBkg, root, domDocument, diagObj) => {
293 const graph = new Graph({
294 compound: true,
295 multigraph: true
296 });
297 let i;
298 let edgeFreeDoc = true;
299 for (i = 0; i < doc.length; i++) {
300 if (doc[i].stmt === "relation") {
301 edgeFreeDoc = false;
302 break;
303 }
304 }
305 if (parentId) {
306 graph.setGraph({
307 rankdir: "LR",
308 multigraph: true,
309 compound: true,
310 // acyclicer: 'greedy',
311 ranker: "tight-tree",
312 ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
313 nodeSep: edgeFreeDoc ? 1 : 50,
314 isMultiGraph: true
315 // ranksep: 5,
316 // nodesep: 1
317 });
318 } else {
319 graph.setGraph({
320 rankdir: "TB",
321 multigraph: true,
322 compound: true,
323 // isCompound: true,
324 // acyclicer: 'greedy',
325 // ranker: 'longest-path'
326 ranksep: edgeFreeDoc ? 1 : conf.edgeLengthFactor,
327 nodeSep: edgeFreeDoc ? 1 : 50,
328 ranker: "tight-tree",
329 // ranker: 'network-simplex'
330 isMultiGraph: true
331 });
332 }
333 graph.setDefaultEdgeLabel(function() {
334 return {};
335 });
336 diagObj.db.extract(doc);
337 const states = diagObj.db.getStates();
338 const relations = diagObj.db.getRelations();
339 const keys2 = Object.keys(states);
340 for (const key of keys2) {
341 const stateDef = states[key];
342 if (parentId) {
343 stateDef.parentId = parentId;
344 }
345 let node;
346 if (stateDef.doc) {
347 let sub = diagram2.append("g").attr("id", stateDef.id).attr("class", "stateGroup");
348 node = renderDoc(stateDef.doc, sub, stateDef.id, !altBkg, root, domDocument, diagObj);
349 {
350 sub = addTitleAndBox(sub, stateDef, altBkg);
351 let boxBounds = sub.node().getBBox();
352 node.width = boxBounds.width;
353 node.height = boxBounds.height + conf.padding / 2;
354 transformationLog[stateDef.id] = { y: conf.compositTitleSize };
355 }
356 } else {
357 node = drawState(diagram2, stateDef);
358 }
359 if (stateDef.note) {
360 const noteDef = {
361 descriptions: [],
362 id: stateDef.id + "-note",
363 note: stateDef.note,
364 type: "note"
365 };
366 const note = drawState(diagram2, noteDef);
367 if (stateDef.note.position === "left of") {
368 graph.setNode(node.id + "-note", note);
369 graph.setNode(node.id, node);
370 } else {
371 graph.setNode(node.id, node);
372 graph.setNode(node.id + "-note", note);
373 }
374 graph.setParent(node.id, node.id + "-group");
375 graph.setParent(node.id + "-note", node.id + "-group");
376 } else {
377 graph.setNode(node.id, node);
378 }
379 }
380 log.debug("Count=", graph.nodeCount(), graph);
381 let cnt = 0;
382 relations.forEach(function(relation) {
383 cnt++;
384 log.debug("Setting edge", relation);
385 graph.setEdge(
386 relation.id1,
387 relation.id2,
388 {
389 relation,
390 width: getLabelWidth(relation.title),
391 height: conf.labelHeight * common.getRows(relation.title).length,
392 labelpos: "c"
393 },
394 "id" + cnt
395 );
396 });
397 layout(graph);
398 log.debug("Graph after layout", graph.nodes());
399 const svgElem = diagram2.node();
400 graph.nodes().forEach(function(v) {
401 if (v !== void 0 && graph.node(v) !== void 0) {
402 log.warn("Node " + v + ": " + JSON.stringify(graph.node(v)));
403 root.select("#" + svgElem.id + " #" + v).attr(
404 "transform",
405 "translate(" + (graph.node(v).x - graph.node(v).width / 2) + "," + (graph.node(v).y + (transformationLog[v] ? transformationLog[v].y : 0) - graph.node(v).height / 2) + " )"
406 );
407 root.select("#" + svgElem.id + " #" + v).attr("data-x-shift", graph.node(v).x - graph.node(v).width / 2);
408 const dividers = domDocument.querySelectorAll("#" + svgElem.id + " #" + v + " .divider");
409 dividers.forEach((divider) => {
410 const parent = divider.parentElement;
411 let pWidth = 0;
412 let pShift = 0;
413 if (parent) {
414 if (parent.parentElement) {
415 pWidth = parent.parentElement.getBBox().width;
416 }
417 pShift = parseInt(parent.getAttribute("data-x-shift"), 10);
418 if (Number.isNaN(pShift)) {
419 pShift = 0;
420 }
421 }
422 divider.setAttribute("x1", 0 - pShift + 8);
423 divider.setAttribute("x2", pWidth - pShift - 8);
424 });
425 } else {
426 log.debug("No Node " + v + ": " + JSON.stringify(graph.node(v)));
427 }
428 });
429 let stateBox = svgElem.getBBox();
430 graph.edges().forEach(function(e) {
431 if (e !== void 0 && graph.edge(e) !== void 0) {
432 log.debug("Edge " + e.v + " -> " + e.w + ": " + JSON.stringify(graph.edge(e)));
433 drawEdge(diagram2, graph.edge(e), graph.edge(e).relation);
434 }
435 });
436 stateBox = svgElem.getBBox();
437 const stateInfo = {
438 id: parentId ? parentId : "root",
439 label: parentId ? parentId : "root",
440 width: 0,
441 height: 0
442 };
443 stateInfo.width = stateBox.width + 2 * conf.padding;
444 stateInfo.height = stateBox.height + 2 * conf.padding;
445 log.debug("Doc rendered", stateInfo, graph);
446 return stateInfo;
447};
448const renderer = {
449 setConf,
450 draw
451};
452const diagram = {
453 parser,
454 db,
455 renderer,
456 styles,
457 init: (cnf) => {
458 if (!cnf.state) {
459 cnf.state = {};
460 }
461 cnf.state.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
462 db.clear();
463 }
464};
465export {
466 diagram
467};