mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 00:01:51 -05:00
✨ Fix problems when migrating old texts
This commit is contained in:
alonso.torres
parent
d0e008665f
commit
3228582cbe
3 changed files with 83 additions and 54 deletions
|
|
@ -58,60 +58,63 @@
|
|||
(= grow-type :auto-width) (obj/set! "whiteSpace" "pre"))))
|
||||
|
||||
(defn generate-text-styles
|
||||
[data]
|
||||
(let [letter-spacing (:letter-spacing data 0)
|
||||
text-decoration (:text-decoration data)
|
||||
text-transform (:text-transform data)
|
||||
line-height (:line-height data 1.2)
|
||||
([data]
|
||||
(generate-text-styles data nil))
|
||||
|
||||
font-id (:font-id data (:font-id txt/default-text-attrs))
|
||||
font-variant-id (:font-variant-id data)
|
||||
([data {:keys [show-text?] :or {show-text? true}}]
|
||||
(let [letter-spacing (:letter-spacing data 0)
|
||||
text-decoration (:text-decoration data)
|
||||
text-transform (:text-transform data)
|
||||
line-height (:line-height data 1.2)
|
||||
|
||||
font-size (:font-size data)
|
||||
fill-color (:fill-color data)
|
||||
fill-opacity (:fill-opacity data)
|
||||
font-id (:font-id data (:font-id txt/default-text-attrs))
|
||||
font-variant-id (:font-variant-id data)
|
||||
|
||||
[r g b a] (uc/hex->rgba fill-color fill-opacity)
|
||||
text-color (when (and (some? fill-color) (some? fill-opacity))
|
||||
(str/format "rgba(%s, %s, %s, %s)" r g b a))
|
||||
font-size (:font-size data)
|
||||
fill-color (:fill-color data)
|
||||
fill-opacity (:fill-opacity data)
|
||||
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
[r g b a] (uc/hex->rgba fill-color fill-opacity)
|
||||
text-color (when (and (some? fill-color) (some? fill-opacity))
|
||||
(str/format "rgba(%s, %s, %s, %s)" r g b a))
|
||||
|
||||
base #js {:textDecoration text-decoration
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
:color "transparent"
|
||||
:caretColor (or text-color "black")
|
||||
:overflowWrap "initial"}
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
|
||||
base (-> base
|
||||
(obj/set! "--fill-color" fill-color)
|
||||
(obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data)))
|
||||
(obj/set! "--fill-opacity" fill-opacity))]
|
||||
base #js {:textDecoration text-decoration
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
:color (if show-text? text-color "transparent")
|
||||
:caretColor (or text-color "black")
|
||||
:overflowWrap "initial"}
|
||||
|
||||
(when (and (string? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
(obj/set! base "letterSpacing" (str letter-spacing "px")))
|
||||
base (-> base
|
||||
(obj/set! "--fill-color" fill-color)
|
||||
(obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data)))
|
||||
(obj/set! "--fill-opacity" fill-opacity))]
|
||||
|
||||
(when (and (string? font-size)
|
||||
(pos? (alength font-size)))
|
||||
(obj/set! base "fontSize" (str font-size "px")))
|
||||
(when (and (string? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
(obj/set! base "letterSpacing" (str letter-spacing "px")))
|
||||
|
||||
(when (and (string? font-id)
|
||||
(pos? (alength font-id)))
|
||||
(fonts/ensure-loaded! font-id)
|
||||
(let [font (get fontsdb font-id)
|
||||
font-family (str/quote
|
||||
(or (:family font)
|
||||
(:font-family data)))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(:font-style data))
|
||||
font-weight (or (:weight font-variant)
|
||||
(:font-weight data))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight)))
|
||||
(when (and (string? font-size)
|
||||
(pos? (alength font-size)))
|
||||
(obj/set! base "fontSize" (str font-size "px")))
|
||||
|
||||
base))
|
||||
(when (and (string? font-id)
|
||||
(pos? (alength font-id)))
|
||||
(fonts/ensure-loaded! font-id)
|
||||
(let [font (get fontsdb font-id)
|
||||
font-family (str/quote
|
||||
(or (:family font)
|
||||
(:font-family data)))
|
||||
font-variant (d/seek #(= font-variant-id (:id %))
|
||||
(:variants font))
|
||||
font-style (or (:style font-variant)
|
||||
(:font-style data))
|
||||
font-weight (or (:weight font-variant)
|
||||
(:font-weight data))]
|
||||
(obj/set! base "fontFamily" font-family)
|
||||
(obj/set! base "fontStyle" font-style)
|
||||
(obj/set! base "fontWeight" font-weight)))
|
||||
|
||||
base)))
|
||||
|
|
|
|||
|
|
@ -122,12 +122,14 @@
|
|||
(mf/defc text-wrapper
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [{:keys [id] :as shape} (unchecked-get props "shape")
|
||||
(let [{:keys [id position-data] :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)
|
||||
|
||||
local-position-data (mf/use-state nil)
|
||||
|
||||
sid-ref (mf/use-ref nil)
|
||||
|
||||
handle-change-foreign-object
|
||||
(fn [node]
|
||||
(when-let [position-data (utp/calc-position-data node)]
|
||||
|
|
@ -149,9 +151,9 @@
|
|||
(gsh/transform-rect mtx)))))]
|
||||
(reset! local-position-data position-data))))
|
||||
|
||||
[_ on-change-node] (use-mutable-observer handle-change-foreign-object)
|
||||
[node-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) (some? @local-position-data))
|
||||
|
||||
update-position-data
|
||||
(fn []
|
||||
|
|
@ -173,12 +175,36 @@
|
|||
(fn []
|
||||
(rx/dispose! sid)))))
|
||||
|
||||
(mf/use-layout-effect
|
||||
(mf/deps show-svg-text?)
|
||||
(fn []
|
||||
(let []
|
||||
(when-not show-svg-text?
|
||||
;; There is no position data we need to calculate it even if no change has happened
|
||||
;; this usualy happens the first time a text is rendered
|
||||
(let [update-data
|
||||
(fn update-data []
|
||||
(let [node (mf/ref-val node-ref)]
|
||||
(if (some? node)
|
||||
(let [position-data (utp/calc-position-data node)]
|
||||
(reset! local-position-data position-data))
|
||||
|
||||
;; No node present, we need to keep waiting
|
||||
(do (when-let [sid (mf/ref-val sid-ref)] (rx/dispose! sid))
|
||||
(when-not @local-position-data
|
||||
(mf/set-ref-val! sid-ref (timers/schedule 100 update-data)))))))]
|
||||
(mf/set-ref-val! sid-ref (timers/schedule 100 update-data))))
|
||||
|
||||
(fn []
|
||||
(when-let [sid (mf/ref-val sid-ref)]
|
||||
(rx/dispose! sid))))))
|
||||
|
||||
[:> shape-container {:shape shape}
|
||||
;; We keep hidden the shape when we're editing so it keeps track of the size
|
||||
;; and updates the selrect accordingly
|
||||
[:*
|
||||
[:g.text-shape {:ref on-change-node
|
||||
:opacity (when (or edition? show-svg-text?) 0)
|
||||
:opacity (when show-svg-text? 0)
|
||||
:pointer-events "none"}
|
||||
|
||||
;; The `:key` prop here is mandatory because the
|
||||
|
|
@ -186,7 +212,7 @@
|
|||
;; the component if the edition flag changes.
|
||||
[:& text-resize-content {:shape
|
||||
(cond-> shape
|
||||
(:position-data shape)
|
||||
show-svg-text?
|
||||
(dissoc :transform :transform-inverse))
|
||||
:edition? edition?
|
||||
:key (str id edition?)}]]
|
||||
|
|
|
|||
|
|
@ -62,9 +62,9 @@
|
|||
(-> (.getData content)
|
||||
(.toJS)
|
||||
(js->clj :keywordize-keys true)
|
||||
(sts/generate-text-styles))
|
||||
(sts/generate-text-styles {:show-text? false}))
|
||||
(-> (txt/styles-to-attrs styles)
|
||||
(sts/generate-text-styles))))
|
||||
(sts/generate-text-styles {:show-text? false}))))
|
||||
|
||||
(def default-decorator
|
||||
(ted/create-decorator "PENPOT_SELECTION" selection-component))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue