Merge pull request #159 from uxbox/123/zoom-improvements

123/zoom improvements

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

@@ -2239,7 +2239,11 @@
    "ctrl+shift+f" #(rx/of (toggle-layout-flag :drawtools))
    "ctrl+shift+i" #(rx/of (toggle-layout-flag :icons))
    "ctrl+shift+l" #(rx/of (toggle-layout-flag :layers))
-   "ctrl+0" #(rx/of (reset-zoom))
+   "equals" #(rx/of increase-zoom) ; keyName for the key with = and + in US keyboards (see https://unixpapa.com/js/key.html)
+   "dash" #(rx/of decrease-zoom) ; keyName for the key with - and _ in US keyboards
+   "shift+0" #(rx/of zoom-to-50)
+   "shift+1" #(rx/of reset-zoom)
+   "shift+2" #(rx/of zoom-to-200)
    "ctrl+d" #(rx/of duplicate-selected)
    "ctrl+z" #(rx/of undo)
    "ctrl+shift+z" #(rx/of redo)

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))

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
+    ;; global ctrl+wheel browser zoom must be disabled (see main/ui/workspace/wiewport.cljs)
-          dom (mf/ref-val frame)
+    (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/decrease-zoom)
-        (st/emit! (dw/increase-zoom)))
+        (st/emit! dw/increase-zoom))
       (scroll/scroll-to-point dom mouse-point scroll-position))))
 
 (mf/defc workspace-content

frontend/src/uxbox/main/ui/workspace/header.cljs

@@ -50,11 +50,11 @@
          [:li {:on-click decrease}
           "Zoom out" [:span "-"]]
          [:li {:on-click zoom-to-50}
-          "Zoom to 50%"]
+          "Zoom to 50%" [:span "Shift + 0"]]
          [:li {:on-click zoom-to-100}
-          "Zoom to 100%" [:span "Shift + 0"]]
+          "Zoom to 100%" [:span "Shift + 1"]]
          [:li {:on-click zoom-to-200}
-          "Zoom to 200%"]]]]
+          "Zoom to 200%" [:span "Shift + 2"]]]]]
      [:span.remove-zoom {:on-click increase} "+"]]))
 
 ;; --- Header Users

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)))

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