Add clear all io button.

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) {
+        if (progress === 100) {
-            setTimeout(function() {
-                this.inputWorker.postMessage({
-                    action: "getInputProgress",
-                    data: activeTab
-                });
-            }.bind(this), 100);
-        } else {
             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
      *

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);

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));

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";
             }
         }