mirror of
https://github.com/penpot/penpot.git
synced 2025-02-10 09:08:31 -05:00
🐛 Fix old texts with opacity and no fill
This commit is contained in:
Alejandro Alonso
Alonso Torres
parent
5c14c3fafc
commit
0307e58fbe
3 changed files with 48 additions and 43 deletions
|
|
@ -56,49 +56,53 @@
|
|||
attrs))
|
||||
|
||||
(defn add-fill
|
||||
([attrs shape render-id]
|
||||
(add-fill attrs shape render-id nil))
|
||||
([attrs fill-data render-id type]
|
||||
(add-fill attrs fill-data render-id nil type))
|
||||
|
||||
([attrs shape render-id index]
|
||||
([attrs fill-data render-id index type]
|
||||
(let [fill-attrs
|
||||
(cond
|
||||
(contains? shape :fill-image)
|
||||
(contains? fill-data :fill-image)
|
||||
(let [fill-image-id (str "fill-image-" render-id)]
|
||||
{:fill (str "url(#" fill-image-id ")")})
|
||||
|
||||
(and (contains? shape :fill-color-gradient) (some? (:fill-color-gradient shape)))
|
||||
(and (contains? fill-data :fill-color-gradient) (some? (:fill-color-gradient fill-data)))
|
||||
(let [fill-color-gradient-id (str "fill-color-gradient_" render-id (if index (str "_" index) ""))]
|
||||
{:fill (str "url(#" fill-color-gradient-id ")")})
|
||||
|
||||
(contains? shape :fill-color)
|
||||
{:fill (:fill-color shape)}
|
||||
(contains? fill-data :fill-color)
|
||||
{:fill (:fill-color fill-data)}
|
||||
|
||||
:else
|
||||
{:fill "none"})
|
||||
|
||||
fill-attrs (cond-> fill-attrs
|
||||
(contains? shape :fill-opacity)
|
||||
(assoc :fillOpacity (:fill-opacity shape)))]
|
||||
(contains? fill-data :fill-opacity)
|
||||
(assoc :fillOpacity (:fill-opacity fill-data))
|
||||
|
||||
;; Old texts with only an opacity set are black by default
|
||||
(and (= type :text) (nil? (:fill-color-gradient fill-data)) (nil? (:fill-color fill-data)))
|
||||
(assoc :fill "black"))]
|
||||
|
||||
(obj/merge! attrs (clj->js fill-attrs)))))
|
||||
|
||||
(defn add-stroke [attrs shape render-id index]
|
||||
(let [stroke-style (:stroke-style shape :none)
|
||||
(defn add-stroke [attrs stroke-data render-id index]
|
||||
(let [stroke-style (:stroke-style stroke-data :none)
|
||||
stroke-color-gradient-id (str "stroke-color-gradient_" render-id "_" index)
|
||||
stroke-width (:stroke-width shape 1)]
|
||||
stroke-width (:stroke-width stroke-data 1)]
|
||||
(if (not= stroke-style :none)
|
||||
(let [stroke-attrs
|
||||
(cond-> {:strokeWidth stroke-width}
|
||||
(:stroke-color-gradient shape)
|
||||
(:stroke-color-gradient stroke-data)
|
||||
(assoc :stroke (str/format "url(#%s)" stroke-color-gradient-id))
|
||||
|
||||
(and (not (:stroke-color-gradient shape))
|
||||
(:stroke-color shape nil))
|
||||
(assoc :stroke (:stroke-color shape nil))
|
||||
(and (not (:stroke-color-gradient stroke-data))
|
||||
(:stroke-color stroke-data nil))
|
||||
(assoc :stroke (:stroke-color stroke-data nil))
|
||||
|
||||
(and (not (:stroke-color-gradient shape))
|
||||
(:stroke-opacity shape nil))
|
||||
(assoc :strokeOpacity (:stroke-opacity shape nil))
|
||||
(and (not (:stroke-color-gradient stroke-data))
|
||||
(:stroke-opacity stroke-data nil))
|
||||
(assoc :strokeOpacity (:stroke-opacity stroke-data nil))
|
||||
|
||||
(not= stroke-style :svg)
|
||||
(assoc :strokeDasharray (stroke-type->dasharray stroke-width stroke-style))
|
||||
|
|
@ -106,29 +110,29 @@
|
|||
;; For simple line caps we use svg stroke-line-cap attribute. This
|
||||
;; only works if all caps are the same and we are not using the tricks
|
||||
;; for inner or outer strokes.
|
||||
(and (stroke-caps-line (:stroke-cap-start shape))
|
||||
(= (:stroke-cap-start shape) (:stroke-cap-end shape))
|
||||
(not (#{:inner :outer} (:stroke-alignment shape)))
|
||||
(and (stroke-caps-line (:stroke-cap-start stroke-data))
|
||||
(= (:stroke-cap-start stroke-data) (:stroke-cap-end stroke-data))
|
||||
(not (#{:inner :outer} (:stroke-alignment stroke-data)))
|
||||
(not= :dotted stroke-style))
|
||||
(assoc :strokeLinecap (:stroke-cap-start shape))
|
||||
(assoc :strokeLinecap (:stroke-cap-start stroke-data))
|
||||
|
||||
(= :dotted stroke-style)
|
||||
(assoc :strokeLinecap "round")
|
||||
|
||||
;; For other cap types we use markers.
|
||||
(and (or (stroke-caps-marker (:stroke-cap-start shape))
|
||||
(and (stroke-caps-line (:stroke-cap-start shape))
|
||||
(not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
|
||||
(not (#{:inner :outer} (:stroke-alignment shape))))
|
||||
(and (or (stroke-caps-marker (:stroke-cap-start stroke-data))
|
||||
(and (stroke-caps-line (:stroke-cap-start stroke-data))
|
||||
(not= (:stroke-cap-start stroke-data) (:stroke-cap-end stroke-data))))
|
||||
(not (#{:inner :outer} (:stroke-alignment stroke-data))))
|
||||
(assoc :markerStart
|
||||
(str/format "url(#marker-%s-%s)" render-id (name (:stroke-cap-start shape))))
|
||||
(str/format "url(#marker-%s-%s)" render-id (name (:stroke-cap-start stroke-data))))
|
||||
|
||||
(and (or (stroke-caps-marker (:stroke-cap-end shape))
|
||||
(and (stroke-caps-line (:stroke-cap-end shape))
|
||||
(not= (:stroke-cap-start shape) (:stroke-cap-end shape))))
|
||||
(not (#{:inner :outer} (:stroke-alignment shape))))
|
||||
(and (or (stroke-caps-marker (:stroke-cap-end stroke-data))
|
||||
(and (stroke-caps-line (:stroke-cap-end stroke-data))
|
||||
(not= (:stroke-cap-start stroke-data) (:stroke-cap-end stroke-data))))
|
||||
(not (#{:inner :outer} (:stroke-alignment stroke-data))))
|
||||
(assoc :markerEnd
|
||||
(str/format "url(#marker-%s-%s)" render-id (name (:stroke-cap-end shape)))))]
|
||||
(str/format "url(#marker-%s-%s)" render-id (name (:stroke-cap-end stroke-data)))))]
|
||||
|
||||
(obj/merge! attrs (clj->js stroke-attrs)))
|
||||
attrs)))
|
||||
|
|
@ -195,7 +199,7 @@
|
|||
(obj/set! "fill" (or (obj/get (:wrapper-styles shape) "fill") clr/black)))
|
||||
|
||||
(d/not-empty? (:fills shape))
|
||||
(add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0)
|
||||
(add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0 (:type shape))
|
||||
|
||||
:else
|
||||
styles)]
|
||||
|
|
@ -211,16 +215,16 @@
|
|||
(add-style-attrs shape)))
|
||||
|
||||
(defn extract-fill-attrs
|
||||
[shape render-id index]
|
||||
(let [fill-styles (-> (obj/get shape "style" (obj/new))
|
||||
(add-fill shape render-id index))]
|
||||
[fill-data render-id index type]
|
||||
(let [fill-styles (-> (obj/get fill-data "style" (obj/new))
|
||||
(add-fill fill-data render-id index type))]
|
||||
(-> (obj/new)
|
||||
(obj/set! "style" fill-styles))))
|
||||
|
||||
(defn extract-stroke-attrs
|
||||
[shape index render-id]
|
||||
(let [stroke-styles (-> (obj/get shape "style" (obj/new))
|
||||
(add-stroke shape render-id index))]
|
||||
[stroke-data index render-id]
|
||||
(let [stroke-styles (-> (obj/get stroke-data "style" (obj/new))
|
||||
(add-stroke stroke-data render-id index))]
|
||||
(-> (obj/new)
|
||||
(obj/set! "style" stroke-styles))))
|
||||
|
||||
|
|
|
|||
|
|
@ -375,7 +375,7 @@
|
|||
|
||||
(d/not-empty? (:fills shape))
|
||||
(let [fill-props
|
||||
(attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)
|
||||
(attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0 (:type shape))
|
||||
|
||||
style (-> (obj/get props "style")
|
||||
(obj/clone)
|
||||
|
|
|
|||
|
|
@ -53,7 +53,8 @@
|
|||
:width width
|
||||
:data-loading loading?}
|
||||
(= :path (:type shape))
|
||||
(obj/set! "patternTransform" transform))]
|
||||
(obj/set! "patternTransform" transform))
|
||||
type (:type shape)]
|
||||
|
||||
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
||||
[:* {:key (dm/str shape-index)}
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
(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)
|
||||
[:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index type)
|
||||
(obj/set! "key" (dm/str fill-index))
|
||||
(obj/set! "width" width)
|
||||
(obj/set! "height" height))])
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue