From 32d5fd5d569af3b2e6f2f47208fd2e77069d63ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 18 Nov 2023 23:19:35 +0100
Subject: [PATCH] mermaid: fix zoom button #725

---
 layouts/partials/shortcodes/mermaid.html |  2 +-
 static/css/theme.css                     | 33 +++++++++++-------------
 static/js/theme.js                       | 12 ++++++---
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/layouts/partials/shortcodes/mermaid.html b/layouts/partials/shortcodes/mermaid.html
index 8df24656ad..d062271be3 100644
--- a/layouts/partials/shortcodes/mermaid.html
+++ b/layouts/partials/shortcodes/mermaid.html
@@ -19,7 +19,7 @@
   {{- end }}
 {{- end }}
 {{- with $page }}
-<pre class="mermaid align-{{ $align }}{{ if $zoom }} zoom{{ end }}">
+<pre class="mermaid align-{{ $align }}{{ if $zoom }} zoomable{{ end }}">
   {{- replaceRE "&#39;" "'" ( replaceRE "&#34;" "\"" ( $content | safeHTML ) ) -}}
 </pre>
 {{- .Store.Set "hasMermaid" true }}
diff --git a/static/css/theme.css b/static/css/theme.css
index 0e26ffc25a..e76c820249 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1320,20 +1320,17 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 
 .mermaid {
     border: 1px solid transparent;
+    display: inline-block;
+    padding: .5rem .5rem 0 .5rem;
+    position: relative;
     /* don't use display: none, as this will cause no renderinge by Mermaid */
     visibility: hidden;
-    padding: .5rem .5rem 0 .5rem;
-}
-.mermaid.mermaid-render {
-    display: inline;
-    visibility: visible;
-}
-.mermaid.mermaid-render.zoom {
-    display: inline-block;
-    position: relative;
     width: 100%;
 }
-.mermaid.zoom:hover {
+.mermaid.mermaid-render {
+    visibility: visible;
+}
+.mermaid.zoomable:hover {
     border-color: rgba( 134, 134, 134, .333 );
 }
 
@@ -1341,8 +1338,8 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     /* remove inline height from generated diagram */
     height: initial !important;
 }
-.mermaid.zoom > svg {
-    cursor: pointer;
+.mermaid.zoomable > svg {
+    cursor: grab;
 }
 
 .svg-reset-button {
@@ -1359,15 +1356,15 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     right: 4px;
     top: 4px;
 }
-@media (any-hover: none) {
-    /* if there is at least one input device that does not support hover, we want to force the reset button */
-    .svg-reset-button.zoom {
+.mermaid:hover .svg-reset-button.zoomed {
+    display: block;
+}
+@media (any-hover: some) {
+    /* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */
+    .svg-reset-button.zoomed {
         display: block;
     }
 }
-.mermaid:hover .svg-reset-button {
-    display: block;
-}
 
 .svg-reset-button > i {
     font-size: .859625rem;
diff --git a/static/js/theme.js b/static/js/theme.js
index 7e1b0623a0..2186f6d77c 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -314,7 +314,7 @@ function initMermaid( update, attrs ) {
             postRenderCallback: function( id ){
                 // zoom for Mermaid
                 // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
-                var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoom > #' + id );
+                var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoomable > #' + id );
                 svgs.each( function(){
                     var parent = this.parentElement;
                     // we need to copy the maxWidth, otherwise our reset button will not align in the upper right
@@ -328,7 +328,12 @@ function initMermaid( update, attrs ) {
                     var button = parent.querySelector( '.svg-reset-button' );
                     var zoom = d3.zoom().on( 'zoom', function( e ){
                         inner.attr( 'transform', e.transform );
-                        button.classList.add( "zoom" );
+                        if( e.transform.k == 1 ){
+                            button.classList.remove( 'zoomed' );
+                        }
+                        else{
+                            button.classList.add( 'zoomed' );
+                        }
                     });
                     button.addEventListener( 'click', function( event ){
                         svg.transition()
@@ -338,10 +343,9 @@ function initMermaid( update, attrs ) {
                         this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) );
                     });
                     button.addEventListener( 'mouseleave', function() {
-                        this.removeAttribute( 'aria-label' );
                         if( this.classList.contains( 'tooltipped' ) ){
                             this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
-                            this.classList.remove( "zoom" );
+                            this.removeAttribute( 'aria-label' );
                         }
                     });
                     svg.call( zoom );