From bf51b7b11791104876d76cf637b51ad43a877023 Mon Sep 17 00:00:00 2001
From: Le Tan <tamlokveer@gmail.com>
Date: Wed, 29 Aug 2018 20:47:07 +0800
Subject: [PATCH] LivePreview: denote smart live preview

---
 src/resources/common.css             |  6 ++++
 src/resources/markdown_template.html |  1 +
 src/resources/markdown_template.js   | 44 +++++++++++++++++++++++++++-
 src/vnote.qrc                        |  1 +
 4 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/resources/common.css

diff --git a/src/resources/common.css b/src/resources/common.css
new file mode 100644
index 00000000..5552b9dd
--- /dev/null
+++ b/src/resources/common.css
@@ -0,0 +1,6 @@
+div.mark-rect {
+    background: transparent;
+    border: 5px solid #5768c4;
+    border-radius: 2px;
+    position: absolute;
+}
diff --git a/src/resources/markdown_template.html b/src/resources/markdown_template.html
index 1535d34b..802f5089 100644
--- a/src/resources/markdown_template.html
+++ b/src/resources/markdown_template.html
@@ -21,6 +21,7 @@
         }
     </style>
 
+    <link rel="stylesheet" type="text/css" href="qrc:/resources/common.css">
     <link rel="stylesheet" type="text/css" href="qrc:/resources/view_image.css">
     <link rel="stylesheet" type="text/css" href="CSS_PLACE_HOLDER">
     <link rel="stylesheet" type="text/css" href="HIGHLIGHTJS_CSS_PLACE_HOLDER">
diff --git a/src/resources/markdown_template.js b/src/resources/markdown_template.js
index e0658979..8ca28a4f 100644
--- a/src/resources/markdown_template.js
+++ b/src/resources/markdown_template.js
@@ -20,6 +20,7 @@ var VMermaidDivClass = 'mermaid-diagram';
 var VFlowchartDivClass = 'flowchart-diagram';
 var VPlantUMLDivClass = 'plantuml-diagram';
 var VMetaDataCodeClass = 'markdown-metadata';
+var VMarkRectDivClass = 'mark-rect';
 
 if (typeof VEnableMermaid == 'undefined') {
     VEnableMermaid = false;
@@ -1674,7 +1675,15 @@ var performSmartLivePreview = function(lang, text, hints, isRegex) {
         top: document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset,
         width: document.documentElement.clientWidth || document.body.clientWidth,
         height: document.documentElement.clientHeight || document.body.clientHeight
-    }
+    };
+
+    // Target node rect in the content.
+    var nrect = {
+        left: vrect.left + trect.left,
+        top: vrect.top + trect.top,
+        width: trect.width,
+        height: trect.height
+    };
 
     var dx = 0, dy = 0;
 
@@ -1698,6 +1707,8 @@ var performSmartLivePreview = function(lang, text, hints, isRegex) {
     }
 
     window.scrollBy(dx, dy);
+
+    markNode(nrect);
 }
 
 var findNodeWithText = function(node, text, isMatched) {
@@ -1723,3 +1734,34 @@ var findNodeWithText = function(node, text, isMatched) {
 
     return null;
 }
+
+// Draw a rectangle to mark @rect.
+var markNode = function(rect) {
+    if (!rect) {
+        return;
+    }
+
+    var nodes = document.getElementsByClassName(VMarkRectDivClass);
+    while (nodes.length > 0) {
+        var n = nodes[0];
+        n.outerHTML = '';
+        delete n;
+    }
+
+    var div = document.createElement('div');
+    div.id = 'markrect_' + Date.now();
+    div.classList.add(VMarkRectDivClass);
+
+    document.body.appendChild(div);
+
+    var extraW = 8;
+    var extraH = 5;
+    div.style.left = (rect.left - extraW) + 'px';
+    div.style.top = (rect.top - extraH) + 'px';
+    div.style.width = (rect.width + extraW) + 'px';
+    div.style.height = rect.height + 'px';
+
+    setTimeout('var node = document.getElementById("' + div.id + '");'
+               + 'if (node) { node.outerHTML = ""; delete node; }',
+               3000);
+};
diff --git a/src/vnote.qrc b/src/vnote.qrc
index 4ba90040..72567e0f 100644
--- a/src/vnote.qrc
+++ b/src/vnote.qrc
@@ -269,5 +269,6 @@
         <file>resources/icons/up.svg</file>
         <file>utils/turndown/turndown.js</file>
         <file>utils/turndown/turndown-plugin-gfm.js</file>
+        <file>resources/common.css</file>
     </qresource>
 </RCC>