From 3b6c9f95113276aa491f6601d5b8c922c82b65d3 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Thu, 14 Jan 2021 11:48:32 +0100
Subject: [PATCH] :bug: Fixes issues with horizontal scroll with trackpad

---
 frontend/src/app/main/ui/handoff.cljs         |  6 ++++--
 frontend/src/app/main/ui/viewer.cljs          |  5 +++--
 .../app/main/ui/workspace/colorpalette.cljs   |  7 ++++---
 .../src/app/main/ui/workspace/viewport.cljs   | 21 ++++++++++++-------
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/main/ui/handoff.cljs b/frontend/src/app/main/ui/handoff.cljs
index f2d2ebb44..98f416e0f 100644
--- a/frontend/src/app/main/ui/handoff.cljs
+++ b/frontend/src/app/main/ui/handoff.cljs
@@ -77,8 +77,10 @@
          (fn [event]
            (when (kbd/ctrl? event)
              (dom/prevent-default event)
-             (let [event (.getBrowserEvent ^js event)]
-               (if (pos? (.-deltaY ^js event))
+             (let [event (.getBrowserEvent ^js event)
+                   delta (+ (.-deltaY ^js event)
+                            (.-deltaX ^js event))]
+               (if (pos? delta)
                  (st/emit! dv/decrease-zoom)
                  (st/emit! dv/increase-zoom))))))
 
diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs
index 94cefd316..4ce5db478 100644
--- a/frontend/src/app/main/ui/viewer.cljs
+++ b/frontend/src/app/main/ui/viewer.cljs
@@ -215,8 +215,9 @@
         (fn [event]
           (when (kbd/ctrl? event)
             (dom/prevent-default event)
-            (let [event (.getBrowserEvent ^js event)]
-              (if (pos? (.-deltaY ^js event))
+            (let [event (.getBrowserEvent ^js event)
+                  delta (+ (.-deltaY ^js event) (.-deltaX ^js event))]
+              (if (pos? delta)
                 (st/emit! dv/decrease-zoom)
                 (st/emit! dv/increase-zoom)))))
 
diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs
index 7d3f37862..641fd3467 100644
--- a/frontend/src/app/main/ui/workspace/colorpalette.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs
@@ -103,9 +103,10 @@
         (mf/use-callback
          (mf/deps max-offset)
          (fn [event]
-           (if (pos? (.. event -nativeEvent -deltaY))
-             (on-right-arrow-click event)
-             (on-left-arrow-click event))))
+           (let [delta (+ (.. event -nativeEvent -deltaY) (.. event -nativeEvent -deltaX))]
+             (if (pos? delta)
+               (on-right-arrow-click event)
+               (on-left-arrow-click event)))))
 
         on-resize
         (mf/use-callback
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index ff7ecc093..bd17c15f6 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -427,9 +427,11 @@
                      pos   @ms/mouse-position]
                  (dom/prevent-default event)
                  (dom/stop-propagation event)
-                 (if (pos? (.-deltaY event))
-                   (st/emit! (dw/decrease-zoom pos))
-                   (st/emit! (dw/increase-zoom pos))))
+                 (let [delta (+ (.-deltaY ^js event)
+                                (.-deltaX ^js event))]
+                   (if (pos? delta)
+                     (st/emit! (dw/decrease-zoom pos))
+                     (st/emit! (dw/increase-zoom pos)))))
 
                (.contains ^js node target)
                (let [event (.getBrowserEvent ^js event)
@@ -440,13 +442,18 @@
                             (= delta-mode WheelEvent.DeltaMode.LINE) 16
                             (= delta-mode WheelEvent.DeltaMode.PAGE) 100)
 
-                     delta (* (.-deltaY ^js event) unit)
-                     delta (/ delta @refs/selected-zoom)]
+                     delta-y (-> (.-deltaY ^js event)
+                                 (* unit)
+                                 (/ @refs/selected-zoom))
+                     delta-x (-> (.-deltaX ^js event)
+                                 (* unit)
+                                 (/ @refs/selected-zoom))]
                  (dom/prevent-default event)
                  (dom/stop-propagation event)
                  (if (kbd/shift? event)
-                   (st/emit! (dw/update-viewport-position {:x #(+ % delta)}))
-                   (st/emit! (dw/update-viewport-position {:y #(+ % delta)}))))))))
+                   (st/emit! (dw/update-viewport-position {:x #(+ % delta-y)}))
+                   (st/emit! (dw/update-viewport-position {:x #(+ % delta-x)
+                                                           :y #(+ % delta-y)}))))))))
 
         on-drag-enter
         (mf/use-callback