Re-rendering of Lesson 3

pub/Lesson-03_files/libs/quarto-diagram/mermaid-init.js

@@ -1,3 +1,8 @@
+// mermaid-init.js
+// Initializes the quarto-mermaid JS runtime
+//
+// Copyright (C) 2022 Posit Software, PBC
+
 /**
  * String.prototype.replaceAll() polyfill
  * https://gomakethings.com/how-to-replace-a-section-of-a-string-with-another-one-with-vanilla-js/
@@ -18,18 +23,48 @@ if (!String.prototype.replaceAll) {
   };
 }
 
-mermaid.initialize({ startOnLoad: false });
+const mermaidOpts = {
+  startOnLoad: false,
+  flowchart: {
+    htmlLabels: "false",
+  },
+};
+// this CSS is adapted from
+// mkdocs-material
+// Copyright (c) 2016-2022 Martin Donath <martin.donath@squidfunk.com>
+
+const defaultCSS =
+  '.label text {fill: var(--mermaid-fg-color);}.node circle, .node ellipse, .node path, .node polygon, .node rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}marker {fill: var(--mermaid-edge-color) !important;}.edgeLabel .label rect {fill: #0000;}.label {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.label foreignObject {line-height: normal;overflow: visible;}.label div .edgeLabel {color: var(--mermaid-label-fg-color);}.edgeLabel, .edgeLabel rect, .label div .edgeLabel {background-color: var(--mermaid-label-bg-color);}.edgeLabel, .edgeLabel rect {fill: var(--mermaid-label-bg-color);color: var(--mermaid-edge-color);}.edgePath .path, .flowchart-link {stroke: var(--mermaid-edge-color);}.edgePath .arrowheadPath {fill: var(--mermaid-edge-color);stroke: none;}.cluster rect {fill: var(--mermaid-fg-color--lightest);stroke: var(--mermaid-fg-color--lighter);}.cluster span {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}defs #flowchart-circleEnd, defs #flowchart-circleStart, defs #flowchart-crossEnd, defs #flowchart-crossStart, defs #flowchart-pointEnd, defs #flowchart-pointStart {stroke: none;}g.classGroup line, g.classGroup rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}g.classGroup text {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.classLabel .box {fill: var(--mermaid-label-bg-color);background-color: var(--mermaid-label-bg-color);opacity: 1;}.classLabel .label {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.node .divider {stroke: var(--mermaid-node-fg-color);}.relation {stroke: var(--mermaid-edge-color);}.cardinality {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.cardinality text {fill: inherit !important;}defs #classDiagram-compositionEnd, defs #classDiagram-compositionStart, defs #classDiagram-dependencyEnd, defs #classDiagram-dependencyStart, defs #classDiagram-extensionEnd, defs #classDiagram-extensionStart {fill: var(--mermaid-edge-color) !important;stroke: var(--mermaid-edge-color) !important;}defs #classDiagram-aggregationEnd, defs #classDiagram-aggregationStart {fill: var(--mermaid-label-bg-color) !important;stroke: var(--mermaid-edge-color) !important;}g.stateGroup rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}g.stateGroup .state-title {fill: var(--mermaid-label-fg-color) !important;font-family: var(--mermaid-font-family);}g.stateGroup .composit {fill: var(--mermaid-label-bg-color);}.nodeLabel {color: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.node circle.state-end, .node circle.state-start, .start-state {fill: var(--mermaid-edge-color);stroke: none;}.end-state-inner, .end-state-outer {fill: var(--mermaid-edge-color);}.end-state-inner, .node circle.state-end {stroke: var(--mermaid-label-bg-color);}.transition {stroke: var(--mermaid-edge-color);}[id^="state-fork"] rect, [id^="state-join"] rect {fill: var(--mermaid-edge-color) !important;stroke: none !important;}.statediagram-cluster.statediagram-cluster .inner {fill: var(--mermaid-bg-color);}.statediagram-cluster rect {fill: var(--mermaid-node-bg-color);stroke: var(--mermaid-node-fg-color);}.statediagram-state rect.divider {fill: var(--mermaid-fg-color--lightest);stroke: var(--mermaid-fg-color--lighter);}defs #statediagram-barbEnd {stroke: var(--mermaid-edge-color);}.entityBox {fill: var(--mermaid-label-bg-color);stroke: var(--mermaid-node-fg-color);}.entityLabel {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}.relationshipLabelBox {fill: var(--mermaid-label-bg-color);fill-opacity: 1;background-color: var(--mermaid-label-bg-color);opacity: 1;}.relationshipLabel {fill: var(--mermaid-label-fg-color);}.relationshipLine {stroke: var(--mermaid-edge-color);}defs #ONE_OR_MORE_END *, defs #ONE_OR_MORE_START *, defs #ONLY_ONE_END *, defs #ONLY_ONE_START *, defs #ZERO_OR_MORE_END *, defs #ZERO_OR_MORE_START *, defs #ZERO_OR_ONE_END *, defs #ZERO_OR_ONE_START * {stroke: var(--mermaid-edge-color) !important;}.actor, defs #ZERO_OR_MORE_END circle, defs #ZERO_OR_MORE_START circle {fill: var(--mermaid-label-bg-color);}.actor {stroke: var(--mermaid-node-fg-color);}text.actor > tspan {fill: var(--mermaid-label-fg-color);font-family: var(--mermaid-font-family);}line {stroke: var(--mermaid-fg-color--lighter);}.messageLine0, .messageLine1 {stroke: var(--mermaid-edge-color);}.loopText > tspan, .messageText, .noteText > tspan {fill: var(--mermaid-edge-color);stroke: none;font-family: var(--mermaid-font-family) !important;}.noteText > tspan {fill: #000;}#arrowhead path {fill: var(--mermaid-edge-color);stroke: none;}.loopLine {stroke: var(--mermaid-node-fg-color);}.labelBox, .loopLine {fill: var(--mermaid-node-bg-color);}.labelBox {stroke: none;}.labelText, .labelText > span {fill: var(--mermaid-node-fg-color);font-family: var(--mermaid-font-family);}';
+
+const mermaidThemeEl = document.querySelector('meta[name="mermaid-theme"]');
+if (mermaidThemeEl) {
+  mermaidOpts.theme = mermaidThemeEl.content;
+} else {
+  mermaidOpts.themeCSS = defaultCSS;
+}
+
+mermaid.initialize(mermaidOpts);
 
 const _quartoMermaid = {
   // NB: there's effectively a copy of this function
   // in `core/svg.ts`.
   // if you change something here, you must keep it consistent there as well.
   setSvgSize(svg) {
-    const { widthInPoints, heightInPoints } = this.resolveSize(svg);
+    const { widthInPoints, heightInPoints, explicitHeight, explicitWidth } =
+      this.resolveSize(svg);
 
-    svg.setAttribute("width", widthInPoints);
-    svg.setAttribute("height", heightInPoints);
-    svg.style.maxWidth = null; // clear preset mermaid value.
+    if (explicitWidth && explicitHeight) {
+      svg.setAttribute("width", widthInPoints);
+      svg.setAttribute("height", heightInPoints);
+      svg.style.maxWidth = null; // remove mermaid's default max-width
+    } else {
+      if (explicitWidth) {
+        svg.style.maxWidth = `${widthInPoints}px`;
+      }
+      if (explicitHeight) {
+        svg.style.maxHeight = `${heightInPoints}px`;
+      }
+    }
   },
 
   // NB: there's effectively a copy of this function
@@ -57,13 +92,13 @@ const _quartoMermaid = {
 
     switch (align) {
       case "left":
-        style = `${style} display: block; margin: auto auto auto 0`;
+        style = `${style}; display: block; margin: auto auto auto 0`;
         break;
       case "right":
-        style = `${style} display: block; margin: auto 0 auto auto`;
+        style = `${style}; display: block; margin: auto 0 auto auto`;
         break;
       case "center":
-        style = `${style} display: block; margin: auto auto auto auto`;
+        style = `${style}; display: block; margin: auto auto auto auto`;
         break;
     }
     svg.setAttribute("style", style);
@@ -157,6 +192,8 @@ const _quartoMermaid = {
       heightInInches,
       widthInPoints: Math.round(widthInInches * 96),
       heightInPoints: Math.round(heightInInches * 96),
+      explicitWidth: options?.[kFigWidth] !== undefined,
+      explicitHeight: options?.[kFigHeight] !== undefined,
     };
   },
 
@@ -174,16 +211,57 @@ const _quartoMermaid = {
     if (options["reveal"]) {
       this.fixupAlignment(svg, options["figAlign"] || "center");
     }
+
+    // forward align attributes to the correct parent dif
+    // so that the svg figure is aligned correctly
+    const div = svg.parentElement.parentElement.parentElement;
+    const align = div.parentElement.parentElement.dataset.layoutAlign;
+    if (align) {
+      div.classList.remove("quarto-figure-left");
+      div.classList.remove("quarto-figure-center");
+      div.classList.remove("quarto-figure-right");
+      div.classList.add(`quarto-figure-${align}`);
+    }
   },
 };
 
 // deno-lint-ignore no-window-prefix
 window.addEventListener(
   "load",
   function () {
-    mermaid.init("div.cell-output-display pre.mermaid");
+    let i = 0;
+    // we need pre because of whitespace preservation
+    for (const el of Array.from(document.querySelectorAll("pre.mermaid-js"))) {
+      // &nbsp; doesn't appear to be treated as whitespace by mermaid
+      // so we replace it with a space.
+      const text = el.innerText.replaceAll("&nbsp;", " ");
+      const output = mermaid.mermaidAPI.render(
+        `mermaid-${++i}`,
+        text,
+        () => {},
+        el
+      );
+      el.innerHTML = output;
+      if (el.dataset.label) {
+        // patch mermaid's emitted style
+        const svg = el.firstChild;
+        const style = svg.querySelector("style");
+        style.innerHTML = style.innerHTML.replaceAll(
+          `#${svg.id}`,
+          `#${el.dataset.label}`
+        );
+        svg.id = el.dataset.label;
+        delete el.dataset.label;
+      }
+
+      const svg = el.querySelector("svg");
+      const parent = el.parentElement;
+      parent.removeChild(el);
+      parent.appendChild(svg);
+      svg.classList.add("mermaid-js");
+    }
     for (const svgEl of Array.from(
-      document.querySelectorAll("div.cell-output-display pre.mermaid svg")
+      document.querySelectorAll("svg.mermaid-js")
     )) {
       _quartoMermaid.postProcess(svgEl);
     }