Add statement parsing and highlighting

3 files changed, 94 insertions, 11 deletions

diff --git a/renderer.js b/renderer.js
index b7da806..946d6bb 100644
--- a/renderer.js
+++ b/renderer.js
@@ -8,30 +8,107 @@ require("codemirror/mode/sql/sql");
 const Split = require("split.js");
 
 const editorContext = cm(document.getElementById("editor"), {
-  value: "select *\nfrom information_schema.tables",
+  value: "select *\nfrom information_schema.tables\n/\nselect now()\n/\nselect *\nfrom foo",
   mode: "text/x-sql",
   theme: "dracula",
-  lineNumbers: true
+  lineNumbers: true,
+  gutters: ["CodeMirror-linenumbers", "statement-pointer"]
 });
 
+const statementDelimiter = "/"
+
 let dataTable;
 let execStartTime;
 let execTimerInterval;
 let execElapsedTime;
+let queryMark;
 
 function runQuery() {
 
   _setExecutionStatusIndicator("RUNNING");
   _startExecTimer();
 
-  var query = editorContext.getValue(); 
-  console.log(query);
+  let query = findQuery();
 
   _destroyDataTable();
 
   ipcRenderer.send("queryExecutor.runQuery", query);
 }
 
+/**
+ * If there's selected text, return it. Otherwise find the statement nearest the cursor.
+ * Statements are delimited by lines containing only a "/" character.
+ */
+function findQuery() {
+  let selectedText = editorContext.getSelection();
+
+  if(selectedText !== "") {
+    _clearQueryMarks();
+    return selectedText;
+  }
+  else {
+    let cursorLine = editorContext.getCursor().line;
+
+    let statementStartLine = editorContext.firstLine();
+    
+    // lineCount rather than lastLine here, since lineCount is index 1 based.
+    // getRange(from, to) below is 0 based, but the range is exclusive, so if we need to include the last line we need the +1 
+    let statementEndLine = editorContext.lineCount();
+  
+    // if the current line is a delimiter, thats the end of the statement
+    if (editorContext.getLine(cursorLine) === statementDelimiter) {
+      statementEndLine = cursorLine;
+    }
+    else {
+      // move down the document until a delimiter or the end of the document is reached
+      for (let i = cursorLine + 1; i <= editorContext.lastLine(); i++) {
+        if (editorContext.getLine(i) === statementDelimiter) {
+          statementEndLine = i;
+          break;
+        }
+      }
+    }
+
+    // mode up the document until a previous statements delimiter is found or the start of the document is reached
+    for(let i = cursorLine - 1; i >= editorContext.firstLine(); i--) {
+      if (editorContext.getLine(i) === statementDelimiter) {
+        statementStartLine = i + 1;
+        break;
+      }
+    }
+
+    let query = editorContext.getRange(
+      { line: statementStartLine, ch: 0 },
+      { line: statementEndLine, ch: 0 }
+    );
+    
+    console.log(query);
+
+    _clearQueryMarks();
+
+    queryMark = editorContext.markText(
+      { line: statementStartLine, ch: 0 },
+      { line: statementEndLine, ch: 0 },
+      { className: "selected-statement" }
+    );
+
+    editorContext.setGutterMarker(statementStartLine, "statement-pointer", _createGutterMarkerDom());
+
+    return query;
+  }
+}
+
+function _createGutterMarkerDom() {
+  return $("<div> > </div>").get(0);
+}
+
+function _clearQueryMarks() {
+  if (queryMark) {
+    queryMark.clear();
+  }
+  editorContext.clearGutter("statement-pointer");
+}
+
 ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => {
   _stopExecTimer();
   if(response.error === undefined) {
@@ -41,8 +118,6 @@ ipcRenderer.on("queryExecutor.runQueryComplete", (event, response) => {
     handleError(response.error);
   }
 
-  
-
 });
 
 function _startExecTimer() {
diff --git a/styles/style.css b/styles/style.css
index f6b8313..db55827 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -121,4 +121,12 @@ body {
 .exec-error {
   background-color: red;
   color: black;
+}
+
+.selected-statement {
+  background-color: #4F4837;
+}
+
+.statement-pointer {
+  width: 10px;
 }
\ No newline at end of file
diff --git a/styles/table-style.css b/styles/table-style.css
index fda66d0..7bf1222 100644
--- a/styles/table-style.css
+++ b/styles/table-style.css
@@ -1,17 +1,17 @@
 table.dataTable thead .sorting {
-  background-image: url("./images/sort_both.png"); 
+  background-image: url("../images/sort_both.png"); 
 }
 table.dataTable thead .sorting_asc {
-  background-image: url("./images/sort_asc.png"); 
+  background-image: url("../images/sort_asc.png"); 
 }
 table.dataTable thead .sorting_desc {
-  background-image: url("./images/sort_desc.png"); 
+  background-image: url("../images/sort_desc.png"); 
 }
 table.dataTable thead .sorting_asc_disabled {
-  background-image: url("./images/sort_asc_disabled.png"); 
+  background-image: url("../images/sort_asc_disabled.png"); 
 }
 table.dataTable thead .sorting_desc_disabled {
-  background-image: url("./images/sort_desc_disabled.png"); 
+  background-image: url("../images/sort_desc_disabled.png"); 
 }
 table.dataTable tbody tr {
   background-color: #282a36;