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.