From ca907321eb26ef072dbc6587ff9fd7b6cdb2be3c Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Tue, 29 Jul 2025 00:02:45 +1000
Subject: [PATCH] feature (ux): improve UX

---
 public/assets/css/designsystem.css            |  2 +-
 .../viewerpage/application_image/zoom.js      | 21 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/public/assets/css/designsystem.css b/public/assets/css/designsystem.css
index 7cb40d38..bd891b31 100644
--- a/public/assets/css/designsystem.css
+++ b/public/assets/css/designsystem.css
@@ -19,7 +19,7 @@
     --primary: #9AD1ED;
     --emphasis-primary: #c5e2f1;
     --emphasis-secondary: #466372;
-    --light: #707173;
+    --light: #6e6f71;
     --super-light:  #fafafa;
     --error: #f26d6d;
     --success: #63d9b1;
diff --git a/public/assets/pages/viewerpage/application_image/zoom.js b/public/assets/pages/viewerpage/application_image/zoom.js
index 769b6813..71cdc825 100644
--- a/public/assets/pages/viewerpage/application_image/zoom.js
+++ b/public/assets/pages/viewerpage/application_image/zoom.js
@@ -22,7 +22,7 @@ export default function({ $img, $page }) {
                 state.y = 0;
             }
             state.scale = next;
-            state.duration = duration ?? (next === 1 ? 500 : 150);
+            state.duration = duration ?? (next === 1 ? 500 : 0);
             return state;
         }, { scale: 1, x: 0, y: 0, duration: 0 }),
         rxjs.tap(({ scale, x, y, duration }) => {
@@ -46,16 +46,15 @@ function builder({ $img }) {
         // zoom via scroll wheel
         rxjs.fromEvent($img.parentElement, "wheel").pipe(
             rxjs.tap((e) => e.preventDefault()),
-            rxjs.bufferTime(100),
-            rxjs.filter((events) => events.length > 0),
-            rxjs.map((events) => {
-                let out = null;
-                for (let i=0; i<events.length; i++) {
-                    const scale = Math.min(Math.exp(-events[i].deltaY / 300), 2);
-                    if (out === null) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY });
-                    else if (Math.abs(scale) > Math.abs(out.scale)) out = ({ scale, clientX: events[i].clientX, clientY: events[i].clientY });
-                }
-                return out;
+            rxjs.map((event) => {
+                let scale = Math.exp(-event.deltaY / 300);
+                if (scale > 1.07) scale = 1.07;
+                else if (scale < 0.93) scale = 0.93;
+                return {
+                    scale,
+                    clientX: event.clientX,
+                    clientY: event.clientY,
+                };
             }),
         ),
         // zoom via keyboard shortcut