diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index b7ea5c8b47..486a7ae735 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/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) diff --git a/frontend/src/uxbox/main/ui/keyboard.cljs b/frontend/src/uxbox/main/ui/keyboard.cljs index 5b4d224fc5..f78792659b 100644 --- a/frontend/src/uxbox/main/ui/keyboard.cljs +++ b/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)) diff --git a/frontend/src/uxbox/main/ui/workspace.cljs b/frontend/src/uxbox/main/ui/workspace.cljs index 403d2a5b32..108ff1f9ae 100644 --- a/frontend/src/uxbox/main/ui/workspace.cljs +++ b/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 - dom (mf/ref-val frame) + ;; global ctrl+wheel browser zoom must be disabled (see main/ui/workspace/wiewport.cljs) + (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/increase-zoom))) + (st/emit! dw/decrease-zoom) + (st/emit! dw/increase-zoom)) (scroll/scroll-to-point dom mouse-point scroll-position)))) (mf/defc workspace-content diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 768d1c4d77..afdfca654e 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/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 diff --git a/frontend/src/uxbox/main/ui/workspace/scroll.cljs b/frontend/src/uxbox/main/ui/workspace/scroll.cljs index 9575fb595c..b4df040c09 100644 --- a/frontend/src/uxbox/main/ui/workspace/scroll.cljs +++ b/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))) diff --git a/frontend/src/uxbox/main/ui/workspace/viewport.cljs b/frontend/src/uxbox/main/ui/workspace/viewport.cljs index e3bcc7f303..85b6ebb233 100644 --- a/frontend/src/uxbox/main/ui/workspace/viewport.cljs +++ b/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