Prevent scan modal closing on fullscreen close, and pin filter to fixed reference

webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue

@@ -30,6 +30,8 @@ export default {
     },
   },
 
+  emits: ["entering-fullscreen"],
+
   data: function () {
     return {
       osdViewer: null,
@@ -111,7 +113,7 @@ export default {
     },
 
     updateFilter() {
-      const viewerEl = document.getElementById("openseadragon");
+      const viewerEl = this.$refs.osdContainer;
       if (viewerEl) {
         viewerEl.style.filter = `
           brightness(${this.brightness})
@@ -122,12 +124,12 @@ export default {
     },
     openFullscreen() {
       if (this.osdViewer) {
+        // Alert the modal we are about to enter fullscreen so it can prevent closing.
+        this.$emit("entering-fullscreen");
         // Wait a bit for DOM to resize
-        setTimeout(() => {
+        this.$nextTick(() => {
           this.osdViewer.setFullScreen(true);
-          this.updateFilter();
+        });
-          this.osdViewer.forceRedraw();
-        }, 500);
       }
     },
   },

webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue

@@ -20,6 +20,7 @@
           :brightness="brightness"
           :contrast="contrast"
           :saturation="saturation"
+          @entering-fullscreen="enteringFullscreen = true"
         />
       </div>
 
@@ -76,6 +77,7 @@ export default {
       brightness: 1,
       contrast: 1,
       saturation: 1,
+      enteringFullscreen: false,
     };
   },
   computed: {
@@ -86,6 +88,16 @@ export default {
       return null;
     },
   },
+  mounted() {
+    const modalEl = this.$refs.scanModal;
+
+    modalEl.addEventListener("beforehide", (event) => {
+      if (this.enteringFullscreen) {
+        event.preventDefault();
+        this.enteringFullscreen = false;
+      }
+    });
+  },
   methods: {
     show() {
       UIkit.modal(this.$refs.scanModal).show();