mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 15:51:37 -05:00
🐛 Handle properly pointer capture on text edition shape.
This commit is contained in:
parent
48747d9553
commit
92254a175e
2 changed files with 22 additions and 11 deletions
|
@ -142,16 +142,30 @@
|
|||
(fn [event state]
|
||||
(st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
|
||||
"handled"))
|
||||
|
||||
on-pointer-down
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)
|
||||
closest (.closest ^js target "foreignObject")]
|
||||
;; 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
|
||||
(when closest
|
||||
(dom/stop-propagation event)
|
||||
(.setPointerCapture closest (.-pointerId event))))))
|
||||
]
|
||||
|
||||
(mf/use-layout-effect on-mount)
|
||||
|
||||
[:div.text-editor {:ref self-ref
|
||||
:style {:cursor cur/text}
|
||||
:class (dom/classnames
|
||||
:align-top (= (:vertical-align content "top") "top")
|
||||
:align-center (= (:vertical-align content) "center")
|
||||
:align-bottom (= (:vertical-align content) "bottom"))}
|
||||
[:div.text-editor
|
||||
{:ref self-ref
|
||||
:style {:cursor cur/text}
|
||||
:on-pointer-down on-pointer-down
|
||||
:class (dom/classnames
|
||||
:align-top (= (:vertical-align content "top") "top")
|
||||
:align-center (= (:vertical-align content) "center")
|
||||
:align-bottom (= (:vertical-align content) "bottom"))}
|
||||
[:> draft/Editor
|
||||
{:on-change on-change
|
||||
:on-blur on-blur
|
||||
|
|
|
@ -434,14 +434,11 @@
|
|||
on-pointer-down
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)
|
||||
closest (.closest target "foreignObject")]
|
||||
(let [target (dom/get-target event)]
|
||||
;; 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 closest
|
||||
(.setPointerCapture closest (.-pointerId event))
|
||||
(.setPointerCapture target (.-pointerId event))))))
|
||||
(.setPointerCapture target (.-pointerId event)))))
|
||||
|
||||
on-pointer-up
|
||||
(mf/use-callback
|
||||
|
|
Loading…
Add table
Reference in a new issue