Changeset 35776

Timestamp:

2021-12-09T10:52:12+13:00 (2 years ago)

Author:

cstephen

Message:

Fix magnifier logic

File:

• main/trunk/model-interfaces-dev/atea/ocr/src/components/OcrImageDisplay.vue (modified) (4 diffs)

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

@@ -33 +33 @@
             }
 
-            this.$refs.magnifier.style.background = "url('" + newImage.src + "')";
-            this.$refs.magnifier.style.backgroundSize = (newImage.width * this.magnifierZoom) + "px " +
-                (newImage.height * this.magnifierZoom) + "px";
+            /** @type {HTMLDivElement} */
+            const magnifier = this.$refs.magnifier;
+            const magWidth = newImage.width * this.magnifierZoom;
+            const magHeight = newImage.height * this.magnifierZoom;
+
+            magnifier.style.backgroundImage = `url('${newImage.src}')`;
+            magnifier.style.backgroundSize = `${magWidth}px ${magHeight}px`;
 
             this.magnifierBounds = newImage.getBoundingClientRect();
@@ -55 +59 @@
             const magXCenter = magnifier.offsetWidth / 2;
             const magYCenter = magnifier.offsetHeight / 2;
-            let { x, y } = getRelativeCursorPos(e);
+            let { x, y } = this.getRelativeCursorPos(e, magContainerBounds);
 
             // Calculate our screen-space bounds
@@ -81 +85 @@
             magnifier.style.top = (y - magYCenter) + "px";
 
-            const imageX = x - relImageLeft - magXCenter;
-            const imageY = y - relImageTop - magYCenter;
-
-            magnifier.style.backgroundPosition = "-" + (imageX * this.magnifierZoom) + "px -" + (imageY * this.magnifierZoom) + "px";
-
-            /**
-             * Gets the position of the cursor relative to the magnifier's container.
-             * @param {MouseEvent} e The mouse event.
-             */
-            function getRelativeCursorPos(e) {
-                let x = e.pageX - magContainerBounds.x;
-                let y = e.pageY - magContainerBounds.y;
-
-                // Consider any page scrolling
-                x = x - window.scrollX;
-                y = y - window.scrollY;
-
-                return {
-                    x: x,
-                    y: y
-                };
-            }
+            // Calculate the offset for the magnified image
+            const imageX = x - relImageLeft - (magXCenter / this.magnifierZoom);
+            const imageY = y - relImageTop - (magYCenter / this.magnifierZoom);
+
+            // Convert the offset to valid CSS values
+            const actualX = imageX < 0
+                ? "0"
+                : `-${(imageX * this.magnifierZoom)}px`
+
+            const actualY = imageY < 0
+                ? "0"
+                : `-${(imageY * this.magnifierZoom)}px`
+
+            magnifier.style.backgroundPosition = `${actualX} ${actualY}`
+        },
+        /**
+         * Gets the position of the cursor relative to a container.
+         * @param {MouseEvent} e The mouse event.
+         * @param {DOMRect} bounds The bounding container.
+         * @returns {{x: Number, y: Number}} The relative X and Y coordinate of the cursor.
+         */
+        getRelativeCursorPos(e, bounds) {
+            let x = e.pageX - bounds.x;
+            let y = e.pageY - bounds.y;
+
+            // Consider any page scrolling
+            x = x - window.scrollX;
+            y = y - window.scrollY;
+
+            return {
+                x: x,
+                y: y
+            };
         }
     },
@@ -210 +225 @@
 .magnifier {
     position: absolute;
-    width: 150px;
-    height: 150px;
+    width: 175px;
+    height: 175px;
 
     background-repeat: no-repeat;
     border: 2px solid #000;
-    // cursor: none;
+    cursor: none;
+    border-radius: 40%;
 }
 </style>