Improve removing tabs experience

src/web/Manager.mjs

@@ -64,6 +64,7 @@ class Manager {
         this.controls    = new ControlsWaiter(this.app, this);
         this.recipe      = new RecipeWaiter(this.app, this);
         this.ops         = new OperationsWaiter(this.app, this);
+        this.tabs        = new TabWaiter(this.app, this);
         this.input       = new InputWaiter(this.app, this);
         this.output      = new OutputWaiter(this.app, this);
         this.options     = new OptionsWaiter(this.app, this);
@@ -71,7 +72,6 @@ class Manager {
         this.seasonal    = new SeasonalWaiter(this.app, this);
         this.bindings    = new BindingsWaiter(this.app, this);
         this.background  = new BackgroundWorkerWaiter(this.app, this);
-        this.tabs        = new TabWaiter(this.app, this);
 
         // Object to store dynamic handlers to fire on elements that may not exist yet
         this.dynamicHandlers = {};

src/web/waiters/InputWaiter.mjs

@@ -48,7 +48,7 @@ class InputWaiter {
         this.inputWorker = null;
         this.loaderWorkers = [];
         this.workerId = 0;
-        this.maxTabs = 4;
+        this.maxTabs = this.manager.tabs.calcMaxTabs();
         this.maxWorkers = navigator.hardwareConcurrency || 4;
         this.callbacks = {};
         this.callbackID = 0;
@@ -264,7 +264,7 @@ class InputWaiter {
                 this.showLoadingInfo(r.data, true);
                 break;
             case "setInput":
-                this.app.debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.siilent])();
+                this.app.debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.silent])();
                 break;
             case "inputAdded":
                 this.inputAdded(r.data.changeTab, r.data.inputNum);
@@ -1142,6 +1142,14 @@ class InputWaiter {
      */
     refreshTabs(nums, activeTab, tabsLeft, tabsRight) {
         this.manager.tabs.refreshInputTabs(nums, activeTab, tabsLeft, tabsRight);
+
+        this.inputWorker.postMessage({
+            action: "setInput",
+            data: {
+                inputNum: activeTab,
+                silent: true
+            }
+        });
     }
 
     /**

src/web/waiters/OutputWaiter.mjs

@@ -26,7 +26,7 @@ class OutputWaiter {
 
         this.outputs = {};
         this.zipWorker = null;
-        this.maxTabs = 4;
+        this.maxTabs = this.manager.tabs.calcMaxTabs();
         this.tabTimeout = null;
     }
 
@@ -37,7 +37,7 @@ class OutputWaiter {
         const numTabs = this.manager.tabs.calcMaxTabs();
         if (numTabs !== this.maxTabs) {
             this.maxTabs = numTabs;
-            this.refreshTabs(this.manager.tabs.getActiveOutputTab());
+            this.refreshTabs(this.manager.tabs.getActiveOutputTab(), "right");
         }
     }
 
@@ -242,15 +242,14 @@ class OutputWaiter {
      * @param {number} inputNum
      */
     async set(inputNum) {
+        if (inputNum !== this.manager.tabs.getActiveOutputTab()) return;
+        this.toggleLoader(true);
+
         return new Promise(async function(resolve, reject) {
             const output = this.outputs[inputNum];
             if (output === undefined || output === null) return;
             if (typeof inputNum !== "number") inputNum = parseInt(inputNum, 10);
 
-            if (inputNum !== this.manager.tabs.getActiveOutputTab()) return;
-
-            this.toggleLoader(true);
-
             const outputText = document.getElementById("output-text");
             const outputHtml = document.getElementById("output-html");
             const outputFile = document.getElementById("output-file");
@@ -799,7 +798,7 @@ class OutputWaiter {
         const nums = [];
         for (let i = 0; i < this.maxTabs; i++) {
             let newNum;
-            if (i === 0) {
+            if (i === 0 && this.outputs[inputNum] !== undefined) {
                 newNum = inputNum;
             } else {
                 switch (direction) {
@@ -899,37 +898,26 @@ class OutputWaiter {
      */
     removeTab(inputNum) {
         if (!this.outputExists(inputNum)) return;
-        let activeTab = this.manager.tabs.getActiveOutputTab();
 
         const tabElement = this.manager.tabs.getOutputTabItem(inputNum);
 
         this.removeOutput(inputNum);
 
         if (tabElement !== null) {
-            // find new tab number?
+            this.refreshTabs(this.getPreviousInputNum(inputNum), "left");
-            if (inputNum === activeTab) {
-                activeTab = this.getPreviousInputNum(activeTab);
-                if (activeTab === this.manager.tabs.getActiveOutputTab()) {
-                    activeTab = this.getNextInputNum(activeTab);
-                }
-            }
-            this.refreshTabs(activeTab);
         }
     }
 
     /**
      * Redraw the entire tab bar to remove any outdated tabs
      * @param {number} activeTab
+     * @param {string} direction - Either "left" or "right"
      */
-    refreshTabs(activeTab) {
+    refreshTabs(activeTab, direction) {
-        const minNum = Math.min(this.manager.tabs.getOutputTabList());
-        let direction = "right";
-        if (activeTab < minNum) {
-            direction = "left";
-        }
         const newNums = this.getNearbyNums(activeTab, direction),
             tabsLeft = (newNums[0] !== this.getSmallestInputNum()),
-            tabsRight = (newNums[newNums.length] !== this.getLargestInputNum());
+            tabsRight = (newNums[newNums.length - 1] !== this.getLargestInputNum());
+
         this.manager.tabs.refreshOutputTabs(newNums, activeTab, tabsLeft, tabsRight);
     }
 

src/web/workers/InputWorker.mjs

@@ -873,7 +873,7 @@ self.removeInput = function(removeInputData) {
     delete self.inputs[inputNum];
 
     if (refreshTabs) {
-        self.refreshTabs(inputNum, "left");
+        self.refreshTabs(self.getPreviousInputNum(inputNum), "left");
     }
 
     if (self.numInputs < self.maxWorkers && removeInputData.removeChefWorker) {