1 | import { p as parser, d as db, s as styles } from "./styles-237fcbdf.js";
|
2 | import { select, curveLinear } from "d3";
|
3 | import * as graphlib from "dagre-d3-es/src/graphlib/index.js";
|
4 | import { 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";
|
5 | import { r as render } from "./index-05087a90.js";
|
6 | import "ts-dedent";
|
7 | import "dayjs/esm/index.js";
|
8 | import "@braintree/sanitize-url";
|
9 | import "dompurify";
|
10 | import "khroma";
|
11 | import "lodash-es/memoize.js";
|
12 | import "stylis";
|
13 | import "lodash-es/isEmpty.js";
|
14 | import "dagre-d3-es/src/dagre/index.js";
|
15 | import "dagre-d3-es/src/graphlib/json.js";
|
16 | import "./edges-97052da4.js";
|
17 | import "./createText-2f679d62.js";
|
18 | import "mdast-util-from-markdown";
|
19 | import "./svgDraw-6750006d.js";
|
20 | const sanitizeText = (txt) => common.sanitizeText(txt, getConfig());
|
21 | let conf = {
|
22 | dividerMargin: 10,
|
23 | padding: 5,
|
24 | textHeight: 10,
|
25 | curve: void 0
|
26 | };
|
27 | const 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 |
|
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 | };
|
50 | const 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 |
|
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 | };
|
91 | const 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 |
|
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 |
|
126 | classes: "relation",
|
127 | pattern: "dotted",
|
128 |
|
129 | arrowhead: "none",
|
130 |
|
131 | startLabelRight: "",
|
132 | endLabelLeft: "",
|
133 |
|
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 | };
|
143 | const 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 |
|
151 | classes: "relation",
|
152 | pattern: edge.relation.lineType == 1 ? "dashed" : "solid",
|
153 | id: "id" + cnt,
|
154 |
|
155 | arrowhead: edge.type === "arrow_open" ? "none" : "normal",
|
156 |
|
157 | startLabelRight: edge.relationTitle1 === "none" ? "" : edge.relationTitle1,
|
158 | endLabelLeft: edge.relationTitle2 === "none" ? "" : edge.relationTitle2,
|
159 |
|
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 | };
|
195 | const setConf = function(cnf) {
|
196 | conf = {
|
197 | ...conf,
|
198 | ...cnf
|
199 | };
|
200 | };
|
201 | const 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 |
|
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 | };
|
262 | function 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 | }
|
285 | const renderer = {
|
286 | setConf,
|
287 | draw
|
288 | };
|
289 | const 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 | };
|
302 | export {
|
303 | diagram
|
304 | };
|