Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-14 16:51:18 -05:00
Code Issues Activity

✨ Fix problems when migrating old texts

Browse source
This commit is contained in:
alonso.torres 2022-02-21 11:15:29 +01:00
parent d0e008665f
commit 3228582cbe
3 changed files with 83 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -58,60 +58,63 @@
(= grow-type :auto-width) (obj/set! "whiteSpace" "pre")))) (= grow-type :auto-width) (obj/set! "whiteSpace" "pre"))))
(defn generate-text-styles (defn generate-text-styles
[data] ([data]
(let [letter-spacing (:letter-spacing data 0) (generate-text-styles data nil))
text-decoration (:text-decoration data)
text-transform (:text-transform data)
line-height (:line-height data 1.2)
font-id (:font-id data (:font-id txt/default-text-attrs)) ([data {:keys [show-text?] :or {show-text? true}}]
font-variant-id (:font-variant-id 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)
font-size (:font-size data) font-id (:font-id data (:font-id txt/default-text-attrs))
fill-color (:fill-color data) font-variant-id (:font-variant-id data)
fill-opacity (:fill-opacity data)
[r g b a] (uc/hex->rgba fill-color fill-opacity) font-size (:font-size data)
text-color (when (and (some? fill-color) (some? fill-opacity)) fill-color (:fill-color data)
(str/format "rgba(%s, %s, %s, %s)" r g b a)) 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 fontsdb (deref fonts/fontsdb)
:textTransform text-transform
:lineHeight (or line-height "inherit")
:color "transparent"
:caretColor (or text-color "black")
:overflowWrap "initial"}
base (-> base base #js {:textDecoration text-decoration
(obj/set! "--fill-color" fill-color) :textTransform text-transform
(obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data))) :lineHeight (or line-height "inherit")
(obj/set! "--fill-opacity" fill-opacity))] :color (if show-text? text-color "transparent")
:caretColor (or text-color "black")
:overflowWrap "initial"}
(when (and (string? letter-spacing) base (-> base
(pos? (alength letter-spacing))) (obj/set! "--fill-color" fill-color)
(obj/set! base "letterSpacing" (str letter-spacing "px"))) (obj/set! "--fill-color-gradient" (transit/encode-str (:fill-color-gradient data)))
(obj/set! "--fill-opacity" fill-opacity))]
(when (and (string? font-size) (when (and (string? letter-spacing)
(pos? (alength font-size))) (pos? (alength letter-spacing)))
(obj/set! base "fontSize" (str font-size "px"))) (obj/set! base "letterSpacing" (str letter-spacing "px")))
(when (and (string? font-id) (when (and (string? font-size)
(pos? (alength font-id))) (pos? (alength font-size)))
(fonts/ensure-loaded! font-id) (obj/set! base "fontSize" (str font-size "px")))
(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)) (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)))

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

@ -122,12 +122,14 @@
(mf/defc text-wrapper (mf/defc text-wrapper
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [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-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)
local-position-data (mf/use-state nil) local-position-data (mf/use-state nil)
sid-ref (mf/use-ref nil)
handle-change-foreign-object handle-change-foreign-object
(fn [node] (fn [node]
(when-let [position-data (utp/calc-position-data node)] (when-let [position-data (utp/calc-position-data node)]
@ -149,9 +151,9 @@
(gsh/transform-rect mtx)))))] (gsh/transform-rect mtx)))))]
(reset! local-position-data position-data)))) (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 update-position-data
(fn [] (fn []
@ -173,12 +175,36 @@
(fn [] (fn []
(rx/dispose! sid))))) (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} [:> 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
;; and updates the selrect accordingly ;; and updates the selrect accordingly
[:* [:*
[:g.text-shape {:ref on-change-node [:g.text-shape {:ref on-change-node
:opacity (when (or edition? show-svg-text?) 0) :opacity (when show-svg-text? 0)
:pointer-events "none"} :pointer-events "none"}
;; The `:key` prop here is mandatory because the ;; The `:key` prop here is mandatory because the
@ -186,7 +212,7 @@
;; the component if the edition flag changes. ;; the component if the edition flag changes.
[:& text-resize-content {:shape [:& text-resize-content {:shape
(cond-> shape (cond-> shape
(:position-data shape) show-svg-text?
(dissoc :transform :transform-inverse)) (dissoc :transform :transform-inverse))
:edition? edition? :edition? edition?
:key (str id edition?)}]] :key (str id edition?)}]]

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

@ -62,9 +62,9 @@
(-> (.getData content) (-> (.getData content)
(.toJS) (.toJS)
(js->clj :keywordize-keys true) (js->clj :keywordize-keys true)
(sts/generate-text-styles)) (sts/generate-text-styles {:show-text? false}))
(-> (txt/styles-to-attrs styles) (-> (txt/styles-to-attrs styles)
(sts/generate-text-styles)))) (sts/generate-text-styles {:show-text? false}))))
(def default-decorator (def default-decorator
(ted/create-decorator "PENPOT_SELECTION" selection-component)) (ted/create-decorator "PENPOT_SELECTION" selection-component))