mirror of
https://github.com/penpot/penpot.git
synced 2025-04-16 08:51:32 -05:00
🐛 Fix text shape edition on-blur interaction.
This commit is contained in:
parent
1d0eb1d26f
commit
a84080ddfa
2 changed files with 53 additions and 12 deletions
|
@ -1628,9 +1628,11 @@
|
|||
|
||||
;; --- Start shape "edition mode"
|
||||
|
||||
(declare clear-edition-mode)
|
||||
|
||||
(defn start-edition-mode
|
||||
[id]
|
||||
{:pre [(uuid? id)]}
|
||||
(us/assert ::us/uuid id)
|
||||
(ptk/reify ::start-edition-mode
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
|
@ -1641,7 +1643,13 @@
|
|||
(->> stream
|
||||
(rx/filter #(= % :interrupt))
|
||||
(rx/take 1)
|
||||
(rx/map (fn [_] #(d/dissoc-in % [:workspace-local :edition])))))))
|
||||
(rx/map (constantly clear-edition-mode))))))
|
||||
|
||||
(def clear-edition-mode
|
||||
(ptk/reify ::clear-edition-mode
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :workspace-local dissoc :edition))))
|
||||
|
||||
;; --- Select for Drawing
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[goog.events :as events]
|
||||
[goog.object :as gobj]
|
||||
[lentes.core :as l]
|
||||
[rumext.core :as mx]
|
||||
[rumext.alpha :as mf]
|
||||
|
@ -111,14 +112,35 @@
|
|||
(mf/defc text-shape-edit
|
||||
[{:keys [shape] :as props}]
|
||||
(let [ref (mf/use-ref)
|
||||
{:keys [id x y width height content]} shape]
|
||||
{:keys [id x y width height content]} shape
|
||||
|
||||
on-unmount
|
||||
(fn []
|
||||
(let [content (-> (mf/ref-val ref)
|
||||
(dom/get-value))]
|
||||
(st/emit! (udw/update-shape id {:content content}))))
|
||||
|
||||
|
||||
on-blur
|
||||
(fn [event]
|
||||
(st/emit! udw/clear-edition-mode
|
||||
udw/deselect-all))]
|
||||
(mf/use-effect
|
||||
#(fn []
|
||||
(let [content (-> (mf/ref-val ref)
|
||||
(dom/get-value))]
|
||||
(st/emit! (udw/update-shape id {:content content})))))
|
||||
#(let [dom (mf/ref-val ref)
|
||||
val (dom/get-value dom)]
|
||||
(.focus dom)
|
||||
(gobj/set dom "selectionStart" (count val))
|
||||
(gobj/set dom "selectionEnd" (count val))
|
||||
(fn []
|
||||
(let [content (-> (mf/ref-val ref)
|
||||
(dom/get-value))]
|
||||
(st/emit! (udw/update-shape id {:content content}))))))
|
||||
|
||||
|
||||
|
||||
[:foreignObject {:x x :y y :width width :height height}
|
||||
[:textarea {:style (make-style shape)
|
||||
:on-blur on-blur
|
||||
:default-value content
|
||||
:ref ref}]]))
|
||||
|
||||
|
@ -126,14 +148,25 @@
|
|||
|
||||
(mf/defc text-shape
|
||||
[{:keys [shape] :as props}]
|
||||
(let [{:keys [id rotation modifier-mtx]} shape
|
||||
shape (cond
|
||||
(gmt/matrix? modifier-mtx) (geom/transform shape modifier-mtx)
|
||||
:else shape)
|
||||
(let [ds-modifier (:displacement-modifier shape)
|
||||
rz-modifier (:resize-modifier shape)
|
||||
|
||||
shape (cond-> shape
|
||||
(gmt/matrix? rz-modifier) (geom/transform rz-modifier)
|
||||
(gmt/matrix? ds-modifier) (geom/transform ds-modifier))
|
||||
|
||||
|
||||
{:keys [id x y width height rotation content]} shape
|
||||
|
||||
transform (when (and rotation (pos? rotation))
|
||||
(str/format "rotate(%s %s %s)"
|
||||
rotation
|
||||
(+ x (/ width 2))
|
||||
(+ y (/ height 2))))]
|
||||
|
||||
{:keys [x y width height content]} shape]
|
||||
[:foreignObject {:x x
|
||||
:y y
|
||||
:transform transform
|
||||
:id (str id)
|
||||
:width width
|
||||
:height height}
|
||||
|
|
Loading…
Add table
Reference in a new issue