3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 18:21:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Fix editor and bounds for new texts

Browse source
This commit is contained in:
alonso.torres 2022-02-15 18:22:13 +01:00
parent 1c2785f34e
commit 18dded1a00
5 changed files with 165 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -84,16 +84,18 @@
base #js {:textDecoration text-decoration
:textTransform text-transform
:lineHeight (or line-height "inherit")
:color text-color}]
:color text-color
:caretColor "black"}]
(when-let [gradient (:fill-color-gradient data)]
(let [text-color (-> (update gradient :type keyword)
(uc/gradient->css))]
(-> base
(obj/set! "--text-color" text-color)
(obj/set! "backgroundImage" "var(--text-color)")
(obj/set! "WebkitTextFillColor" "transparent")
(obj/set! "WebkitBackgroundClip" "text"))))
(obj/set! "color" text-color)
#_(obj/set! "--text-color" text-color)
#_(obj/set! "backgroundImage" "var(--text-color)")
#_(obj/set! "WebkitTextFillColor" "transparent")
#_(obj/set! "WebkitBackgroundClip" "text"))))
(when (and (string? letter-spacing)
(pos? (alength letter-spacing)))

16
frontend/src/app/main/ui/shapes/text/svg_text.cljs
View file

@ -23,9 +23,11 @@
[props]
(let [render-id (mf/use-ctx muc/render-ctx)
{:keys [position-data] :as shape} (obj/get props "shape")
group-props (-> #js {:transform (gsh/transform-matrix shape)}
(attrs/add-style-attrs shape render-id))
{:keys [id x y width height position-data] :as shape} (obj/get props "shape")
clip-id (str "clip-text" id "_" render-id)
group-props (-> #js {:transform (gsh/transform-matrix shape)
:clipPath (str "url(#" clip-id ")")}
(attrs/add-style-attrs shape render-id))
get-gradient-id
(fn [index]
(str render-id "_" (:id shape) "_" index))]
@ -41,10 +43,16 @@
[:& shape-custom-stroke {:shape shape}
[:> :g group-props
[:defs
[:clipPath {:id clip-id}
[:rect.text-clip
{:x x :y y
:width width :height height
:transform (gsh/transform-matrix shape)}]]]
(for [[index data] (d/enumerate position-data)]
(let [props (-> #js {:x (:x data)
:y (:y data)
:dominant-baseline "ideographic"
:dominantBaseline "ideographic"
:style (-> #js {:fontFamily (:font-family data)
:fontSize (:font-size data)
:fontWeight (:font-weight data)