Update activecode locked and highlighted region markings on scroll

Author: ascholerChemeketa

bases/rsptx/interactives/runestone/activecode/js/activecode.js

@@ -305,6 +305,14 @@ export class ActiveCode extends RunestoneBase {
                 editor.display.scrollbars.vert.style.bottom =  "16px";
             });
         });
+        // Update line makers on scroll. Codemirror only renders a few lines offscreen
+        // so if locked lines are offscreen they may not get decorated
+        CodeMirror.on(editor, "scroll", (cm) => {
+            window.requestAnimationFrame(() => {
+                this.setLockedRegions();
+                this.setHighlightLines();
+            });
+        });
 
         // Make the editor resizable
         let ac = this;
@@ -450,11 +458,16 @@ export class ActiveCode extends RunestoneBase {
                 line = line.trim();
                 let lineNum = line.split("-");
                 if (lineNum.length > 1) {
-                    for (let i = parseInt(lineNum[0]); i <= parseInt(lineNum[1]); i++) {
+                    let startLine = parseInt(lineNum[0]) - this.editor.display.viewFrom;
+                    let endLine = parseInt(lineNum[1]) - this.editor.display.viewFrom;
+                    for (let i = startLine; i <= endLine; i++) {
                         lines[i - 1].classList.add("CodeMirror__highlight-line");
                     }
                 } else {
-                    lines[lineNum - 1].classList.add("CodeMirror__highlight-line");
+                    if (lineNum > this.editor.display.viewFrom && lineNum <= this.editor.display.viewTo) {
+                        let offsetLineNum = parseInt(lineNum) - this.editor.display.viewFrom;
+                        lines[offsetLineNum - 1].classList.add("CodeMirror__highlight-line");
+                    }
                 }
             });
         }
@@ -475,10 +488,11 @@ export class ActiveCode extends RunestoneBase {
                 // downside is that this is not preserved on editor.refresh()
                 // so setLockedRegions() must be called again
             }
-            let midLine = Math.floor((start + end) / 2);
+        }
+        function placeLock(lineNumber) {
             var marker = document.createElement("div");
             marker.className = "CodeMirror__gutter-locked-marker";
-            this.editor.setGutterMarker(midLine, "CodeMirror-lock-markers", marker);
+            this.editor.setGutterMarker(lineNumber, "CodeMirror-lock-markers", marker);
         }
 
         this.containerDiv.querySelectorAll(".CodeMirror-code > div").forEach(
@@ -487,11 +501,18 @@ export class ActiveCode extends RunestoneBase {
             }
         );
 
+        let startViewRange = this.editor.display.viewFrom;
+        let endViewRange = this.editor.display.viewTo;
+
         if (this.visiblePrefixEnd) {
             let lastLine = this.editor.posFromIndex(
                 this.visiblePrefixEnd - 1
             ).line;
-            decorateLines.call(this, 0, lastLine);
+            placeLock.call(this, Math.floor((0 + lastLine) / 2));
+            let numInView = lastLine - startViewRange;
+            if (numInView >= 0) {
+                decorateLines.call(this, 0, numInView);
+            }
             let endPos = this.editor.posFromIndex(this.visiblePrefixEnd);
             this.editor.markText(
                 { line: 0, ch: 0 },
@@ -509,7 +530,11 @@ export class ActiveCode extends RunestoneBase {
                 this.editor.doc.getValue().length - this.visibleSuffixLength;
             let endPos = this.editor.posFromIndex(endIndex);
             let lastLine = this.editor.doc.lastLine();
-            decorateLines.call(this, endPos.line, lastLine);
+            placeLock.call(this, Math.floor((endPos.line + lastLine) / 2));
+
+            let startLine = Math.max(endPos.line - startViewRange, 0);
+            let endLine = Math.min(lastLine - startViewRange, endViewRange);
+            decorateLines.call(this, startLine, endLine);
             // include preceeding newline
             let endPos2 = this.editor.posFromIndex(endIndex - 1);
             this.editor.markText(