Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 09:11:21 -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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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