UNPKG

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