Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-28 15:41:25 -05:00
Code Issues 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
Show stats 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 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 problems with touch devices and Wacom tablets [#2216](https://github.com/penpot/penpot/issues/2216)
### :heart: Community contributions by (Thank you!)
- 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-y nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps position zoom)
(fn [event]
@ -392,7 +392,7 @@
{:on-pointer-down on-pointer-down
: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
:state state}))
@ -408,7 +408,7 @@
{:keys [on-pointer-down
on-pointer-up
on-mouse-move
on-pointer-move
state
on-lost-pointer-capture]} (use-buble zoom thread)
@ -438,14 +438,14 @@
(and (not (mf/ref-val was-open?)) (not (mf/ref-val drag?))))
(st/emit! (dcm/open-thread thread))))))
on-mouse-move*
on-pointer-move*
(mf/use-callback
(mf/deps origin drag? on-mouse-move)
(mf/deps origin drag? on-pointer-move)
(fn [event]
(when (not= origin :viewer)
(mf/set-ref-val! drag? true)
(dom/stop-propagation event)
(on-mouse-move event))))
(on-pointer-move event))))
on-click*
(mf/use-callback
@ -460,7 +460,7 @@
:left (str pos-x "px")}
:on-pointer-down on-pointer-down*
:on-pointer-up on-pointer-up*
:on-mouse-move on-mouse-move*
:on-pointer-move on-pointer-move*
:on-click on-click*
:on-lost-pointer-capture on-lost-pointer-capture
:class (dom/classnames

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

@ -138,7 +138,6 @@
(mf/use-layout-effect
(fn []
(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)]]
#(doseq [key keys]
(events/unlistenByKey key)))))

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

@ -233,7 +233,6 @@
(mf/use-layout-effect
(fn []
(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)]]
#(doseq [key keys]
(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)
(set! last-resize-type nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps min-val max-val negate?)
(fn [event]
@ -68,7 +68,7 @@
(swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))]
{:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:parent-ref parent-ref
:size @size-state}))

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

@ -297,7 +297,7 @@
(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]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
@ -324,7 +324,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps frame-id padding-num padding)
(fn [event]
@ -354,11 +354,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
: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")
:cursor (when (or hover? selected?)
(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?)
padding (:layout-padding 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-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
pill-width (/ flex-display-pill-width zoom)
pill-height (/ flex-display-pill-height zoom)
hover? #(or hover-all?
@ -442,8 +442,8 @@
:mouse-pos mouse-pos
:hover-value hover-value
:padding-num padding-num
:on-mouse-enter (partial on-mouse-enter padding-num (get padding padding-num))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter padding-num (get padding padding-num))
:on-pointer-leave on-pointer-leave
:hover? (hover? padding-num)
:selected? (get paddings-selected padding-num)
:rect-data rect-data}])
@ -457,7 +457,7 @@
:y (- (:y @mouse-pos) pill-width)
: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]}]
(let [resizing? (mf/use-var false)
start (mf/use-var nil)
@ -484,7 +484,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps shape-id margin-num margin)
(fn [event]
@ -512,11 +512,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
: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")
:cursor (when (or hover? selected?)
(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?)
margin (:layout-item-margin 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-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
hover? #(or hover-all?
(and (or (= % :m1) (= % :m3)) hover-v?)
(and (or (= % :m2) (= % :m4)) hover-h?)
@ -591,8 +591,8 @@
:hover-h? hover-h?
:margin-num margin-num
:margin margin
:on-mouse-enter (partial on-mouse-enter margin-num (get margin margin-num))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter margin-num (get margin margin-num))
:on-pointer-leave on-pointer-leave
:rect-data rect-data
:hover? (hover? margin-num)
:selected? (get margins-selected margin-num)
@ -609,7 +609,7 @@
:y (- (:y @mouse-pos) pill-width)
: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]}]
(let [resizing (mf/use-var nil)
start (mf/use-var nil)
@ -636,7 +636,7 @@
(reset! original-value 0)
(st/emit! (dwm/apply-modifiers))))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps frame-id gap-type gap)
(fn [event]
@ -657,11 +657,11 @@
:y (:y rect-data)
:width (:width rect-data)
:height (:height rect-data)
:on-mouse-enter on-mouse-enter
:on-mouse-leave on-mouse-leave
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-pointer-down on-pointer-down
: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")
:cursor (when (or hover? selected?)
(if (= (:resize-axis rect-data) :x) (cur/resize-ew 0) (cur/resize-ew 90)))
@ -683,11 +683,11 @@
padding (:layout-padding frame)
gap (:layout-gap 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-value val))
on-mouse-leave #(reset! hover nil)
on-pointer-leave #(reset! hover nil)
negate {:column-gap (if flip-x true false)
:row-gap (if flip-y true false)}
@ -833,8 +833,8 @@
:zoom zoom
:gap-type gap-type
:gap gap
:on-mouse-enter (partial on-mouse-enter gap-type (get gap gap-type))
:on-mouse-leave on-mouse-leave
:on-pointer-enter (partial on-pointer-enter gap-type (get gap gap-type))
:on-pointer-leave on-pointer-leave
:rect-data display-item
:hover? (= @hover 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)
;; 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)]]
#(doseq [key keys]

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

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

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

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

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

@ -49,7 +49,7 @@
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)
on-left-arrow-click
@ -113,7 +113,7 @@
"--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
: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)
:on-close #(swap! state assoc :show-menu false)}
[: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
:alpha (/ alpha 255)}))))
[:div.colorpicker {:ref node-ref}
[:div.colorpicker {:ref node-ref
:style {:touch-action "none"}}
[:div.colorpicker-content
[:div.top-actions
[: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-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}]
:on-pointer-move #(when @dragging? (calculate-pos %))}]
[:div.handler {:style {:pointer-events "none"
:left (:x 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-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}
:on-pointer-move #(when @dragging? (calculate-pos %))}
[:div.handler {:style {:pointer-events "none"
:left (str (* 100 saturation) "%")
: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-lost-pointer-capture handle-stop-drag
:on-click calculate-pos
:on-mouse-move #(when @dragging? (calculate-pos %))}
:on-pointer-move #(when @dragging? (calculate-pos %))}
(let [value-percent (* (/ (- value min-value)
(- max-value min-value)) 100)

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

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

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

@ -51,7 +51,7 @@
(fn [_]
(st/emit! (drp/path-pointer-leave position))))
on-mouse-down
on-pointer-down
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -95,9 +95,9 @@
[:circle {:cx x
:cy y
:r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down
:on-mouse-enter on-enter
:on-mouse-leave on-leave
:on-pointer-down on-pointer-down
:on-pointer-enter on-enter
:on-pointer-leave on-leave
:pointer-events (when-not preview? "visible")
:style {:cursor (cond
(= edit-mode :draw) cur/pen-node
@ -116,7 +116,7 @@
(fn [_]
(st/emit! (drp/path-handler-leave index prefix)))
on-mouse-down
on-pointer-down
(fn [event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -157,9 +157,9 @@
[:circle {:cx x
:cy y
:r (/ point-radius-active-area zoom)
:on-mouse-down on-mouse-down
:on-mouse-enter on-enter
:on-mouse-leave on-leave
:on-pointer-down on-pointer-down
:on-pointer-enter on-enter
:on-pointer-leave on-leave
:style {:cursor (when (= edit-mode :move) cur/pointer-move)
:fill "none"
: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)))
"handled"))
on-mouse-down
on-pointer-down
(mf/use-callback
(fn [event]
(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
;; focus afterwards.
:opacity (when @blurred 0)}
:on-mouse-down on-mouse-down
:on-pointer-down on-pointer-down
:class (dom/classnames
:align-top (= (:vertical-align content "top") "top")
: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)
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)
handle-collapse
@ -52,7 +52,7 @@
:style #js {"--width" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}]
:on-pointer-move on-pointer-move}]
[:div.settings-bar-inside
(cond

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

@ -288,8 +288,8 @@
:current current?
:hover @hover?
:show-detail @show-detail?)
:on-mouse-enter #(reset! hover? true)
:on-mouse-leave #(reset! hover? false)
:on-pointer-enter #(reset! hover? true)
:on-pointer-leave #(reset! hover? false)
:on-click #(st/emit! (dwc/undo-to-index idx-entry))}
[:div.history-entry-summary
[: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
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
{:on-pointer-enter #(reset! hover-detach true)
:on-pointer-leave #(reset! hover-detach false)
:on-click on-detach}
(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)]]
(when on-detach
[:div.element-set-actions-button
{:on-mouse-enter #(reset! hover-detach true)
:on-mouse-leave #(reset! hover-detach false)
{:on-pointer-enter #(reset! hover-detach true)
:on-pointer-leave #(reset! hover-detach false)
:on-click detach-value}
(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
[]
(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)
file (mf/deref refs/workspace-file)
@ -234,4 +234,4 @@
(when @show-pages?
[:div.resize-area {:on-pointer-down on-pointer-down
: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-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)]
[:div.color-palette {:ref parent-ref
@ -101,7 +101,7 @@
:style #js {"--height" (str size "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down
: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)
:on-close #(swap! state assoc :show-menu false)}

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

@ -169,14 +169,14 @@
on-drag-enter (actions/on-drag-enter)
on-drag-over (actions/on-drag-over)
on-drop (actions/on-drop file)
on-mouse-down (actions/on-mouse-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing?
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-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?)
on-pointer-up (actions/on-pointer-up disable-paste)
on-pointer-enter (actions/on-pointer-enter in-viewport?)
on-pointer-leave (actions/on-pointer-leave in-viewport?)
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-menu-selected (actions/on-menu-selected hover hover-ids selected workspace-read-only?)
@ -221,14 +221,14 @@
disabled-guides? (or drawing-tool transform)
show-padding? (and (= (count selected-shapes) 1)
(= (:type (first selected-shapes)) :frame)
(= (:layout (first selected-shapes)) :flex))
(= (:type (first selected-shapes)) :frame)
(= (:layout (first selected-shapes)) :flex))
show-margin? (and (= (count selected-shapes) 1)
(= (: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-cursor cursor alt? mod? space? panning drawing-tool drawing-path? node-editing? z? workspace-read-only?)
(hooks/setup-keyboard alt? mod? space? z? shift?)
@ -309,7 +309,7 @@
:view-box (utils/format-viewbox vbox)
:ref on-viewport-ref
:class (when drawing-tool "drawing")
:style {:cursor @cursor}
:style {:cursor @cursor :touch-action "none"}
:fill "none"
:on-click on-click
@ -318,8 +318,6 @@
:on-drag-enter on-drag-enter
:on-drag-over on-drag-over
:on-drop on-drop
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up
:on-pointer-down on-pointer-down
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave

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

@ -32,14 +32,27 @@
(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?
node-editing? grid-editing? drawing-path? create-comment? space? panning z? workspace-read-only?]
(mf/use-callback
(mf/deps id blocked hidden type selected edition drawing-tool text-editing?
node-editing? grid-editing? drawing-path? create-comment? @z? @space?
panning workspace-read-only?)
(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")
(dom/class? (dom/get-target bevent) "viewport-selrect"))
(dom/stop-propagation bevent)
@ -80,7 +93,7 @@
(not drawing-path?))
(cond
node-editing?
;; Handle path node area selection
;; Handle path node area selection
(when-not workspace-read-only?
(st/emit! (dwdp/handle-area-selection shift?)))
@ -241,12 +254,16 @@
(let [position (dom/get-client-position event)]
(st/emit! (dw/show-shape-context-menu {:position position :hover-ids @hover-ids})))))))
(defn on-mouse-up
(defn on-pointer-up
[disable-paste]
(mf/use-callback
(fn [event]
(dom/stop-propagation event)
(let [target (dom/get-target event)]
;; Release pointer on mouse up
(.releasePointerCapture target (.-pointerId event)))
(let [event (.-nativeEvent event)
ctrl? (kbd/ctrl? event)
shift? (kbd/shift? event)
@ -279,27 +296,6 @@
(fn []
(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 []
(mf/use-callback
(fn [event]
@ -333,7 +329,7 @@
(= "TEXTAREA" (obj/get target "tagName")))]
(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)]
(mf/use-callback
(fn [event]
@ -345,7 +341,7 @@
delta (if @last-position
(gpt/subtract raw-pt @last-position)
(gpt/point 0 0))]
(rx/push! move-stream pt)
(reset! last-position raw-pt)
(st/emit! (ms/->PointerEvent :delta delta
(kbd/ctrl? event)
@ -358,14 +354,6 @@
(kbd/alt? 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]
(mf/use-callback
(mf/deps zoom)

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

@ -83,7 +83,7 @@
(mf/defc gradient-color-handler
[{: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)
:transform (gmt/rotate-matrix angle point)}
@ -100,8 +100,8 @@
:height (/ gradient-square-width zoom)
:fill (:value color)
:on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]
:on-pointer-down (partial on-pointer-down :to-p)
:on-pointer-up (partial on-pointer-up :to-p)}]
[:rect {:data-allow-click-modal "colorpicker"
:x (- (:x point) (/ gradient-square-width 2 zoom))
@ -114,8 +114,8 @@
:fill (:value color)
:fill-opacity (:opacity color)
:on-click on-click
:on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up}]])
:on-pointer-down on-pointer-down
:on-pointer-up on-pointer-up}]])
(mf/defc gradient-handler-transformed
[{:keys [from-p to-p width-p from-color to-color zoom editing
@ -133,7 +133,7 @@
:from-p 0
:to-p 1)))))
on-mouse-down
on-pointer-down
(fn [position event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -144,7 +144,7 @@
:from-p 0
:to-p 1)))))
on-mouse-up
on-pointer-up
(fn [_position event]
(dom/stop-propagation event)
(dom/prevent-default event)
@ -203,8 +203,8 @@
:cy (:y width-p)
:r (/ gradient-width-handler-radius zoom)
:fill gradient-width-handler-color
:on-mouse-down (partial on-mouse-down :width-p)
:on-mouse-up (partial on-mouse-up :width-p)}]])
:on-pointer-down (partial on-pointer-down :width-p)
:on-pointer-up (partial on-pointer-up :width-p)}]])
[:& gradient-color-handler
{:selected (or (not editing) (= editing 0))
@ -214,8 +214,8 @@
:color from-color
:angle angle
:on-click (partial on-click :from-p)
:on-mouse-down (partial on-mouse-down :from-p)
:on-mouse-up (partial on-mouse-up :from-p)}]
:on-pointer-down (partial on-pointer-down :from-p)
:on-pointer-up (partial on-pointer-up :from-p)}]
[:& gradient-color-handler
{:selected (= editing 1)
@ -225,8 +225,8 @@
:color to-color
:angle angle
:on-click (partial on-click :to-p)
:on-mouse-down (partial on-mouse-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]]))
:on-pointer-down (partial on-pointer-down :to-p)
:on-pointer-up (partial on-pointer-up :to-p)}]]))
(mf/defc gradient-handlers*
[{: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! start-ref nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(fn [event]
(when (mf/ref-val dragging-ref)
@ -234,7 +234,7 @@
:width width
:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move
:on-pointer-move on-pointer-move
:style {:fill "transparent"
:cursor (if (= type :column)
(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)
(swap! state assoc :new-position nil)))
on-mouse-move
on-pointer-move
(mf/use-callback
(mf/deps position zoom snap-pixel?)
(fn [event]
@ -120,7 +120,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-mouse-move
:on-pointer-move on-pointer-move
:state state
:frame frame}))
@ -274,7 +274,7 @@
on-pointer-down
on-pointer-up
on-lost-pointer-capture
on-mouse-move
on-pointer-move
state
frame]} (use-guide handle-change-position get-hover-frame zoom guide)
@ -310,7 +310,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-mouse-move}]))
:on-pointer-move on-pointer-move}]))
(if (some? frame)
(let [{:keys [l1-x1 l1-y1 l1-x2 l1-y2
@ -399,7 +399,7 @@
on-pointer-down
on-pointer-up
on-lost-pointer-capture
on-mouse-move
on-pointer-move
state
frame]} (use-guide on-guide-change get-hover-frame zoom {:axis axis})]
@ -415,7 +415,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-mouse-move
:on-pointer-move on-pointer-move
:style {:fill "none"
:pointer-events "fill"
: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])
(: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)
on-key-up (actions/on-key-up)
on-mouse-move (actions/on-mouse-move)
on-mouse-wheel (actions/on-mouse-wheel zoom)
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/deps on-mouse-move)
(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?)
(mf/deps on-key-down on-key-up on-mouse-wheel on-paste workspace-read-only?)
(fn []
(let [keys [(events/listen js/document EventType.KEYDOWN on-key-down)
(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])
refs/workspace-local =))
(defn- on-mouse-down
(defn- on-pointer-down
[event index {:keys [id] :as shape}]
(dom/stop-propagation event)
(st/emit! (dw/select-shape id))
@ -163,7 +163,7 @@
arrow-dir (if (= dest-pos :left) :right :left)]
(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)"
:fill "none"
:pointer-events "visible"
@ -178,7 +178,7 @@
:arrow-dir arrow-dir
: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)"
:fill "none"
:pointer-events "visible"
@ -209,7 +209,7 @@
(let [shape-rect (:selrect shape)
handle-x (+ (:x shape-rect) (:width shape-rect))
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
:y handle-y
:stroke "var(--color-primary)"
@ -246,9 +246,9 @@
dest-shape (cond-> dest-shape
(some? thumbnail-data)
(assoc :thumbnail thumbnail-data))]
[:g {:on-mouse-down start-move-position
:on-mouse-enter #(reset! hover-disabled? true)
:on-mouse-leave #(reset! hover-disabled? false)}
[:g {:on-pointer-down start-move-position
:on-pointer-enter #(reset! hover-disabled? true)
:on-pointer-leave #(reset! hover-disabled? false)}
[:g {:transform (gmt/translate-matrix (gpt/point (- marker-x dest-x) (- marker-y dest-y))) }
[:& (mf/provider muc/render-thumbnails) {:value true}
[:& (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))
(modal/disallow-click-outside!))))
handle-mouse-move-picker
handle-pointer-move-picker
(mf/use-callback
(mf/deps viewport-node)
(fn [event]
@ -109,7 +109,7 @@
(.drawImage zoom-context image 0 0 200 160))))
(st/emit! (dwc/pick-color [r g b a]))))))
handle-mouse-down-picker
handle-pointer-down-picker
(mf/use-callback
(fn [event]
(dom/prevent-default event)
@ -117,7 +117,7 @@
(st/emit! (dwu/start-undo-transaction :mouse-down-picker)
(dwc/pick-color-select true (kbd/shift? event)))))
handle-mouse-up-picker
handle-pointer-up-picker
(mf/use-callback
(fn [event]
(dom/prevent-default event)
@ -185,9 +185,9 @@
[:div.pixel-overlay
{:tab-index 0
:style {:cursor cur/picker}
:on-mouse-down handle-mouse-down-picker
:on-mouse-up handle-mouse-up-picker
:on-mouse-move handle-mouse-move-picker}
:on-pointer-down handle-pointer-down-picker
:on-pointer-up handle-pointer-up-picker
:on-pointer-move handle-pointer-move-picker}
[:div {:style {:display "none"}}
[:img {:ref img-ref
:on-load handle-image-load

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

@ -123,7 +123,7 @@
(- scrollbar-width))
h-scrollbar-x)
on-mouse-move
on-pointer-move
(fn [event axis]
(when-let [_ (or @v-scrolling? @h-scrolling?)]
(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! start-ref current-pt))))
on-mouse-down
on-pointer-down
(fn [event axis]
(let [start-pt (dom/get-client-position event)
viewport-point (point->viewport start-pt)
@ -180,7 +180,7 @@
(reset! v-scrolling? (= axis :y))
(reset! h-scrolling? (= axis :x))))
on-mouse-up
on-pointer-up
(fn []
(reset! v-scrolling? false)
(reset! h-scrolling? false))]
@ -188,9 +188,9 @@
[:*
(when show-v-scroll?
[:g.v-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :y)
:on-mouse-down #(on-mouse-down % :y)
:on-mouse-up on-mouse-up
[:rect {:on-pointer-move #(on-pointer-move % :y)
:on-pointer-down #(on-pointer-down % :y)
:on-pointer-up on-pointer-up
:width (* inv-zoom 7)
:rx (* inv-zoom 3)
:ry (* inv-zoom 3)
@ -202,9 +202,9 @@
:stroke-width (/ 0.15 zoom)}}]])
(when show-h-scroll?
[:g.h-scroll {:fill clr/black}
[:rect {:on-mouse-move #(on-mouse-move % :x)
:on-mouse-down #(on-mouse-down % :x)
:on-mouse-up on-mouse-up
[:rect {:on-pointer-move #(on-pointer-move % :x)
:on-pointer-down #(on-pointer-down % :x)
:on-pointer-up on-pointer-up
:width scrollbar-width
:rx (* 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
:height height
:transform (str transform)
:on-mouse-down on-move-selected
:on-pointer-down on-move-selected
:on-context-menu on-context-menu
:style {:stroke color
:stroke-width (/ selection-rect-width zoom)
@ -172,7 +172,7 @@
:fill (if (debug? :handlers) "blue" "none")
:stroke-width 0
:transform (dm/str transform)
:on-mouse-down on-rotate}]))
:on-pointer-down on-rotate}]))
(mf/defc resize-point-handler
[{:keys [cx cy zoom position on-resize transform rotation color align]}]
@ -208,9 +208,9 @@
:style {:fill (if (debug? :handlers) "red" "none")
:stroke-width 0
: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)
:cx cx'
:cy cy'
@ -246,7 +246,7 @@
:width length
:height height
:transform transform-str
:on-mouse-down #(on-resize res-point %)
:on-pointer-down #(on-resize res-point %)
:style {:fill (if (debug? :handlers) "yellow" "none")
:stroke-width 0
: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)]}
[{: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?)
on-mouse-down
on-pointer-down
(mf/use-callback
(mf/deps (:id frame) on-frame-select workspace-read-only?)
(fn [bevent]
@ -155,7 +155,7 @@
:class "workspace-frame-label"
:style {:fill (when selected? "var(--color-primary-dark)")}
: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-context-menu on-context-menu
:on-pointer-enter on-pointer-enter
@ -204,7 +204,7 @@
(let [{:keys [x y]} frame
flow-pos (gpt/point x (- y (/ 35 zoom)))
on-mouse-down
on-pointer-down
(mf/use-callback
(mf/deps (:id frame) on-frame-select)
(fn [bevent]
@ -237,7 +237,7 @@
:height 24
:transform (vwu/text-transform flow-pos zoom)}
[: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-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave}