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

✨ Changed update text flow

Browse source
This commit is contained in:
alonso.torres 2022-02-18 11:15:21 +01:00
parent e183d67e2a
commit 96eacb6efe
7 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
common/src/app/common/geom/shapes/transforms.cljc
View file

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

1
frontend/resources/styles/main/partials/texts.scss
View file

@ -3,7 +3,6 @@
.rich-text {
color: $color-black;
height: 100%;
white-space: pre-wrap;
font-family: sourcesanspro;
div {

5
frontend/src/app/main/data/workspace/texts.cljs
View file

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

2
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -185,7 +185,7 @@
:transform
:transform-inverse
:rotation
:dirty?
:position-data
:flip-x
:flip-y]})
(clear-local-transform)

3
frontend/src/app/main/ui/shapes/text/styles.cljs
View file

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

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

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

62
frontend/src/app/util/text_svg_position.cljs
View file

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