feat: enable zooming for mermaid diagrams

Change-Id: If00b3267c6e497381713302d9d9f86070dcb463c

Author: shentongmartin

assets/js/mermaid.js

@@ -33,6 +33,62 @@
     var settings = norm(mermaid.mermaidAPI.defaultConfig, params);
     settings.startOnLoad = true;
     mermaid.initialize(settings);
+
+    function ensureModal() {
+        if (!$('#mermaidModal').length) {
+            var html = '' +
+            '<div class="modal fade" id="mermaidModal" tabindex="-1" role="dialog" aria-hidden="true">' +
+            '<div class="modal-dialog modal-dialog-centered modal-xl" role="document">' +
+            '<div class="modal-content">' +
+            '<div class="modal-body">' +
+            '<div class="mermaid-zoom-controls">' +
+            '<button type="button" class="btn btn-sm btn-light" id="mermaidZoomIn">+</button>' +
+            '<button type="button" class="btn btn-sm btn-light" id="mermaidZoomOut">-</button>' +
+            '<button type="button" class="btn btn-sm btn-light" id="mermaidZoomReset">Reset</button>' +
+            '</div>' +
+            '<div class="mermaid-zoom-wrapper"><div class="mermaid-zoom-content"></div></div>' +
+            '</div>' +
+            '</div>' +
+            '</div>' +
+            '</div>';
+            $('body').append(html);
+        }
+    }
+
+    var scale = 1;
+    function applyScale() {
+        $('.mermaid-zoom-content').css('transform', 'scale(' + scale + ')');
+    }
+
+    $(document).on('click', 'pre.mermaid, .mermaid', function() {
+        ensureModal();
+        var $svg = $(this).find('svg').clone();
+        var $content = $('#mermaidModal .mermaid-zoom-content');
+        $content.empty().append($svg);
+        scale = 1;
+        applyScale();
+        $('#mermaidModal').modal('show');
+    });
+
+    $(document).on('click', '#mermaidZoomIn', function() {
+        scale = Math.min(scale + 0.2, 5);
+        applyScale();
+    });
+    $(document).on('click', '#mermaidZoomOut', function() {
+        scale = Math.max(scale - 0.2, 0.2);
+        applyScale();
+    });
+    $(document).on('click', '#mermaidZoomReset', function() {
+        scale = 1;
+        applyScale();
+    });
+    $(document).on('wheel', '.mermaid-zoom-wrapper', function(e) {
+        e.preventDefault();
+        var dy = e.originalEvent.deltaY;
+        scale += (dy > 0 ? -0.1 : 0.1);
+        scale = Math.max(0.2, Math.min(5, scale));
+        applyScale();
+    });
 })(jQuery);
 {{ end }}
 {{ end }}

assets/scss/_styles_project.scss

@@ -23,3 +23,31 @@ assets/scss/_styles_project.scss
     margin-bottom: initial;
   }
 }
+
+pre.mermaid {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: 0;
+}
+
+.mermaid svg {
+  width: 100%;
+  height: auto;
+}
+
+.mermaid-zoom-wrapper {
+  overflow: auto;
+  max-height: 85vh;
+}
+
+.mermaid-zoom-content {
+  transform-origin: 0 0;
+}
+
+.mermaid-zoom-controls {
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+  z-index: 10;
+}

assets/scss/markdown.scss

@@ -39,6 +39,12 @@
   overflow: auto
 }
 
+.markdown pre.mermaid {
+  padding: 0;
+  margin: 0;
+  overflow: visible
+}
+
 .markdown div[class*=language-] pre code {
   color: rgba(0,0,0,.5)
 }