OpenSeadragon viewer implemented

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

@@ -0,0 +1,96 @@
+<template>
+    <div v-observe-visibility="visibilityChanged">
+        <div id="openseadragon"></div>
+    </div>
+</template>
+
+<script>
+import OpenSeaDragon from "openseadragon";
+
+// Export main app
+export default {
+  name: "OpenSeadragonViewer",
+  components: {  },
+
+  props: {
+    src: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      osdViewer: null
+    };
+  },
+
+  watch: {
+    src: {
+      immediate: true,
+      handler(newVal) {
+        this.loadOpenSeaDragon(newVal);
+      }
+    }
+  },
+
+  async mounted() {
+    if (this.src) {
+      this.loadOpenSeaDragon(this.src);
+    }
+  },
+
+  beforeDestroy() {
+    // Remove global signal listener to perform a gallery refresh
+    this.osdViewer.destroy();
+  },
+
+  methods: {
+    visibilityChanged(isVisible) {
+      if (isVisible) {
+        this.loadOpenSeaDragon();
+      }else{
+        this.osdViewer.destroy();
+      }
+    },
+    async loadOpenSeaDragon() {
+      if (this.osdViewer) {
+        this.osdViewer.destroy();
+      }
+      this.osdViewer = OpenSeaDragon({
+        id: "openseadragon",
+        crossOriginPolicy: 'Anonymous',
+        tileSources: this.src,
+        showNavigationControl: false,
+        maxZoomPixelRatio: 2,
+        gestureSettingsMouse: {
+            clickToZoom: false
+        }
+      });
+    },
+    openFullscreen() {
+      if (this.osdViewer) {
+        this.osdViewer.setFullScreen(true);
+      }
+    },
+  }
+};
+</script>
+
+<style lang="less" scoped>
+#openseadragon {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  z-index:1;
+}
+#info-panel {
+    position: relative;
+    top: 10px;
+    left: 10px;
+    background-color: rgba(255, 255, 255, 0.7);
+    padding: 5px;
+    border-radius: 1px;
+    z-index: 1000;
+}
+</style>