mirror of
https://github.com/penpot/penpot.git
synced 2025-03-16 01:31:22 -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,7 +43,7 @@
|
||||||
[position-data dx dy]
|
[position-data dx dy]
|
||||||
|
|
||||||
(->> position-data
|
(->> position-data
|
||||||
(map #(-> %
|
(mapv #(-> %
|
||||||
(update :x + dx)
|
(update :x + dx)
|
||||||
(update :y + dy)))))
|
(update :y + dy)))))
|
||||||
|
|
||||||
|
@ -542,8 +542,7 @@
|
||||||
|
|
||||||
:else
|
:else
|
||||||
(let [shape (apply-displacement shape)
|
(let [shape (apply-displacement shape)
|
||||||
modifiers (:modifiers shape)
|
modifiers (:modifiers shape)]
|
||||||
shape (cond-> shape (= :text (:type shape)) (assoc :dirty? true))]
|
|
||||||
(cond-> shape
|
(cond-> shape
|
||||||
(not (empty-modifiers? modifiers))
|
(not (empty-modifiers? modifiers))
|
||||||
(-> (set-flip modifiers)
|
(-> (set-flip modifiers)
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
.rich-text {
|
.rich-text {
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
white-space: pre-wrap;
|
|
||||||
font-family: sourcesanspro;
|
font-family: sourcesanspro;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
|
|
|
@ -65,7 +65,7 @@
|
||||||
(when (and (not= content (:content shape))
|
(when (and (not= content (:content shape))
|
||||||
(some? (:current-page-id state)))
|
(some? (:current-page-id state)))
|
||||||
(rx/of
|
(rx/of
|
||||||
(dch/update-shapes [id] #(assoc % :content content :dirty? true))
|
(dch/update-shapes [id] #(assoc % :content content))
|
||||||
(dwu/commit-undo-transaction)))))
|
(dwu/commit-undo-transaction)))))
|
||||||
|
|
||||||
(when (some? id)
|
(when (some? id)
|
||||||
|
@ -150,8 +150,7 @@
|
||||||
(let [merge-attrs #(merge-fn % attrs)
|
(let [merge-attrs #(merge-fn % attrs)
|
||||||
transform #(txt/transform-nodes pred-fn merge-attrs %)]
|
transform #(txt/transform-nodes pred-fn merge-attrs %)]
|
||||||
(-> shape
|
(-> shape
|
||||||
(update :content transform)
|
(update :content transform))))
|
||||||
(assoc :dirty? true))))
|
|
||||||
|
|
||||||
(defn update-root-attrs
|
(defn update-root-attrs
|
||||||
[{:keys [id attrs]}]
|
[{:keys [id attrs]}]
|
||||||
|
|
|
@ -185,7 +185,7 @@
|
||||||
:transform
|
:transform
|
||||||
:transform-inverse
|
:transform-inverse
|
||||||
:rotation
|
:rotation
|
||||||
:dirty?
|
:position-data
|
||||||
:flip-x
|
:flip-x
|
||||||
:flip-y]})
|
:flip-y]})
|
||||||
(clear-local-transform)
|
(clear-local-transform)
|
||||||
|
|
|
@ -81,7 +81,8 @@
|
||||||
:textTransform text-transform
|
:textTransform text-transform
|
||||||
:lineHeight (or line-height "inherit")
|
:lineHeight (or line-height "inherit")
|
||||||
:color "transparent"
|
:color "transparent"
|
||||||
:caretColor (or text-color "black")}
|
:caretColor (or text-color "black")
|
||||||
|
:overflowWrap "initial"}
|
||||||
|
|
||||||
base (-> base
|
base (-> base
|
||||||
(obj/set! "--fill-color" fill-color)
|
(obj/set! "--fill-color" fill-color)
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
(mf/defc text-wrapper
|
(mf/defc text-wrapper
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[props]
|
[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-ref (mf/use-memo (mf/deps id) #(l/derived (fn [o] (= id (:edition o))) refs/workspace-local))
|
||||||
edition? (mf/deref edition-ref)
|
edition? (mf/deref edition-ref)
|
||||||
|
|
||||||
|
@ -131,9 +131,8 @@
|
||||||
|
|
||||||
handle-change-foreign-object
|
handle-change-foreign-object
|
||||||
(fn [node]
|
(fn [node]
|
||||||
(when (some? node)
|
(when-let [position-data (utp/calc-position-data node)]
|
||||||
(let [position-data (utp/calc-position-data node)
|
(let [parent (dom/get-parent node)
|
||||||
parent (dom/get-parent node)
|
|
||||||
parent-transform (dom/get-attribute parent "transform")
|
parent-transform (dom/get-attribute parent "transform")
|
||||||
node-transform (dom/get-attribute node "transform")
|
node-transform (dom/get-attribute node "transform")
|
||||||
|
|
||||||
|
@ -153,24 +152,27 @@
|
||||||
|
|
||||||
[shape-ref on-change-node] (use-mutable-observer handle-change-foreign-object)
|
[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))
|
||||||
|
|
||||||
;; When the text is "dirty?" we get recalculate the positions
|
update-position-data
|
||||||
(mf/use-layout-effect
|
|
||||||
(mf/deps id dirty?)
|
|
||||||
(fn []
|
(fn []
|
||||||
(let [node (mf/ref-val shape-ref)]
|
(when (some? @local-position-data)
|
||||||
(when (and dirty? (some? node))
|
|
||||||
(let [position-data (utp/calc-position-data node)]
|
|
||||||
(when (d/not-empty? position-data)
|
|
||||||
(reset! local-position-data nil)
|
(reset! local-position-data nil)
|
||||||
(st/emit! (dch/update-shapes
|
(st/emit! (dch/update-shapes
|
||||||
[id]
|
[id]
|
||||||
(fn [shape]
|
(fn [shape]
|
||||||
(-> shape
|
(-> shape
|
||||||
(dissoc :dirty?)
|
(assoc :position-data @local-position-data)))
|
||||||
(assoc :position-data position-data)))
|
{:save-undo? false}))))]
|
||||||
{:save-undo? false}))))))))
|
|
||||||
|
(mf/use-layout-effect
|
||||||
|
(mf/deps @local-position-data)
|
||||||
|
(fn []
|
||||||
|
;; 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}
|
[:> shape-container {:shape shape}
|
||||||
;; We keep hidden the shape when we're editing so it keeps track of the size
|
;; 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
|
(defn calc-text-node-positions
|
||||||
[base-node viewport zoom]
|
[base-node viewport zoom]
|
||||||
|
|
||||||
(when (some? viewport)
|
(when (and (some? base-node)(some? viewport))
|
||||||
(let [translate-point
|
(let [translate-point
|
||||||
(fn [pt]
|
(fn [pt]
|
||||||
(let [vbox (.. ^js viewport -viewBox -baseVal)
|
(let [vbox (.. ^js viewport -viewBox -baseVal)
|
||||||
|
@ -89,15 +89,15 @@
|
||||||
(let [rtl? (= "rtl" (.-dir (.-parentElement parent-node)))]
|
(let [rtl? (= "rtl" (.-dir (.-parentElement parent-node)))]
|
||||||
(->> (.-childNodes parent-node)
|
(->> (.-childNodes parent-node)
|
||||||
(mapcat #(parse-text-nodes parent-node rtl? %))))))
|
(mapcat #(parse-text-nodes parent-node rtl? %))))))
|
||||||
(map #(update % :position translate-rect))))))
|
(mapv #(update % :position translate-rect))))))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
(defn calc-position-data
|
(defn calc-position-data
|
||||||
[base-node]
|
[base-node]
|
||||||
(let [viewport (dom/get-element "render")
|
(let [viewport (dom/get-element "render")
|
||||||
zoom (get-in @st/state [:workspace-local :zoom])
|
zoom (or (get-in @st/state [:workspace-local :zoom]) 1)]
|
||||||
text-data (calc-text-node-positions base-node viewport zoom)]
|
(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
|
(->> text-data
|
||||||
(mapv (fn [{:keys [node position text]}]
|
(mapv (fn [{:keys [node position text]}]
|
||||||
(let [{:keys [x y width height]} position
|
(let [{:keys [x y width height]} position
|
||||||
|
@ -122,4 +122,4 @@
|
||||||
:fill-color (or (get "--fill-color") "#000000")
|
:fill-color (or (get "--fill-color") "#000000")
|
||||||
:fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
|
:fill-color-gradient (transit/decode-str (get "--fill-color-gradient"))
|
||||||
:fill-opacity (d/parse-double (or (get "--fill-opacity") "1"))
|
:fill-opacity (d/parse-double (or (get "--fill-opacity") "1"))
|
||||||
:text text})))))))
|
:text text}))))))))))
|
||||||
|
|
Loading…
Add table
Reference in a new issue