From 3787cfccc54628ad42679401d0b1d887515272eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Wed, 18 Oct 2023 22:43:30 +0200
Subject: [PATCH] mermaid: only show zoom reset button if zoomed #691

---
 static/js/theme.js | 43 ++++++++++++++++++++++++-------------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/static/js/theme.js b/static/js/theme.js
index ce18702ec7..768d9fafd7 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -316,31 +316,36 @@ function initMermaid( update, attrs ) {
                 // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
                 var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoom > #' + id );
                 svgs.each( function(){
-                    var svg = d3.select( this );
-                    svg.html( '<g>' + svg.html() + '</g>' );
-                    var inner = svg.select( '*:scope > g' );
-                    var zoom = d3.zoom().on( 'zoom', function( e ){
-                        inner.attr( 'transform', e.transform );
-                    });
-                    svg.call( zoom );
                     var parent = this.parentElement;
                     // we need to copy the maxWidth, otherwise our reset button will not align in the upper right
                     parent.style.maxWidth = this.style.maxWidth || this.getAttribute( 'width' );
                     // if no unit is given for the width
                     parent.style.maxWidth = parent.style.maxWidth || 'calc( ' + this.getAttribute( 'width' ) + 'px + 1rem )';
-                    parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
-                    var button = parent.querySelector( '.svg-reset-button' );
-                    button.addEventListener( 'click', function( event ){
-                        svg.transition()
-                            .duration( 350 )
-                            .call( zoom.transform, d3.zoomIdentity );
-                        this.setAttribute( 'aria-label', window.T_View_reset );
-                        this.classList.add( 'tooltipped', 'tooltipped-' + (doBeside ? 'w' : 's'+(isImageRtl?'e':'w')) );
-                    });
-                    button.addEventListener( 'mouseleave', function() {
-                        this.removeAttribute( 'aria-label' );
-                        this.classList.remove( 'tooltipped', 'tooltipped-w', 'tooltipped-se', 'tooltipped-sw' );
+                    var svg = d3.select( this );
+                    svg.html( '<g>' + svg.html() + '</g>' );
+                    var inner = svg.select( '*:scope > g' );
+                    var zoom = d3.zoom().on( 'zoom', function( e ){
+                        inner.attr( 'transform', e.transform );
+                        if( parent.querySelector( '.svg-reset-button' ) ){
+                            return;
+                        }
+                        parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
+                        var button = parent.querySelector( '.svg-reset-button' );
+                        button.addEventListener( 'click', function( event ){
+                            svg.transition()
+                                .duration( 350 )
+                                .call( zoom.transform, d3.zoomIdentity );
+                            this.setAttribute( 'aria-label', window.T_View_reset );
+                            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.remove();
+                            }
+                        });
                     });
+                    svg.call( zoom );
                 });
             },
             querySelector: '.mermaid.mermaid-render',