3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-07 15:51:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix problems with touch devices and Wacom tablets

Browse source
This commit is contained in:
alonso.torres 2023-03-14 15:42:24 +01:00
parent 5bd4be1950
commit 2c6513ac85
35 changed files with 173 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -28,6 +28,7 @@
- Fix snap pixel when moving path points on high zoom [#2930](https://github.com/penpot/penpot/issues/2930) - Fix snap pixel when moving path points on high zoom [#2930](https://github.com/penpot/penpot/issues/2930)
- Fix shortcuts for zoom now take into account the mouse position [#2924](https://github.com/penpot/penpot/issues/2924) - Fix shortcuts for zoom now take into account the mouse position [#2924](https://github.com/penpot/penpot/issues/2924)
- Fix close colorpicker on Firefox when mouse-up is outside the picker [#2911](https://github.com/penpot/penpot/issues/2911) - Fix close colorpicker on Firefox when mouse-up is outside the picker [#2911](https://github.com/penpot/penpot/issues/2911)
- Fix problems with touch devices and Wacom tablets [#2216](https://github.com/penpot/penpot/issues/2216)
### :heart: Community contributions by (Thank you!) ### :heart: Community contributions by (Thank you!)
- To @ondrejkonec: for contributing to the code with: - To @ondrejkonec: for contributing to the code with:

14
frontend/src/app/main/ui/comments.cljs
View file

@ -377,7 +377,7 @@
(swap! state assoc :new-position-x nil) (swap! state assoc :new-position-x nil)
(swap! state assoc :new-position-y nil))) (swap! state assoc :new-position-y nil)))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps position zoom) (mf/deps position zoom)
(fn [event] (fn [event]
@ -392,7 +392,7 @@
{:on-pointer-down on-pointer-down {:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up :on-pointer-up on-pointer-up
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:state state})) :state state}))
@ -408,7 +408,7 @@
{:keys [on-pointer-down {:keys [on-pointer-down
on-pointer-up on-pointer-up
on-mouse-move on-pointer-move
state state
on-lost-pointer-capture]} (use-buble zoom thread) on-lost-pointer-capture]} (use-buble zoom thread)
@ -438,14 +438,14 @@
(and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?)))) (and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?))))
(st/emit! (dcm/open-thread thread)))))) (st/emit! (dcm/open-thread thread))))))
on-mouse-move* on-pointer-move*
(mf/use-callback (mf/use-callback
(mf/deps origin drag? on-mouse-move) (mf/deps origin drag? on-pointer-move)
(fn [event] (fn [event]
(when (not= origin :viewer) (when (not= origin :viewer)
(mf/set-ref-val! drag? true) (mf/set-ref-val! drag? true)
(dom/stop-propagation event) (dom/stop-propagation event)
(on-mouse-move event)))) (on-pointer-move event))))
on-click* on-click*
(mf/use-callback (mf/use-callback
@ -460,7 +460,7 @@
:left (str pos-x "px")} :left (str pos-x "px")}
:on-pointer-down on-pointer-down* :on-pointer-down on-pointer-down*
:on-pointer-up on-pointer-up* :on-pointer-up on-pointer-up*
:on-mouse-move on-mouse-move* :on-pointer-move on-pointer-move*
:on-click on-click* :on-click on-click*
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:class (dom/classnames :class (dom/classnames

1
frontend/src/app/main/ui/components/color_input.cljs
View file

@ -138,7 +138,6 @@
(mf/use-layout-effect (mf/use-layout-effect
(fn [] (fn []
(let [keys [(events/listen globals/window EventType.POINTERDOWN on-click) (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
(events/listen globals/window EventType.MOUSEDOWN on-click)
(events/listen globals/window EventType.CLICK on-click)]] (events/listen globals/window EventType.CLICK on-click)]]
#(doseq [key keys] #(doseq [key keys]
(events/unlistenByKey key))))) (events/unlistenByKey key)))))

1
frontend/src/app/main/ui/components/numeric_input.cljs
View file

@ -233,7 +233,6 @@
(mf/use-layout-effect (mf/use-layout-effect
(fn [] (fn []
(let [keys [(events/listen globals/window EventType.POINTERDOWN on-click) (let [keys [(events/listen globals/window EventType.POINTERDOWN on-click)
(events/listen globals/window EventType.MOUSEDOWN on-click)
(events/listen globals/window EventType.CLICK on-click)]] (events/listen globals/window EventType.CLICK on-click)]]
#(doseq [key keys] #(doseq [key keys]
(events/unlistenByKey key))))) (events/unlistenByKey key)))))

4
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -52,7 +52,7 @@
(mf/set-ref-val! start-ref nil) (mf/set-ref-val! start-ref nil)
(set! last-resize-type nil))) (set! last-resize-type nil)))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps min-val max-val negate?) (mf/deps min-val max-val negate?)
(fn [event] (fn [event]
@ -68,7 +68,7 @@
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))] (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
{:on-pointer-down on-pointer-down {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:parent-ref parent-ref :parent-ref parent-ref
:size @size-state})) :size @size-state}))

54
frontend/src/app/main/ui/measurements.cljs
View file

@ -297,7 +297,7 @@
(fmt/format-number (or value 0))]]) (fmt/format-number (or value 0))]])
(mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-mouse-enter on-mouse-leave (mf/defc padding-display [{:keys [frame-id zoom hover-all? hover-v? hover-h? padding-num padding on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}] rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing? (mf/use-var false) (let [resizing? (mf/use-var false)
start (mf/use-var nil) start (mf/use-var nil)
@ -324,7 +324,7 @@
(reset! original-value 0) (reset! original-value 0)
(st/emit! (dwm/apply-modifiers)))) (st/emit! (dwm/apply-modifiers))))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps frame-id padding-num padding) (mf/deps frame-id padding-num padding)
(fn [event] (fn [event]
@ -354,11 +354,11 @@
:y (:y rect-data) :y (:y rect-data)
:width (:width rect-data) :width (:width rect-data)
:height (:height rect-data) :height (:height rect-data)
:on-mouse-enter on-mouse-enter :on-pointer-enter on-pointer-enter
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) distance-color "none") :style {:fill (if (or hover? selected?) distance-color "none")
:cursor (when (or hover? selected?) :cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -375,10 +375,10 @@
hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?) hover-h? (and (or (= @hover :p2) (= @hover :p4)) shift?)
padding (:layout-padding frame) padding (:layout-padding frame)
{:keys [width height x1 x2 y1 y2]} (:selrect frame) {:keys [width height x1 x2 y1 y2]} (:selrect frame)
on-mouse-enter (fn [hover-type val] on-pointer-enter (fn [hover-type val]
(reset! hover hover-type) (reset! hover hover-type)
(reset! hover-value val)) (reset! hover-value val))
on-mouse-leave #(reset! hover nil) on-pointer-leave #(reset! hover nil)
pill-width (/ flex-display-pill-width zoom) pill-width (/ flex-display-pill-width zoom)
pill-height (/ flex-display-pill-height zoom) pill-height (/ flex-display-pill-height zoom)
hover? #(or hover-all? hover? #(or hover-all?
@ -442,8 +442,8 @@
:mouse-pos mouse-pos :mouse-pos mouse-pos
:hover-value hover-value :hover-value hover-value
:padding-num padding-num :padding-num padding-num
:on-mouse-enter (partial on-mouse-enter padding-num (get padding padding-num)) :on-pointer-enter (partial on-pointer-enter padding-num (get padding padding-num))
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:hover? (hover? padding-num) :hover? (hover? padding-num)
:selected? (get paddings-selected padding-num) :selected? (get paddings-selected padding-num)
:rect-data rect-data}]) :rect-data rect-data}])
@ -457,7 +457,7 @@
:y (- (:y @mouse-pos) pill-width) :y (- (:y @mouse-pos) pill-width)
:value @hover-value}])])) :value @hover-value}])]))
(mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-mouse-enter on-mouse-leave (mf/defc margin-display [{:keys [shape-id zoom hover-all? hover-v? hover-h? margin-num margin on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}] rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing? (mf/use-var false) (let [resizing? (mf/use-var false)
start (mf/use-var nil) start (mf/use-var nil)
@ -484,7 +484,7 @@
(reset! original-value 0) (reset! original-value 0)
(st/emit! (dwm/apply-modifiers)))) (st/emit! (dwm/apply-modifiers))))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps shape-id margin-num margin) (mf/deps shape-id margin-num margin)
(fn [event] (fn [event]
@ -512,11 +512,11 @@
:y (:y rect-data) :y (:y rect-data)
:width (:width rect-data) :width (:width rect-data)
:height (:height rect-data) :height (:height rect-data)
:on-mouse-enter on-mouse-enter :on-pointer-enter on-pointer-enter
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) warning-color "none") :style {:fill (if (or hover? selected?) warning-color "none")
:cursor (when (or hover? selected?) :cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -535,10 +535,10 @@
hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?) hover-h? (and (or (= @hover :m2) (= @hover :m4)) shift?)
margin (:layout-item-margin shape) margin (:layout-item-margin shape)
{:keys [width height x1 x2 y1 y2]} (:selrect shape) {:keys [width height x1 x2 y1 y2]} (:selrect shape)
on-mouse-enter (fn [hover-type val] on-pointer-enter (fn [hover-type val]
(reset! hover hover-type) (reset! hover hover-type)
(reset! hover-value val)) (reset! hover-value val))
on-mouse-leave #(reset! hover nil) on-pointer-leave #(reset! hover nil)
hover? #(or hover-all? hover? #(or hover-all?
(and (or (= % :m1) (= % :m3)) hover-v?) (and (or (= % :m1) (= % :m3)) hover-v?)
(and (or (= % :m2) (= % :m4)) hover-h?) (and (or (= % :m2) (= % :m4)) hover-h?)
@ -591,8 +591,8 @@
:hover-h? hover-h? :hover-h? hover-h?
:margin-num margin-num :margin-num margin-num
:margin margin :margin margin
:on-mouse-enter (partial on-mouse-enter margin-num (get margin margin-num)) :on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:rect-data rect-data :rect-data rect-data
:hover? (hover? margin-num) :hover? (hover? margin-num)
:selected? (get margins-selected margin-num) :selected? (get margins-selected margin-num)
@ -609,7 +609,7 @@
:y (- (:y @mouse-pos) pill-width) :y (- (:y @mouse-pos) pill-width)
:value @hover-value}])])) :value @hover-value}])]))
(mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-mouse-enter on-mouse-leave (mf/defc gap-display [{:keys [frame-id zoom gap-type gap on-pointer-enter on-pointer-leave
rect-data hover? selected? mouse-pos hover-value]}] rect-data hover? selected? mouse-pos hover-value]}]
(let [resizing (mf/use-var nil) (let [resizing (mf/use-var nil)
start (mf/use-var nil) start (mf/use-var nil)
@ -636,7 +636,7 @@
(reset! original-value 0) (reset! original-value 0)
(st/emit! (dwm/apply-modifiers)))) (st/emit! (dwm/apply-modifiers))))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps frame-id gap-type gap) (mf/deps frame-id gap-type gap)
(fn [event] (fn [event]
@ -657,11 +657,11 @@
:y (:y rect-data) :y (:y rect-data)
:width (:width rect-data) :width (:width rect-data)
:height (:height rect-data) :height (:height rect-data)
:on-mouse-enter on-mouse-enter :on-pointer-enter on-pointer-enter
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:style {:fill (if (or hover? selected?) distance-color "none") :style {:fill (if (or hover? selected?) distance-color "none")
:cursor (when (or hover? selected?) :cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90))) (if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -683,11 +683,11 @@
padding (:layout-padding frame) padding (:layout-padding frame)
gap (:layout-gap frame) gap (:layout-gap frame)
{:keys [width height x1 y1]} (:selrect frame) {:keys [width height x1 y1]} (:selrect frame)
on-mouse-enter (fn [hover-type val] on-pointer-enter (fn [hover-type val]
(reset! hover hover-type) (reset! hover hover-type)
(reset! hover-value val)) (reset! hover-value val))
on-mouse-leave #(reset! hover nil) on-pointer-leave #(reset! hover nil)
negate {:column-gap (if flip-x true false) negate {:column-gap (if flip-x true false)
:row-gap (if flip-y true false)} :row-gap (if flip-y true false)}
@ -833,8 +833,8 @@
:zoom zoom :zoom zoom
:gap-type gap-type :gap-type gap-type
:gap gap :gap gap
:on-mouse-enter (partial on-mouse-enter gap-type (get gap gap-type)) :on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
:on-mouse-leave on-mouse-leave :on-pointer-leave on-pointer-leave
:rect-data display-item :rect-data display-item
:hover? (= @hover gap-type) :hover? (= @hover gap-type)
:selected? (= gap-selected gap-type) :selected? (= gap-selected gap-type)

2
frontend/src/app/main/ui/modal.cljs
View file

@ -66,7 +66,7 @@
(events/listen js/document EventType.KEYDOWN handle-keydown) (events/listen js/document EventType.KEYDOWN handle-keydown)
;; Changing to js/document breaks the color picker ;; Changing to js/document breaks the color picker
(events/listen (dom/get-root) EventType.MOUSEDOWN handle-click-outside) (events/listen (dom/get-root) EventType.POINTERDOWN handle-click-outside)
(events/listen js/document EventType.CONTEXTMENU handle-click-outside)]] (events/listen js/document EventType.CONTEXTMENU handle-click-outside)]]
#(doseq [key keys] #(doseq [key keys]

4
frontend/src/app/main/ui/viewer/inspect/render.cljs
View file

@ -64,8 +64,8 @@
(if render-wrapper? (if render-wrapper?
[:> shape-container {:shape shape [:> shape-container {:shape shape
:on-mouse-enter (handle-hover-shape shape true) :on-pointer-enter (handle-hover-shape shape true)
:on-mouse-leave (handle-hover-shape shape false) :on-pointer-leave (handle-hover-shape shape false)
:on-click (select-shape shape)} :on-click (select-shape shape)}
[:& component {:shape shape [:& component {:shape shape
:frame frame :frame frame

32
frontend/src/app/main/ui/viewer/shapes.cljs
View file

@ -169,7 +169,7 @@
(:animation interaction))))) (:animation interaction)))))
nil)) nil))
(defn- on-mouse-down (defn- on-pointer-down
[event shape base-frame frame-offset objects overlays] [event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :click) (filter #(or (= (:event-type %) :click)
@ -179,7 +179,7 @@
(doseq [interaction interactions] (doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects overlays))))) (activate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-up (defn- on-pointer-up
[event shape base-frame frame-offset objects overlays] [event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-press)))] (filter #(= (:event-type %) :mouse-press)))]
@ -188,7 +188,7 @@
(doseq [interaction interactions] (doseq [interaction interactions]
(deactivate-interaction interaction shape base-frame frame-offset objects overlays))))) (deactivate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-enter (defn- on-pointer-enter
[event shape base-frame frame-offset objects overlays] [event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(or (= (:event-type %) :mouse-enter) (filter #(or (= (:event-type %) :mouse-enter)
@ -198,7 +198,7 @@
(doseq [interaction interactions] (doseq [interaction interactions]
(activate-interaction interaction shape base-frame frame-offset objects overlays))))) (activate-interaction interaction shape base-frame frame-offset objects overlays)))))
(defn- on-mouse-leave (defn- on-pointer-leave
[event shape base-frame frame-offset objects overlays] [event shape base-frame frame-offset objects overlays]
(let [interactions (->> (:interactions shape) (let [interactions (->> (:interactions shape)
(filter #(= (:event-type %) :mouse-leave))) (filter #(= (:event-type %) :mouse-leave)))
@ -262,21 +262,21 @@
svg-element? (and (= :svg-raw (:type shape)) svg-element? (and (= :svg-raw (:type shape))
(not= :svg (get-in shape [:content :tag]))) (not= :svg (get-in shape [:content :tag])))
on-mouse-down on-pointer-down
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-down % shape base-frame frame-offset objects overlays)) #(on-pointer-down % shape base-frame frame-offset objects overlays))
on-mouse-up on-pointer-up
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-up % shape base-frame frame-offset objects overlays)) #(on-pointer-up % shape base-frame frame-offset objects overlays))
on-mouse-enter on-pointer-enter
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-enter % shape base-frame frame-offset objects overlays)) #(on-pointer-enter % shape base-frame frame-offset objects overlays))
on-mouse-leave on-pointer-leave
(mf/use-fn (mf/deps shape base-frame frame-offset objects) (mf/use-fn (mf/deps shape base-frame frame-offset objects)
#(on-mouse-leave % shape base-frame frame-offset objects overlays))] #(on-pointer-leave % shape base-frame frame-offset objects overlays))]
(mf/with-effect [] (mf/with-effect []
@ -286,10 +286,10 @@
(if-not svg-element? (if-not svg-element?
[:> shape-container {:shape shape [:> shape-container {:shape shape
:cursor (when (ctsi/actionable? interactions) "pointer") :cursor (when (ctsi/actionable? interactions) "pointer")
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:on-mouse-up on-mouse-up :on-pointer-up on-pointer-up
:on-mouse-enter on-mouse-enter :on-pointer-enter on-pointer-enter
:on-mouse-leave on-mouse-leave} :on-pointer-leave on-pointer-leave}
[:& component {:shape shape [:& component {:shape shape
:frame frame :frame frame

3
frontend/src/app/main/ui/workspace.cljs
View file

@ -164,7 +164,8 @@
[:& (mf/provider ctx/current-page-id) {:value page-id} [:& (mf/provider ctx/current-page-id) {:value page-id}
[:& (mf/provider ctx/components-v2) {:value components-v2} [:& (mf/provider ctx/components-v2) {:value components-v2}
[:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?} [:& (mf/provider ctx/workspace-read-only?) {:value workspace-read-only?}
[:section#workspace {:style {:background-color background-color}} [:section#workspace {:style {:background-color background-color
:touch-action "none"}}
(when (not (:hide-ui layout)) (when (not (:hide-ui layout))
[:& header {:file file [:& header {:file file
:page-id page-id :page-id page-id

4
frontend/src/app/main/ui/workspace/colorpalette.cljs
View file

@ -49,7 +49,7 @@
container (mf/use-ref nil) container (mf/use-ref nil)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :palette 72 54 80 :y true :bottom) (use-resize-hook :palette 72 54 80 :y true :bottom)
on-left-arrow-click on-left-arrow-click
@ -113,7 +113,7 @@
"--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}} "--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down [:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}] :on-pointer-move on-pointer-move}]
[:& dropdown {:show (:show-menu @state) [:& dropdown {:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)} :on-close #(swap! state assoc :show-menu false)}
[:ul.workspace-context-menu.palette-menu [:ul.workspace-context-menu.palette-menu

3
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -191,7 +191,8 @@
:h h :s s :v v :h h :s s :v v
:alpha (/ alpha 255)})))) :alpha (/ alpha 255)}))))
[:div.colorpicker {:ref node-ref} [:div.colorpicker {:ref node-ref
:style {:touch-action "none"}}
[:div.colorpicker-content [:div.colorpicker-content
[:div.top-actions [:div.top-actions
[:button.picker-btn [:button.picker-btn

2
frontend/src/app/main/ui/workspace/colorpicker/harmony.cljs
View file

@ -134,7 +134,7 @@
:on-pointer-up handle-stop-drag :on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag :on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos :on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}] :on-pointer-move #(when @dragging? (calculate-pos %))}]
[:div.handler {:style {:pointer-events "none" [:div.handler {:style {:pointer-events "none"
:left (:x pos-current) :left (:x pos-current)
:top (:y pos-current)}}] :top (:y pos-current)}}]

2
frontend/src/app/main/ui/workspace/colorpicker/ramp.cljs
View file

@ -44,7 +44,7 @@
:on-pointer-up handle-stop-drag :on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag :on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos :on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))} :on-pointer-move #(when @dragging? (calculate-pos %))}
[:div.handler {:style {:pointer-events "none" [:div.handler {:style {:pointer-events "none"
:left (str (* 100 saturation) "%") :left (str (* 100 saturation) "%")
:top (str (* 100 (- 1 (/ value 255))) "%")}}]])) :top (str (* 100 (- 1 (/ value 255))) "%")}}]]))

2
frontend/src/app/main/ui/workspace/colorpicker/slider_selector.cljs
View file

@ -55,7 +55,7 @@
:on-pointer-up handle-stop-drag :on-pointer-up handle-stop-drag
:on-lost-pointer-capture handle-stop-drag :on-lost-pointer-capture handle-stop-drag
:on-click calculate-pos :on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))} :on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value) (let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100) (- max-value min-value)) 100)

2
frontend/src/app/main/ui/workspace/effects.cljs
View file

@ -28,7 +28,7 @@
(fn [] (fn []
(st/emit! (dws/change-hover-state id false))))) (st/emit! (dws/change-hover-state id false)))))
(defn use-mouse-down (defn use-pointer-down
[{:keys [id type blocked]}] [{:keys [id type blocked]}]
(mf/use-callback (mf/use-callback
(mf/deps id type blocked) (mf/deps id type blocked)

16
frontend/src/app/main/ui/workspace/shapes/path/editor.cljs
View file

@ -51,7 +51,7 @@
(fn [_] (fn [_]
(st/emit! (drp/path-pointer-leave position)))) (st/emit! (drp/path-pointer-leave position))))
on-mouse-down on-pointer-down
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -95,9 +95,9 @@
[:circle {:cx x [:circle {:cx x
:cy y :cy y
:r (/ point-radius-active-area zoom) :r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:on-mouse-enter on-enter :on-pointer-enter on-enter
:on-mouse-leave on-leave :on-pointer-leave on-leave
:pointer-events (when-not preview? "visible") :pointer-events (when-not preview? "visible")
:style {:cursor (cond :style {:cursor (cond
(= edit-mode :draw) cur/pen-node (= edit-mode :draw) cur/pen-node
@ -116,7 +116,7 @@
(fn [_] (fn [_]
(st/emit! (drp/path-handler-leave index prefix))) (st/emit! (drp/path-handler-leave index prefix)))
on-mouse-down on-pointer-down
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -157,9 +157,9 @@
[:circle {:cx x [:circle {:cx x
:cy y :cy y
:r (/ point-radius-active-area zoom) :r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:on-mouse-enter on-enter :on-pointer-enter on-enter
:on-mouse-leave on-leave :on-pointer-leave on-leave
:style {:cursor (when (= edit-mode :move) cur/pointer-move) :style {:cursor (when (= edit-mode :move) cur/pointer-move)
:fill "none" :fill "none"
:stroke-width 0}}]]))) :stroke-width 0}}]])))

4
frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
View file

@ -201,7 +201,7 @@
(st/emit! (dwt/update-editor-state shape state))) (st/emit! (dwt/update-editor-state shape state)))
"handled")) "handled"))
on-mouse-down on-pointer-down
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(when (dom/class? (dom/get-target event) "DraftEditor-root") (when (dom/class? (dom/get-target event) "DraftEditor-root")
@ -229,7 +229,7 @@
;; the underlying text. Use opacity because display or visibility won't allow to recover ;; the underlying text. Use opacity because display or visibility won't allow to recover
;; focus afterwards. ;; focus afterwards.
:opacity (when @blurred 0)} :opacity (when @blurred 0)}
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:class (dom/classnames :class (dom/classnames
:align-top (= (:vertical-align content "top") "top") :align-top (= (:vertical-align content "top") "top")
:align-center (= (:vertical-align content) "center") :align-center (= (:vertical-align content) "center")

4
frontend/src/app/main/ui/workspace/sidebar.cljs
View file

@ -37,7 +37,7 @@
shortcuts? (contains? layout :shortcuts) shortcuts? (contains? layout :shortcuts)
show-debug? (contains? layout :debug-panel) show-debug? (contains? layout :debug-panel)
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :left-sidebar 255 255 500 :x false :left) (use-resize-hook :left-sidebar 255 255 500 :x false :left)
handle-collapse handle-collapse
@ -52,7 +52,7 @@
:style #js {"--width" (str size "px")}} :style #js {"--width" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down [:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}] :on-pointer-move on-pointer-move}]
[:div.settings-bar-inside [:div.settings-bar-inside
(cond (cond

4
frontend/src/app/main/ui/workspace/sidebar/history.cljs
View file

@ -288,8 +288,8 @@
:current current? :current current?
:hover @hover? :hover @hover?
:show-detail @show-detail?) :show-detail @show-detail?)
:on-mouse-enter #(reset! hover? true) :on-pointer-enter #(reset! hover? true)
:on-mouse-leave #(reset! hover? false) :on-pointer-leave #(reset! hover? false)
:on-click #(st/emit! (dwc/undo-to-index idx-entry))} :on-click #(st/emit! (dwc/undo-to-index idx-entry))}
[:div.history-entry-summary [:div.history-entry-summary
[:div.history-entry-summary-icon (entry->icon entry)] [:div.history-entry-summary-icon (entry->icon entry)]

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

@ -503,8 +503,8 @@
[:div.element-set-actions [:div.element-set-actions
(when on-detach (when on-detach
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true) {:on-pointer-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false) :on-pointer-leave #(reset! hover-detach false)
:on-click on-detach} :on-click on-detach}
(if @hover-detach i/unchain i/chain)]) (if @hover-detach i/unchain i/chain)])

4
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -167,8 +167,8 @@
[:div.color-name (str color-name)]] [:div.color-name (str color-name)]]
(when on-detach (when on-detach
[:div.element-set-actions-button [:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true) {:on-pointer-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false) :on-pointer-leave #(reset! hover-detach false)
:on-click detach-value} :on-click detach-value}
(if @hover-detach i/unchain i/chain)]) (if @hover-detach i/unchain i/chain)])

4
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

@ -204,7 +204,7 @@
(mf/defc sitemap (mf/defc sitemap
[] []
(let [{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} (let [{:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :sitemap 200 38 400 :y false nil) (use-resize-hook :sitemap 200 38 400 :y false nil)
file (mf/deref refs/workspace-file) file (mf/deref refs/workspace-file)
@ -234,4 +234,4 @@
(when @show-pages? (when @show-pages?
[:div.resize-area {:on-pointer-down on-pointer-down [:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}])])) :on-pointer-move on-pointer-move}])]))

4
frontend/src/app/main/ui/workspace/textpalette.cljs
View file

@ -93,7 +93,7 @@
(on-right-arrow-click) (on-right-arrow-click)
(on-left-arrow-click))))) (on-left-arrow-click)))))
{:keys [on-pointer-down on-lost-pointer-capture on-mouse-move parent-ref size]} {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
(use-resize-hook :palette 72 54 80 :y true :bottom)] (use-resize-hook :palette 72 54 80 :y true :bottom)]
[:div.color-palette {:ref parent-ref [:div.color-palette {:ref parent-ref
@ -101,7 +101,7 @@
:style #js {"--height" (str size "px")}} :style #js {"--height" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down [:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}] :on-pointer-move on-pointer-move}]
[:& dropdown {:show (:show-menu @state) [:& dropdown {:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)} :on-close #(swap! state assoc :show-menu false)}

14
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -169,14 +169,14 @@
on-drag-enter (actions/on-drag-enter) on-drag-enter (actions/on-drag-enter)
on-drag-over (actions/on-drag-over) on-drag-over (actions/on-drag-over)
on-drop (actions/on-drop file) on-drop (actions/on-drop file)
on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing? on-pointer-down (actions/on-pointer-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing?
drawing-path? create-comment? space? panning z? workspace-read-only?) drawing-path? create-comment? space? panning z? workspace-read-only?)
on-mouse-up (actions/on-mouse-up disable-paste)
on-pointer-down (actions/on-pointer-down) on-pointer-up (actions/on-pointer-up disable-paste)
on-pointer-enter (actions/on-pointer-enter in-viewport?) on-pointer-enter (actions/on-pointer-enter in-viewport?)
on-pointer-leave (actions/on-pointer-leave in-viewport?) on-pointer-leave (actions/on-pointer-leave in-viewport?)
on-pointer-move (actions/on-pointer-move move-stream) on-pointer-move (actions/on-pointer-move move-stream)
on-pointer-up (actions/on-pointer-up)
on-move-selected (actions/on-move-selected hover hover-ids selected space? z? workspace-read-only?) on-move-selected (actions/on-move-selected hover hover-ids selected space? z? workspace-read-only?)
on-menu-selected (actions/on-menu-selected hover hover-ids selected workspace-read-only?) on-menu-selected (actions/on-menu-selected hover hover-ids selected workspace-read-only?)
@ -228,7 +228,7 @@
show-margin? (and (= (count selected-shapes) 1) show-margin? (and (= (count selected-shapes) 1)
(= (:layout selected-frame) :flex))] (= (:layout selected-frame) :flex))]
(hooks/setup-dom-events viewport-ref zoom disable-paste in-viewport? workspace-read-only?) (hooks/setup-dom-events zoom disable-paste in-viewport? workspace-read-only?)
(hooks/setup-viewport-size vport viewport-ref) (hooks/setup-viewport-size vport viewport-ref)
(hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?) (hooks/setup-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?)
(hooks/setup-keyboard alt? mod? space? z? shift?) (hooks/setup-keyboard alt? mod? space? z? shift?)
@ -309,7 +309,7 @@
:view-box (utils/format-viewbox vbox) :view-box (utils/format-viewbox vbox)
:ref on-viewport-ref :ref on-viewport-ref
:class (when drawing-tool "drawing") :class (when drawing-tool "drawing")
:style {:cursor @cursor} :style {:cursor @cursor :touch-action "none"}
:fill "none" :fill "none"
:on-click on-click :on-click on-click
@ -318,8 +318,6 @@
:on-drag-enter on-drag-enter :on-drag-enter on-drag-enter
:on-drag-over on-drag-over :on-drag-over on-drag-over
:on-drop on-drop :on-drop on-drop
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave :on-pointer-leave on-pointer-leave

54
frontend/src/app/main/ui/workspace/viewport/actions.cljs
View file

@ -32,14 +32,27 @@
(def scale-per-pixel -0.0057) (def scale-per-pixel -0.0057)
(defn on-mouse-down (defn on-pointer-down
[{:keys [id blocked hidden type]} selected edition drawing-tool text-editing? [{:keys [id blocked hidden type]} selected edition drawing-tool text-editing?
node-editing? grid-editing? drawing-path? create-comment? space? panning z? workspace-read-only?] node-editing? grid-editing? drawing-path? create-comment? space? panning z? workspace-read-only?]
(mf/use-callback (mf/use-callback
(mf/deps id blocked hidden type selected edition drawing-tool text-editing? (mf/deps id blocked hidden type selected edition drawing-tool text-editing?
node-editing? grid-editing? drawing-path? create-comment? @z? @space? node-editing? grid-editing? drawing-path? create-comment? @z? @space?
panning workspace-read-only?) panning workspace-read-only?)
(fn [bevent] (fn [bevent]
;; We need to handle editor related stuff here because
;; handling on editor dom node does not works properly.
(let [target (dom/get-target bevent)
editor (.closest ^js target ".public-DraftEditor-content")]
;; Capture mouse pointer to detect the movements even if cursor
;; leaves the viewport or the browser itself
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
(if editor
(.setPointerCapture editor (.-pointerId bevent))
(.setPointerCapture target (.-pointerId bevent))))
(when (or (dom/class? (dom/get-target bevent) "viewport-controls") (when (or (dom/class? (dom/get-target bevent) "viewport-controls")
(dom/class? (dom/get-target bevent) "viewport-selrect")) (dom/class? (dom/get-target bevent) "viewport-selrect"))
(dom/stop-propagation bevent) (dom/stop-propagation bevent)
@ -241,12 +254,16 @@
(let [position (dom/get-client-position event)] (let [position (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids}))))))) (st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids})))))))
(defn on-mouse-up (defn on-pointer-up
[disable-paste] [disable-paste]
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
(let [target (dom/get-target event)]
;; Release pointer on mouse up
(.releasePointerCapture target (.-pointerId event)))
(let [event (.-nativeEvent event) (let [event (.-nativeEvent event)
ctrl? (kbd/ctrl? event) ctrl? (kbd/ctrl? event)
shift? (kbd/shift? event) shift? (kbd/shift? event)
@ -279,27 +296,6 @@
(fn [] (fn []
(reset! in-viewport? false)))) (reset! in-viewport? false))))
(defn on-pointer-down []
(mf/use-callback
(fn [event]
;; We need to handle editor related stuff here because
;; handling on editor dom node does not works properly.
(let [target (dom/get-target event)
editor (.closest ^js target ".public-DraftEditor-content")]
;; Capture mouse pointer to detect the movements even if cursor
;; leaves the viewport or the browser itself
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
(if editor
(.setPointerCapture editor (.-pointerId event))
(.setPointerCapture target (.-pointerId event)))))))
(defn on-pointer-up []
(mf/use-callback
(fn [event]
(let [target (dom/get-target event)]
; Release pointer on mouse up
(.releasePointerCapture target (.-pointerId event))))))
(defn on-key-down [] (defn on-key-down []
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
@ -333,7 +329,7 @@
(= "TEXTAREA" (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?))))))
(defn on-mouse-move [] (defn on-pointer-move [move-stream]
(let [last-position (mf/use-var nil)] (let [last-position (mf/use-var nil)]
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
@ -345,7 +341,7 @@
delta (if @last-position delta (if @last-position
(gpt/subtract raw-pt @last-position) (gpt/subtract raw-pt @last-position)
(gpt/point 0 0))] (gpt/point 0 0))]
(rx/push! move-stream pt)
(reset! last-position raw-pt) (reset! last-position raw-pt)
(st/emit! (ms/->PointerEvent :delta delta (st/emit! (ms/->PointerEvent :delta delta
(kbd/ctrl? event) (kbd/ctrl? event)
@ -358,14 +354,6 @@
(kbd/alt? event) (kbd/alt? event)
(kbd/meta? event)))))))) (kbd/meta? event))))))))
(defn on-pointer-move [move-stream]
(mf/use-callback
(mf/deps move-stream)
(fn [event]
(let [raw-pt (dom/get-client-position event)
pt (uwvv/point->viewport raw-pt)]
(rx/push! move-stream pt)))))
(defn on-mouse-wheel [zoom] (defn on-mouse-wheel [zoom]
(mf/use-callback (mf/use-callback
(mf/deps zoom) (mf/deps zoom)

26
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -83,7 +83,7 @@
(mf/defc gradient-color-handler (mf/defc gradient-color-handler
[{:keys [filter-id zoom point color angle selected [{:keys [filter-id zoom point color angle selected
on-click on-mouse-down on-mouse-up]}] on-click on-pointer-down on-pointer-up]}]
[:g {:filter (str/fmt "url(#%s)" filter-id) [:g {:filter (str/fmt "url(#%s)" filter-id)
:transform (gmt/rotate-matrix angle point)} :transform (gmt/rotate-matrix angle point)}
@ -100,8 +100,8 @@
:height (/ gradient-square-width zoom) :height (/ gradient-square-width zoom)
:fill (:value color) :fill (:value color)
:on-click (partial on-click :to-p) :on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p) :on-pointer-down (partial on-pointer-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}] :on-pointer-up (partial on-pointer-up :to-p)}]
[:rect {:data-allow-click-modal "colorpicker" [:rect {:data-allow-click-modal "colorpicker"
:x (- (:x point) (/ gradient-square-width 2 zoom)) :x (- (:x point) (/ gradient-square-width 2 zoom))
@ -114,8 +114,8 @@
:fill (:value color) :fill (:value color)
:fill-opacity (:opacity color) :fill-opacity (:opacity color)
:on-click on-click :on-click on-click
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:on-mouse-up on-mouse-up}]]) :on-pointer-up on-pointer-up}]])
(mf/defc gradient-handler-transformed (mf/defc gradient-handler-transformed
[{:keys [from-p to-p width-p from-color to-color zoom editing [{:keys [from-p to-p width-p from-color to-color zoom editing
@ -133,7 +133,7 @@
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-down on-pointer-down
(fn [position event] (fn [position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -144,7 +144,7 @@
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-up on-pointer-up
(fn [_position event] (fn [_position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
@ -203,8 +203,8 @@
:cy (:y width-p) :cy (:y width-p)
:r (/ gradient-width-handler-radius zoom) :r (/ gradient-width-handler-radius zoom)
:fill gradient-width-handler-color :fill gradient-width-handler-color
:on-mouse-down (partial on-mouse-down :width-p) :on-pointer-down (partial on-pointer-down :width-p)
:on-mouse-up (partial on-mouse-up :width-p)}]]) :on-pointer-up (partial on-pointer-up :width-p)}]])
[:& gradient-color-handler [:& gradient-color-handler
{:selected (or (not editing) (= editing 0)) {:selected (or (not editing) (= editing 0))
@ -214,8 +214,8 @@
:color from-color :color from-color
:angle angle :angle angle
:on-click (partial on-click :from-p) :on-click (partial on-click :from-p)
:on-mouse-down (partial on-mouse-down :from-p) :on-pointer-down (partial on-pointer-down :from-p)
:on-mouse-up (partial on-mouse-up :from-p)}] :on-pointer-up (partial on-pointer-up :from-p)}]
[:& gradient-color-handler [:& gradient-color-handler
{:selected (= editing 1) {:selected (= editing 1)
@ -225,8 +225,8 @@
:color to-color :color to-color
:angle angle :angle angle
:on-click (partial on-click :to-p) :on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p) :on-pointer-down (partial on-pointer-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]])) :on-pointer-up (partial on-pointer-up :to-p)}]]))
(mf/defc gradient-handlers* (mf/defc gradient-handlers*
[{:keys [zoom stops gradient editing-stop shape]}] [{:keys [zoom stops gradient editing-stop shape]}]

4
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -202,7 +202,7 @@
(mf/set-ref-val! dragging-ref false) (mf/set-ref-val! dragging-ref false)
(mf/set-ref-val! start-ref nil))) (mf/set-ref-val! start-ref nil)))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(when (mf/ref-val dragging-ref) (when (mf/ref-val dragging-ref)
@ -234,7 +234,7 @@
:width width :width width
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:style {:fill "transparent" :style {:fill "transparent"
:cursor (if (= type :column) :cursor (if (= type :column)
(cur/resize-ew 0) (cur/resize-ew 0)

12
frontend/src/app/main/ui/workspace/viewport/guides.cljs
View file

@ -93,7 +93,7 @@
(mf/set-ref-val! start-pos-ref nil) (mf/set-ref-val! start-pos-ref nil)
(swap! state assoc :new-position nil))) (swap! state assoc :new-position nil)))
on-mouse-move on-pointer-move
(mf/use-callback (mf/use-callback
(mf/deps position zoom snap-pixel?) (mf/deps position zoom snap-pixel?)
(fn [event] (fn [event]
@ -120,7 +120,7 @@
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up :on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:state state :state state
:frame frame})) :frame frame}))
@ -274,7 +274,7 @@
on-pointer-down on-pointer-down
on-pointer-up on-pointer-up
on-lost-pointer-capture on-lost-pointer-capture
on-mouse-move on-pointer-move
state state
frame]} (use-guide handle-change-position get-hover-frame zoom guide) frame]} (use-guide handle-change-position get-hover-frame zoom guide)
@ -310,7 +310,7 @@
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up :on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}])) :on-pointer-move on-pointer-move}]))
(if (some? frame) (if (some? frame)
(let [{:keys [l1-x1 l1-y1 l1-x2 l1-y2 (let [{:keys [l1-x1 l1-y1 l1-x2 l1-y2
@ -399,7 +399,7 @@
on-pointer-down on-pointer-down
on-pointer-up on-pointer-up
on-lost-pointer-capture on-lost-pointer-capture
on-mouse-move on-pointer-move
state state
frame]} (use-guide on-guide-change get-hover-frame zoom {:axis axis})] frame]} (use-guide on-guide-change get-hover-frame zoom {:axis axis})]
@ -415,7 +415,7 @@
:on-pointer-down on-pointer-down :on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up :on-pointer-up on-pointer-up
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move :on-pointer-move on-pointer-move
:style {:fill "none" :style {:fill "none"
:pointer-events "fill" :pointer-events "fill"
:cursor (if (= axis :x) (cur/resize-ew 0) (cur/resize-ns 0))}}])) :cursor (if (= axis :x) (cur/resize-ew 0) (cur/resize-ns 0))}}]))

15
frontend/src/app/main/ui/workspace/viewport/hooks.cljs
View file

@ -34,25 +34,14 @@
[rumext.v2 :as mf]) [rumext.v2 :as mf])
(:import goog.events.EventType)) (:import goog.events.EventType))
(defn setup-dom-events [viewport-ref zoom disable-paste in-viewport? workspace-read-only?] (defn setup-dom-events [zoom disable-paste in-viewport? workspace-read-only?]
(let [on-key-down (actions/on-key-down) (let [on-key-down (actions/on-key-down)
on-key-up (actions/on-key-up) on-key-up (actions/on-key-up)
on-mouse-move (actions/on-mouse-move)
on-mouse-wheel (actions/on-mouse-wheel zoom) on-mouse-wheel (actions/on-mouse-wheel zoom)
on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)] on-paste (actions/on-paste disable-paste in-viewport? workspace-read-only?)]
;; We use the DOM listener because the goog.closure one forces reflow to generate its internal
;; structure. As we don't need currently nothing from BrowserEvent we optimize by using the basic event
(mf/use-layout-effect (mf/use-layout-effect
(mf/deps on-mouse-move) (mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
(fn []
(let [node (mf/ref-val viewport-ref)]
(.addEventListener node "mousemove" on-mouse-move)
(fn []
(.removeEventListener node "mousemove" on-mouse-move)))))
(mf/use-layout-effect
(mf/deps on-key-down on-key-up on-mouse-move on-mouse-wheel on-paste workspace-read-only?)
(fn [] (fn []
(let [keys [(events/listen js/document EventType.KEYDOWN on-key-down) (let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
(events/listen js/document EventType.KEYUP on-key-up) (events/listen js/document EventType.KEYUP on-key-up)

14
frontend/src/app/main/ui/workspace/viewport/interactions.cljs
View file

@ -33,7 +33,7 @@
:move-overlay-index]) :move-overlay-index])
refs/workspace-local =)) refs/workspace-local =))
(defn- on-mouse-down (defn- on-pointer-down
[event index {:keys [id] :as shape}] [event index {:keys [id] :as shape}]
(dom/stop-propagation event) (dom/stop-propagation event)
(st/emit! (dw/select-shape id)) (st/emit! (dw/select-shape id))
@ -163,7 +163,7 @@
arrow-dir (if (= dest-pos :left) :right :left)] arrow-dir (if (= dest-pos :left) :right :left)]
(if-not selected? (if-not selected?
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)} [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-gray-20)" [:path {:stroke "var(--color-gray-20)"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
@ -178,7 +178,7 @@
:arrow-dir arrow-dir :arrow-dir arrow-dir
:zoom zoom}])] :zoom zoom}])]
[:g {:on-mouse-down #(on-mouse-down % index orig-shape)} [:g {:on-pointer-down #(on-pointer-down % index orig-shape)}
[:path {:stroke "var(--color-primary)" [:path {:stroke "var(--color-primary)"
:fill "none" :fill "none"
:pointer-events "visible" :pointer-events "visible"
@ -209,7 +209,7 @@
(let [shape-rect (:selrect shape) (let [shape-rect (:selrect shape)
handle-x (+ (:x shape-rect) (:width shape-rect)) handle-x (+ (:x shape-rect) (:width shape-rect))
handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))] handle-y (+ (:y shape-rect) (/ (:height shape-rect) 2))]
[:g {:on-mouse-down #(on-mouse-down % index shape)} [:g {:on-pointer-down #(on-pointer-down % index shape)}
[:& interaction-marker {:x handle-x [:& interaction-marker {:x handle-x
:y handle-y :y handle-y
:stroke "var(--color-primary)" :stroke "var(--color-primary)"
@ -246,9 +246,9 @@
dest-shape (cond-> dest-shape dest-shape (cond-> dest-shape
(some? thumbnail-data) (some? thumbnail-data)
(assoc :thumbnail thumbnail-data))] (assoc :thumbnail thumbnail-data))]
[:g {:on-mouse-down start-move-position [:g {:on-pointer-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true) :on-pointer-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)} :on-pointer-leave #(reset! hover-disabled? false)}
[:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) } [:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) }
[:& (mf/provider muc/render-thumbnails) {:value true} [:& (mf/provider muc/render-thumbnails) {:value true}
[:& (mf/provider embed/context) {:value false} [:& (mf/provider embed/context) {:value false}

12
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

@ -81,7 +81,7 @@
(st/emit! (dwc/stop-picker)) (st/emit! (dwc/stop-picker))
(modal/disallow-click-outside!)))) (modal/disallow-click-outside!))))
handle-mouse-move-picker handle-pointer-move-picker
(mf/use-callback (mf/use-callback
(mf/deps viewport-node) (mf/deps viewport-node)
(fn [event] (fn [event]
@ -109,7 +109,7 @@
(.drawImage zoom-context image 0 0 200 160)))) (.drawImage zoom-context image 0 0 200 160))))
(st/emit! (dwc/pick-color [r g b a])))))) (st/emit! (dwc/pick-color [r g b a]))))))
handle-mouse-down-picker handle-pointer-down-picker
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
@ -117,7 +117,7 @@
(st/emit! (dwu/start-undo-transaction :mouse-down-picker) (st/emit! (dwu/start-undo-transaction :mouse-down-picker)
(dwc/pick-color-select true (kbd/shift? event))))) (dwc/pick-color-select true (kbd/shift? event)))))
handle-mouse-up-picker handle-pointer-up-picker
(mf/use-callback (mf/use-callback
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
@ -185,9 +185,9 @@
[:div.pixel-overlay [:div.pixel-overlay
{:tab-index 0 {:tab-index 0
:style {:cursor cur/picker} :style {:cursor cur/picker}
:on-mouse-down handle-mouse-down-picker :on-pointer-down handle-pointer-down-picker
:on-mouse-up handle-mouse-up-picker :on-pointer-up handle-pointer-up-picker
:on-mouse-move handle-mouse-move-picker} :on-pointer-move handle-pointer-move-picker}
[:div {:style {:display "none"}} [:div {:style {:display "none"}}
[:img {:ref img-ref [:img {:ref img-ref
:on-load handle-image-load :on-load handle-image-load

18
frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs
View file

@ -123,7 +123,7 @@
(- scrollbar-width)) (- scrollbar-width))
h-scrollbar-x) h-scrollbar-x)
on-mouse-move on-pointer-move
(fn [event axis] (fn [event axis]
(when-let [_ (or @v-scrolling? @h-scrolling?)] (when-let [_ (or @v-scrolling? @h-scrolling?)]
(let [start-pt (mf/ref-val start-ref) (let [start-pt (mf/ref-val start-ref)
@ -147,7 +147,7 @@
(mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x) (mf/set-ref-val! h-scrollbar-x-ref new-h-scrollbar-x)
(mf/set-ref-val! start-ref current-pt)))) (mf/set-ref-val! start-ref current-pt))))
on-mouse-down on-pointer-down
(fn [event axis] (fn [event axis]
(let [start-pt (dom/get-client-position event) (let [start-pt (dom/get-client-position event)
viewport-point (point->viewport start-pt) viewport-point (point->viewport start-pt)
@ -180,7 +180,7 @@
(reset! v-scrolling? (= axis :y)) (reset! v-scrolling? (= axis :y))
(reset! h-scrolling? (= axis :x)))) (reset! h-scrolling? (= axis :x))))
on-mouse-up on-pointer-up
(fn [] (fn []
(reset! v-scrolling? false) (reset! v-scrolling? false)
(reset! h-scrolling? false))] (reset! h-scrolling? false))]
@ -188,9 +188,9 @@
[:* [:*
(when show-v-scroll? (when show-v-scroll?
[:g.v-scroll {:fill clr/black} [:g.v-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :y) [:rect {:on-pointer-move #(on-pointer-move % :y)
:on-mouse-down #(on-mouse-down % :y) :on-pointer-down #(on-pointer-down % :y)
:on-mouse-up on-mouse-up :on-pointer-up on-pointer-up
:width (* inv-zoom 7) :width (* inv-zoom 7)
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)
@ -202,9 +202,9 @@
:stroke-width (/ 0.15 zoom)}}]]) :stroke-width (/ 0.15 zoom)}}]])
(when show-h-scroll? (when show-h-scroll?
[:g.h-scroll {:fill clr/black} [:g.h-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :x) [:rect {:on-pointer-move #(on-pointer-move % :x)
:on-mouse-down #(on-mouse-down % :x) :on-pointer-down #(on-pointer-down % :x)
:on-mouse-up on-mouse-up :on-pointer-up on-pointer-up
:width scrollbar-width :width scrollbar-width
:rx (* inv-zoom 3) :rx (* inv-zoom 3)
:ry (* inv-zoom 3) :ry (* inv-zoom 3)

10
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View file

@ -45,7 +45,7 @@
:width width :width width
:height height :height height
:transform (str transform) :transform (str transform)
:on-mouse-down on-move-selected :on-pointer-down on-move-selected
:on-context-menu on-context-menu :on-context-menu on-context-menu
:style {:stroke color :style {:stroke color
:stroke-width (/ selection-rect-width zoom) :stroke-width (/ selection-rect-width zoom)
@ -172,7 +172,7 @@
:fill (if (debug? :handlers) "blue" "none") :fill (if (debug? :handlers) "blue" "none")
:stroke-width 0 :stroke-width 0
:transform (dm/str transform) :transform (dm/str transform)
:on-mouse-down on-rotate}])) :on-pointer-down on-rotate}]))
(mf/defc resize-point-handler (mf/defc resize-point-handler
[{:keys [cx cy zoom position on-resize transform rotation color align]}] [{:keys [cx cy zoom position on-resize transform rotation color align]}]
@ -208,9 +208,9 @@
:style {:fill (if (debug? :handlers) "red" "none") :style {:fill (if (debug? :handlers) "red" "none")
:stroke-width 0 :stroke-width 0
:cursor cursor} :cursor cursor}
:on-mouse-down #(on-resize {:x cx' :y cy'} %)}]) :on-pointer-down #(on-resize {:x cx' :y cy'} %)}])
[:circle {:on-mouse-down #(on-resize {:x cx' :y cy'} %) [:circle {:on-pointer-down #(on-resize {:x cx' :y cy'} %)
:r (/ resize-point-circle-radius zoom) :r (/ resize-point-circle-radius zoom)
:cx cx' :cx cx'
:cy cy' :cy cy'
@ -246,7 +246,7 @@
:width length :width length
:height height :height height
:transform transform-str :transform transform-str
:on-mouse-down #(on-resize res-point %) :on-pointer-down #(on-resize res-point %)
:style {:fill (if (debug? :handlers) "yellow" "none") :style {:fill (if (debug? :handlers) "yellow" "none")
:stroke-width 0 :stroke-width 0
:cursor (if (#{:left :right} position) :cursor (if (#{:left :right} position)

8
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -97,7 +97,7 @@
#(mf/deferred % ts/raf)]} #(mf/deferred % ts/raf)]}
[{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}] [{:keys [frame selected? zoom show-artboard-names? show-id? on-frame-enter on-frame-leave on-frame-select]}]
(let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) (let [workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
on-mouse-down on-pointer-down
(mf/use-callback (mf/use-callback
(mf/deps (:id frame) on-frame-select workspace-read-only?) (mf/deps (:id frame) on-frame-select workspace-read-only?)
(fn [bevent] (fn [bevent]
@ -155,7 +155,7 @@
:class "workspace-frame-label" :class "workspace-frame-label"
:style {:fill (when selected? "var(--color-primary-dark)")} :style {:fill (when selected? "var(--color-primary-dark)")}
:visibility (if show-artboard-names? "visible" "hidden") :visibility (if show-artboard-names? "visible" "hidden")
:on-mouse-down on-mouse-down :on-pointer-down on-pointer-down
:on-double-click on-double-click :on-double-click on-double-click
:on-context-menu on-context-menu :on-context-menu on-context-menu
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
@ -204,7 +204,7 @@
(let [{:keys [x y]} frame (let [{:keys [x y]} frame
flow-pos (gpt/point x (- y (/ 35 zoom))) flow-pos (gpt/point x (- y (/ 35 zoom)))
on-mouse-down on-pointer-down
(mf/use-callback (mf/use-callback
(mf/deps (:id frame) on-frame-select) (mf/deps (:id frame) on-frame-select)
(fn [bevent] (fn [bevent]
@ -237,7 +237,7 @@
:height 24 :height 24
:transform (vwu/text-transform flow-pos zoom)} :transform (vwu/text-transform flow-pos zoom)}
[:div.flow-badge {:class (dom/classnames :selected selected?)} [:div.flow-badge {:class (dom/classnames :selected selected?)}
[:div.content {:on-mouse-down on-mouse-down [:div.content {:on-pointer-down on-pointer-down
:on-double-click on-double-click :on-double-click on-double-click
:on-pointer-enter on-pointer-enter :on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave} :on-pointer-leave on-pointer-leave}