Changeset 35957 for main/trunk

Timestamp:

2022-01-11T13:57:48+13:00 (2 years ago)

Author:

cstephen

Message:

Refactor OcrImageDisplay to act as a magnification container for an image

Location:

main/trunk/model-interfaces-dev/atea/ocr/src/components

Files:

• MainPage.vue (modified) (1 diff)
• OcrImageDisplay.vue (modified) (4 diffs)

main/trunk/model-interfaces-dev/atea/ocr/src/components/MainPage.vue

@@ -294 +294 @@
             <div class="main-content-columns">
                 <ocr-image-display
+                    v-if="!showThresholdedImage"
                     :imageUrl="imageUrl"
-                    :thresholdedImageUrl="thresholdedImageUrl"
                     :enableMagnifier="enableMagnifier"
-                    :magnifierZoom="magnifierZoom"
-                    :showThresholdedImage="showThresholdedImage" />
+                    :magnifierZoom="magnifierZoom" />
+
+                <ocr-image-display
+                    v-else
+                    :imageUrl="thresholdedImageUrl"
+                    :enableMagnifier="enableMagnifier"
+                    :magnifierZoom="magnifierZoom" />
 
                 <textarea

main/trunk/model-interfaces-dev/atea/ocr/src/components/OcrImageDisplay.vue

@@ -6 +6 @@
     props: {
         imageUrl: String,
-        thresholdedImageUrl: String,
         enableMagnifier: Boolean,
-        magnifierZoom: Number,
-        showThresholdedImage: Boolean
+        magnifierZoom: Number
     },
     data() {
@@ -123 +121 @@
         imageUrl() {
             setTimeout(() => {
-                this.updateMagnifier(this.$refs.ocrImage);
-            }, 100);
-        },
-        thresholdedImageUrl() {
-            if (!this.showThresholdedImage) {
-                return;
-            }
-
-            setTimeout(() => {
-                this.updateMagnifier(this.$refs.thresholdedImage);
-            }, 100);
-        },
-        showThresholdedImage(newValue) {
-            setTimeout(() => {
-                if (newValue) {
-                    this.updateMagnifier(this.$refs.thresholdedImage);
-                }
-                else {
-                    this.updateMagnifier(this.$refs.ocrImage);
-                }
+                this.updateMagnifier(this.$refs.imageRef);
             }, 100);
         },
         magnifierZoom() {
-            if (this.showThresholdedImage) {
-                this.updateMagnifier(this.$refs.thresholdedImage);
-            }
-            else {
-                this.updateMagnifier(this.$refs.ocrImage);
-            }
+            this.updateMagnifier(this.$refs.imageRef);
         }
     },
     mounted() {
         setTimeout(() => {
-            this.updateMagnifier(this.$refs.ocrImage);
+            this.updateMagnifier(this.$refs.imageRef);
         }, 100);
     }
@@ -163 +137 @@
 
 <template>
-<div ref="magContainer" class="ocr-image-container">
+<div ref="magContainer" class="image-container">
     <div ref="magnifier" class="magnifier" @mousemove="moveMagnifier" :style="{ 'visibility': enableMagnifier ? 'visible' : 'collapse' }" />
-    <img v-if="!showThresholdedImage" ref="ocrImage" class="ocr-image" :src="imageUrl" />
-    <img v-if="showThresholdedImage" ref="thresholdedImage" class="ocr-image" :src="thresholdedImageUrl" />
+    <img v-if="!showThresholdedImage" ref="imageRef" class="image" :src="imageUrl" />
 </div>
 </template>
 
 <style lang="scss" scoped>
-.ocr-image-container {
+.image-container {
     position: relative;
 
@@ -189 +162 @@
 }
 
-.ocr-image {
+.image {
     border: 1px solid #444;
     max-width: 100%;