diff options
Diffstat (limited to 'themes/blowfish/assets/lib/mermaid/styles-483fbfea.js')
| -rw-r--r-- | themes/blowfish/assets/lib/mermaid/styles-483fbfea.js | 509 |
1 files changed, 509 insertions, 0 deletions
diff --git a/themes/blowfish/assets/lib/mermaid/styles-483fbfea.js b/themes/blowfish/assets/lib/mermaid/styles-483fbfea.js new file mode 100644 index 0000000..8c417e3 --- /dev/null +++ b/themes/blowfish/assets/lib/mermaid/styles-483fbfea.js @@ -0,0 +1,509 @@ +import * as graphlib from "dagre-d3-es/src/graphlib/index.js"; +import { curveLinear, select, selectAll } from "d3"; +import { k as getStylesFromArray, l as log, m as evaluate, c as getConfig, e as common, r as renderKatex, n as interpolateToCurve, u as utils, o as setupGraphViewbox } from "./mermaid-6dc72991.js"; +import { r as render } from "./index-01f381cb.js"; +import { addHtmlLabel } from "dagre-d3-es/src/dagre-js/label/add-html-label.js"; +import * as khroma from "khroma"; +const conf = {}; +const setConf = function(cnf) { + const keys = Object.keys(cnf); + for (const key of keys) { + conf[key] = cnf[key]; + } +}; +const addVertices = async function(vert, g, svgId, root, doc, diagObj) { + const svg = root.select(`[id="${svgId}"]`); + const keys = Object.keys(vert); + for (const id of keys) { + 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 + }; + 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 radius = 0; + let _shape = ""; + switch (vertex.type) { + case "round": + radius = 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"; + } + const labelText = await renderKatex(vertexText, getConfig()); + g.setNode(vertex.id, { + labelStyle: styles.labelStyle, + shape: _shape, + labelText, + labelType: vertex.labelType, + rx: radius, + ry: radius, + 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, + rx: radius, + ry: radius, + 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 = async 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; + } + for (const edge of edges) { + 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 = await renderKatex(edge.text.replace(common.lineBreakRegex, "\n"), getConfig()); + 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 = select("#i" + id); + } + const root = securityLevel === "sandbox" ? select(sandboxElement.nodes()[0].contentDocument.body) : select("body"); + const doc = securityLevel === "sandbox" ? sandboxElement.nodes()[0].contentDocument : document; + const g = new graphlib.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); + } + } + await addVertices(vert, g, id, root, doc, diagObj); + await addEdges(edges, g); + const svg = root.select(`[id="${id}"]`); + const element = root.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 = select("#" + 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 channel = khroma.channel; + const r = channel(color, "r"); + const g = channel(color, "g"); + const b = channel(color, "b"); + return khroma.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 .katex path { + fill: #000; + stroke: #000; + stroke-width: 1px; + } + + .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 { + flowStyles as a, + flowRendererV2 as f +}; |