diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 9af1992d..96587df6 100644 --- a/src/web/InputWaiter.mjs +++ b/src/web/InputWaiter.mjs @@ -70,7 +70,10 @@ class InputWaiter { * Terminates any existing workers and sets up a new InputWorker and LoaderWorker */ setupInputWorker() { - if (this.inputWorker !== null) this.inputWorker.terminate(); + if (this.inputWorker !== null) { + this.inputWorker.terminate(); + this.inputWorker = null; + } for (let i = this.loaderWorkers.length - 1; i >= 0; i--) { this.removeLoaderWorker(this.loaderWorkers[i]); @@ -183,7 +186,6 @@ class InputWaiter { return -1; } - // removeInput should talk to the worker /** * Handler for messages sent back by the inputWorker @@ -228,7 +230,7 @@ class InputWaiter { this.updateFileProgress(r.data.inputNum, r.data.progress); break; case "loadingInfo": - this.showLoadingInfo(r.data); + this.showLoadingInfo(r.data, true); break; case "setInput": this.set(r.data.inputObj, r.data.silent); @@ -248,10 +250,8 @@ class InputWaiter { default: log.error(`Unknown action ${r.action}.`); } - // Handle the responses and use them to control the UI / other workers / stuff } - // get / set input /** * Gets the input for the active tab */ @@ -373,14 +373,7 @@ class InputWaiter { const fileLoaded = document.getElementById("input-file-loaded"); fileLoaded.textContent = progress + "%"; - if (progress < 100) { - setTimeout(function() { - this.inputWorker.postMessage({ - action: "getInputProgress", - data: activeTab - }); - }.bind(this), 100); - } else { + if (progress === 100) { this.inputWorker.postMessage({ action: "setInput", data: { @@ -391,7 +384,6 @@ class InputWaiter { } } - /** * Updates the input value for the specified inputNum * @@ -429,9 +421,7 @@ class InputWaiter { document.getElementById("input-info").innerHTML = msg; } - // get progress - // inputChange /** * Handler for input change events * @@ -461,7 +451,6 @@ class InputWaiter { window.dispatchEvent(this.manager.statechange); } } - // inputPaste /** * Handler for input paste events @@ -520,7 +509,6 @@ class InputWaiter { e.target.closest("#input-text,#input-file").classList.remove("dropping-file"); } - // inputDrop /** * Handler for input drop events. * Loads the dragged data. @@ -586,7 +574,7 @@ class InputWaiter { inputNum: activeTab, progress: 0 } - }); + }, false); this.inputWorker.postMessage({ action: "loadUIFiles", @@ -658,8 +646,9 @@ class InputWaiter { * @param {object} loadedData.activeProgress * @param {number} loadedData.activeProgress.inputNum * @param {number} loadedData.activeProgress.progress + * @param {boolean} autoRefresh */ - showLoadingInfo(loadedData) { + showLoadingInfo(loadedData, autoRefresh) { const pending = loadedData.pending; const loading = loadedData.loading; const loaded = loadedData.loaded; @@ -686,7 +675,7 @@ class InputWaiter { this.updateFileProgress(loadedData.activeProgress.inputNum, loadedData.activeProgress.progress); - if (loaded < total) { + if (loaded < total && autoRefresh) { setTimeout(function() { this.inputWorker.postMessage({ action: "getLoadProgress", @@ -852,7 +841,10 @@ class InputWaiter { updateTabHeader(headerData) { const tabsList = document.getElementById("input-tabs"); const inputNum = headerData.inputNum; - const inputData = headerData.input.slice(0, 100); + let inputData = "New Tab"; + if (headerData.input.length > 0) { + inputData = headerData.input.slice(0, 100); + } for (let i = 0; i < tabsList.children.length; i++) { if (tabsList.children.item(i).getAttribute("inputNum") === inputNum.toString()) { tabsList.children.item(i).firstElementChild.innerText = `${inputNum}: ${inputData}`; @@ -909,6 +901,22 @@ class InputWaiter { // clearAllIO // could just re-run setup to create a new inputWorker + /** + * Handler for clear all IO events. + * Resets the input, output and info areas + */ + clearAllIoClick() { + this.manager.worker.cancelBake(); + this.manager.output.removeAllOutputs(); + + const tabsList = document.getElementById("input-tabs").children; + for (let i = tabsList.length - 1; i >= 0; i--) { + tabsList.item(i).remove(); + } + + this.setupInputWorker(); + this.addInput(true); + } // clearIO // reset current tab @@ -931,14 +939,23 @@ class InputWaiter { /** * Sends a message to the inputWorker to add a new input. + * @param {boolean} [changeTab=false] */ - addInput() { + addInput(changeTab=false) { if (!this.inputWorker) return; this.inputWorker.postMessage({ - action: "addInput" + action: "addInput", + data: changeTab }); } + /** + * Handler for add input button clicked + */ + addInputClick() { + this.addInput(true); + } + /** * Handler for when the inputWorker adds a new input * diff --git a/src/web/InputWorker.mjs b/src/web/InputWorker.mjs index 38f8b2a3..a5baea94 100644 --- a/src/web/InputWorker.mjs +++ b/src/web/InputWorker.mjs @@ -44,7 +44,7 @@ self.addEventListener("message", function(e) { self.updateInputValue(r.data); break; case "getInputProgress": - self.getInputProgress(r.data); + self.getLoadProgress(r.data); break; case "updateInputProgress": self.updateInputProgress(r.data); @@ -62,7 +62,7 @@ self.addEventListener("message", function(e) { log.setLevel(r.data, false); break; case "addInput": - self.addInput(true, "string"); + self.addInput(r.data, "string"); break; case "refreshTabs": self.refreshTabs(r.data.inputNum, r.data.direction); diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 74c0ce15..479fb0b3 100755 --- a/src/web/Manager.mjs +++ b/src/web/Manager.mjs @@ -83,7 +83,7 @@ class Manager { */ setup() { this.input.setupInputWorker(); - this.input.addInput(); + this.input.addInput(true); this.worker.setupChefWorker(); this.recipe.initialiseOperationDragNDrop(); this.controls.initComponents(); @@ -147,7 +147,7 @@ class Manager { this.addMultiEventListener("#input-text", "keyup", this.input.inputChange, this.input); this.addMultiEventListener("#input-text", "paste", this.input.inputPaste, this.input); document.getElementById("reset-layout").addEventListener("click", this.app.resetLayout.bind(this.app)); - // document.getElementById("clr-io").addEventListener("click", this.input.clearAllIoClick.bind(this.input)); + document.getElementById("clr-io").addEventListener("click", this.input.clearAllIoClick.bind(this.input)); this.addListeners("#open-file,#open-folder", "change", this.input.inputOpen, this.input); this.addListeners("#input-text,#input-file", "dragover", this.input.inputDragover, this.input); this.addListeners("#input-text,#input-file", "dragleave", this.input.inputDragleave, this.input); @@ -157,7 +157,7 @@ class Manager { // 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.addInput.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)); document.getElementById("btn-next-input-tab").addEventListener("click", this.input.changeTabRight.bind(this.input)); document.getElementById("btn-go-to-input-tab").addEventListener("click", this.input.goToTab.bind(this.input)); diff --git a/src/web/OutputWaiter.mjs b/src/web/OutputWaiter.mjs index ea1c853c..a0d8c892 100755 --- a/src/web/OutputWaiter.mjs +++ b/src/web/OutputWaiter.mjs @@ -168,6 +168,17 @@ class OutputWaiter { delete (this.outputs[inputNum]); } + /** + * Removes all output tabs + */ + removeAllOutputs() { + this.outputs = {}; + const tabs = document.getElementById("output-tabs").children; + for (let i = tabs.length - 1; i >= 0; i--) { + tabs.item(i).remove(); + } + } + /** * Sets the output in the output textarea. * @@ -427,7 +438,7 @@ class OutputWaiter { const tabsWrapper = document.getElementById("output-tabs"); const numTabs = tabsWrapper.children.length; - if (numTabs < this.maxTabs) { + if (this.getTabItem(inputNum) === undefined && numTabs < this.maxTabs) { // Create a new tab element const newTab = this.createTabElement(inputNum); @@ -442,6 +453,15 @@ class OutputWaiter { document.getElementById("output-loader").style.height = "calc(100% - var(--tab-height) - var(--title-height))"; document.getElementById("save-all-to-file").style.display = "inline-block"; + } else { + tabsWrapper.parentElement.style.display = "none"; + + document.getElementById("output-wrapper").style.height = "calc(100% - var(--title-height))"; + document.getElementById("output-highlighter").style.height = "calc(100% - var(--title-height))"; + document.getElementById("output-file").style.height = "calc(100% - var(--title-height))"; + document.getElementById("output-loader").style.height = "calc(100% - var(--title-height))"; + + document.getElementById("save-all-to-file").style.display = "none"; } }