Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 15:51:37 -05:00
Code Issues Activity

🐛 Fix mouse zoom on viewer and workspace.

Browse source
This commit is contained in:
Andrey Antukh 2020-04-08 19:18:48 +02:00
parent 3f925690ee
commit 14ff64d3d7
3 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/uxbox/main/ui/viewer.cljs
View file

@ -52,8 +52,12 @@
on-mouse-wheel
(fn [event]
(when (kbd/ctrl? event)
;; Disable browser zoom with ctrl+mouse wheel
(dom/prevent-default event)))
(dom/prevent-default event)
(let [event (.getBrowserEvent event)]
(if (pos? (.-deltaY event))
(st/emit! dv/decrease-zoom)
(st/emit! dv/increase-zoom)))))
on-mount
(fn []

35
frontend/src/uxbox/main/ui/workspace.cljs
View file

@ -37,24 +37,20 @@
;; --- Workspace
(defn- on-scroll
[event]
(let [target (.-target event)
top (.-scrollTop target)
left (.-scrollLeft target)]
(st/emit! (ms/->ScrollEvent (gpt/point left top)))))
;; (defn- on-scroll
;; [event]
;; (let [target (.-target event)
;; top (.-scrollTop target)
;; left (.-scrollLeft target)]
;; (st/emit! (ms/->ScrollEvent (gpt/point left top)))))
(defn- on-wheel
[event frame]
(when (kbd/ctrl? event)
;; 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]
(if (pos? (.-deltaY event))
(st/emit! dw/decrease-zoom)
(st/emit! dw/increase-zoom))
(scroll/scroll-to-point dom mouse-point scroll-position))))
;; (defn- on-wheel
;; [event frame]
;; (when (kbd/ctrl? event)
;; (let [dom (mf/ref-val frame)
;; scroll-position (scroll/get-current-position-absolute dom)
;; mouse-point @ms/mouse-position]
;; (scroll/scroll-to-point dom mouse-point scroll-position))))
(mf/defc workspace-content
[{:keys [page file layout] :as params}]
@ -73,8 +69,9 @@
[:section.workspace-content
{:class classes
:on-scroll on-scroll
:on-wheel #(on-wheel % frame)}
;; :on-scroll on-scroll
;; :on-wheel #(on-wheel % frame)
}
[:& history-dialog]

20
frontend/src/uxbox/main/ui/workspace/viewport.cljs
View file

@ -9,7 +9,6 @@
(:require
[beicon.core :as rx]
[goog.events :as events]
[goog.object :as gobj]
[lentes.core :as l]
[potok.core :as ptk]
[rumext.alpha :as mf]
@ -17,15 +16,13 @@
[uxbox.common.data :as d]
[uxbox.main.constants :as c]
[uxbox.main.data.workspace :as dw]
[uxbox.main.geom :as geom]
[uxbox.main.refs :as refs]
[uxbox.main.store :as st]
[uxbox.main.streams :as ms]
[uxbox.main.ui.keyboard :as kbd]
[uxbox.main.ui.hooks :refer [use-rxsub]]
[uxbox.main.ui.hooks :as hooks]
[uxbox.main.ui.shapes :refer [shape-wrapper frame-wrapper]]
[uxbox.main.ui.workspace.drawarea :refer [draw-area]]
[uxbox.main.ui.workspace.drawarea :refer [start-drawing]]
[uxbox.main.ui.workspace.drawarea :refer [draw-area start-drawing]]
[uxbox.main.ui.workspace.grid :refer [grid]]
[uxbox.main.ui.workspace.ruler :refer [ruler]]
[uxbox.main.ui.workspace.selection :refer [selection-handlers]]
@ -39,7 +36,7 @@
(mf/defc coordinates
[{:keys [zoom] :as props}]
(let [coords (some-> (use-rxsub ms/mouse-position)
(let [coords (some-> (hooks/use-rxsub ms/mouse-position)
(gpt/divide (gpt/point zoom zoom))
(gpt/round 0))]
[:ul.coordinates
@ -50,7 +47,7 @@
(mf/defc cursor-tooltip
[{:keys [zoom tooltip] :as props}]
(let [coords (some-> (use-rxsub ms/mouse-position)
(let [coords (some-> (hooks/use-rxsub ms/mouse-position)
(gpt/divide (gpt/point zoom zoom)))
pos-x (- (:x coords) 100)
pos-y (+ (:y coords) 30)]
@ -110,7 +107,7 @@
(mf/defc frames-wrapper
{::mf/wrap-props false}
[props]
(let [page (gobj/get props "page")
(let [page (unchecked-get props "page")
page-id (:id page)
data-ref (-> (mf/deps page-id)
(mf/use-memo #(-> (l/in [:workspace-data page-id])
@ -144,6 +141,7 @@
tooltip
selected]
:as local} (mf/deref refs/workspace-local)
viewport-ref (mf/use-ref nil)
last-position (mf/use-var nil)
@ -244,7 +242,11 @@
(fn [event]
(when (kbd/ctrl? event)
;; Disable browser zoom with ctrl+mouse wheel
(dom/prevent-default event)))
(dom/prevent-default event)
(let [event (.getBrowserEvent event)]
(if (pos? (.-deltaY event))
(st/emit! dw/decrease-zoom)
(st/emit! dw/increase-zoom)))))
on-mount
(fn []