Refactor brightness, contrast, and saturation filters into Vue props.

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

@@ -14,15 +14,25 @@ export default {
     src: {
       type: String,
       required: true
+      
+    },
+    brightness: {
+      type: Number,
+      required: true
+    },
+    contrast: {
+      type: Number,
+      required: true
+    },
+    saturation: {
+      type: Number,
+      required: true
     }
   },
 
   data: function() {
     return {
-      osdViewer: null,
+      osdViewer: null
-      brightness: 1,
-      contrast: 1,
-      saturation: 1,
     };
   },
 
@@ -32,6 +42,15 @@ export default {
       handler(newVal) {
         this.loadOpenSeaDragon(newVal);
       }
+    },
+    brightness() {
+      this.updateFilter();
+    },
+    contrast() {
+      this.updateFilter();
+    },
+    saturation() {
+      this.updateFilter();
     }
   },
 

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

@@ -25,6 +25,9 @@
           id="openseadragon"
           ref="openseadragon"
           :src="selectedScanDZI"
+          :brightness="brightness"
+          :contrast="contrast"
+          :saturation="saturation"
         />
       </div>
 
@@ -42,7 +45,6 @@
               max="1.8"
               step="0.01"
               v-model.number="brightness"
-              @input="updateViewerFilter"
             />
           </label>
           <label>
@@ -53,7 +55,6 @@
               max="1.8"
               step="0.01"
               v-model.number="contrast"
-              @input="updateViewerFilter"
             />
           </label>
           <label>
@@ -64,7 +65,6 @@
               max="2"
               step="0.01"
               v-model.number="saturation"
-              @input="updateViewerFilter"
             />
           </label>
         </div>
@@ -124,20 +124,10 @@ export default {
     goFullscreen() {
       this.$refs.openseadragon.openFullscreen();
     },
-    updateViewerFilter() {
-      const viewer = this.$refs.openseadragon;
-      if (viewer) {
-        viewer.brightness = this.brightness;
-        viewer.contrast = this.contrast;
-        viewer.saturation = this.saturation;
-        viewer.updateFilter();
-      }
-    },
     resetFilters() {
       this.brightness = 1;
       this.contrast = 1;
       this.saturation = 1;
-      this.updateViewerFilter();
     },
   },
 };

webapp/src/components/tabContentComponents/scanListContent.vue

@@ -101,10 +101,7 @@ export default {
       scans: [],
       ongoing: null,
       selectedScan: null,
-      osdViewer: null,
+      osdViewer: null
-      brightness: 1,
-      contrast: 1,
-      saturation: 1,
     };
   },
 
@@ -222,7 +219,7 @@ export default {
       } else {
         this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
       }
-    },
+    }
   }
 }
 </script>
@@ -239,10 +236,4 @@ export default {
   margin-bottom: 30px;
 }
 
-input[type="range"] {
-  pointer-events: auto;
-  z-index: 1001;
-}
-
-
 </style>