mirror of
https://github.com/penpot/penpot.git
synced 2025-06-10 05:41:40 +02:00
✨ Multiple fills in text shapes
This commit is contained in:
alonso.torres
parent
a3063eb46d
commit
ec63d23666
19 changed files with 230 additions and 211 deletions
|
|
@ -205,7 +205,7 @@
|
|||
(= :image (:type shape))
|
||||
(> (count (:fills shape)) 1)
|
||||
(some #(some? (:fill-color-gradient %)) (:fills shape)))
|
||||
(obj/set! styles "fill" (str "url(#fill-" render-id ")"))
|
||||
(obj/set! styles "fill" (str "url(#fill-0-" render-id ")"))
|
||||
|
||||
;; imported svgs can have fill and fill-opacity attributes
|
||||
(obj/contains? svg-styles "fill")
|
||||
|
|
@ -227,9 +227,8 @@
|
|||
(add-style-attrs shape)))
|
||||
|
||||
(defn extract-fill-attrs
|
||||
[shape index]
|
||||
(let [render-id (mf/use-ctx muc/render-ctx)
|
||||
fill-styles (-> (obj/get shape "style" (obj/new))
|
||||
[shape render-id index]
|
||||
(let [fill-styles (-> (obj/get shape "style" (obj/new))
|
||||
(add-fill shape render-id index))]
|
||||
(-> (obj/new)
|
||||
(obj/set! "style" fill-styles))))
|
||||
|
|
|
|||
|
|
@ -20,45 +20,54 @@
|
|||
[props]
|
||||
|
||||
(let [shape (obj/get props "shape")
|
||||
render-id (obj/get props "render-id")
|
||||
{:keys [x y width height]} (:selrect shape)
|
||||
{:keys [metadata]} shape
|
||||
fill-id (str "fill-" render-id)
|
||||
has-image (or metadata (:fill-image shape))
|
||||
uri (if metadata
|
||||
(cfg/resolve-file-media metadata)
|
||||
(cfg/resolve-file-media (:fill-image shape)))
|
||||
embed (embed/use-data-uris [uri])
|
||||
transform (gsh/transform-matrix shape)
|
||||
pattern-attrs (cond-> #js {:id fill-id
|
||||
:patternUnits "userSpaceOnUse"
|
||||
:x x
|
||||
:y y
|
||||
:height height
|
||||
:width width
|
||||
:data-loading (str (not (contains? embed uri)))}
|
||||
(= :path (:type shape))
|
||||
(obj/set! "patternTransform" transform))]
|
||||
render-id (obj/get props "render-id")]
|
||||
|
||||
[:*
|
||||
(for [[index value] (-> (d/enumerate (:fills shape [])) reverse)]
|
||||
(cond (some? (:fill-color-gradient value))
|
||||
(case (:type (:fill-color-gradient value))
|
||||
:linear [:> grad/linear-gradient #js {:id (str (name :fill-color-gradient) "_" render-id "_" index)
|
||||
:gradient (:fill-color-gradient value)
|
||||
:shape shape}]
|
||||
:radial [:> grad/radial-gradient #js {:id (str (name :fill-color-gradient) "_" render-id "_" index)
|
||||
:gradient (:fill-color-gradient value)
|
||||
:shape shape}])))
|
||||
(when (or (some? (:fill-image shape))
|
||||
(#{:image :text} (:type shape))
|
||||
(> (count (:fills shape)) 1)
|
||||
(some :fill-color-gradient (:fills shape)))
|
||||
|
||||
[:> :pattern pattern-attrs
|
||||
[:g
|
||||
(for [[index value] (-> (d/enumerate (:fills shape [])) reverse)]
|
||||
[:> :rect (-> (attrs/extract-fill-attrs value index)
|
||||
(obj/set! "width" width)
|
||||
(obj/set! "height" height))])
|
||||
(let [{:keys [x y width height]} (:selrect shape)
|
||||
{:keys [metadata]} shape
|
||||
|
||||
has-image (or metadata (:fill-image shape))
|
||||
uri (if metadata
|
||||
(cfg/resolve-file-media metadata)
|
||||
(cfg/resolve-file-media (:fill-image shape)))
|
||||
embed (embed/use-data-uris [uri])
|
||||
transform (gsh/transform-matrix shape)
|
||||
pattern-attrs (cond-> #js {:patternUnits "userSpaceOnUse"
|
||||
:x x
|
||||
:y y
|
||||
:height height
|
||||
:width width
|
||||
:data-loading (str (not (contains? embed uri)))}
|
||||
(= :path (:type shape))
|
||||
(obj/set! "patternTransform" transform))]
|
||||
|
||||
(when has-image
|
||||
[:image {:xlinkHref (get embed uri uri)
|
||||
:width width
|
||||
:height height}])]]]))
|
||||
[:*
|
||||
(for [[_shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
||||
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
|
||||
(cond (some? (:fill-color-gradient value))
|
||||
(case (d/name (:type (:fill-color-gradient value)))
|
||||
"linear" [:> grad/linear-gradient #js {:id (str "fill-color-gradient_" render-id "_" fill-index)
|
||||
:gradient (:fill-color-gradient value)
|
||||
:shape shape}]
|
||||
"radial" [:> grad/radial-gradient #js {:id (str "fill-color-gradient_" render-id "_" fill-index)
|
||||
:gradient (:fill-color-gradient value)
|
||||
:shape shape}]))))
|
||||
|
||||
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
||||
(let [fill-id (str "fill-" shape-index "-" render-id)]
|
||||
[:> :pattern (-> (obj/clone pattern-attrs)
|
||||
(obj/set! "id" fill-id))
|
||||
[:g
|
||||
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)]
|
||||
[:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index)
|
||||
(obj/set! "width" width)
|
||||
(obj/set! "height" height))])
|
||||
|
||||
(when has-image
|
||||
[:image {:xlinkHref (get embed uri uri)
|
||||
:width width
|
||||
:height height}])]]))]))))
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
(fn [data]
|
||||
(-> data
|
||||
(dissoc :fill-color :fill-opacity :fill-color-gradient)
|
||||
(assoc :fill-color "#FFFFFF" :fill-opacity 1)))]
|
||||
(assoc :fills [{:fill-color "#FFFFFF" :fill-opacity 1}])))]
|
||||
(-> shape
|
||||
(d/update-when :position-data #(mapv update-color %))
|
||||
(assoc :stroke-color "#FFFFFF" :stroke-opacity 1))))
|
||||
|
|
|
|||
|
|
@ -63,10 +63,6 @@
|
|||
[:& defs/svg-defs {:shape shape :render-id render-id}]
|
||||
[:& filters/filters {:shape shape :filter-id filter-id}]
|
||||
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]
|
||||
(when (or (some? (:fill-image shape))
|
||||
(= :image (:type shape))
|
||||
(> (count (:fills shape)) 1)
|
||||
(some :fill-color-gradient (:fills shape)))
|
||||
[:& fills/fills {:shape shape :render-id render-id}])
|
||||
[:& fills/fills {:shape shape :render-id render-id}]
|
||||
[:& frame/frame-clip-def {:shape shape :render-id render-id}]]
|
||||
children]]))
|
||||
|
|
|
|||
|
|
@ -194,13 +194,16 @@
|
|||
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)
|
||||
|
||||
[colors color-mapping color-mapping-inverse] (retrieve-colors shape)
|
||||
|
||||
plain-colors? (mf/use-ctx muc/text-plain-colors-ctx)
|
||||
|
||||
content (cond-> content
|
||||
plain-colors?
|
||||
(remap-colors color-mapping))]
|
||||
(remap-colors color-mapping))
|
||||
|
||||
]
|
||||
|
||||
[:foreignObject
|
||||
{:x x
|
||||
|
|
|
|||
|
|
@ -88,9 +88,10 @@
|
|||
:overflowWrap "initial"}
|
||||
|
||||
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))]
|
||||
(obj/set! "--fills" (transit/encode-str (:fills data)))
|
||||
#_(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)))
|
||||
|
|
|
|||
|
|
@ -59,7 +59,8 @@
|
|||
:fontStyle (:font-style data)
|
||||
:direction (if (:rtl? data) "rtl" "ltr")
|
||||
:whiteSpace "pre"}
|
||||
(attrs/add-fill data (get-gradient-id index)))})]
|
||||
(obj/set! "fill" (str "url(#fill-" index "-" render-id ")"))
|
||||
#_(attrs/add-fill data (get-gradient-id index)))})]
|
||||
[:& shape-custom-stroke {:shape shape :index index}
|
||||
[:> :text props (:text data)]]))]]))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue