Merge branch 'seadragon-fix' into 'v3'

Stop closing seadragon when going full screen

Closes #718

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

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

@@ -30,6 +30,8 @@ export default {
     },
   },
 
+  emits: ["entering-fullscreen"],
+
   data: function () {
     return {
       osdViewer: null,
@@ -83,7 +85,8 @@ export default {
           this.loadOpenSeaDragon(this.src);
         }
       } else {
-        if (this.osdViewer) {
+        // Don't destroy if viewer is in fullscreen
+        if (this.osdViewer && !this.osdViewer.isFullPage()) {
           this.osdViewer.destroy();
           this.osdViewer = null;
         }
@@ -110,7 +113,7 @@ export default {
     },
 
     updateFilter() {
-      const viewerEl = document.getElementById("openseadragon");
+      const viewerEl = this.$refs.osdContainer;
       if (viewerEl) {
         viewerEl.style.filter = `
           brightness(${this.brightness})
@@ -121,7 +124,12 @@ export default {
     },
     openFullscreen() {
       if (this.osdViewer) {
-        this.osdViewer.setFullScreen(true);
+        // 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
+        this.$nextTick(() => {
+          this.osdViewer.setFullScreen(true);
+        });
       }
     },
   },

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,9 @@ export default {
       brightness: 1,
       contrast: 1,
       saturation: 1,
+      enteringFullscreen: false,
+      modalEl: null,
+      beforeHideHandler: null,
     };
   },
   computed: {
@@ -86,6 +90,21 @@ export default {
       return null;
     },
   },
+  mounted() {
+    this.modalEl = this.$refs.scanModal;
+    this.beforeHideHandler = (event) => {
+      if (this.enteringFullscreen) {
+        event.preventDefault();
+        this.enteringFullscreen = false;
+      }
+    };
+    this.modalEl.addEventListener("beforehide", this.beforeHideHandler);
+  },
+  beforeUnmount() {
+    if (this.modalEl && this.beforeHideHandler) {
+      this.modalEl.removeEventListener("beforehide", this.beforeHideHandler);
+    }
+  },
   methods: {
     show() {
       UIkit.modal(this.$refs.scanModal).show();