From a3a2ab1ecded9f77ace2ef462790224c1fe8d947 Mon Sep 17 00:00:00 2001
From: Aitor <asakon28@gmail.com>
Date: Mon, 16 Jan 2023 13:47:30 +0100
Subject: [PATCH] :bug: Fix mouse wheel on viewer inspector

---
 CHANGES.md                                   |  1 +
 frontend/src/app/main/ui/viewer/inspect.cljs | 25 ++++++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 50f6ceb1d..9a93fecde 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -44,6 +44,7 @@
 - Fix max height in library dialog [Github #2335](https://github.com/penpot/penpot/issues/2335)
 - Fix undo ungroup (shift+g) scrambles positions [Taiga #4674](https://tree.taiga.io/project/penpot/issue/4674)
 - Fix justified text is stretched [Github #2539](https://github.com/penpot/penpot/issues/2539)
+- Fix mousewheel on viewer inspector [Taiga #4221](https://tree.taiga.io/project/penpot/issue/4221)
 
 ## 1.16.2-beta
 
diff --git a/frontend/src/app/main/ui/viewer/inspect.cljs b/frontend/src/app/main/ui/viewer/inspect.cljs
index 2f2353acd..8f78cc5bc 100644
--- a/frontend/src/app/main/ui/viewer/inspect.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect.cljs
@@ -36,7 +36,8 @@
 
 (mf/defc viewport
   [{:keys [local file page frame index viewer-pagination size]}]
-  (let [on-mouse-wheel
+  (let [inspect-svg-container-ref (mf/use-ref nil)
+        on-mouse-wheel
         (fn [event]
           (when (kbd/mod? event)
             (dom/prevent-default event)
@@ -45,14 +46,30 @@
                            (.-deltaX ^js event))]
               (if (pos? delta)
                 (st/emit! dv/decrease-zoom)
-                (st/emit! dv/increase-zoom)))))
+                (st/emit! dv/increase-zoom))))
+          (when-not (kbd/mod? event)
+            (let [event (.getBrowserEvent ^js event)
+                  shift? (kbd/shift? event)
+                  inspect-svg-container (mf/ref-val inspect-svg-container-ref)
+                  delta (+ (.-deltaY ^js event)
+                           (.-deltaX ^js event))
+                  scroll-pos (if shift?
+                               (dom/get-h-scroll-pos inspect-svg-container)
+                               (dom/get-scroll-pos inspect-svg-container))
+                  new-scroll-pos (+ scroll-pos delta)] 
+            (do
+              (dom/prevent-default event)
+              (dom/stop-propagation event)
+              (if shift?
+                (dom/set-h-scroll-pos! inspect-svg-container new-scroll-pos)
+                (dom/set-scroll-pos! inspect-svg-container new-scroll-pos))))))
 
         on-mount
         (fn []
           ;; bind with passive=false to allow the event to be cancelled
           ;; https://stackoverflow.com/a/57582286/3219895
           (let [key1 (events/listen goog/global EventType.WHEEL
-                                    on-mouse-wheel #js {"passive" false})]
+                                    on-mouse-wheel #js {"passive" false "capture" true})]
             (fn []
               (events/unlistenByKey key1))))]
 
@@ -69,7 +86,7 @@
                        :page page}]
      [:div.inspect-svg-wrapper {:on-click (handle-select-frame frame)}
       [:& viewer-pagination {:index index :num-frames (count (:frames page)) :left-bar true :right-bar true}]
-      [:div.inspect-svg-container
+      [:div.inspect-svg-container {:ref inspect-svg-container-ref}
        [:& render-frame-svg {:frame frame :page page :local local :size size}]]]
 
      [:& right-sidebar {:frame frame