Make input and output tab areas scrollable

src/web/InputWaiter.mjs

@@ -265,7 +265,7 @@ class InputWaiter {
                 this.showLoadingInfo(r.data, true);
                 break;
             case "setInput":
-                this.set(r.data.inputObj, r.data.silent);
+                this.app.debounce(this.set, 50, "setInput", this, [r.data.inputObj, r.data.siilent])();
                 break;
             case "inputAdded":
                 this.inputAdded(r.data.changeTab, r.data.inputNum);
@@ -1299,6 +1299,22 @@ class InputWaiter {
         }
     }
 
+    /**
+     * Handler for scrolling on the input tabs area
+     *
+     * @param {event} wheelEvent
+     */
+    scrollTab(wheelEvent) {
+        wheelEvent.preventDefault();
+
+        if (wheelEvent.deltaY > 0) {
+            this.changeTabLeft();
+        } else if (wheelEvent.deltaY < 0) {
+            this.changeTabRight();
+        }
+
+    }
+
     /**
      * Handler for clicking on next tab button
      */

src/web/Manager.mjs

@@ -162,6 +162,7 @@ class Manager {
         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));
         document.getElementById("btn-find-input-tab").addEventListener("click", this.input.findTab.bind(this.input));
+        this.addDynamicListener("#input-tabs li .input-tab-content", "wheel", this.input.scrollTab, this.input);
         this.addDynamicListener("#input-tabs li .input-tab-content", "click", this.input.changeTabClick, this.input);
         document.getElementById("input-show-pending").addEventListener("change", this.input.filterTabSearch.bind(this.input));
         document.getElementById("input-show-loading").addEventListener("change", this.input.filterTabSearch.bind(this.input));
@@ -197,6 +198,7 @@ class Manager {
         document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
         this.addDynamicListener(".extract-file,.extract-file i", "click", this.output.extractFileClick, this.output);
         this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "click", this.output.changeTabClick, this.output);
+        this.addDynamicListener("#output-tabs-wrapper #output-tabs li .output-tab-content", "wheel", this.output.scrollTab, this.output);
         document.getElementById("btn-previous-output-tab").addEventListener("click", this.output.changeTabLeft.bind(this.output));
         document.getElementById("btn-next-output-tab").addEventListener("click", this.output.changeTabRight.bind(this.output));
         document.getElementById("btn-go-to-output-tab").addEventListener("click", this.output.goToTab.bind(this.output));

src/web/OutputWaiter.mjs

@@ -51,7 +51,7 @@ class OutputWaiter {
      * @returns {string | ArrayBuffer}
      */
     getOutput(inputNum, raw=true) {
-        if (this.outputs[inputNum] === undefined || this.outputs[inputNum] === null) return -1;
+        if (!this.outputExists(inputNum)) return -1;
 
         if (this.outputs[inputNum].data === null) return "";
 
@@ -740,7 +740,7 @@ class OutputWaiter {
             }
         }
 
-        this.set(inputNum);
+        this.app.debounce(this.set, 50, "setOutput", this, [inputNum])();
 
         if (changeInput) {
             this.manager.input.changeTab(inputNum, false);
@@ -760,6 +760,22 @@ class OutputWaiter {
         }
     }
 
+    /**
+     * Handler for scrolling on the output tabs area
+     *
+     * @param {event} wheelEvent
+     */
+    scrollTab(wheelEvent) {
+        wheelEvent.preventDefault();
+
+        if (wheelEvent.deltaY > 0) {
+            this.changeTabLeft();
+        } else if (wheelEvent.deltaY < 0) {
+            this.changeTabRight();
+        }
+
+    }
+
     /**
      * Handler for changing to the left tab
      */