ui_migration fix(deps): Replace component instance event by external event bus from mitt package.

webapp/src/components/tabContentComponents/controlComponents/autofocusControl.vue

@@ -40,7 +40,7 @@ export default {
     },
     afterAutofocus() {
       this.isAutofocusing = false;
-      this.$root.$emit("globalUpdatePositionEvent");
+      eventBus.emit("globalUpdatePositionEvent");
     },
   },
 };

webapp/src/components/tabContentComponents/controlComponents/positionControl.vue

@@ -63,6 +63,7 @@ import syncPropertyButton from "../../labThingsComponents/syncPropertyButton.vue
 import stageControlButtons from "./stageControlButtons.vue";
 // vue3 migration
 import { markRaw } from "vue";
+import { eventBus } from "../../../eventBus.js";
 
 export default {
   name: "PaneControl",
@@ -89,20 +90,20 @@ export default {
   async mounted() {
     let self = this;
     // A global signal listener to perform a move action
-    this.$root.$on("globalMoveEvent", self.move);
-    this.$root.$on("globalUpdatePositionEvent", self.updatePosition);
+    eventBus.on("globalMoveEvent", self.move);
+    eventBus.on("globalUpdatePositionEvent", self.updatePosition);
     // A global signal listener to perform a move action in pixels
-    this.$root.$on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
+    eventBus.on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
       this.moveInImageCoordinatesRequest(x, y, absolute);
     });
     // A global signal listener to perform a move in multiples of a step size
-    this.$root.$on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
+    eventBus.on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
       const navigationStepSize = this.$store.state.navigationStepSize;
       const navigationInvert = this.$store.state.navigationInvert;
       const x = x_steps * navigationStepSize.x * (navigationInvert.x ? -1 : 1);
       const y = y_steps * navigationStepSize.y * (navigationInvert.y ? -1 : 1);
       const z = z_steps * navigationStepSize.z * (navigationInvert.z ? -1 : 1);
-      this.$root.$emit("globalMoveEvent", x, y, z, false);
+      eventBus.emit("globalMoveEvent", x, y, z, false);
     });
     // Update the current position in text boxes
     await this.updatePosition();
@@ -110,10 +111,10 @@ export default {
 
   beforeUnmount() {
     // Remove global signal listener to perform a move action
-    this.$root.$off("globalMoveEvent");
-    this.$root.$off("globalMoveInImageCoordinatesEvent");
-    this.$root.$off("globalMoveStepEvent");
-    this.$root.$off("globalUpdatePositionEvent");
+    eventBus.off("globalMoveEvent");
+    eventBus.off("globalMoveInImageCoordinatesEvent");
+    eventBus.off("globalMoveStepEvent");
+    eventBus.off("globalUpdatePositionEvent");
   },
 
   methods: {

webapp/src/components/tabContentComponents/controlComponents/stageControlButtons.vue

@@ -41,7 +41,7 @@ export default {
   name: "StageControlButtons",
   methods: {
     move(x, y, z) {
-      this.$root.$emit("globalMoveStepEvent", x, y, z);
+      eventBus.emit("globalMoveStepEvent", x, y, z);
     },
   },
 };

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -102,6 +102,7 @@ import scanCard from "./scanListComponents/scanCard.vue";
 import ScanViewerModal from "./scanListComponents/scanViewer.vue";
 // vue3 migration
 import { markRaw } from "vue";
+import { eventBus } from "../../eventBus.js";
 
 // Export main app
 export default {
@@ -150,10 +151,10 @@ export default {
     // Update on mount (does nothing if not connected)
     await this.updateScans();
     // A global signal listener to perform a gallery refresh
-    this.$root.$on("globalUpdateScans", () => {
+    eventBus.on("globalUpdateScans", () => {
       this.updateScans();
     });
-    this.$root.$on("modalClosed", () => {
+    eventBus.on("modalClosed", () => {
       // Handle the modal closed event here
       this.updateScans();
     });
@@ -179,13 +180,13 @@ export default {
 
   beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
-    this.$root.$off("globalUpdateScans");
+    eventBus.off("globalUpdateScans");
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {
       this.unwatchStoreFunction();
       this.unwatchStoreFunction = null;
     }
-    this.$root.$off("modalClosed"); // Clean up event listener
+    eventBus.off("modalClosed"); // Clean up event listener
   },
 
   methods: {

webapp/src/components/tabContentComponents/streamContent.vue

@@ -35,6 +35,9 @@
 </template>
 
 <script>
+// vue3 migration
+import { eventBus } from "../../eventBus.js";
+
 // Export main app
 export default {
   name: "StreamDisplay",
@@ -63,7 +66,7 @@ export default {
 
   mounted() {
     // A global signal listener to flash the stream element
-    this.$root.$on("globalFlashStream", () => {
+    eventBus.on("globalFlashStream", () => {
       this.flashStream();
     });
 
@@ -83,9 +86,9 @@ export default {
 
   beforeUnmount: function () {
     // Remove global signal listener to change the GPU preview state
-    this.$root.$off("globalTogglePreview");
+    eventBus.off("globalTogglePreview");
     // Remove global signal listener to flash the stream element
-    this.$root.$off("globalFlashStream");
+    eventBus.off("globalFlashStream");
     // Disconnect the size observer
     this.sizeObserver.disconnect();
     // Remove from the array of active streams
@@ -126,7 +129,7 @@ export default {
       let yRelative = (0.5 * event.target.offsetHeight - yCoordinate) * scale;
 
       // Emit a signal to move, acted on by paneControl.vue
-      this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
+      eventBus.emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
     },
 
     handleResize: function () {