WebView: double-click to view diagrams

Mermaid is not supported since its use of external stylesheet.

src/resources/markdown_template.js

@@ -594,6 +594,7 @@ var renderMermaidOne = function(code) {
     var graphDiv = document.createElement('div');
     graphDiv.classList.add(VMermaidDivClass);
     graphDiv.innerHTML = graph;
+
     var preNode = code.parentNode;
     preNode.parentNode.replaceChild(graphDiv, preNode);
     return true;
@@ -654,6 +655,7 @@ var renderFlowchartOne = function(code) {
     // Draw on it after adding it to page.
     try {
         graph.drawSVG(graphDiv.id);
+        setupSVGToView(graphDiv.children[0], true);
     } catch (err) {
         content.setLog("err: " + err);
         preParentNode.replaceChild(preNode, graphDiv);
@@ -716,6 +718,7 @@ var renderPlantUMLOneOnline = function(code) {
     } else {
         obj = document.createElement('img');
         obj.src = url;
+        setupIMGToView(obj);
     }
 
     var preNode = code.parentNode;
@@ -1196,7 +1199,6 @@ var listContainsRegex = function(strs, exp) {
 var StylesToInline = null;
 
 var initStylesToInline = function() {
-    console.log('initStylesToInline');
     StylesToInline = new Map();
 
     if (VStylesToInline.length == 0) {
@@ -1346,9 +1348,11 @@ var handlePlantUMLResult = function(id, timeStamp, format, result) {
             obj = document.createElement('div');
             obj.classList.add(VPlantUMLDivClass);
             obj.innerHTML = result;
+            setupSVGToView(obj.children[0], true);
         } else {
             obj = document.createElement('img');
             obj.src = "data:image/" + format + ";base64, " + result;
+            setupIMGToView(obj);
         }
 
         var preNode = code.parentNode;
@@ -1365,9 +1369,11 @@ var handleGraphvizResult = function(id, timeStamp, format, result) {
         if (format == 'svg') {
             obj = document.createElement('p');
             obj.innerHTML = result;
+            setupSVGToView(obj.children[0]);
         } else {
             obj = document.createElement('img');
             obj.src = "data:image/" + format + ";base64, " + result;
+            setupIMGToView(obj);
         }
 
         var preNode = code.parentNode;

src/resources/themes/v_detorte/v_detorte_mermaid.css

@@ -46,7 +46,7 @@
 }
 
 .mermaid-diagram .actor-line {
-  stroke: grey;
+  stroke: blue;
 }
 
 .mermaid-diagram .messageLine0 {
@@ -154,7 +154,7 @@
 
 /* Grid and axis */
 .mermaid-diagram .grid .tick {
-  stroke: lightgrey;
+  stroke: lightblue;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
@@ -240,8 +240,8 @@
 .mermaid-diagram .done1,
 .mermaid-diagram .done2,
 .mermaid-diagram .done3 {
-  stroke: grey;
-  fill: lightgrey;
+  stroke: blue;
+  fill: lightblue;
   stroke-width: 2;
 }
 
@@ -276,7 +276,7 @@
 .mermaid-diagram .doneCrit2,
 .mermaid-diagram .doneCrit3 {
   stroke: #ff8888;
-  fill: lightgrey;
+  fill: lightblue;
   stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;

src/resources/themes/v_moonlight/v_moonlight_mermaid.css

@@ -46,7 +46,7 @@
 }
 
 .mermaid-diagram .actor-line {
-  stroke: grey;
+  stroke: blue;
 }
 
 .mermaid-diagram .messageLine0 {
@@ -154,7 +154,7 @@
 
 /* Grid and axis */
 .mermaid-diagram .grid .tick {
-  stroke: lightgrey;
+  stroke: lightblue;
   opacity: 0.3;
   shape-rendering: crispEdges;
 }
@@ -240,8 +240,8 @@
 .mermaid-diagram .done1,
 .mermaid-diagram .done2,
 .mermaid-diagram .done3 {
-  stroke: grey;
-  fill: lightgrey;
+  stroke: blue;
+  fill: lightblue;
   stroke-width: 2;
 }
 
@@ -276,7 +276,7 @@
 .mermaid-diagram .doneCrit2,
 .mermaid-diagram .doneCrit3 {
   stroke: #ff8888;
-  fill: lightgrey;
+  fill: lightblue;
   stroke-width: 2;
   cursor: pointer;
   shape-rendering: crispEdges;

src/resources/themes/v_native/v_native.css

@@ -252,3 +252,17 @@ table.hljs-ln tr td.hljs-ln-code {
   background: #1976D2;
   color: white;
 }
+
+.modal-box {
+    background-color: rgb(245, 245, 245);
+    background-color: rgba(245, 245, 245, 0.95);
+}
+
+span.modal-close {
+    color: #666666;
+}
+
+span.modal-close:hover,
+span.modal-close:focus {
+    color: #222222;
+}

src/resources/themes/v_pure/v_pure.css

@@ -322,3 +322,17 @@ table.hljs-ln tr td.hljs-ln-code {
   background: #1976D2;
   color: #F5F5F5;
 }
+
+.modal-box {
+    background-color: rgb(234, 234, 234);
+    background-color: rgba(234, 234, 234, 0.95);
+}
+
+span.modal-close {
+    color: #666666;
+}
+
+span.modal-close:hover,
+span.modal-close:focus {
+    color: #222222;
+}

src/resources/view_image.css

@@ -1,5 +1,4 @@
-.view-image {
-    cursor: pointer;
+.view-image,.view-svg {
     transition: 0.3s;
 }
 
@@ -14,7 +13,7 @@
     height: 100%;
     overflow: hidden;
     background-color: rgb(68, 68, 68);
-    background-color: rgba(68, 68, 68, 0.9);
+    background-color: rgba(68, 68, 68, 0.95);
 }
 
 .modal-content {

src/resources/view_image.js

@@ -1,18 +1,31 @@
 var imageViewDiv = document.getElementById('image-view-div');
 
-var viewImage = function(obj, image) {
-    image = !image ? obj.src : image;
+var viewImage = function(imgSrc, background = 'transparent') {
+    viewBoxImageMouseDown = false;
 
     imageViewDiv.style.display = 'block';
 
     var boxImage = document.getElementById('image-view');
-    boxImage.src = image;
+    boxImage.src = imgSrc;
+    boxImage.style.backgroundColor = background;
+
     // Restore image-view.
     boxImage.style.width = '';
     boxImage.style.position = '';
     boxImage.style.zIndex = '';
 };
 
+var viewIMG = function(imgNode) {
+    viewImage(imgNode.src);
+};
+
+var viewSVG = function(svgNode, background = 'transparent') {
+    var svg = svgNode.outerHTML.replace(/#/g, '%23').replace(/[\r\n]/g, '');
+    var src = 'data:image/svg+xml;utf8,' + svg;
+
+    viewImage(src, background);
+};
+
 var viewBoxImageMouseDown = false;
 var viewBoxImageOffsetToMouse = [0, 0];
 
@@ -132,18 +145,57 @@ var setupImageView = function() {
 
     var imgs = document.getElementsByTagName('img');
     for (var i = 0; i < imgs.length; ++i) {
-        var img = imgs[i];
-        if (img.id == 'image-view') {
+        if (imgs[i].id == 'image-view') {
             continue;
         }
 
-        img.classList.add('view-image');
-        img.onclick = function() {
-            viewImage(this, this.src);
-        };
+        setupIMGToView(imgs[i]);
     }
 };
 
 var isViewingImage = function() {
     return imageViewDiv.style.display == 'block';
 };
+
+var onSVGDoubleClick = function(forceBackground, e) {
+    e = e || window.event;
+    var name = e.target.nodeName.toLowerCase();
+    if (name != 'text' && name != 'tspan') {
+        if (forceBackground) {
+            // Use <svg>'s parent's background color.
+            var svgNode = e.target;
+            while (svgNode && svgNode.nodeName.toLowerCase() != 'svg') {
+                svgNode = svgNode.parentNode;
+            }
+
+            if (svgNode) {
+                var style = window.getComputedStyle(svgNode.parentNode, null);
+                viewSVG(this, style.backgroundColor);
+            }
+        } else {
+            viewSVG(this);
+        }
+
+        e.preventDefault();
+    }
+};
+
+var setupSVGToView = function(node, forceBackground = false) {
+    if (!node || node.nodeName.toLowerCase() != 'svg') {
+        return;
+    }
+
+    node.classList.add('view-svg');
+    node.ondblclick = onSVGDoubleClick.bind(node, forceBackground);
+};
+
+var setupIMGToView = function(node) {
+    if (!node || node.nodeName.toLowerCase() != 'img') {
+        return;
+    }
+
+    node.classList.add('view-image');
+    node.ondblclick = function() {
+        viewIMG(this);
+    };
+};