|
1 | 1 | mermaid.initialize({ startOnLoad: false }); |
| 2 | + |
| 3 | +const _quartoMermaid = { |
| 4 | + // NB: there's effectively a copy of this function |
| 5 | + // in `core/svg.ts`. |
| 6 | + // if you change something here, you must keep it consistent there as well. |
| 7 | + setSvgSize(svg) { |
| 8 | + const { widthInPoints, heightInPoints } = this.resolveSize(svg); |
| 9 | + |
| 10 | + svg.setAttribute("width", widthInPoints); |
| 11 | + svg.setAttribute("height", heightInPoints); |
| 12 | + svg.style.maxWidth = null; // clear preset mermaid value. |
| 13 | + }, |
| 14 | + |
| 15 | + // NB: there's effectively a copy of this function |
| 16 | + // in `core/svg.ts`. |
| 17 | + // if you change something here, you must keep it consistent there as well. |
| 18 | + makeResponsive(svg) { |
| 19 | + const width = svg.getAttribute("width"); |
| 20 | + if (width === null) { |
| 21 | + throw new Error("Couldn't find SVG width"); |
| 22 | + } |
| 23 | + const numWidth = Number(width.slice(0, -2)); |
| 24 | + |
| 25 | + if (numWidth > 650) { |
| 26 | + changed = true; |
| 27 | + svg.setAttribute("width", "100%"); |
| 28 | + svg.removeAttribute("height"); |
| 29 | + } |
| 30 | + }, |
| 31 | + |
| 32 | + // NB: there's effectively a copy of this function |
| 33 | + // in `core/svg.ts`. |
| 34 | + // if you change something here, you must keep it consistent there as well. |
| 35 | + fixupAlignment(svg, align) { |
| 36 | + let style = svg.getAttribute("style") ?? ""; |
| 37 | + |
| 38 | + switch (align) { |
| 39 | + case "left": |
| 40 | + style = `${style} display: block; margin: auto auto auto 0`; |
| 41 | + break; |
| 42 | + case "right": |
| 43 | + style = `${style} display: block; margin: auto 0 auto auto`; |
| 44 | + break; |
| 45 | + case "center": |
| 46 | + style = `${style} display: block; margin: auto auto auto auto`; |
| 47 | + break; |
| 48 | + } |
| 49 | + svg.setAttribute("style", style); |
| 50 | + }, |
| 51 | + |
| 52 | + resolveOptions(svgEl) { |
| 53 | + return svgEl.parentElement.parentElement.parentElement.parentElement |
| 54 | + .dataset; |
| 55 | + }, |
| 56 | + |
| 57 | + // NB: there's effectively a copy of this function |
| 58 | + // in our mermaid runtime in `core/svg.ts`. |
| 59 | + // if you change something here, you must keep it consistent there as well. |
| 60 | + resolveSize(svgEl) { |
| 61 | + const inInches = (size) => { |
| 62 | + if (size.endsWith("in")) { |
| 63 | + return Number(size.slice(0, -2)); |
| 64 | + } |
| 65 | + if (size.endsWith("pt") || size.endsWith("px")) { |
| 66 | + // assume 96 dpi for now |
| 67 | + return Number(size.slice(0, -2)) / 96; |
| 68 | + } |
| 69 | + return Number(size); |
| 70 | + }; |
| 71 | + |
| 72 | + // these are figWidth and figHeight on purpose, |
| 73 | + // because data attributes are translated to camelCase by the DOM API |
| 74 | + const kFigWidth = "figWidth", |
| 75 | + kFigHeight = "figHeight"; |
| 76 | + const options = this.resolveOptions(svgEl); |
| 77 | + const width = svgEl.getAttribute("width"); |
| 78 | + const height = svgEl.getAttribute("height"); |
| 79 | + if (!width || !height) { |
| 80 | + // attempt to resolve figure dimensions via viewBox |
| 81 | + throw new Error("Internal error: couldn't find figure dimensions"); |
| 82 | + } |
| 83 | + const getViewBox = () => { |
| 84 | + const vb = svgEl.attributes.getNamedItem("viewBox").value; // do it the roundabout way so that viewBox isn't dropped by deno_dom and text/html |
| 85 | + if (!vb) return undefined; |
| 86 | + const lst = vb.trim().split(" ").map(Number); |
| 87 | + if (lst.length !== 4) return undefined; |
| 88 | + if (lst.some(isNaN)) return undefined; |
| 89 | + return lst; |
| 90 | + }; |
| 91 | + |
| 92 | + let svgWidthInInches, svgHeightInInches; |
| 93 | + |
| 94 | + if ( |
| 95 | + (width.slice(0, -2) === "pt" && height.slice(0, -2) === "pt") || |
| 96 | + (width.slice(0, -2) === "px" && height.slice(0, -2) === "px") || |
| 97 | + (!isNaN(Number(width)) && !isNaN(Number(height))) |
| 98 | + ) { |
| 99 | + // we assume 96 dpi which is generally what seems to be used. |
| 100 | + svgWidthInInches = Number(width.slice(0, -2)) / 96; |
| 101 | + svgHeightInInches = Number(height.slice(0, -2)) / 96; |
| 102 | + } |
| 103 | + const viewBox = getViewBox(); |
| 104 | + if (viewBox !== undefined) { |
| 105 | + // assume width and height come from viewbox. |
| 106 | + const [_mx, _my, vbWidth, vbHeight] = viewBox; |
| 107 | + svgWidthInInches = vbWidth / 96; |
| 108 | + svgHeightInInches = vbHeight / 96; |
| 109 | + } else { |
| 110 | + throw new Error( |
| 111 | + "Internal Error: Couldn't resolve width and height of SVG" |
| 112 | + ); |
| 113 | + } |
| 114 | + const svgWidthOverHeight = svgWidthInInches / svgHeightInInches; |
| 115 | + let widthInInches, heightInInches; |
| 116 | + |
| 117 | + if (options[kFigWidth] && options[kFigHeight]) { |
| 118 | + // both were prescribed, so just go with them |
| 119 | + widthInInches = inInches(String(options[kFigWidth])); |
| 120 | + heightInInches = inInches(String(options[kFigHeight])); |
| 121 | + } else if (options[kFigWidth]) { |
| 122 | + // we were only given width, use that and adjust height based on aspect ratio; |
| 123 | + widthInInches = inInches(String(options[kFigWidth])); |
| 124 | + heightInInches = widthInInches / svgWidthOverHeight; |
| 125 | + } else if (options[kFigHeight]) { |
| 126 | + // we were only given height, use that and adjust width based on aspect ratio; |
| 127 | + heightInInches = inInches(String(options[kFigHeight])); |
| 128 | + widthInInches = heightInInches * svgWidthOverHeight; |
| 129 | + } else { |
| 130 | + // we were not given either, use svg's prescribed height |
| 131 | + heightInInches = svgHeightInInches; |
| 132 | + widthInInches = svgWidthInInches; |
| 133 | + } |
| 134 | + |
| 135 | + return { |
| 136 | + widthInInches, |
| 137 | + heightInInches, |
| 138 | + widthInPoints: Math.round(widthInInches * 96), |
| 139 | + heightInPoints: Math.round(heightInInches * 96), |
| 140 | + }; |
| 141 | + }, |
| 142 | + |
| 143 | + postProcess(svg) { |
| 144 | + const options = this.resolveOptions(svg); |
| 145 | + if ( |
| 146 | + options.responsive && |
| 147 | + options["figWidth"] === undefined && |
| 148 | + options["figHeight"] === undefined |
| 149 | + ) { |
| 150 | + this.makeResponsive(svg); |
| 151 | + } else { |
| 152 | + this.setSvgSize(svg); |
| 153 | + } |
| 154 | + if (options["reveal"]) { |
| 155 | + this.fixupAlignment(svg, options["figAlign"] || "center"); |
| 156 | + } |
| 157 | + }, |
| 158 | +}; |
| 159 | + |
2 | 160 | // deno-lint-ignore no-window-prefix |
3 | 161 | window.addEventListener( |
4 | 162 | "load", |
5 | 163 | function () { |
6 | 164 | mermaid.init("div.cell-output-display pre.mermaid"); |
| 165 | + for (const svgEl of Array.from( |
| 166 | + document.querySelectorAll("div.cell-output-display pre.mermaid svg") |
| 167 | + )) { |
| 168 | + _quartoMermaid.postProcess(svgEl); |
| 169 | + } |
7 | 170 | }, |
8 | 171 | false |
9 | 172 | ); |
0 commit comments