✨ Override browser default zoom shortcuts with penpot zoom

CHANGES.md

@@ -7,6 +7,7 @@
 ### :sparkles: New features
 
 - Select through stroke only rectangle [Taiga #5484](https://tree.taiga.io/project/penpot/issue/5484)
+- Override browser Ctrl+ and Ctrl- zoom with Penpot Zoom [Taiga #3200](https://tree.taiga.io/project/penpot/us/3200)
 
 ### :bug: Bugs fixed
 

frontend/src/app/main/streams.cljs

@@ -15,7 +15,7 @@
 
 ;; --- User Events
 
-(defrecord KeyboardEvent [type key shift ctrl alt meta editing])
+(defrecord KeyboardEvent [type key shift ctrl alt meta editing event])
 
 (defn keyboard-event?
   [v]
@@ -184,6 +184,28 @@
     keyboard-meta
     keyboard-ctrl))
 
+(defonce keyboard-minus-or-underscore
+  (let [sub (rx/behavior-subject nil)
+        ob  (->> st/stream
+                 (rx/filter keyboard-event?)
+                 (rx/filter key-down?)
+                 (rx/filter #(kbd/mod? (:event %)))
+                 (rx/filter #(or (kbd/minus? %) (kbd/underscore? %)))
+                 (rx/dedupe))]
+    (rx/subscribe-with ob sub)
+    sub))
+
+(defonce keyboard-=-or-+
+  (let [sub (rx/behavior-subject nil)
+        ob  (->> st/stream
+                 (rx/filter keyboard-event?)
+                 (rx/filter key-down?)
+                 (rx/filter #(kbd/mod? (:event %)))
+                 (rx/filter #(or (kbd/equals? %) (kbd/plus? %)))
+                 (rx/dedupe))]
+    (rx/subscribe-with ob sub)
+    sub))
+
 (defonce keyboard-space
   (let [sub (rx/behavior-subject nil)
         ob  (->> st/stream

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

@@ -321,7 +321,7 @@
                         (= "TEXTAREA" (obj/get target "tagName")))]
 
        (when-not (.-repeat bevent)
-         (st/emit! (ms/->KeyboardEvent :down key shift? ctrl? alt? meta? editing?)))))))
+         (st/emit! (ms/->KeyboardEvent :down key shift? ctrl? alt? meta? editing? event)))))))
 
 (defn on-key-up []
   (mf/use-callback
@@ -336,7 +336,7 @@
                         (= "rich-text" (obj/get target "className"))
                         (= "INPUT" (obj/get target "tagName"))
                         (= "TEXTAREA" (obj/get target "tagName")))]
-       (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta? editing?))))))
+       (st/emit! (ms/->KeyboardEvent :up key shift? ctrl? alt? meta? editing? event))))))
 
 (defn on-pointer-move [move-stream]
   (let [last-position (mf/use-var nil)]

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

@@ -105,6 +105,12 @@
                                        (reset! mod? %)
                                        (when-not % (reset! z? false)))) ;; In mac after command+z there is no event for the release of the z key
   (hooks/use-stream ms/keyboard-space #(reset! space? %))
+  (hooks/use-stream ms/keyboard-=-or-+ #(do
+                                          (dom/prevent-default (:event %))
+                                          (st/emit! (dw/increase-zoom))))
+  (hooks/use-stream ms/keyboard-minus-or-underscore #(do
+                                                       (dom/prevent-default (:event %))
+                                                       (st/emit! (dw/decrease-zoom))))
   (hooks/use-stream ms/keyboard-z #(reset! z? %))
   (hooks/use-stream ms/keyboard-shift #(reset! shift? %)))
 

frontend/src/app/util/keyboard.cljs

@@ -45,6 +45,10 @@
 (def enter? (is-key? "Enter"))
 (def space? (is-key? " "))
 (def z? (is-key-ignore-case? "z"))
+(def equals? (is-key? "="))
+(def plus? (is-key? "+"))
+(def minus? (is-key? "-"))
+(def underscore? (is-key? "_"))
 (def up-arrow? (is-key? "ArrowUp"))
 (def down-arrow? (is-key? "ArrowDown"))
 (def left-arrow? (is-key? "ArrowLeft"))