Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 03:31:24 -05:00
Code Issues Activity

🐛 Handle properly pointer capture on text edition shape.

Browse source
This commit is contained in:
Andrey Antukh 2021-03-15 15:56:38 +01:00
parent 48747d9553
commit 92254a175e
2 changed files with 22 additions and 11 deletions
frontend/src/app/main/ui/workspace
shapes/text
editor.cljs
viewport.cljs

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

@ -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

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

@ -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