From 35d6c7d79e8072d3615a1f6f051420359183d890 Mon Sep 17 00:00:00 2001 From: j433866 Date: Tue, 7 May 2019 14:20:18 +0100 Subject: [PATCH] Bring highlighting back. Fix backgroundMagic using output result instead of dish value --- src/web/HighlighterWaiter.mjs | 6 ++--- src/web/InputWaiter.mjs | 13 ++++++++++ src/web/Manager.mjs | 22 ++++++++--------- src/web/OutputWaiter.mjs | 46 ++++++++++++++++++++++++++++------- src/web/WorkerWaiter.mjs | 22 +++++++++++++++++ 5 files changed, 86 insertions(+), 23 deletions(-) diff --git a/src/web/HighlighterWaiter.mjs b/src/web/HighlighterWaiter.mjs index 7bce1df1..99ae10b1 100755 --- a/src/web/HighlighterWaiter.mjs +++ b/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").scrollLeft = el.scrollLeft; + document.getElementById("input-highlighter").scrollTop = el.scrollTop; + 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 = ""; diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 547fc9a9..46b71fc3 100644 --- a/src/web/InputWaiter.mjs +++ b/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({ diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 37bb5386..8346f495 100755 --- a/src/web/Manager.mjs +++ b/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("mouseup", this.highlighter.inputMouseup.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); + 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("mousemove", this.highlighter.inputMousemove.bind(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("mouseup", this.highlighter.outputMouseup.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("mousemove", this.highlighter.outputHtmlMousemove.bind(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); + 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("mousemove", this.highlighter.outputMousemove.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)); + 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.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)); diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index f4778e59..5c7858b5 100755 --- a/src/web/OutputWaiter.mjs +++ b/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() { - return this.getOutput(this.getActiveTab()); + getActive(raw=true) { + 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; - const sample = this.getActive().slice(0, 1000) || ""; + if (!this.app.options.autoMagic || !this.getActive(true)) return; + 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; diff --git a/src/web/WorkerWaiter.mjs b/src/web/WorkerWaiter.mjs index 7e9eec28..feae5e56 100644 --- a/src/web/WorkerWaiter.mjs +++ b/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;