Image occlusion doesn't scale when page zoomed in

[dae]

Because a max-height is set on the occlusion container, zooming the page in with ctrl+mousewheel results in the image actually shrinking slightly, due to the change in margins.

If we use an explicit height, instead of capping the height relative to the viewport, then scaling works, but images do not fit the screen by default.

diff --git a/ts/image-occlusion/review.scss b/ts/image-occlusion/review.scss
index 8e4065fd1..95da4ba5a 100644
--- a/ts/image-occlusion/review.scss
+++ b/ts/image-occlusion/review.scss
@@ -5,7 +5,8 @@
     transform: translate(-50%, 0);
     // allow for 20px margin on html element, or short windows can truncate
     // image
-    max-height: calc(95vh - 40px);
+    //max-height: calc(95vh - 40px);
+    height: 1000px;
 }
 
 #image-occlusion-container img {

If anyone has ideas on how we could both scale-to-fit by default (and when window is resized), but also support zooming, please let us know!

Heads up @krmanik @glutanimate

[krmanik]

I have tested by start review and zoom in then go back to deck selection the zoom is correct but incorrect for reviewer (in io notetype). Again, restart review and zoom out and then again go back to deck selection and the zoom is again incorrect. Also removing CSS for all three class and checking zoom have different result than expected. The possible solution should be in JS implementation, and we may not need to change CSS of above class. Should this solution be used?

diff --git a/ts/image-occlusion/review.ts b/ts/image-occlusion/review.ts
index 580d46fe3..620fd6b16 100644
--- a/ts/image-occlusion/review.ts
+++ b/ts/image-occlusion/review.ts
@@ -11,6 +11,8 @@ import { Polygon } from "./shapes/polygon";
 import { Rectangle } from "./shapes/rectangle";
 import type { Size } from "./types";
 
+let scale = 1.0;
+
 export function setupImageCloze(): void {
     window.addEventListener("load", () => {
         window.addEventListener("resize", setupImageCloze);
@@ -32,6 +34,14 @@ function setupImageClozeInner(): void {
         return;
     }
 
+    container.addEventListener("wheel", (e) => {
+        e.preventDefault();
+        const step = 0.05;
+        const delta = Math.sign(e.deltaY) * step;
+        scale = Math.max(scale + delta, 0.1);
+        container.style.transform = `translate(-50%, 0) scale(${scale})`;
+    });
+
     // Enforce aspect ratio of image
     container.style.aspectRatio = `${image.naturalWidth / image.naturalHeight}`;
 

[dae]

That seems to work well when using the mouse wheel. Unfortunately, users may also be zooming in via the View>Zoom In/Out or Reset Zoom options - I wonder if there's a way we can handle that case too?

Interestingly, no patch is required to make it work correctly when using pinch-to-zoom on a Mac, as some sort of different zooming strategy seems to be used for the pinch gesture.

[glutanimate]

I would say that handling this on an image-level could be a viable option for IO 👍

However, this definitely is an issue for other note types as well and has been a source of annoyance for me for a while now, so I tried to shoot for a more generic approach in #2591. Did not come out ideal given that I had to go with two zoom modes, but I do think it could be a reasonable option if we want to cover more problem cases other than IO.

[dae]

Edit: sorry, ignore that - I confused this issue with a different one.

[BrayanDSO]

Maybe related, but I noticed that if you zoom in the page with Ctrl+Mouse wheel up, the masks resolution becomes low (Windows 11, Qt6, 23.10rc3)

2023-10-30.11-04-53.mp4

---

Also, the image zoom is reset every time the window zoom is changed with Ctrl+Mouse wheel up

2023-10-30.11-06-33.mp4

[krmanik]

For mask editor, zoom issues fixed by #2809.

[hnvy]

Zoom in during reviews workaround

Hi all,

Here is a workaround that has been doing a good job so far.

After you add this to your template, you would be able to hover over the image in the IO card, hold Ctrl, and then scroll the mousewheel.

For laptop users, you can use the pinch feature on the trackpad.

See this GIF.

Before

After

The code to add

This is for the Front side. The same logic applies to the Back!

{{#Header}}<div>{{Header}}</div>{{/Header}}
<div style="display: none">{{cloze:Occlusion}}</div>
<div id="err"></div>
<div id="image-occlusion-container">
    <div id="image-occlusion-img">{{Image}}</div>
    <canvas id="image-occlusion-canvas"></canvas>
</div>
<script>
try {
    anki.setupImageCloze();
} catch (exc) {
    document.getElementById("err").innerHTML = `Error loading image occlusion. Is your Anki version up to date?<br><br>${exc}`;
}


// * Code to allow users to zoom in during review.
// First, you need to get the image container and assign it to imgContainer
var imgContainer = document.querySelector('#image-occlusion-container');

// Then get the image element
var imgElement = document.querySelector('#image-occlusion-img img');

// Finally, get the canvas
var canvas = document.querySelector('#image-occlusion-canvas');

var imgSize = 100;

// Create an event listener that will detect when the user holds
// the Ctrl key and then scrolls the wheel of the mouse
imgContainer.addEventListener('wheel', function(event) {
    if (event.ctrlKey) {
        event.preventDefault();

        if (event.deltaY < 0) {
            // Increase image size
            imgSize += 5; // Increase by 5%. You can modify this to your liking!
        } else {
            // Decrease image size
            imgSize -= 5; // Decrease by 5%.
        }

        imgElement.style.width = imgSize + '%';
        imgElement.style.height = 'auto';

        imgContainer.style.width = imgSize + '%';
        imgContainer.style.height = 'auto';

        canvas.style.width = imgSize + '%';
        canvas.style.height = 'auto';
    }
});
</script>