source: main/trunk/model-interfaces-dev/atea/ocr/src/components/OcrImageDisplay.vue@ 35956

<script>
import { mapState } from "vuex";

export default {
    name: "OcrImageDisplay",
    props: {
        imageUrl: String,
        thresholdedImageUrl: String,
        enableMagnifier: Boolean,
        magnifierZoom: Number,
        showThresholdedImage: Boolean
    },
    data() {
        return {
            /** @type {DOMRect} */
            magnifierBounds: null
        }
    },
    computed: {
        ...mapState({
            translations: state => state.translations
        })
    },
    methods: {
        /**
         * Updates the magnifier to operate on a new image.
         * @param {HTMLImageElement} newImage The new image.
         * @param {HTMLImageElement} oldImage The old image.
         * @param {Number} zoom The zoom level.
         */
        updateMagnifier(newImage, oldImage = null) {
            if (oldImage !== null) {
                oldImage.removeEventListener("mousemove", this.moveMagnifier);
            }

            /** @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();
            newImage.addEventListener("mousemove", this.moveMagnifier);
        },
        /**
         * Moves the magnifier
         * @param {MouseEvent} e The movement event.
         */
        moveMagnifier(e) {
            e.preventDefault();

            /** @type {DOMRect} */
            const magContainerBounds = this.$refs.magContainer.getBoundingClientRect();
            /** @type {HTMLDivElement} */
            const magnifier = this.$refs.magnifier;

            const magXCenter = magnifier.offsetWidth / 2;
            const magYCenter = magnifier.offsetHeight / 2;
            let { x, y } = this.getRelativeCursorPos(e, magContainerBounds);

            // Calculate our screen-space bounds
            const relImageLeft = this.magnifierBounds.left - magContainerBounds.left;
            const relImageTop = this.magnifierBounds.top - magContainerBounds.top;
            const relImageRight = this.magnifierBounds.right - magContainerBounds.left;
            const relImageBottom = this.magnifierBounds.bottom - magContainerBounds.top;

            // Ensure the magnifier never leaves the bounds of the image
            if (x < relImageLeft) {
                x = relImageLeft;
            }
            if (y < relImageTop) {
                y = relImageTop;
            }
            if (x > relImageRight) {
                x = relImageRight;
            }
            if (y > relImageBottom) {
                y = relImageBottom;
            }

            // Center the magnifier over the cursor
            magnifier.style.left = (x - magXCenter) + "px";
            magnifier.style.top = (y - magYCenter) + "px";

            // 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
                ? `${(imageX * this.magnifierZoom * -1)}px`
                : `-${(imageX * this.magnifierZoom)}px`

            const actualY = imageY < 0
                ? `${(imageY * this.magnifierZoom * -1)}px`
                : `-${(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
            };
        }
    },
    watch: {
        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);
                }
            }, 100);
        },
        magnifierZoom() {
            if (this.showThresholdedImage) {
                this.updateMagnifier(this.$refs.thresholdedImage);
            }
            else {
                this.updateMagnifier(this.$refs.ocrImage);
            }
        }
    },
    mounted() {
        setTimeout(() => {
            this.updateMagnifier(this.$refs.ocrImage);
        }, 100);
    }
}
</script>

<template>
<div ref="magContainer" class="ocr-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" />
</div>
</template>

<style lang="scss" scoped>
.ocr-image-container {
    position: relative;

    &:hover {
        .control-tip {
            opacity: 1;
        }

        .controls {
            opacity: 1;
        }

        .magnifier {
            opacity: 1;
        }
    }
}

.ocr-image {
    border: 1px solid #444;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    grid-row: 1;
    grid-column: 1;
    user-select: none;
}

.magnifier {
    position: absolute;
    width: 175px;
    height: 175px;

    background-color: white;
    background-repeat: no-repeat;
    border: 2px solid #000;
    cursor: none;
    border-radius: 40%;

    transition: opacity var(--transition-duration);
    opacity: 0.2;
}
</style>