feat: enable dragging and downloading for mermaid image

Change-Id: Ibc352b70eb663c694f06378e1d7b1ae18e6e187b

Author: shentongmartin

assets/js/mermaid.js

@@ -45,6 +45,7 @@
             '<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>' +
+            '<button type="button" class="btn btn-sm btn-light" id="mermaidDownload">Download</button>' +
             '</div>' +
             '<div class="mermaid-zoom-wrapper"><div class="mermaid-zoom-content"></div></div>' +
             '</div>' +
@@ -89,6 +90,63 @@
         scale = Math.max(0.2, Math.min(5, scale));
         applyScale();
     });
+
+    var isDragging = false;
+    var startX = 0;
+    var startY = 0;
+    var scrollLeft = 0;
+    var scrollTop = 0;
+
+    $(document).on('mousedown touchstart', '.mermaid-zoom-wrapper', function(e) {
+        var $wrap = $(this);
+        isDragging = true;
+        $wrap.addClass('dragging');
+        var ev = e.type === 'touchstart' ? e.originalEvent.touches[0] : e;
+        startX = ev.pageX - $wrap.offset().left;
+        startY = ev.pageY - $wrap.offset().top;
+        scrollLeft = $wrap.scrollLeft();
+        scrollTop = $wrap.scrollTop();
+    });
+
+    $(document).on('mousemove touchmove', '.mermaid-zoom-wrapper', function(e) {
+        if (!isDragging) return;
+        var $wrap = $(this);
+        var ev = e.type === 'touchmove' ? e.originalEvent.touches[0] : e;
+        var x = ev.pageX - $wrap.offset().left;
+        var y = ev.pageY - $wrap.offset().top;
+        var dx = x - startX;
+        var dy = y - startY;
+        $wrap.scrollLeft(scrollLeft - dx);
+        $wrap.scrollTop(scrollTop - dy);
+    });
+
+    $(document).on('mouseup mouseleave touchend', '.mermaid-zoom-wrapper', function() {
+        isDragging = false;
+        $(this).removeClass('dragging');
+    });
+
+    $(document).on('click', '#mermaidDownload', function() {
+        var $svg = $('#mermaidModal .mermaid-zoom-content svg');
+        if (!$svg.length) return;
+        var node = $svg.get(0);
+        if (!node.getAttribute('xmlns')) {
+            node.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        }
+        var serializer = new XMLSerializer();
+        var source = serializer.serializeToString(node);
+        var blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
+        var url = URL.createObjectURL(blob);
+        var a = document.createElement('a');
+        var name = (document.title || 'diagram') + '-' + Date.now() + '.svg';
+        a.href = url;
+        a.download = name;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(function() {
+            URL.revokeObjectURL(url);
+            a.remove();
+        }, 0);
+    });
 })(jQuery);
 {{ end }}
 {{ end }}

assets/scss/_styles_project.scss

@@ -39,12 +39,18 @@ pre.mermaid {
 .mermaid-zoom-wrapper {
   overflow: auto;
   max-height: 85vh;
+  cursor: grab;
+  user-select: none;
 }
 
 .mermaid-zoom-content {
   transform-origin: 0 0;
 }
 
+.mermaid-zoom-wrapper.dragging {
+  cursor: grabbing;
+}
+
 .mermaid-zoom-controls {
   position: absolute;
   right: 1rem;