mermaid: add pan&zoom reset #651

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

@@ -34,6 +34,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to overwrite the setting for `collapsibleMenu` of your `config.toml` inside of a page's frontmatter.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} If a Mermaid graph is zoomable a button to reset the view is now added to the upper right corner. The button is only shown once the mouse is moved over the graph.
+
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} It is now possible to remove the root breadcrumb by setting `disableRootBreadcrumb=true` in your `config.toml`.
 
 - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The output of the dedicated search page now displays the result's breadcrumb.

i18n/ar.toml

@@ -19,6 +19,9 @@ other = "تم العثور على {1} نتيجة لـ \"{0}\""
 [Clear-History]
 other = "مسح السجل"
 
+[Reset-view]
+other = "إعادة تعيين طريقة العرض"
+
 [Attachments-label]
 other = "مرفقات"
 

i18n/cs.toml

@@ -19,6 +19,9 @@ other = "{1} výsledků pro \"{0}\""
 [Clear-History]
 other = "Vymazat historii"
 
+[Reset-view]
+other = "Obnovit zobrazení"
+
 [Attachments-label]
 other = "Přílohy"
 

i18n/de.toml

@@ -19,6 +19,9 @@ other = "{1} Ergebnisse gefunden für \"{0}\""
 [Clear-History]
 other = "Verlauf löschen"
 
+[Reset-view]
+other = "Ansicht zurücksetzen"
+
 [Attachments-label]
 other = "Anhänge"
 

i18n/en.toml

@@ -19,6 +19,9 @@ other = "{1} results found for \"{0}\""
 [Clear-History]
 other = "Clear History"
 
+[Reset-view]
+other = "Reset view"
+
 [Attachments-label]
 other = "Attachments"
 

i18n/es.toml

@@ -19,6 +19,9 @@ other = "{1} resultados encontrados para \"{0}\""
 [Clear-History]
 other = "Borrar Historial"
 
+[Reset-view]
+other = "Restablecer vista"
+
 [Attachments-label]
 other = "Adjuntos"
 

i18n/fi.toml

@@ -19,6 +19,9 @@ other = "{1} tulosta löytyi haulle \"{0}\""
 [Clear-History]
 other = "Tyhjennä historia"
 
+[Reset-view]
+other = "Palauta näkymä"
+
 [Attachments-label]
 other = "Liitteet"
 

i18n/fr.toml

@@ -19,6 +19,9 @@ other = "{1} résultats trouvés pour \"{0}\""
 [Clear-History]
 other = "Supprimer l'historique"
 
+[Reset-view]
+other = "Réinitialiser la vue"
+
 [Attachments-label]
 other = "Pièces jointes"
 

i18n/hi.toml

@@ -19,6 +19,9 @@ other = "\"{0}\" के लिए {1} परिणाम मिले"
 [Clear-History]
 other = "इतिहास मिटाएँ"
 
+[Reset-view]
+other = "दृश्य रीसेट करें"
+
 [Attachments-label]
 other = "संलग्नंक (अटैचमेंट)"
 

i18n/hu.toml

@@ -16,6 +16,9 @@ other = "{1} találat a(z) \"{0}\" kifejezésre"
 [Clear-History]
 other = "Előzmények törlése"
 
+[Reset-view]
+other = "Nézet visszaállítása"
+
 [Clear-search]
 other = "Keresések törlése"
 

i18n/id.toml

@@ -19,6 +19,9 @@ other = "Ditemukan {1} hasil untuk \"{0}\""
 [Clear-History]
 other = "Bersihkan Riwayat"
 
+[Reset-view]
+other = "Setel ulang tampilan"
+
 [Attachments-label]
 other = "Lampiran"
 

i18n/it.toml

@@ -19,6 +19,9 @@ other = "{1} risultati trovati per \"{0}\""
 [Clear-History]
 other = "Reimposta storico"
 
+[Reset-view]
+other = "Ripristina visualizzazione"
+
 [Attachments-label]
 other = "Allegati"
 

i18n/ja.toml

@@ -19,6 +19,9 @@ other = "\"{0}\" で {1} 件の結果が見つかりました"
 [Clear-History]
 other = "履歴削除"
 
+[Reset-view]
+other = "ビューのリセット"
+
 [Attachments-label]
 other = "添付"
 

i18n/ko.toml

@@ -19,6 +19,9 @@ other = "\"{0}\"에 대해 {1}개의 결과가 검색되었습니다."
 [Clear-History]
 other = "방문 기록 삭제"
 
+[Reset-view]
+other = "보기 재설정"
+
 [Attachments-label]
 other = "첨부파일"
 

i18n/nl.toml

@@ -19,6 +19,9 @@ other = "{1} resultaten gevonden voor \"{0}\""
 [Clear-History]
 other = "Wis geschiedenis"
 
+[Reset-view]
+other = "Weergave opnieuw instellen"
+
 [Attachments-label]
 other = "Bijlagen"
 

i18n/pir.toml

@@ -19,6 +19,9 @@ other = "{1} rrresults found fer \"{0}\""
 [Clear-History]
 other = "Clearrr Historrry"
 
+[Reset-view]
+other = "Rrreset view"
+
 [Attachments-label]
 other = "Attachments"
 

i18n/pl.toml

@@ -19,6 +19,9 @@ other = "Znaleziono {1} wyników dla \"{0}\""
 [Clear-History]
 other = "Wyczyść historię"
 
+[Reset-view]
+other = "Resetowanie widoku"
+
 [Attachments-label]
 other = "Załączniki"
 

i18n/pt.toml

@@ -19,6 +19,9 @@ other = "{1} resultados encontrados para \"{0}\""
 [Clear-History]
 other = "Limpar Histórico"
 
+[Reset-view]
+other = "Redefinir modo de exibição"
+
 [Attachments-label]
 other = "Anexos"
 

i18n/ru.toml

@@ -19,6 +19,9 @@ other = "{1} результатов найдено для \"{0}\""
 [Clear-History]
 other = "Очистить историю"
 
+[Reset-view]
+other = "Вид на сброс"
+
 [Attachments-label]
 other = "Присоединенные файлы"
 

i18n/tr.toml

@@ -19,6 +19,9 @@ other = "\"{0}\" için {1} sonuç bulundu"
 [Clear-History]
 other = "Geçmişi Temizle"
 
+[Reset-view]
+other = "Görünümü sıfırla"
+
 [Attachments-label]
 other = "Ekler"
 

i18n/vi.toml

@@ -19,6 +19,9 @@ other = "{1} kết quả được tìm thấy cho \"{0}\""
 [Clear-History]
 other = "Xóa lịch sử.."
 
+[Reset-view]
+other = "Đặt lại dạng xem"
+
 [Attachments-label]
 other = "Tập tin đính kèm"
 

i18n/zh-cn.toml

@@ -19,6 +19,9 @@ other = "为\"{0}\"找到 {1} 个结果"
 [Clear-History]
 other = "清理历史记录"
 
+[Reset-view]
+other = "重置视图"
+
 [Attachments-label]
 other = "附件"
 

i18n/zh-tw.toml

@@ -19,6 +19,9 @@ other = "為\"{0}\"找到 {1} 個結果"
 [Clear-History]
 other = "清除歷史紀錄"
 
+[Reset-view]
+other = "重置檢視"
+
 [Attachments-label]
 other = "附件"
 

i18n/zh.toml

@@ -19,6 +19,9 @@ other = "为\"{0}\"找到 {1} 个结果"
 [Clear-History]
 other = "清理历史记录"
 
+[Reset-view]
+other = "重置视图"
+
 [Attachments-label]
 other = "附件"
 

layouts/partials/stylesheet.html

@@ -47,6 +47,7 @@
       window.T_Copied_to_clipboard = '{{ T "Copied-to-clipboard" | safeJS }}';
       window.T_Copy_link_to_clipboard = '{{ T "Copy-link-to-clipboard" | safeJS }}';
       window.T_Link_copied_to_clipboard = '{{ T "Link-copied-to-clipboard" | safeJS }}';
+      window.T_Reset_view = '{{ T "Reset-view" | safeJS }}';
       window.T_No_results_found = '{{ T "No-results-found" | safeJS }}';
       window.T_N_results_found = '{{ T "N-results-found" | safeJS }}';
       {{ "// some further base stuff" | safeJS }}

static/css/format-print.css

@@ -48,6 +48,10 @@ pre {
     display: none;
 }
 
+#R-body .svg-reset-button {
+    display: none;
+}
+
 #R-body h1, #R-body h2, #R-body h3, #R-body .article-subheading, #R-body h4, #R-body h5, #R-body h6 {
     /* better contrast for colored elements */
     color: rgba( 0, 0, 0, 1 );
@@ -141,9 +145,7 @@ mark {
     background: inherit;
     color: inherit;
 }
-.mermaid > svg:hover,
-.mermaid > svg:active,
-.mermaid > svg:focus {
+.mermaid.zoom:hover {
     border-color: transparent;
 }
 div.box > .box-content {

static/css/ie.css

@@ -554,6 +554,16 @@
 		color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */
 	}
 
+	.svg-reset-button {
+		border-color: rgba( 216, 216, 216, 1 ); /* var(--CODE-BLOCK-BORDER-color) */
+		color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
+	}
+	.svg-reset-button:hover {
+		background-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
+		border-color: rgba( 72, 106, 201, 1 ); /* var(--MAIN-LINK-color) */
+		color: rgba( 248, 248, 248, 1 ); /* var(--CODE-BLOCK-BG-color) */
+	}
+
 	#R-homelinks {
 		background-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-BORDER-color) */
 	}

static/css/theme.css

@@ -1317,18 +1317,50 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     margin-top: 1.7rem;
 }
 
-.mermaid > svg {
+.mermaid {
     border: 1px solid transparent;
+    display: inline;
+    padding: .5rem .5rem 0 .5rem;
+}
+.mermaid.zoom {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+.mermaid.zoom:hover {
+    border-color: rgba( 134, 134, 134, .333 );
+}
+
+.mermaid > svg {
     /* remove inline height from generated diagram */
     height: initial !important;
 }
-
 .mermaid.zoom > svg {
     cursor: pointer;
 }
 
-.mermaid.zoom > svg:hover {
-    border-color: rgba( 134, 134, 134, .333 );
+.svg-reset-button {
+    background-color: rgba( 160, 160, 160, .2 );
+    border-radius: 2px;
+    border-style: solid;
+    border-width: 1px;
+    cursor: pointer;
+    display: none;
+    font-size: .934375rem;
+    line-height: 1.15;
+    padding: 5px 3px;
+    position: absolute;
+    right: 4px;
+    top: 4px;
+}
+.mermaid:hover .svg-reset-button {
+    display: block;
+}
+
+.svg-reset-button > i {
+    font-size: .859625rem;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 .mermaid-code {
@@ -1684,22 +1716,16 @@ input[type="search"]::-webkit-search-results-decoration { display: none; }
 }
 */
 
-.mermaid-container .align-right > *  {
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
+.mermaid-container.align-right  {
+    text-align: right;
 }
 
-.mermaid-container .align-center > *  {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+.mermaid-container.align-center  {
+    text-align: center;
 }
 
-.mermaid-container .align-left > * {
-    display: block;
-    margin-left: 0;
-    margin-right: auto;
+.mermaid-container.align-left {
+    text-align: left;
 }
 
 .searchform {

static/css/variant.css

@@ -306,6 +306,16 @@ pre .copy-to-clipboard-button:hover {
     color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 
+.svg-reset-button {
+    border-color: var(--INTERNAL-CODE-BLOCK-BORDER-color);
+    color: var(--INTERNAL-MAIN-LINK-color);
+}
+.svg-reset-button:hover {
+    background-color: var(--INTERNAL-MAIN-LINK-color);
+    border-color: var(--INTERNAL-MAIN-LINK-color);
+    color: var(--INTERNAL-CODE-BLOCK-BG-color);
+}
+
 #R-homelinks {
     background-color: var(--INTERNAL-MENU-HEADER-BORDER-color);
 }

static/js/theme.js

@@ -118,9 +118,9 @@ function switchTab(tabGroup, tabId) {
     allTabItems && allTabItems.forEach( function( e ){ e.classList.remove( 'active' ); });
     targetTabItems && targetTabItems.forEach( function( e ){ e.classList.add( 'active' ); });
 
-    initMermaid( true );
-
     if(isButtonEvent){
+      initMermaid( true );
+
       // reset screen to the same position relative to clicked button to prevent page jump
       var yposButtonDiff = event.target.getBoundingClientRect().top - yposButton;
       window.scrollTo(window.scrollX, window.scrollY+yposButtonDiff);
@@ -220,6 +220,18 @@ function initMermaid( update, attrs ) {
             }
             var new_element = document.createElement( 'div' );
             new_element.classList.add( 'mermaid-container' );
+            if( element.classList.contains( 'align-right' ) ){
+                new_element.classList.add( 'align-right' );
+                element.classList.remove( 'align-right' );
+            }
+            if( element.classList.contains( 'align-center' ) ){
+                new_element.classList.add( 'align-center' );
+                element.classList.remove( 'align-center' );
+            }
+            if( element.classList.contains( 'align-left' ) ){
+                new_element.classList.add( 'align-left' );
+                element.classList.remove( 'align-left' );
+            }
             new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
             element.parentNode.replaceChild( new_element, element );
         });
@@ -296,18 +308,27 @@ function initMermaid( update, attrs ) {
     if( is_initialized ){
         mermaid.initialize( Object.assign( { "securityLevel": "antiscript", "startOnLoad": false }, window.relearn.mermaidConfig, { theme: attrs.theme } ) );
         mermaid.run({
-            postRenderCallback: function(){
+            postRenderCallback: function( id ){
                 // zoom for Mermaid
                 // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
-                var svgs = d3.selectAll( '.mermaid.zoom svg' );
+                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( 'g' );
                     var zoom = d3.zoom().on( 'zoom', function( e ){
-                        inner.attr( 'transform', e.transform);
+                        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;
+                    parent.insertAdjacentHTML( 'beforeend', '<span class="svg-reset-button" title="' + window.T_Reset_view + '"><i class="fas fa-undo-alt"></i></span>' );
+                    parent.querySelector( '.svg-reset-button' ).addEventListener( 'click', function( event ){
+                        inner.transition()
+                            .duration( 350 )
+                            .call( zoom.transform, d3.zoomIdentity );
+                    });
                 });
             },
             querySelector: '.mermaid.mermaid-render',