Bring highlighting back.

Fix backgroundMagic using output result instead of dish value

src/web/HighlighterWaiter.mjs

@@ -126,8 +126,8 @@ class HighlighterWaiter {
      */
     inputScroll(e) {
         const el = e.target;
-        // document.getElementById("input-highlighter").scrollTop = el.scrollTop;
+        document.getElementById("input-highlighter").scrollTop = el.scrollTop;
-        // document.getElementById("input-highlighter").scrollLeft = el.scrollLeft;
+        document.getElementById("input-highlighter").scrollLeft = el.scrollLeft;
     }
 
 
@@ -326,7 +326,7 @@ class HighlighterWaiter {
      * Removes highlighting and selection information.
      */
     removeHighlights() {
-        // document.getElementById("input-highlighter").innerHTML = "";
+        document.getElementById("input-highlighter").innerHTML = "";
         document.getElementById("output-highlighter").innerHTML = "";
         document.getElementById("input-selection-info").innerHTML = "";
         document.getElementById("output-selection-info").innerHTML = "";

src/web/InputWaiter.mjs

@@ -504,6 +504,9 @@ class InputWaiter {
         const fileOverlay = document.getElementById("input-file");
         if (fileOverlay.style.display === "block") return;
 
+        // Remove highlighting from input and output panes as the offsets might be different now
+        this.manager.highlighter.removeHighlights();
+
         const textArea = document.getElementById("input-text");
         const value = (textArea.value !== undefined) ? textArea.value : "";
         const activeTab = this.getActiveTab();
@@ -857,6 +860,10 @@ class InputWaiter {
      */
     changeTab(inputNum, changeOutput) {
         const tabsList = document.getElementById("input-tabs");
+
+        this.manager.highlighter.removeHighlights();
+        getSelection().removeAllRanges();
+
         let found = false;
         let minNum = Number.MAX_SAFE_INTEGER;
         for (let i = 0; i < tabsList.children.length; i++) {
@@ -985,6 +992,9 @@ class InputWaiter {
         this.manager.worker.cancelBake();
         this.manager.output.removeAllOutputs();
 
+        this.manager.highlighter.removeHighlights();
+        getSelection().removeAllRanges();
+
         const tabsList = document.getElementById("input-tabs").children;
         for (let i = tabsList.length - 1; i >= 0; i--) {
             tabsList.item(i).remove();
@@ -1002,6 +1012,9 @@ class InputWaiter {
         const inputNum = this.getActiveTab();
         if (inputNum === -1) return;
 
+        this.manager.highlighter.removeHighlights();
+        getSelection().removeAllRanges();
+
         this.updateInputValue(inputNum, "");
 
         this.set({

src/web/Manager.mjs

@@ -152,10 +152,10 @@ class Manager {
         this.addListeners("#input-text,#input-file", "dragover", this.input.inputDragover, this.input);
         this.addListeners("#input-text,#input-file", "dragleave", this.input.inputDragleave, this.input);
         this.addListeners("#input-text,#input-file", "drop", this.input.inputDrop, this.input);
-        // document.getElementById("input-text").addEventListener("scroll", this.highlighter.inputScroll.bind(this.highlighter));
+        document.getElementById("input-text").addEventListener("scroll", this.highlighter.inputScroll.bind(this.highlighter));
-        // document.getElementById("input-text").addEventListener("mouseup", this.highlighter.inputMouseup.bind(this.highlighter));
+        document.getElementById("input-text").addEventListener("mouseup", this.highlighter.inputMouseup.bind(this.highlighter));
-        // document.getElementById("input-text").addEventListener("mousemove", this.highlighter.inputMousemove.bind(this.highlighter));
+        document.getElementById("input-text").addEventListener("mousemove", this.highlighter.inputMousemove.bind(this.highlighter));
-        // this.addMultiEventListener("#input-text", "mousedown dblclick select",  this.highlighter.inputMousedown, this.highlighter);
+        this.addMultiEventListener("#input-text", "mousedown dblclick select",  this.highlighter.inputMousedown, this.highlighter);
         document.querySelector("#input-file .close").addEventListener("click", this.input.clearIoClick.bind(this.input));
         document.getElementById("btn-new-tab").addEventListener("click", this.input.addInputClick.bind(this.input));
         document.getElementById("btn-previous-input-tab").addEventListener("click", this.input.changeTabLeft.bind(this.input));
@@ -187,13 +187,13 @@ class Manager {
         // document.getElementById("undo-switch").addEventListener("click", this.output.undoSwitchClick.bind(this.output));
         // document.getElementById("maximise-output").addEventListener("click", this.output.maximiseOutputClick.bind(this.output));
         document.getElementById("magic").addEventListener("click", this.output.magicClick.bind(this.output));
-        // document.getElementById("output-text").addEventListener("scroll", this.highlighter.outputScroll.bind(this.highlighter));
+        document.getElementById("output-text").addEventListener("scroll", this.highlighter.outputScroll.bind(this.highlighter));
-        // document.getElementById("output-text").addEventListener("mouseup", this.highlighter.outputMouseup.bind(this.highlighter));
+        document.getElementById("output-text").addEventListener("mouseup", this.highlighter.outputMouseup.bind(this.highlighter));
-        // document.getElementById("output-text").addEventListener("mousemove", this.highlighter.outputMousemove.bind(this.highlighter));
+        document.getElementById("output-text").addEventListener("mousemove", this.highlighter.outputMousemove.bind(this.highlighter));
-        // document.getElementById("output-html").addEventListener("mouseup", this.highlighter.outputHtmlMouseup.bind(this.highlighter));
+        document.getElementById("output-html").addEventListener("mouseup", this.highlighter.outputHtmlMouseup.bind(this.highlighter));
-        // document.getElementById("output-html").addEventListener("mousemove", this.highlighter.outputHtmlMousemove.bind(this.highlighter));
+        document.getElementById("output-html").addEventListener("mousemove", this.highlighter.outputHtmlMousemove.bind(this.highlighter));
-        // this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
+        this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
-        // this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
+        this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
         this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
         this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
         // document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));

src/web/OutputWaiter.mjs

@@ -47,14 +47,27 @@ class OutputWaiter {
      * Gets the output for the specified input number
      *
      * @param {number} inputNum
+     * @param {boolean} raw
      * @returns {string | ArrayBuffer}
      */
-    getOutput(inputNum) {
+    getOutput(inputNum, raw=true) {
         if (this.outputs[inputNum] === undefined || this.outputs[inputNum] === null) return -1;
 
         if (this.outputs[inputNum].data === null) return "";
 
-        if (typeof this.outputs[inputNum].data.result === "string") {
+        if (raw) {
+            let data = this.outputs[inputNum].data.dish.value;
+            if (Array.isArray(data)) {
+                data = new Uint8Array(data.length);
+
+                for (let i = 0; i < data.length; i++) {
+                    data[i] = this.outputs[inputNum].data.dish.value[i];
+                }
+
+                data = data.buffer;
+            }
+            return data;
+        } else if (typeof this.outputs[inputNum].data.result === "string") {
             return this.outputs[inputNum].data.result;
         } else {
             return this.outputs[inputNum].data.result || "";
@@ -64,10 +77,11 @@ class OutputWaiter {
     /**
      * Gets the output string or FileBuffer for the active input
      *
+     * @param {boolean} [raw=true]
      * @returns {string | ArrayBuffer}
      */
-    getActive() {
+    getActive(raw=true) {
-        return this.getOutput(this.getActiveTab());
+        return this.getOutput(this.getActiveTab(), raw);
     }
 
     /**
@@ -426,7 +440,7 @@ class OutputWaiter {
      */
     async downloadFile() {
         const fileName = window.prompt("Please enter a filename: ", "download.dat");
-        const file = new File([this.getActive()], fileName);
+        const file = new File([this.getActive(true)], fileName);
         FileSaver.saveAs(file, fileName, false);
     }
 
@@ -624,8 +638,12 @@ class OutputWaiter {
     changeTab(inputNum, changeInput = false) {
         const currentNum = this.getActiveTab();
         if (this.getOutput(inputNum) === -1) return;
+
         this.hideMagicButton();
 
+        this.manager.highlighter.removeHighlights();
+        getSelection().removeAllRanges();
+
         const tabsWrapper = document.getElementById("output-tabs");
         const tabs = tabsWrapper.children;
 
@@ -974,8 +992,9 @@ class OutputWaiter {
      */
     backgroundMagic() {
         this.hideMagicButton();
-        if (!this.app.options.autoMagic || !this.getActive()) return;
+        if (!this.app.options.autoMagic || !this.getActive(true)) return;
-        const sample = this.getActive().slice(0, 1000) || "";
+        const sample = this.getActive(true).slice(0, 1000) || "";
+
         if (sample.length || sample.byteLength) {
             this.manager.background.magic(sample);
         }
@@ -1048,7 +1067,7 @@ class OutputWaiter {
             sliceToEl = document.getElementById("output-file-slice-to"),
             sliceFrom = parseInt(sliceFromEl.value, 10),
             sliceTo = parseInt(sliceToEl.value, 10),
-            str = Utils.arrayBufferToStr(this.getActive().slice(sliceFrom, sliceTo));
+            str = Utils.arrayBufferToStr(this.getActive(true).slice(sliceFrom, sliceTo));
 
         document.getElementById("output-text").classList.remove("blur");
         showFileOverlay.style.display = "block";
@@ -1061,7 +1080,7 @@ class OutputWaiter {
      * Copies the output to the clipboard
      */
     copyClick() {
-        let output = this.getActive();
+        let output = this.getActive(true);
 
         if (typeof output !== "string") {
             output = Utils.arrayBufferToStr(output);
@@ -1097,6 +1116,15 @@ class OutputWaiter {
         // Clean up
         document.body.removeChild(textarea);
     }
+
+    /**
+     * Returns true if the output contains carriage returns
+     *
+     * @returns {boolean}
+     */
+    containsCR() {
+        return this.getActive(true).indexOf("\r") >= 0;
+    }
 }
 
 export default OutputWaiter;

src/web/WorkerWaiter.mjs

@@ -519,6 +519,28 @@ class WorkerWaiter {
         }
 
     }
+
+    /**
+     * Asks the ChefWorker to calculate highlight offsets if possible.
+     *
+     * @param {Object[]} recipeConfig
+     * @param {string} direction
+     * @param {Object} pos - The position object for the highlight.
+     * @param {number} pos.start - The start offset.
+     * @param {number} pos.end - The end offset.
+     */
+    highlight(recipeConfig, direction, pos) {
+        const workerIdx = this.addChefWorker();
+        if (workerIdx === -1) return;
+        this.chefWorkers[workerIdx].worker.postMessage({
+            action: "highlight",
+            data: {
+                recipeConfig: recipeConfig,
+                direction: direction,
+                pos: pos
+            }
+        });
+    }
 }
 
 export default WorkerWaiter;