UNPKG

9.92 kBJavaScriptView Raw
1import { p as parser, d as db, s as styles } from "./styles-237fcbdf.js";
2import { select, curveLinear } from "d3";
3import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
4import { l as log, c as getConfig, u as utils, p as setupGraphViewbox, o as interpolateToCurve, k as getStylesFromArray, e as common } from "./mermaid-a953d906.js";
5import { r as render } from "./index-05087a90.js";
6import "ts-dedent";
7import "dayjs/esm/index.js";
8import "@braintree/sanitize-url";
9import "dompurify";
10import "khroma";
11import "lodash-es/memoize.js";
12import "stylis";
13import "lodash-es/isEmpty.js";
14import "dagre-d3-es/src/dagre/index.js";
15import "dagre-d3-es/src/graphlib/json.js";
16import "./edges-97052da4.js";
17import "./createText-2f679d62.js";
18import "mdast-util-from-markdown";
19import "./svgDraw-6750006d.js";
20const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
21let conf = {
22 dividerMargin: 10,
23 padding: 5,
24 textHeight: 10,
25 curve: void 0
26};
27const addNamespaces = function(namespaces, g, _id, diagObj) {
28 const keys = Object.keys(namespaces);
29 log.info("keys:", keys);
30 log.info(namespaces);
31 keys.forEach(function(id) {
32 var _a, _b;
33 const vertex = namespaces[id];
34 const shape = "rect";
35 const node = {
36 shape,
37 id: vertex.id,
38 domId: vertex.domId,
39 labelText: sanitizeText(vertex.id),
40 labelStyle: "",
41 style: "fill: none; stroke: black",
42 // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
43 padding: ((_a = getConfig().flowchart) == null ? void 0 : _a.padding) ?? ((_b = getConfig().class) == null ? void 0 : _b.padding)
44 };
45 g.setNode(vertex.id, node);
46 addClasses(vertex.classes, g, _id, diagObj, vertex.id);
47 log.info("setNode", node);
48 });
49};
50const addClasses = function(classes, g, _id, diagObj, parent) {
51 const keys = Object.keys(classes);
52 log.info("keys:", keys);
53 log.info(classes);
54 keys.forEach(function(id) {
55 var _a, _b;
56 const vertex = classes[id];
57 let cssClassStr = "";
58 if (vertex.cssClasses.length > 0) {
59 cssClassStr = cssClassStr + " " + vertex.cssClasses.join(" ");
60 }
61 const styles2 = { labelStyle: "", style: "" };
62 const vertexText = vertex.label ?? vertex.id;
63 const radius = 0;
64 const shape = "class_box";
65 const node = {
66 labelStyle: styles2.labelStyle,
67 shape,
68 labelText: sanitizeText(vertexText),
69 classData: vertex,
70 rx: radius,
71 ry: radius,
72 class: cssClassStr,
73 style: styles2.style,
74 id: vertex.id,
75 domId: vertex.domId,
76 tooltip: diagObj.db.getTooltip(vertex.id, parent) || "",
77 haveCallback: vertex.haveCallback,
78 link: vertex.link,
79 width: vertex.type === "group" ? 500 : void 0,
80 type: vertex.type,
81 // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
82 padding: ((_a = getConfig().flowchart) == null ? void 0 : _a.padding) ?? ((_b = getConfig().class) == null ? void 0 : _b.padding)
83 };
84 g.setNode(vertex.id, node);
85 if (parent) {
86 g.setParent(vertex.id, parent);
87 }
88 log.info("setNode", node);
89 });
90};
91const addNotes = function(notes, g, startEdgeId, classes) {
92 log.info(notes);
93 notes.forEach(function(note, i) {
94 var _a, _b;
95 const vertex = note;
96 const cssNoteStr = "";
97 const styles2 = { labelStyle: "", style: "" };
98 const vertexText = vertex.text;
99 const radius = 0;
100 const shape = "note";
101 const node = {
102 labelStyle: styles2.labelStyle,
103 shape,
104 labelText: sanitizeText(vertexText),
105 noteData: vertex,
106 rx: radius,
107 ry: radius,
108 class: cssNoteStr,
109 style: styles2.style,
110 id: vertex.id,
111 domId: vertex.id,
112 tooltip: "",
113 type: "note",
114 // TODO V10: Flowchart ? Keeping flowchart for backwards compatibility. Remove in next major release
115 padding: ((_a = getConfig().flowchart) == null ? void 0 : _a.padding) ?? ((_b = getConfig().class) == null ? void 0 : _b.padding)
116 };
117 g.setNode(vertex.id, node);
118 log.info("setNode", node);
119 if (!vertex.class || !(vertex.class in classes)) {
120 return;
121 }
122 const edgeId = startEdgeId + i;
123 const edgeData = {
124 id: `edgeNote${edgeId}`,
125 //Set relationship style and line type
126 classes: "relation",
127 pattern: "dotted",
128 // Set link type for rendering
129 arrowhead: "none",
130 //Set edge extra labels
131 startLabelRight: "",
132 endLabelLeft: "",
133 //Set relation arrow types
134 arrowTypeStart: "none",
135 arrowTypeEnd: "none",
136 style: "fill:none",
137 labelStyle: "",
138 curve: interpolateToCurve(conf.curve, curveLinear)
139 };
140 g.setEdge(vertex.id, vertex.class, edgeData, edgeId);
141 });
142};
143const addRelations = function(relations, g) {
144 const conf2 = getConfig().flowchart;
145 let cnt = 0;
146 relations.forEach(function(edge) {
147 var _a;
148 cnt++;
149 const edgeData = {
150 //Set relationship style and line type
151 classes: "relation",
152 pattern: edge.relation.lineType == 1 ? "dashed" : "solid",
153 id: "id" + cnt,
154 // Set link type for rendering
155 arrowhead: edge.type === "arrow_open" ? "none" : "normal",
156 //Set edge extra labels
157 startLabelRight: edge.relationTitle1 === "none" ? "" : edge.relationTitle1,
158 endLabelLeft: edge.relationTitle2 === "none" ? "" : edge.relationTitle2,
159 //Set relation arrow types
160 arrowTypeStart: getArrowMarker(edge.relation.type1),
161 arrowTypeEnd: getArrowMarker(edge.relation.type2),
162 style: "fill:none",
163 labelStyle: "",
164 curve: interpolateToCurve(conf2 == null ? void 0 : conf2.curve, curveLinear)
165 };
166 log.info(edgeData, edge);
167 if (edge.style !== void 0) {
168 const styles2 = getStylesFromArray(edge.style);
169 edgeData.style = styles2.style;
170 edgeData.labelStyle = styles2.labelStyle;
171 }
172 edge.text = edge.title;
173 if (edge.text === void 0) {
174 if (edge.style !== void 0) {
175 edgeData.arrowheadStyle = "fill: #333";
176 }
177 } else {
178 edgeData.arrowheadStyle = "fill: #333";
179 edgeData.labelpos = "c";
180 if (((_a = getConfig().flowchart) == null ? void 0 : _a.htmlLabels) ?? getConfig().htmlLabels) {
181 edgeData.labelType = "html";
182 edgeData.label = '<span class="edgeLabel">' + edge.text + "</span>";
183 } else {
184 edgeData.labelType = "text";
185 edgeData.label = edge.text.replace(common.lineBreakRegex, "\n");
186 if (edge.style === void 0) {
187 edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none";
188 }
189 edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:");
190 }
191 }
192 g.setEdge(edge.id1, edge.id2, edgeData, cnt);
193 });
194};
195const setConf = function(cnf) {
196 conf = {
197 ...conf,
198 ...cnf
199 };
200};
201const draw = async function(text, id, _version, diagObj) {
202 log.info("Drawing class - ", id);
203 const conf2 = getConfig().flowchart ?? getConfig().class;
204 const securityLevel = getConfig().securityLevel;
205 log.info("config:", conf2);
206 const nodeSpacing = (conf2 == null ? void 0 : conf2.nodeSpacing) ?? 50;
207 const rankSpacing = (conf2 == null ? void 0 : conf2.rankSpacing) ?? 50;
208 const g = new graphlib.Graph({
209 multigraph: true,
210 compound: true
211 }).setGraph({
212 rankdir: diagObj.db.getDirection(),
213 nodesep: nodeSpacing,
214 ranksep: rankSpacing,
215 marginx: 8,
216 marginy: 8
217 }).setDefaultEdgeLabel(function() {
218 return {};
219 });
220 const namespaces = diagObj.db.getNamespaces();
221 const classes = diagObj.db.getClasses();
222 const relations = diagObj.db.getRelations();
223 const notes = diagObj.db.getNotes();
224 log.info(relations);
225 addNamespaces(namespaces, g, id, diagObj);
226 addClasses(classes, g, id, diagObj);
227 addRelations(relations, g);
228 addNotes(notes, g, relations.length + 1, classes);
229 let sandboxElement;
230 if (securityLevel === "sandbox") {
231 sandboxElement = select("#i" + id);
232 }
233 const root = securityLevel === "sandbox" ? (
234 // @ts-ignore Ignore type error for now
235 select(sandboxElement.nodes()[0].contentDocument.body)
236 ) : select("body");
237 const svg = root.select(`[id="${id}"]`);
238 const element = root.select("#" + id + " g");
239 await render(
240 element,
241 g,
242 ["aggregation", "extension", "composition", "dependency", "lollipop"],
243 "classDiagram",
244 id
245 );
246 utils.insertTitle(svg, "classTitleText", (conf2 == null ? void 0 : conf2.titleTopMargin) ?? 5, diagObj.db.getDiagramTitle());
247 setupGraphViewbox(g, svg, conf2 == null ? void 0 : conf2.diagramPadding, conf2 == null ? void 0 : conf2.useMaxWidth);
248 if (!(conf2 == null ? void 0 : conf2.htmlLabels)) {
249 const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document;
250 const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label');
251 for (const label of labels) {
252 const dim = label.getBBox();
253 const rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect");
254 rect.setAttribute("rx", 0);
255 rect.setAttribute("ry", 0);
256 rect.setAttribute("width", dim.width);
257 rect.setAttribute("height", dim.height);
258 label.insertBefore(rect, label.firstChild);
259 }
260 }
261};
262function getArrowMarker(type) {
263 let marker;
264 switch (type) {
265 case 0:
266 marker = "aggregation";
267 break;
268 case 1:
269 marker = "extension";
270 break;
271 case 2:
272 marker = "composition";
273 break;
274 case 3:
275 marker = "dependency";
276 break;
277 case 4:
278 marker = "lollipop";
279 break;
280 default:
281 marker = "none";
282 }
283 return marker;
284}
285const renderer = {
286 setConf,
287 draw
288};
289const diagram = {
290 parser,
291 db,
292 renderer,
293 styles,
294 init: (cnf) => {
295 if (!cnf.class) {
296 cnf.class = {};
297 }
298 cnf.class.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
299 db.clear();
300 }
301};
302export {
303 diagram
304};