🎉 Allow to zoom with ctrl + middle button

CHANGES.md

@@ -8,6 +8,7 @@
 ### :sparkles: New features
 
 - Use space + mouse drag to pan, instead of only space [Taiga #1800](https://tree.taiga.io/project/penpot/us/1800).
+- Allow to zoom with ctrl + middle button [Taiga #1428](https://tree.taiga.io/project/penpot/us/1428).
 
 ### :bug: Bugs fixed
 ### :arrow_up: Deps updates

frontend/src/app/main/data/workspace.cljs

@@ -374,6 +374,9 @@
 
 ;; --- Viewport Sizing
 
+(declare increase-zoom)
+(declare decrease-zoom)
+(declare set-zoom)
 (declare zoom-to-fit-all)
 
 (defn initialize-viewport
@@ -458,7 +461,6 @@
                                             (update :height #(/ % hprop))
                                             (assoc :left-offset left-offset))))))))))))
 
-
 (defn start-panning []
   (ptk/reify ::start-panning
     ptk/WatchEvent
@@ -485,6 +487,30 @@
       (-> state
           (update :workspace-local dissoc :panning)))))
 
+(defn start-zooming [pt]
+  (ptk/reify ::start-zooming
+    ptk/WatchEvent
+    (watch [_ state stream]
+      (let [stopper (->> stream (rx/filter (ptk/type? ::finish-zooming)))]
+        (when-not (get-in state [:workspace-local :zooming])
+          (rx/concat
+           (rx/of #(-> % (assoc-in [:workspace-local :zooming] true)))
+           (->> stream
+                (rx/filter ms/pointer-event?)
+                (rx/filter #(= :delta (:source %)))
+                (rx/map :pt)
+                (rx/take-until stopper)
+                (rx/map (fn [delta]
+                          (let [scale (+ 1 (/ (:y delta) 100))] ;; this number may be adjusted after user testing
+                            (set-zoom pt scale)))))))))))
+
+(defn finish-zooming []
+  (ptk/reify ::finish-zooming
+    ptk/UpdateEvent
+    (update [_ state]
+      (-> state
+          (update :workspace-local dissoc :zooming)))))
+
 
 ;; --- Toggle layout flag
 
@@ -570,6 +596,16 @@
       (update state :workspace-local
               #(impl-update-zoom % center (fn [z] (max (/ z 1.3) 0.01)))))))
 
+(defn set-zoom
+  [center scale]
+  (ptk/reify ::set-zoom
+    ptk/UpdateEvent
+    (update [_ state]
+      (update state :workspace-local
+              #(impl-update-zoom % center (fn [z] (-> (* z scale)
+                                                      (max 0.01)
+                                                      (min 200))))))))
+
 (def reset-zoom
   (ptk/reify ::reset-zoom
     ptk/UpdateEvent

frontend/src/app/main/refs.cljs

@@ -110,6 +110,7 @@
                               :edit-path
                               :tooltip
                               :panning
+                              :zooming
                               :picking-color?
                               :transform
                               :hover

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -114,7 +114,8 @@
         on-drag-enter     (actions/on-drag-enter)
         on-drag-over      (actions/on-drag-over)
         on-drop           (actions/on-drop file viewport-ref zoom)
-        on-mouse-down     (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?)
+        on-mouse-down     (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing?
+                                                 drawing-path? create-comment? space? viewport-ref zoom)
         on-mouse-up       (actions/on-mouse-up disable-paste)
         on-pointer-down   (actions/on-pointer-down)
         on-pointer-enter  (actions/on-pointer-enter in-viewport?)

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -27,9 +27,11 @@
   (:import goog.events.WheelEvent))
 
 (defn on-mouse-down
-  [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?]
+  [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing?
+   node-editing? drawing-path? create-comment? space? viewport-ref zoom]
   (mf/use-callback
-   (mf/deps id blocked hidden type selected edition drawing-tool text-editing? node-editing? drawing-path? create-comment? space?)
+   (mf/deps id blocked hidden type selected edition drawing-tool text-editing?
+            node-editing? drawing-path? create-comment? space? viewport-ref zoom)
    (fn [bevent]
      (when (or (dom/class? (dom/get-target bevent) "viewport-controls")
                (dom/class? (dom/get-target bevent) "viewport-selrect"))
@@ -48,7 +50,12 @@
 
          (when middle-click?
            (dom/prevent-default bevent)
-           (st/emit! (dw/start-panning)))
+           (if ctrl?
+             (let [raw-pt   (dom/get-client-position event)
+                   viewport (mf/ref-val viewport-ref)
+                   pt       (utils/translate-point-to-viewport viewport zoom raw-pt)]
+               (st/emit! (dw/start-zooming pt)))
+             (st/emit! (dw/start-panning))))
 
          (when left-click?
            (st/emit! (ms/->MouseEvent :down ctrl? shift? alt?))
@@ -221,7 +228,8 @@
          ;; We store this so in Firefox the middle button won't do a paste of the content
          (reset! disable-paste true)
          (timers/schedule #(reset! disable-paste false))
-         (st/emit! (dw/finish-panning)))))))
+         (st/emit! (dw/finish-panning)
+                   (dw/finish-zooming)))))))
 
 (defn on-pointer-enter [in-viewport?]
   (mf/use-callback