ui_migration fix(deps): --preliminary-- Replace value to modelvalue, and global emitters. BUG:keys-arrows-wont-move

webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue

@@ -66,14 +66,20 @@ export default {
     };
   },
 
-  async created() {
-    this.readSettings();
-  },
-
   methods: {
+    async safeReadSettings() {
+      if (!this.$store.state.connected) return;
+      
+      try {
+        await this.readSettings();
+      } catch (error) {
+        console.error("Error reading background detector settings:", error);
+      }
+    },
+
     visibilityChanged(isVisible) {
       if (isVisible) {
-        this.readSettings();
+        this.safeReadSettings();
       }
     },
     alertBackgroundSet() {

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

@@ -88,40 +88,49 @@ export default {
   },
 
   async mounted() {
-    let self = this;
     // A global signal listener to perform a move action
-    eventBus.on("globalMoveEvent", self.move);
-    eventBus.on("globalUpdatePositionEvent", self.updatePosition);
+    eventBus.on("globalMoveEvent", this.move);
+    
+    eventBus.on("globalUpdatePositionEvent", this.updatePosition);
     // A global signal listener to perform a move action in pixels
-    eventBus.on("globalMoveInImageCoordinatesEvent", (x, y, absolute) => {
-      this.moveInImageCoordinatesRequest(x, y, absolute);
-    });
+    
+    this.onMoveImage = (payload) => {
+      const { x, y, absolute } = payload;
+      this.moveInImageCoordinatesRequest(payload.x, payload.y, payload.absolute);
+    };
+
+    eventBus.on("globalMoveInImageCoordinatesEvent", this.onMoveImage);
     // A global signal listener to perform a move in multiples of a step size
-    eventBus.on("globalMoveStepEvent", (x_steps, y_steps, z_steps) => {
+    
+    this.onMoveStep = (payload) => {
+      const { x_steps, y_steps, z_steps } = payload;
       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);
-      eventBus.emit("globalMoveEvent", x, y, z, false);
-    });
+      eventBus.emit("globalMoveEvent", {x, y, z, absolute: false});
+    };
+    
+    eventBus.on("globalMoveStepEvent", this.onMoveStep);
     // Update the current position in text boxes
     await this.updatePosition();
   },
 
   beforeUnmount() {
     // Remove global signal listener to perform a move action
-    eventBus.off("globalMoveEvent");
-    eventBus.off("globalMoveInImageCoordinatesEvent");
-    eventBus.off("globalMoveStepEvent");
-    eventBus.off("globalUpdatePositionEvent");
+    eventBus.off("globalMoveEvent", this.move);
+    eventBus.off("globalMoveInImageCoordinatesEvent", this.onMoveImage);
+    eventBus.off("globalMoveStepEvent", this.onMoveStep);
+    eventBus.off("globalUpdatePositionEvent", this.updatePosition);
   },
 
   methods: {
     timeout(ms) {
       return new Promise((resolve) => setTimeout(resolve, ms));
     },
-    async move(x, y, z, absolute) {
+    async move(payload) {
+      const { x, y, z, absolute } = payload;
       // Move the stage, by updating the controls and starting a move task
       // This is equivalent to clicking the "move" button.
       if (this.moveLock) return; // Discard move requests if we're already moving

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

@@ -37,6 +37,8 @@
 </template>
 
 <script>
+import { eventBus } from "../../../eventBus.js";
+
 export default {
   name: "StageControlButtons",
   methods: {

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -180,13 +180,13 @@ export default {
 
   beforeUnmount() {
     // Remove global signal listener to perform a gallery refresh
-    eventBus.off("globalUpdateScans");
+    eventBus.off("globalUpdateScans", this.updateScans);
     // Then we call that function here to unwatch
     if (this.unwatchStoreFunction) {
       this.unwatchStoreFunction();
       this.unwatchStoreFunction = null;
     }
-    eventBus.off("modalClosed"); // Clean up event listener
+    eventBus.off("modalClosed", this.updateScans); // Clean up event listener
   },
 
   methods: {

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -90,9 +90,9 @@
             submit-label="Start Smart Scan"
             :can-terminate="true"
             @taskStarted="startScanning"
-            @update:taskStatus="taskStatus = $event"
-            @update:progress="progress = $event"
-            @update:log="log = $event"
+            @beforeUpdate:taskStatus="taskStatus = $event"
+            @beforeUpdate:progress="progress = $event"
+            @beforeUpdate:log="log = $event"
           />
         </div>
       </div>

webapp/src/components/tabContentComponents/streamContent.vue

@@ -2,7 +2,6 @@
   <div
     id="stream-display"
     ref="streamDisplay"
-    v-observe-visibility="visibilityChanged"
     class="stream-display uk-width-1-1 uk-height-1-1 scrollTarget"
   >
     <img
@@ -37,14 +36,36 @@
 <script>
 // vue3 migration
 import { eventBus } from "../../eventBus.js";
+import { ref } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
 
 // Export main app
 export default {
   name: "StreamDisplay",
 
+  setup() {
+
+    const streamDisplay = ref(null);
+    const isVisible = ref(false);
+
+    useIntersectionObserver(
+      streamDisplay,
+      ([{ isIntersecting }]) => {
+        isVisible.value = isIntersecting;
+      },
+      {
+        threshold: 0.1,
+      }
+    );
+
+    return {
+      streamDisplay,
+      isVisible,
+    };
+},
+
   data: function () {
     return {
-      isVisible: false,
       displaySize: [0, 0],
       displayPosition: [0, 0],
       resizeTimeoutId: setTimeout(this.doneResizing, 500),
@@ -66,18 +87,21 @@ export default {
 
   mounted() {
     // A global signal listener to flash the stream element
-    eventBus.on("globalFlashStream", () => {
+    this.onFlashStream = () => {
       this.flashStream();
-    });
+    };
 
+    eventBus.on("globalFlashStream", this.onFlashStream);
     // Mutation observer
     this.sizeObserver = new ResizeObserver(() => {
       this.handleResize(); // For any element attached to the observer, run handleResize() on change
     });
     // Fetch streamDisplay component by ref
-    const streamDisplayElement = this.$refs.streamDisplay.parentNode;
-    // Attach streamDisplay to the size observer
-    this.sizeObserver.observe(streamDisplayElement);
+    if (this.$refs.streamDisplay && this.$refs.streamDisplay.parentNode) {
+      const streamDisplayElement = this.$refs.streamDisplay.parentNode;
+      // Attach streamDisplay to the size observer
+      this.sizeObserver.observe(streamDisplayElement);
+    }
   },
 
   created: function () {
@@ -86,9 +110,9 @@ export default {
 
   beforeUnmount: function () {
     // Remove global signal listener to change the GPU preview state
-    eventBus.off("globalTogglePreview");
+    //eventBus.off("globalTogglePreview", true);
     // Remove global signal listener to flash the stream element
-    eventBus.off("globalFlashStream");
+    eventBus.off("globalFlashStream", this.onFlashStream);
     // Disconnect the size observer
     this.sizeObserver.disconnect();
     // Remove from the array of active streams
@@ -129,7 +153,10 @@ export default {
       let yRelative = (0.5 * event.target.offsetHeight - yCoordinate) * scale;
 
       // Emit a signal to move, acted on by paneControl.vue
-      eventBus.emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
+      eventBus.emit("globalMoveInImageCoordinatesEvent", {
+        x:-xRelative,
+        y:-yRelative
+      });
     },
 
     handleResize: function () {