mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 09:11:21 -05:00
✨ Changed update text flow
This commit is contained in:
parent
e183d67e2a
commit
96eacb6efe
7 changed files with 61 additions and 61 deletions
|
@ -43,9 +43,9 @@
|
|||
[position-data dx dy]
|
||||
|
||||
(->> position-data
|
||||
(map #(-> %
|
||||
(update :x + dx)
|
||||
(update :y + dy)))))
|
||||
(mapv #(-> %
|
||||
(update :x + dx)
|
||||
(update :y + dy)))))
|
||||
|
||||
(defn move
|
||||
"Move the shape relatively to its current
|
||||
|
@ -542,8 +542,7 @@
|
|||
|
||||
:else
|
||||
(let [shape (apply-displacement shape)
|
||||
modifiers (:modifiers shape)
|
||||
shape (cond-> shape (= :text (:type shape)) (assoc :dirty? true))]
|
||||
modifiers (:modifiers shape)]
|
||||
(cond-> shape
|
||||
(not (empty-modifiers? modifiers))
|
||||
(-> (set-flip modifiers)
|
||||
|
|
|
@ -3,7 +3,6 @@
|
|||
.rich-text {
|
||||
color: $color-black;
|
||||
height: 100%;
|
||||
white-space: pre-wrap;
|
||||
font-family: sourcesanspro;
|
||||
|
||||
div {
|
||||
|
|
|
@ -65,7 +65,7 @@
|
|||
(when (and (not= content (:content shape))
|
||||
(some? (:current-page-id state)))
|
||||
(rx/of
|
||||
(dch/update-shapes [id] #(assoc % :content content :dirty? true))
|
||||
(dch/update-shapes [id] #(assoc % :content content))
|
||||
(dwu/commit-undo-transaction)))))
|
||||
|
||||
(when (some? id)
|
||||
|
@ -150,8 +150,7 @@
|
|||
(let [merge-attrs #(merge-fn % attrs)
|
||||
transform #(txt/transform-nodes pred-fn merge-attrs %)]
|
||||
(-> shape
|
||||
(update :content transform)
|
||||
(assoc :dirty? true))))
|
||||
(update :content transform))))
|
||||
|
||||
(defn update-root-attrs
|
||||
[{:keys [id attrs]}]
|
||||
|
|
|
@ -185,7 +185,7 @@
|
|||
:transform
|
||||
:transform-inverse
|
||||
:rotation
|
||||
:dirty?
|
||||
:position-data
|
||||
:flip-x
|
||||
:flip-y]})
|
||||
(clear-local-transform)
|
||||
|
|
|
@ -81,7 +81,8 @@
|
|||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
:color "transparent"
|
||||
:caretColor (or text-color "black")}
|
||||
:caretColor (or text-color "black")
|
||||
:overflowWrap "initial"}
|
||||
|
||||
base (-> base
|
||||
(obj/set! "--fill-color" fill-color)
|
||||
|
|
|
@ -123,7 +123,7 @@
|
|||
(mf/defc text-wrapper
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [{:keys [id dirty?] :as shape} (unchecked-get props "shape")
|
||||
(let [{:keys [id content points] :as shape} (unchecked-get props "shape")
|
||||
edition-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
|
||||
edition? (mf/deref edition-ref)
|
||||
|
||||
|
@ -131,9 +131,8 @@
|
|||
|
||||
handle-change-foreign-object
|
||||
(fn [node]
|
||||
(when (some? node)
|
||||
(let [position-data (utp/calc-position-data node)
|
||||
parent (dom/get-parent node)
|
||||
(when-let [position-data (utp/calc-position-data node)]
|
||||
(let [parent (dom/get-parent node)
|
||||
parent-transform (dom/get-attribute parent "transform")
|
||||
node-transform (dom/get-attribute node "transform")
|
||||
|
||||
|
@ -153,24 +152,27 @@
|
|||
|
||||
[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
|
||||
|
||||
show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))]
|
||||
show-svg-text? (or (some? (:position-data shape)) (some? @local-position-data))
|
||||
|
||||
update-position-data
|
||||
(fn []
|
||||
(when (some? @local-position-data)
|
||||
(reset! local-position-data nil)
|
||||
(st/emit! (dch/update-shapes
|
||||
[id]
|
||||
(fn [shape]
|
||||
(-> shape
|
||||
(assoc :position-data @local-position-data)))
|
||||
{:save-undo? false}))))]
|
||||
|
||||
;; When the text is "dirty?" we get recalculate the positions
|
||||
(mf/use-layout-effect
|
||||
(mf/deps id dirty?)
|
||||
(mf/deps @local-position-data)
|
||||
(fn []
|
||||
(let [node (mf/ref-val shape-ref)]
|
||||
(when (and dirty? (some? node))
|
||||
(let [position-data (utp/calc-position-data node)]
|
||||
(when (d/not-empty? position-data)
|
||||
(reset! local-position-data nil)
|
||||
(st/emit! (dch/update-shapes
|
||||
[id]
|
||||
(fn [shape]
|
||||
(-> shape
|
||||
(dissoc :dirty?)
|
||||
(assoc :position-data position-data)))
|
||||
{:save-undo? false}))))))))
|
||||
;; Timer to update the shape. We do this so a lot of changes won't produce
|
||||
;; a lot of updates (kind of a debounce)
|
||||
(let [sid (timers/schedule 250 update-position-data)]
|
||||
(fn []
|
||||
(rx/dispose! sid)))))
|
||||
|
||||
[:> shape-container {:shape shape}
|
||||
;; We keep hidden the shape when we're editing so it keeps track of the size
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
(defn calc-text-node-positions
|
||||
[base-node viewport zoom]
|
||||
|
||||
(when (some? viewport)
|
||||
(when (and (some? base-node)(some? viewport))
|
||||
(let [translate-point
|
||||
(fn [pt]
|
||||
(let [vbox (.. ^js viewport -viewBox -baseVal)
|
||||
|
@ -89,37 +89,37 @@
|
|||
(let [rtl? (= "rtl" (.-dir (.-parentElement parent-node)))]
|
||||
(->> (.-childNodes parent-node)
|
||||
(mapcat #(parse-text-nodes parent-node rtl? %))))))
|
||||
(map #(update % :position translate-rect))))))
|
||||
|
||||
|
||||
(mapv #(update % :position translate-rect))))))
|
||||
|
||||
(defn calc-position-data
|
||||
[base-node]
|
||||
(let [viewport (dom/get-element "render")
|
||||
zoom (get-in @st/state [:workspace-local :zoom])
|
||||
text-data (calc-text-node-positions base-node viewport zoom)]
|
||||
(->> text-data
|
||||
(mapv (fn [{:keys [node position text]}]
|
||||
(let [{:keys [x y width height]} position
|
||||
rtl? (= "rtl" (.-dir (.-parentElement ^js node)))
|
||||
styles (js/getComputedStyle ^js node)
|
||||
get (fn [prop]
|
||||
(let [value (.getPropertyValue styles prop)]
|
||||
(when (and value (not= value ""))
|
||||
value)))]
|
||||
(d/without-nils
|
||||
{:rtl? rtl?
|
||||
:x (if rtl? (+ x width) x)
|
||||
:y (+ y height)
|
||||
:width width
|
||||
:height height
|
||||
:font-family (str (get "font-family"))
|
||||
:font-size (str (get "font-size"))
|
||||
:font-weight (str (get "font-weight"))
|
||||
:text-transform (str (get "text-transform"))
|
||||
:text-decoration (str (get "text-decoration"))
|
||||
:font-style (str (get "font-style"))
|
||||
:fill-color (or (get "--fill-color") "#000000")
|
||||
:fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
|
||||
:fill-opacity (d/parse-double (or (get "--fill-opacity") "1"))
|
||||
:text text})))))))
|
||||
zoom (or (get-in @st/state [:workspace-local :zoom]) 1)]
|
||||
(when (and (some? base-node) (some? viewport))
|
||||
(let [text-data (calc-text-node-positions base-node viewport zoom)]
|
||||
(when (d/not-empty? text-data)
|
||||
(->> text-data
|
||||
(mapv (fn [{:keys [node position text]}]
|
||||
(let [{:keys [x y width height]} position
|
||||
rtl? (= "rtl" (.-dir (.-parentElement ^js node)))
|
||||
styles (js/getComputedStyle ^js node)
|
||||
get (fn [prop]
|
||||
(let [value (.getPropertyValue styles prop)]
|
||||
(when (and value (not= value ""))
|
||||
value)))]
|
||||
(d/without-nils
|
||||
{:rtl? rtl?
|
||||
:x (if rtl? (+ x width) x)
|
||||
:y (+ y height)
|
||||
:width width
|
||||
:height height
|
||||
:font-family (str (get "font-family"))
|
||||
:font-size (str (get "font-size"))
|
||||
:font-weight (str (get "font-weight"))
|
||||
:text-transform (str (get "text-transform"))
|
||||
:text-decoration (str (get "text-decoration"))
|
||||
:font-style (str (get "font-style"))
|
||||
:fill-color (or (get "--fill-color") "#000000")
|
||||
:fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
|
||||
:fill-opacity (d/parse-double (or (get "--fill-opacity") "1"))
|
||||
:text text}))))))))))
|
||||
|
|
Loading…
Add table
Reference in a new issue