diff --git a/src/resources/markdown_template.js b/src/resources/markdown_template.js index c241c509..25c179fe 100644 --- a/src/resources/markdown_template.js +++ b/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; diff --git a/src/resources/themes/v_detorte/v_detorte_mermaid.css b/src/resources/themes/v_detorte/v_detorte_mermaid.css index d8d51564..04400586 100644 --- a/src/resources/themes/v_detorte/v_detorte_mermaid.css +++ b/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; diff --git a/src/resources/themes/v_moonlight/v_moonlight_mermaid.css b/src/resources/themes/v_moonlight/v_moonlight_mermaid.css index d8d51564..04400586 100644 --- a/src/resources/themes/v_moonlight/v_moonlight_mermaid.css +++ b/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; diff --git a/src/resources/themes/v_native/v_native.css b/src/resources/themes/v_native/v_native.css index 70ddfcc0..fc72c12a 100644 --- a/src/resources/themes/v_native/v_native.css +++ b/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; +} diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css index b121e944..c459e326 100644 --- a/src/resources/themes/v_pure/v_pure.css +++ b/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; +} diff --git a/src/resources/view_image.css b/src/resources/view_image.css index f84952a3..4d9c8d08 100644 --- a/src/resources/view_image.css +++ b/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 { diff --git a/src/resources/view_image.js b/src/resources/view_image.js index 6f0260d7..843eaf78 100644 --- a/src/resources/view_image.js +++ b/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 '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); + }; +};