import { G as Graph } from "./layout-a7b9ff07.js"; import { S as Selection, u as root, v as array, _, C as Color, x as isPlainObject, y as isFunction, o as getStylesFromArray, l as log, p as evaluate, c as getConfig, f as common, q as interpolateToCurve, n as curveLinear, j as d3select, z as utils, r as setupGraphViewbox, A as rgba } from "./mermaid-491db2d9.js"; import { r as render } from "./index-cc269c15.js"; function selectAll(selector) { return typeof selector === "string" ? new Selection([document.querySelectorAll(selector)], [document.documentElement]) : new Selection([array(selector)], root); } const channel = (color, channel2) => { return _.lang.round(Color.parse(color)[channel2]); }; const channel$1 = channel; function isSubgraph(g, v) { return !!g.children(v).length; } function edgeToId(e) { return escapeId(e.v) + ":" + escapeId(e.w) + ":" + escapeId(e.name); } var ID_DELIM = /:/g; function escapeId(str) { return str ? String(str).replace(ID_DELIM, "\\:") : ""; } function applyStyle(dom, styleFn) { if (styleFn) { dom.attr("style", styleFn); } } function applyClass(dom, classFn, otherClasses) { if (classFn) { dom.attr("class", classFn).attr("class", otherClasses + " " + dom.attr("class")); } } function applyTransition(selection, g) { var graph = g.graph(); if (isPlainObject(graph)) { var transition = graph.transition; if (isFunction(transition)) { return transition(selection); } } return selection; } function addHtmlLabel(root2, node) { var fo = root2.append("foreignObject").attr("width", "100000"); var div = fo.append("xhtml:div"); div.attr("xmlns", "http://www.w3.org/1999/xhtml"); var label = node.label; switch (typeof label) { case "function": div.insert(label); break; case "object": div.insert(function() { return label; }); break; default: div.html(label); } applyStyle(div, node.labelStyle); div.style("display", "inline-block"); div.style("white-space", "nowrap"); var client = div.node().getBoundingClientRect(); fo.attr("width", client.width).attr("height", client.height); return fo; } const conf = {}; const setConf = function(cnf) { const keys = Object.keys(cnf); for (const key of keys) { conf[key] = cnf[key]; } }; const addVertices = function(vert, g, svgId, root2, doc, diagObj) { const svg = root2.select(`[id="${svgId}"]`); const keys = Object.keys(vert); keys.forEach(function(id) { const vertex = vert[id]; let classStr = "default"; if (vertex.classes.length > 0) { classStr = vertex.classes.join(" "); } classStr = classStr + " flowchart-label"; const styles = getStylesFromArray(vertex.styles); let vertexText = vertex.text !== void 0 ? vertex.text : vertex.id; let vertexNode; log.info("vertex", vertex, vertex.labelType); if (vertex.labelType === "markdown") { log.info("vertex", vertex, vertex.labelType); } else { if (evaluate(getConfig().flowchart.htmlLabels)) { const node = { label: vertexText.replace( /fa[blrs]?:fa-[\w-]+/g, (s) => `` ) }; vertexNode = addHtmlLabel(svg, node).node(); vertexNode.parentNode.removeChild(vertexNode); } else { const svgLabel = doc.createElementNS("http://www.w3.org/2000/svg", "text"); svgLabel.setAttribute("style", styles.labelStyle.replace("color:", "fill:")); const rows = vertexText.split(common.lineBreakRegex); for (const row of rows) { const tspan = doc.createElementNS("http://www.w3.org/2000/svg", "tspan"); tspan.setAttributeNS("http://www.w3.org/XML/1998/namespace", "xml:space", "preserve"); tspan.setAttribute("dy", "1em"); tspan.setAttribute("x", "1"); tspan.textContent = row; svgLabel.appendChild(tspan); } vertexNode = svgLabel; } } let radious = 0; let _shape = ""; switch (vertex.type) { case "round": radious = 5; _shape = "rect"; break; case "square": _shape = "rect"; break; case "diamond": _shape = "question"; break; case "hexagon": _shape = "hexagon"; break; case "odd": _shape = "rect_left_inv_arrow"; break; case "lean_right": _shape = "lean_right"; break; case "lean_left": _shape = "lean_left"; break; case "trapezoid": _shape = "trapezoid"; break; case "inv_trapezoid": _shape = "inv_trapezoid"; break; case "odd_right": _shape = "rect_left_inv_arrow"; break; case "circle": _shape = "circle"; break; case "ellipse": _shape = "ellipse"; break; case "stadium": _shape = "stadium"; break; case "subroutine": _shape = "subroutine"; break; case "cylinder": _shape = "cylinder"; break; case "group": _shape = "rect"; break; case "doublecircle": _shape = "doublecircle"; break; default: _shape = "rect"; } g.setNode(vertex.id, { labelStyle: styles.labelStyle, shape: _shape, labelText: vertexText, labelType: vertex.labelType, rx: radious, ry: radious, class: classStr, style: styles.style, id: vertex.id, link: vertex.link, linkTarget: vertex.linkTarget, tooltip: diagObj.db.getTooltip(vertex.id) || "", domId: diagObj.db.lookUpDomId(vertex.id), haveCallback: vertex.haveCallback, width: vertex.type === "group" ? 500 : void 0, dir: vertex.dir, type: vertex.type, props: vertex.props, padding: getConfig().flowchart.padding }); log.info("setNode", { labelStyle: styles.labelStyle, labelType: vertex.labelType, shape: _shape, labelText: vertexText, rx: radious, ry: radious, class: classStr, style: styles.style, id: vertex.id, domId: diagObj.db.lookUpDomId(vertex.id), width: vertex.type === "group" ? 500 : void 0, type: vertex.type, dir: vertex.dir, props: vertex.props, padding: getConfig().flowchart.padding }); }); }; const addEdges = function(edges, g, diagObj) { log.info("abc78 edges = ", edges); let cnt = 0; let linkIdCnt = {}; let defaultStyle; let defaultLabelStyle; if (edges.defaultStyle !== void 0) { const defaultStyles = getStylesFromArray(edges.defaultStyle); defaultStyle = defaultStyles.style; defaultLabelStyle = defaultStyles.labelStyle; } edges.forEach(function(edge) { cnt++; const linkIdBase = "L-" + edge.start + "-" + edge.end; if (linkIdCnt[linkIdBase] === void 0) { linkIdCnt[linkIdBase] = 0; log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]); } else { linkIdCnt[linkIdBase]++; log.info("abc78 new entry", linkIdBase, linkIdCnt[linkIdBase]); } let linkId = linkIdBase + "-" + linkIdCnt[linkIdBase]; log.info("abc78 new link id to be used is", linkIdBase, linkId, linkIdCnt[linkIdBase]); const linkNameStart = "LS-" + edge.start; const linkNameEnd = "LE-" + edge.end; const edgeData = { style: "", labelStyle: "" }; edgeData.minlen = edge.length || 1; if (edge.type === "arrow_open") { edgeData.arrowhead = "none"; } else { edgeData.arrowhead = "normal"; } edgeData.arrowTypeStart = "arrow_open"; edgeData.arrowTypeEnd = "arrow_open"; switch (edge.type) { case "double_arrow_cross": edgeData.arrowTypeStart = "arrow_cross"; case "arrow_cross": edgeData.arrowTypeEnd = "arrow_cross"; break; case "double_arrow_point": edgeData.arrowTypeStart = "arrow_point"; case "arrow_point": edgeData.arrowTypeEnd = "arrow_point"; break; case "double_arrow_circle": edgeData.arrowTypeStart = "arrow_circle"; case "arrow_circle": edgeData.arrowTypeEnd = "arrow_circle"; break; } let style = ""; let labelStyle = ""; switch (edge.stroke) { case "normal": style = "fill:none;"; if (defaultStyle !== void 0) { style = defaultStyle; } if (defaultLabelStyle !== void 0) { labelStyle = defaultLabelStyle; } edgeData.thickness = "normal"; edgeData.pattern = "solid"; break; case "dotted": edgeData.thickness = "normal"; edgeData.pattern = "dotted"; edgeData.style = "fill:none;stroke-width:2px;stroke-dasharray:3;"; break; case "thick": edgeData.thickness = "thick"; edgeData.pattern = "solid"; edgeData.style = "stroke-width: 3.5px;fill:none;"; break; case "invisible": edgeData.thickness = "invisible"; edgeData.pattern = "solid"; edgeData.style = "stroke-width: 0;fill:none;"; break; } if (edge.style !== void 0) { const styles = getStylesFromArray(edge.style); style = styles.style; labelStyle = styles.labelStyle; } edgeData.style = edgeData.style += style; edgeData.labelStyle = edgeData.labelStyle += labelStyle; if (edge.interpolate !== void 0) { edgeData.curve = interpolateToCurve(edge.interpolate, curveLinear); } else if (edges.defaultInterpolate !== void 0) { edgeData.curve = interpolateToCurve(edges.defaultInterpolate, curveLinear); } else { edgeData.curve = interpolateToCurve(conf.curve, curveLinear); } if (edge.text === void 0) { if (edge.style !== void 0) { edgeData.arrowheadStyle = "fill: #333"; } } else { edgeData.arrowheadStyle = "fill: #333"; edgeData.labelpos = "c"; } edgeData.labelType = edge.labelType; edgeData.label = edge.text.replace(common.lineBreakRegex, "\n"); if (edge.style === void 0) { edgeData.style = edgeData.style || "stroke: #333; stroke-width: 1.5px;fill:none;"; } edgeData.labelStyle = edgeData.labelStyle.replace("color:", "fill:"); edgeData.id = linkId; edgeData.classes = "flowchart-link " + linkNameStart + " " + linkNameEnd; g.setEdge(edge.start, edge.end, edgeData, cnt); }); }; const getClasses = function(text, diagObj) { return diagObj.db.getClasses(); }; const draw = async function(text, id, _version, diagObj) { log.info("Drawing flowchart"); let dir = diagObj.db.getDirection(); if (dir === void 0) { dir = "TD"; } const { securityLevel, flowchart: conf2 } = getConfig(); const nodeSpacing = conf2.nodeSpacing || 50; const rankSpacing = conf2.rankSpacing || 50; let sandboxElement; if (securityLevel === "sandbox") { sandboxElement = d3select("#i" + id); } const root2 = securityLevel === "sandbox" ? d3select(sandboxElement.nodes()[0].contentDocument.body) : d3select("body"); const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document; const g = new Graph({ multigraph: true, compound: true }).setGraph({ rankdir: dir, nodesep: nodeSpacing, ranksep: rankSpacing, marginx: 0, marginy: 0 }).setDefaultEdgeLabel(function() { return {}; }); let subG; const subGraphs = diagObj.db.getSubGraphs(); log.info("Subgraphs - ", subGraphs); for (let i2 = subGraphs.length - 1; i2 >= 0; i2--) { subG = subGraphs[i2]; log.info("Subgraph - ", subG); diagObj.db.addVertex( subG.id, { text: subG.title, type: subG.labelType }, "group", void 0, subG.classes, subG.dir ); } const vert = diagObj.db.getVertices(); const edges = diagObj.db.getEdges(); log.info("Edges", edges); let i = 0; for (i = subGraphs.length - 1; i >= 0; i--) { subG = subGraphs[i]; selectAll("cluster").append("text"); for (let j = 0; j < subG.nodes.length; j++) { log.info("Setting up subgraphs", subG.nodes[j], subG.id); g.setParent(subG.nodes[j], subG.id); } } addVertices(vert, g, id, root2, doc, diagObj); addEdges(edges, g); const svg = root2.select(`[id="${id}"]`); const element = root2.select("#" + id + " g"); await render(element, g, ["point", "circle", "cross"], "flowchart", id); utils.insertTitle(svg, "flowchartTitleText", conf2.titleTopMargin, diagObj.db.getDiagramTitle()); setupGraphViewbox(g, svg, conf2.diagramPadding, conf2.useMaxWidth); diagObj.db.indexNodes("subGraph" + i); if (!conf2.htmlLabels) { const labels = doc.querySelectorAll('[id="' + id + '"] .edgeLabel .label'); for (const label of labels) { const dim = label.getBBox(); const rect = doc.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("rx", 0); rect.setAttribute("ry", 0); rect.setAttribute("width", dim.width); rect.setAttribute("height", dim.height); label.insertBefore(rect, label.firstChild); } } const keys = Object.keys(vert); keys.forEach(function(key) { const vertex = vert[key]; if (vertex.link) { const node = d3select("#" + id + ' [id="' + key + '"]'); if (node) { const link = doc.createElementNS("http://www.w3.org/2000/svg", "a"); link.setAttributeNS("http://www.w3.org/2000/svg", "class", vertex.classes.join(" ")); link.setAttributeNS("http://www.w3.org/2000/svg", "href", vertex.link); link.setAttributeNS("http://www.w3.org/2000/svg", "rel", "noopener"); if (securityLevel === "sandbox") { link.setAttributeNS("http://www.w3.org/2000/svg", "target", "_top"); } else if (vertex.linkTarget) { link.setAttributeNS("http://www.w3.org/2000/svg", "target", vertex.linkTarget); } const linkNode = node.insert(function() { return link; }, ":first-child"); const shape = node.select(".label-container"); if (shape) { linkNode.append(function() { return shape.node(); }); } const label = node.select(".label"); if (label) { linkNode.append(function() { return label.node(); }); } } } }); }; const flowRendererV2 = { setConf, addVertices, addEdges, getClasses, draw }; const fade = (color, opacity) => { const channel2 = channel$1; const r = channel2(color, "r"); const g = channel2(color, "g"); const b = channel2(color, "b"); return rgba(r, g, b, opacity); }; const getStyles = (options) => `.label { font-family: ${options.fontFamily}; color: ${options.nodeTextColor || options.textColor}; } .cluster-label text { fill: ${options.titleColor}; } .cluster-label span,p { color: ${options.titleColor}; } .label text,span,p { fill: ${options.nodeTextColor || options.textColor}; color: ${options.nodeTextColor || options.textColor}; } .node rect, .node circle, .node ellipse, .node polygon, .node path { fill: ${options.mainBkg}; stroke: ${options.nodeBorder}; stroke-width: 1px; } .flowchart-label text { text-anchor: middle; } // .flowchart-label .text-outer-tspan { // text-anchor: middle; // } // .flowchart-label .text-inner-tspan { // text-anchor: start; // } .node .label { text-align: center; } .node.clickable { cursor: pointer; } .arrowheadPath { fill: ${options.arrowheadColor}; } .edgePath .path { stroke: ${options.lineColor}; stroke-width: 2.0px; } .flowchart-link { stroke: ${options.lineColor}; fill: none; } .edgeLabel { background-color: ${options.edgeLabelBackground}; rect { opacity: 0.5; background-color: ${options.edgeLabelBackground}; fill: ${options.edgeLabelBackground}; } text-align: center; } /* For html labels only */ .labelBkg { background-color: ${fade(options.edgeLabelBackground, 0.5)}; // background-color: } .cluster rect { fill: ${options.clusterBkg}; stroke: ${options.clusterBorder}; stroke-width: 1px; } .cluster text { fill: ${options.titleColor}; } .cluster span,p { color: ${options.titleColor}; } /* .cluster div { color: ${options.titleColor}; } */ div.mermaidTooltip { position: absolute; text-align: center; max-width: 200px; padding: 2px; font-family: ${options.fontFamily}; font-size: 12px; background: ${options.tertiaryColor}; border: 1px solid ${options.border2}; border-radius: 2px; pointer-events: none; z-index: 100; } .flowchartTitleText { text-anchor: middle; font-size: 18px; fill: ${options.textColor}; } `; const flowStyles = getStyles; export { applyStyle as a, addHtmlLabel as b, applyTransition as c, applyClass as d, edgeToId as e, flowRendererV2 as f, flowStyles as g, isSubgraph as i, selectAll as s };