mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 09:11:21 -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,12 +142,26 @@
|
||||||
(fn [event state]
|
(fn [event state]
|
||||||
(st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
|
(st/emit! (dwt/update-editor-state shape (ted/editor-split-block state)))
|
||||||
"handled"))
|
"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)
|
(mf/use-layout-effect on-mount)
|
||||||
|
|
||||||
[:div.text-editor {:ref self-ref
|
[:div.text-editor
|
||||||
|
{:ref self-ref
|
||||||
:style {:cursor cur/text}
|
:style {:cursor cur/text}
|
||||||
|
: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")
|
||||||
|
|
|
@ -434,14 +434,11 @@
|
||||||
on-pointer-down
|
on-pointer-down
|
||||||
(mf/use-callback
|
(mf/use-callback
|
||||||
(fn [event]
|
(fn [event]
|
||||||
(let [target (dom/get-target event)
|
(let [target (dom/get-target event)]
|
||||||
closest (.closest target "foreignObject")]
|
|
||||||
;; Capture mouse pointer to detect the movements even if cursor
|
;; Capture mouse pointer to detect the movements even if cursor
|
||||||
;; leaves the viewport or the browser itself
|
;; leaves the viewport or the browser itself
|
||||||
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
|
;; https://developer.mozilla.org/en-US/docs/Web/API/Element/setPointerCapture
|
||||||
(if closest
|
(.setPointerCapture target (.-pointerId event)))))
|
||||||
(.setPointerCapture closest (.-pointerId event))
|
|
||||||
(.setPointerCapture target (.-pointerId event))))))
|
|
||||||
|
|
||||||
on-pointer-up
|
on-pointer-up
|
||||||
(mf/use-callback
|
(mf/use-callback
|
||||||
|
|
Loading…
Add table
Reference in a new issue