From 3e706abc54d32ae29469cde45a3cd92b90b4ccf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Wed, 1 Apr 2020 16:39:20 +0200
Subject: [PATCH] :tada: Zoom with mouse wheel

---
 frontend/src/uxbox/main/ui/keyboard.cljs           |  4 ++++
 frontend/src/uxbox/main/ui/workspace.cljs          | 10 ++++------
 frontend/src/uxbox/main/ui/workspace/scroll.cljs   | 11 ++++++++---
 frontend/src/uxbox/main/ui/workspace/viewport.cljs | 12 +++++++++++-
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/frontend/src/uxbox/main/ui/keyboard.cljs b/frontend/src/uxbox/main/ui/keyboard.cljs
index 5b4d224fc..f78792659 100644
--- a/frontend/src/uxbox/main/ui/keyboard.cljs
+++ b/frontend/src/uxbox/main/ui/keyboard.cljs
@@ -5,6 +5,10 @@
   (fn [e]
     (= (.-keyCode e) keycode)))
 
+(defn ^boolean alt?
+  [event]
+  (.-altKey event))
+
 (defn ^boolean ctrl?
   [event]
   (.-ctrlKey event))
diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs
index 403d2a5b3..108ff1f9a 100644
--- a/frontend/src/uxbox/main/ui/workspace.cljs
+++ b/frontend/src/uxbox/main/ui/workspace.cljs
@@ -46,15 +46,13 @@
 (defn- on-wheel
   [event frame]
   (when (kbd/ctrl? event)
-    (let [prev-zoom @refs/selected-zoom
-          dom (mf/ref-val frame)
+    ;; global ctrl+wheel browser zoom must be disabled (see main/ui/workspace/wiewport.cljs)
+    (let [dom (mf/ref-val frame)
           scroll-position (scroll/get-current-position-absolute dom)
           mouse-point @ms/mouse-position]
-      (dom/prevent-default event)
-      (dom/stop-propagation event)
       (if (pos? (.-deltaY event))
-        (st/emit! (dw/decrease-zoom))
-        (st/emit! (dw/increase-zoom)))
+        (st/emit! dw/decrease-zoom)
+        (st/emit! dw/increase-zoom))
       (scroll/scroll-to-point dom mouse-point scroll-position))))
 
 (mf/defc workspace-content
diff --git a/frontend/src/uxbox/main/ui/workspace/scroll.cljs b/frontend/src/uxbox/main/ui/workspace/scroll.cljs
index 9575fb595..b4df040c0 100644
--- a/frontend/src/uxbox/main/ui/workspace/scroll.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/scroll.cljs
@@ -49,9 +49,10 @@
 
 (defn get-current-center-absolute
   [dom]
-  (gpt/divide (get-current-center dom) @refs/selected-zoom))
+  (gpt/divide (get-current-center dom) (gpt/point @refs/selected-zoom)))
 
 (defn get-current-position
+  "Get the coordinates of the currently visible point at top left of viewport"
   [dom]
   (let [scroll-left (.-scrollLeft dom)
         scroll-top (.-scrollTop dom)]
@@ -59,10 +60,14 @@
 
 (defn get-current-position-absolute
   [dom]
-    (gpt/divide (get-current-position dom) @refs/selected-zoom))
+    (let [current-position (get-current-position dom)]
+      (gpt/divide (get-current-position dom) (gpt/point @refs/selected-zoom))))
 
 (defn scroll-to-point
   [dom point position]
   (let [viewport-offset (gpt/subtract point position)
-        new-scroll-position (gpt/subtract (gpt/multiply point @refs/selected-zoom) (gpt/multiply viewport-offset @refs/selected-zoom))]
+        selected-zoom (gpt/point @refs/selected-zoom)
+        new-scroll-position (gpt/subtract 
+                              (gpt/multiply point selected-zoom)
+                              (gpt/multiply viewport-offset selected-zoom))]
     (set-scroll-position dom new-scroll-position)))
diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs
index e3bcc7f30..85b6ebb23 100644
--- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs
+++ b/frontend/src/uxbox/main/ui/workspace/viewport.cljs
@@ -240,16 +240,26 @@
                                          (kbd/ctrl? event)
                                          (kbd/shift? event)))))
 
+        on-mouse-wheel
+        (fn [event]
+          (when (kbd/ctrl? event)
+            ;; Disable browser zoom with ctrl+mouse wheel
+            (dom/prevent-default event)))
+
         on-mount
         (fn []
           (let [key1 (events/listen js/document EventType.KEYDOWN on-key-down)
                 key2 (events/listen js/document EventType.KEYUP on-key-up)
                 dnode (mf/ref-val viewport-ref)
-                key3 (events/listen dnode EventType.MOUSEMOVE on-mouse-move)]
+                key3 (events/listen dnode EventType.MOUSEMOVE on-mouse-move)
+                ;; bind with passive=false to allow the event to be cancelled
+                ;; https://stackoverflow.com/a/57582286/3219895
+                key4 (events/listen js/window EventType.WHEEL on-mouse-wheel #js {"passive" false})]
             (fn []
               (events/unlistenByKey key1)
               (events/unlistenByKey key2)
               (events/unlistenByKey key3)
+              (events/unlistenByKey key4)
               )))
 
         on-drag-over