From 6a1ab4d73c0fbcfc9333153ab7d7bf520894ad58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s=20Moya?= Date: Thu, 29 Jul 2021 12:02:44 +0200 Subject: [PATCH] :tada: Allow to zoom with ctrl + middle button --- CHANGES.md | 1 + frontend/src/app/main/data/workspace.cljs | 38 ++++++++++++++++++- frontend/src/app/main/refs.cljs | 1 + .../src/app/main/ui/workspace/viewport.cljs | 3 +- .../main/ui/workspace/viewport/actions.cljs | 16 ++++++-- 5 files changed, 53 insertions(+), 6 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 094bf1512..a0d0b458e 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 8428c0910..a55b117c5 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/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 diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 236f4a0af..12ab7e553 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -110,6 +110,7 @@ :edit-path :tooltip :panning + :zooming :picking-color? :transform :hover diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index e530a3d24..f73a40c3e 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/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?) diff --git a/frontend/src/app/main/ui/workspace/viewport/actions.cljs b/frontend/src/app/main/ui/workspace/viewport/actions.cljs index 337b09b6f..1f8074f8f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/actions.cljs +++ b/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