From e1b6a2397d745a5d4a651bea11b7309131785f69 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Thu, 5 Aug 2021 15:07:32 -0500
Subject: [PATCH] add highlight=<start>,<end> option in query string

---
 css/ui.css               |  5 ++++-
 src/ide/ui.ts            | 13 ++++++++++++
 src/ide/views/editors.ts | 46 ++++++++++++++++++++++++++++------------
 test/web/testembed.js    | 10 ++++++++-
 4 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/css/ui.css b/css/ui.css
index 44902996..07a9eca9 100644
--- a/css/ui.css
+++ b/css/ui.css
@@ -30,6 +30,9 @@
 .currentpc-marker-blocked {
   color: #ffee33;
 }
+.hilite-span {
+  background-color: #003399;
+}
 .mark-error {
   text-decoration-line: underline;
   text-decoration-style: wavy;
@@ -764,4 +767,4 @@ div.asset_toolbar {
 }
 .waverow.editable:hover {
   background-color: #336633;
-}
\ No newline at end of file
+}
diff --git a/src/ide/ui.ts b/src/ide/ui.ts
index 00641c4b..00f096f5 100644
--- a/src/ide/ui.ts
+++ b/src/ide/ui.ts
@@ -43,6 +43,7 @@ interface UIQueryString {
   embed? : string;
   ignore? : string;
   force? : string;
+  highlight? : string;
   file0_name? : string;
   file0_data? : string;
   file0_type? : string;
@@ -386,6 +387,16 @@ function refreshWindowList() {
   });
 }
 
+function highlightLines(path:string, hispec:string) {
+  if (hispec) {
+    var toks = qs.highlight.split(',');
+    var start = parseInt(toks[0]) - 1;
+    var end = parseInt(toks[1]) - 1;
+    var editor = projectWindows.createOrShow(path) as SourceEditor;
+    editor.highlightLines(start, end);
+  }
+}
+
 function loadMainWindow(preset_id:string) {
   // we need this to build create functions for the editor
   refreshWindowList();
@@ -393,6 +404,8 @@ function loadMainWindow(preset_id:string) {
   projectWindows.createOrShow(preset_id);
   // build project
   current_project.setMainFile(preset_id);
+  // highlighting?
+  highlightLines(preset_id, qs.highlight);
 }
 
 async function loadProject(preset_id:string) {
diff --git a/src/ide/views/editors.ts b/src/ide/views/editors.ts
index a1aa2fdf..d5a81d28 100644
--- a/src/ide/views/editors.ts
+++ b/src/ide/views/editors.ts
@@ -50,10 +50,12 @@ export class SourceEditor implements ProjectView {
   path : string;
   mode : string;
   editor;
+  updateTimer = null;
   dirtylisting = true;
   sourcefile : SourceFile;
   currentDebugLine : SourceLocation;
   markCurrentPC; // TextMarker
+  markHighlight; // TextMarker
   errormsgs = [];
   errorwidgets = [];
   errormarks = [];
@@ -98,25 +100,25 @@ export class SourceEditor implements ProjectView {
     });
   }
 
+  editorChanged() {
+    clearTimeout(this.updateTimer);
+    this.updateTimer = setTimeout( () => {
+      current_project.updateFile(this.path, this.editor.getValue());
+    }, 300);
+    if (this.markHighlight) {
+      this.markHighlight.clear();
+      this.markHighlight = null;
+    }
+  }
+
   setupEditor() {
-    var timer;
     // update file in project (and recompile) when edits made
     this.editor.on('changes', (ed, changeobj) => {
-      clearTimeout(timer);
-      timer = setTimeout( () => {
-        current_project.updateFile(this.path, this.editor.getValue());
-      }, 300);
+      this.editorChanged();
     });
     // inspect symbol when it's highlighted (double-click)
     this.editor.on('cursorActivity', (ed) => {
-      var start = this.editor.getCursor(true);
-      var end = this.editor.getCursor(false);
-      if (start.line == end.line && start.ch < end.ch && end.ch-start.ch < 80) {
-        var name = this.editor.getSelection();
-        this.inspect(name);
-      } else {
-        this.inspect(null);
-      }
+      this.inspectUnderCursor();
     });
     // gutter clicked
     this.editor.on("gutterClick", (cm, n) => {
@@ -130,6 +132,16 @@ export class SourceEditor implements ProjectView {
     });
   }
 
+  inspectUnderCursor() {
+    var start = this.editor.getCursor(true);
+    var end = this.editor.getCursor(false);
+    if (start.line == end.line && start.ch < end.ch && end.ch-start.ch < 80) {
+      var name = this.editor.getSelection();
+      this.inspect(name);
+    } else {
+      this.inspect(null);
+    }
+  }
 
   inspect(ident : string) : void {
     var result;
@@ -171,6 +183,14 @@ export class SourceEditor implements ProjectView {
     this.editor.replaceRange(text, cur, cur);
   }
 
+  highlightLines(start:number, end:number) {
+    //this.editor.setSelection({line:start, ch:0}, {line:end, ch:0});
+    var cls = 'hilite-span'
+    var markOpts = {className:cls, inclusiveLeft:true};
+    this.markHighlight = this.editor.markText({line:start,ch:0}, {line:end,ch:0}, markOpts);
+    this.editor.scrollIntoView({from:{line:start,ch:0}, to:{line:end,ch:0}});
+  }
+
   replaceSelection(start:number, end:number, text:string) {
     this.editor.setSelection(this.editor.posFromIndex(start), this.editor.posFromIndex(end));
     this.editor.replaceSelection(text);
diff --git a/test/web/testembed.js b/test/web/testembed.js
index 375996e1..39242d1a 100644
--- a/test/web/testembed.js
+++ b/test/web/testembed.js
@@ -21,15 +21,23 @@ exports['test embed iframe'] = function(browser) {
     .waitForElementVisible('#emuscreen')
     .waitForElementVisible('.emuvideo')
 
+  browser.url(IDEURL + QS + "&highlight=2,4")
+    .waitForElementNotVisible('#compile_spinner', time=10000)
+    .waitForElementNotVisible('#error_alert')
+    .waitForElementVisible('#emuscreen')
+    .waitForElementVisible('.emuvideo')
+    .waitForElementVisible('.hilite-span')
+
   browser.url(IDEURL + "?embed=1")
     .waitForElementVisible('.bootbox-alert')
 
+  /* TODO
   browser.url(IDEURL + "?embed=1&platform=nes&githubURL=https://github.com/sehugg/NES-ca65-example")
     .waitForElementNotVisible('#compile_spinner', time=10000)
     .waitForElementNotVisible('#error_alert')
     .waitForElementVisible('#emuscreen')
     .waitForElementVisible('.emuvideo')
-
+  */
 }
 
 exports['test embed.html'] = function(browser) {