mirror of
https://github.com/penpot/penpot.git
synced 2025-06-03 22:41:38 +02:00
✨ Allows svg text on test edit and creation
This commit is contained in:
alonso.torres
parent
18dded1a00
commit
6cb6adc134
8 changed files with 198 additions and 123 deletions
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.ui.shapes.gradients
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.matrix :as gmt]
|
||||
[app.common.geom.point :as gpt]
|
||||
[app.common.geom.shapes :as gsh]
|
||||
|
|
@ -106,6 +107,7 @@
|
|||
:gradient gradient
|
||||
:shape shape}]
|
||||
(when gradient
|
||||
(case (:type gradient)
|
||||
:linear [:> linear-gradient gradient-props]
|
||||
:radial [:> radial-gradient gradient-props]))))
|
||||
(case (d/name (:type gradient))
|
||||
"linear" [:> linear-gradient gradient-props]
|
||||
"radial" [:> radial-gradient gradient-props]
|
||||
nil))))
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
[app.common.colors :as clr]
|
||||
[app.common.data :as d]
|
||||
[app.common.geom.shapes :as geom]
|
||||
[app.common.transit :as transit]
|
||||
[app.main.ui.context :as muc]
|
||||
[app.main.ui.shapes.attrs :as attrs]
|
||||
[app.main.ui.shapes.text.styles :as sts]
|
||||
|
|
@ -24,12 +23,7 @@
|
|||
(let [node (obj/get props "node")
|
||||
text (:text node)
|
||||
style (sts/generate-text-styles node)]
|
||||
[:span.text-node {:style style
|
||||
:data-fill-color (:fill-color node)
|
||||
:data-fill-color-gradient (transit/encode-str (:fill-color-gradient node))
|
||||
:data-fill-color-ref-file (transit/encode-str (:fill-color-ref-file node))
|
||||
:data-fill-color-ref-id (transit/encode-str (:fill-color-ref-id node))
|
||||
:data-fill-opacity (:fill-opacity node)}
|
||||
[:span.text-node {:style style}
|
||||
(if (= text "") "\u00A0" text)]))
|
||||
|
||||
(mf/defc render-root
|
||||
|
|
@ -193,7 +187,10 @@
|
|||
{::mf/wrap-props false
|
||||
::mf/forward-ref true}
|
||||
[props ref]
|
||||
(let [{:keys [id x y width height content] :as shape} (obj/get props "shape")
|
||||
(let [shape (obj/get props "shape")
|
||||
transform (str (geom/transform-matrix shape))
|
||||
|
||||
{:keys [id x y width height content]} shape
|
||||
grow-type (obj/get props "grow-type") ;; This is only needed in workspace
|
||||
;; We add 8px to add a padding for the exporter
|
||||
;; width (+ width 8)
|
||||
|
|
@ -205,16 +202,17 @@
|
|||
plain-colors?
|
||||
(remap-colors color-mapping))]
|
||||
|
||||
[:foreignObject {:x x
|
||||
:y y
|
||||
:id id
|
||||
:data-colors (->> colors (str/join ","))
|
||||
:data-mapping (-> color-mapping-inverse (clj->js) (js/JSON.stringify))
|
||||
:transform (geom/transform-matrix shape)
|
||||
:width (if (#{:auto-width} grow-type) 100000 width)
|
||||
:height (if (#{:auto-height :auto-width} grow-type) 100000 height)
|
||||
:style (-> (obj/new) (attrs/add-layer-props shape))
|
||||
:ref ref}
|
||||
[:foreignObject
|
||||
{:x x
|
||||
:y y
|
||||
:id id
|
||||
:data-colors (->> colors (str/join ","))
|
||||
:data-mapping (-> color-mapping-inverse (clj->js) (js/JSON.stringify))
|
||||
:transform transform
|
||||
:width (if (#{:auto-width} grow-type) 100000 width)
|
||||
:height (if (#{:auto-height :auto-width} grow-type) 100000 height)
|
||||
:style (-> (obj/new) (attrs/add-layer-props shape))
|
||||
:ref ref}
|
||||
;; We use a class here because react has a bug that won't use the appropriate selector for
|
||||
;; `background-clip`
|
||||
[:style ".text-node { background-clip: text;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.text :as txt]
|
||||
[app.common.transit :as transit]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.util.color :as uc]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -71,31 +72,22 @@
|
|||
fill-color (:fill-color data)
|
||||
fill-opacity (:fill-opacity data)
|
||||
|
||||
;; Uncomment this to allow to remove text colors. This could break the texts that already exist
|
||||
;;[r g b a] (if (nil? fill-color)
|
||||
;; [0 0 0 0] ;; Transparent color
|
||||
;; (uc/hex->rgba fill-color fill-opacity))
|
||||
|
||||
[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))
|
||||
|
||||
fontsdb (deref fonts/fontsdb)
|
||||
|
||||
base #js {:textDecoration text-decoration
|
||||
:textTransform text-transform
|
||||
:lineHeight (or line-height "inherit")
|
||||
:color text-color
|
||||
:caretColor "black"}]
|
||||
:color "transparent"
|
||||
:caretColor (or text-color "black")}
|
||||
|
||||
(when-let [gradient (:fill-color-gradient data)]
|
||||
(let [text-color (-> (update gradient :type keyword)
|
||||
(uc/gradient->css))]
|
||||
(-> base
|
||||
(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"))))
|
||||
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? letter-spacing)
|
||||
(pos? (alength letter-spacing)))
|
||||
|
|
|
|||
|
|
@ -45,10 +45,7 @@
|
|||
[:> :g group-props
|
||||
[:defs
|
||||
[:clipPath {:id clip-id}
|
||||
[:rect.text-clip
|
||||
{:x x :y y
|
||||
:width width :height height
|
||||
:transform (gsh/transform-matrix shape)}]]]
|
||||
[:rect.text-clip {:x x :y y :width width :height height}]]]
|
||||
(for [[index data] (d/enumerate position-data)]
|
||||
(let [props (-> #js {:x (:x data)
|
||||
:y (:y data)
|
||||
|
|
@ -63,3 +60,5 @@
|
|||
:whiteSpace "pre"}
|
||||
(attrs/add-fill data (get-gradient-id index)))})]
|
||||
[:> :text props (:text data)]))]]]))
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue