mermaid: make zoom configurable #144

exampleSite/config.toml

@@ -205,4 +205,5 @@ disableHugoGeneratorInject = true
   # graphs; you usually will not need it and you should remove this for
   # security reasons
   mermaidInitialize = "{ \"securityLevel\": \"loose\" }"
+  mermaidZoom = true
   additionalContentLanguage = [ "en" ]

exampleSite/content/basics/migration/_index.en.md

@@ -28,6 +28,10 @@ This document shows you what's new in the latest release. For a detailed list of
   <script src="{{"js/jquery.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" defer></script>
   ````
 
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid#parameter" %}}) diagrams can now be configured for pan and zoom on site and project level as individually for each graph.
+
+  The default setting of `on`, in effect since 1.1.0, changed back to `off` as there was interference with scrolling on mobile and big pages.
+
 - {{% badge style="note" title=" " %}}Change{{% /badge %}} The theme is now capable to visually [adapt to your OS's light/dark mode setting]({{%relref "basics/customization/#adjust-to-os-settings" %}}).
 
   This is also the new default setting if you haven't configured `themeVariant` in your `config.toml`.
@@ -459,6 +463,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 1.1.0 (2021-07-02)
 
+- {{% badge style="warning" title=" " %}}Breaking{{% /badge %}} [Mermaid]({{% relref "shortcodes/mermaid" %}}) diagrams can now be panned and zoomed. This isn't configurable yet.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} [`Mermaid`]({{% relref "shortcodes/mermaid#configuration" %}}) config options can be set in `config.toml`.
 
 ---

exampleSite/content/shortcodes/mermaid.en.md

@@ -5,7 +5,7 @@ title = "Mermaid"
 
 The `mermaid` shortcode generates diagrams and flowcharts from text, in a similar manner as Markdown using the [Mermaid](https://mermaidjs.github.io/) library.
 
-{{< mermaid align="center" >}}
+{{< mermaid align="center">}}
 graph LR;
     If --> Then
     Then --> Else
@@ -33,7 +33,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
 {{% tab name="codefence" %}}
 
 ````md
-```mermaid { align="center" }
+```mermaid { align="center" zoom="true" }
 graph LR;
     If --> Then
     Then --> Else
@@ -44,7 +44,7 @@ graph LR;
 {{% tab name="shortcode" %}}
 
 ````go
-{{</* mermaid align="center" */>}}
+{{</* mermaid align="center" zoom="true" */>}}
 graph LR;
     If --> Then
     Then --> Else
@@ -59,6 +59,7 @@ graph LR;
   "context" .
   "content" "graph LR;\nIf --> Then\nThen --> Else"
   "align"   "center"
+  "zoom"    "true"
 )}}
 
 ````
@@ -73,6 +74,7 @@ The generated graphs can be be panned by dragging them and zoomed by using the m
 | Name                  | Default          | Notes       |
 |:----------------------|:-----------------|:------------|
 | **align**             | `center`         | Allowed values are `left`, `center` or `right`. |
+| **zoom**              | see notes        | Whether the graph is pan- and zoomable.<br><br>If not set the value is determined by the `mermaidZoom` setting of the [site](#global-configuration-file) or the [pages frontmatter](#pages-frontmatter) or `false` if not set at all.<br><br>- `false`: no pan or zoom<br>- `true`: pan and zoom active |
 | _**&lt;content&gt;**_ | _&lt;empty&gt;_  | Your Mermaid graph. |
 
 ## Configuration
@@ -94,6 +96,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
 ````toml
 [params]
   mermaidInitialize = "{ \"theme\": \"dark\" }"
+  mermaidZoom = true
 
 [markup]
   [markup.highlight]
@@ -108,6 +111,7 @@ To use codefence syntax you have to turn off `guessSyntax` for the `markup.highl
 ````toml
 +++
 mermaidInitialize = "{ \"theme\": \"dark\" }"
+mermaidZoom = true
 +++
 ````
 
@@ -339,10 +343,10 @@ gantt
         Add to Mermaid                      :1d
 {{< /mermaid >}}
 
-### Pie Chart
+### Pie Chart without Zoom
 
 ````go
-{{</* mermaid */>}}
+{{</* mermaid zoom="false" */>}}
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85
@@ -350,7 +354,7 @@ pie title Pets adopted by volunteers
 {{</* /mermaid */>}}
 ````
 
-{{< mermaid >}}
+{{< mermaid zoom="false" >}}
 pie title Pets adopted by volunteers
     "Dogs" : 386
     "Cats" : 85

layouts/partials/shortcodes/mermaid.html

@@ -1,8 +1,21 @@
 {{- $context := .context }}
 {{- $content := .content }}
 {{- $align := .align | default "center" }}
+{{- $zoom := $context.Site.Params.mermaidZoom | default false }}
+{{- with $context.Page.Params.mermaidZoom }}
+  {{- $zoom = . }}
+  {{- if eq (printf "%T" .) "string" }}
+    {{- $zoom = (eq . "true") }}
+  {{- end }}
+{{- end }}
+{{- with .zoom }}
+  {{- $zoom = . }}
+  {{- if eq (printf "%T" .) "string" }}
+    {{- $zoom = (eq . "true") }}
+  {{- end }}
+{{- end }}
 {{- with $context }}
-<div class="mermaid align-{{ $align }}">
+<div class="mermaid align-{{ $align }}{{ if $zoom }} zoom{{ end }}">
   {{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}}
 </div>
 {{- .Page.Store.Set "hasMermaid" true }}

layouts/shortcodes/mermaid.html

@@ -3,4 +3,5 @@
   "context" .
   "content" .Inner
   "align"   (.Get "align")
+  "zoom"    (.Get "zoom")
 ) }}

static/css/theme.css

@@ -1121,12 +1121,15 @@ option {
 
 .mermaid > svg {
     border: 1px solid transparent;
-    cursor: pointer;
     /* remove inline height from generated diagram */
     height: initial !important;
 }
 
-.mermaid > svg:hover {
+.mermaid.zoom > svg {
+    cursor: pointer;
+}
+
+.mermaid.zoom > svg:hover {
     border-color: rgba( 134, 134, 134, .333 );
 }
 

static/js/theme.js

@@ -227,7 +227,7 @@ function initMermaid( update, attrs ) {
         mermaid.init();
         // zoom for Mermaid
         // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
-        var svgs = d3.selectAll( '.mermaid svg' );
+        var svgs = d3.selectAll( '.mermaid.zoom svg' );
         svgs.each( function(){
             var svg = d3.select( this );
             svg.html( '<g>' + svg.html() + '</g>' );