Merge branch 'bugfix/close_mitt_signals_' into 'v3'

Bugfix/close mitt signals

Closes #757

See merge request openflexure/openflexure-microscope-server!581

webapp/src/App.vue

@@ -186,7 +186,7 @@ export default {
         shortcut: "pgup / pgdn",
         description: "Move the microscope focus",
       });
-
+      // The following signal is managed (on/off) by actionButton.vue at this.submitOnEvent.
       Mousetrap.bind("c", () => {
         eventBus.emit("globalCaptureEvent", {});
       });
@@ -194,7 +194,8 @@ export default {
         shortcut: "c",
         description: "Take a capture",
       });
-
+      // The following signal is managed (on/off) by actionButton.vue at this.submitOnEvent.
+      // There's no visual feedback when the event is triggered
       Mousetrap.bind("a", () => {
         eventBus.emit("globalFastAutofocusEvent", {});
       });
@@ -202,10 +203,11 @@ export default {
         shortcut: "a",
         description: "Fast autofocus",
       });
-
+      // This signal is managed on lifecycle mounted and unmounted optionsAPI at appContent.vue.
       Mousetrap.bind("shift+down", () => {
         eventBus.emit("globalIncrementTab", {});
       });
+      // This signal is managed on lifecycle mounted and unmounted optionsAPI at appContent.vue.
       Mousetrap.bind("shift+up", () => {
         eventBus.emit("globalDecrementTab", {});
       });

webapp/src/components/appContent.vue

@@ -199,23 +199,36 @@ export default {
   mounted() {
     const store = useSettingsStore();
     // A global signal listener to switch tab
-    eventBus.on("globalSwitchTab", (tabID) => {
+    eventBus.on("globalSwitchTab", this.handleGlobalSwitchTab);
-      this.currentTab = tabID;
-    });
     // A global signal listener to increment tab
-    eventBus.on("globalIncrementTab", () => {
+    eventBus.on("globalIncrementTab", this.handleGlobalIncrementTab);
-      this.incrementTabBy(1);
-    });
     // A global signal listener to decrement tab
-    eventBus.on("globalDecrementTab", () => {
+    eventBus.on("globalDecrementTab", this.handleGlobalDecrementTab);
-      this.incrementTabBy(-1);
-    });
     if (store.ready) {
       this.startModals();
     }
   },
 
+  beforeUnmount() {
+    // closing signals
+    eventBus.off("globalSwitchTab", this.handleGlobalSwitchTab);
+    eventBus.off("globalIncrementTab", this.handleGlobalIncrementTab);
+    eventBus.off("globalDecrementTab", this.handleGlobalDecrementTab);
+  },
+
   methods: {
+    // These methods are used for opening and closing signals.
+    // They are used instead of anonymous arrow functions so we can
+    // call close on the same function called with open.
+    handleGlobalSwitchTab: function (tabID) {
+      this.currentTab = tabID;
+    },
+    handleGlobalIncrementTab: function () {
+      this.incrementTabBy(1);
+    },
+    handleGlobalDecrementTab: function () {
+      this.incrementTabBy(-1);
+    },
     setTab: function (event, tab) {
       if (!(this.currentTab == tab)) {
         this.currentTab = tab;

webapp/src/components/labThingsComponents/actionButton.vue

@@ -219,22 +219,22 @@ export default {
       }
       // A global signal listener to perform the action
       if (this.submitOnEvent) {
-        eventBus.on(this.submitOnEvent, () => {
+        eventBus.on(this.submitOnEvent, this.handleShortcutTrigger);
-          if (this.isDisabled) return;
-          // Bootstrap task if button is not disabled.
-          this.bootstrapTask();
-        });
       }
     }
   },
 
   beforeUnmount() {
     if (this.submitOnEvent) {
-      eventBus.off(this.submitOnEvent);
+      eventBus.off(this.submitOnEvent, this.handleShortcutTrigger);
     }
   },
 
   methods: {
+    handleShortcutTrigger() {
+      if (this.isDisabled) return;
+      this.bootstrapTask();
+    },
     handleClick() {
       if (this.taskStarted) {
         this.terminateTask();

webapp/src/components/tabContentComponents/streamContent.vue

@@ -109,6 +109,8 @@ export default {
     this.sizeObserver.disconnect();
     // Remove from the array of active streams
     this.store.removeStream(this.$.uid);
+    // close signal
+    eventBus.off("globalFlashStream", this.onFlashStream);
   },
 
   methods: {