Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-22 14:39:45 -05:00
Code Issues Activity

🐛 Fix problem with rendering SVG fills

Browse source
This commit is contained in:
alonso.torres 2024-03-19 09:28:10 +01:00
parent fe3c68ec39
commit e3f508d8d4
3 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
common/src/app/common/svg/shapes_builder.cljc
View file

@ -383,13 +383,16 @@
(update :svg-attrs dissoc :fill)
(assoc-in [:fills 0 :fill-color] (clr/parse color-style)))
(dm/get-in shape [:svg-attrs :fillOpacity])
;; Only create an opacity if the color is setted. Othewise can create problems down the line
(and (or (clr/color-string? color-attr) (clr/color-string? color-style))
(dm/get-in shape [:svg-attrs :fillOpacity]))
(-> (update :svg-attrs dissoc :fillOpacity)
(update-in [:svg-attrs :style] dissoc :fillOpacity)
(assoc-in [:fills 0 :fill-opacity] (-> (dm/get-in shape [:svg-attrs :fillOpacity])
(d/parse-double 1))))
(dm/get-in shape [:svg-attrs :style :fillOpacity])
(and (or (clr/color-string? color-attr) (clr/color-string? color-style))
(dm/get-in shape [:svg-attrs :style :fillOpacity]))
(-> (update-in [:svg-attrs :style] dissoc :fillOpacity)
(update :svg-attrs dissoc :fillOpacity)
(assoc-in [:fills 0 :fill-opacity] (-> (dm/get-in shape [:svg-attrs :style :fillOpacity])

54
frontend/src/app/main/ui/shapes/attrs.cljs
View file

@ -62,32 +62,34 @@
(obj/merge! props (get-border-props shape)))
(defn add-fill!
[attrs fill-data render-id index type]
(let [index (if (some? index) (dm/str "-" index) "")]
(cond
(contains? fill-data :fill-image)
(let [id (dm/str "fill-image-" render-id)]
(obj/set! attrs "fill" (dm/str "url(#" id ")")))
([attrs fill-data render-id index type]
(add-fill! attrs fill-data render-id index type "none"))
([attrs fill-data render-id index type fill-default]
(let [index (if (some? index) (dm/str "-" index) "")]
(cond
(contains? fill-data :fill-image)
(let [id (dm/str "fill-image-" render-id)]
(obj/set! attrs "fill" (dm/str "url(#" id ")")))
(some? (:fill-color-gradient fill-data))
(let [id (dm/str "fill-color-gradient-" render-id index)]
(obj/set! attrs "fill" (dm/str "url(#" id ")")))
(some? (:fill-color-gradient fill-data))
(let [id (dm/str "fill-color-gradient-" render-id index)]
(obj/set! attrs "fill" (dm/str "url(#" id ")")))
(contains? fill-data :fill-color)
(obj/set! attrs "fill" (:fill-color fill-data))
(contains? fill-data :fill-color)
(obj/set! attrs "fill" (:fill-color fill-data))
:else
(obj/set! attrs "fill" "none"))
:else
(obj/set! attrs "fill" fill-default))
(when (contains? fill-data :fill-opacity)
(obj/set! attrs "fillOpacity" (:fill-opacity fill-data)))
(when (contains? fill-data :fill-opacity)
(obj/set! attrs "fillOpacity" (:fill-opacity fill-data)))
(when (and (= :text type)
(nil? (:fill-color-gradient fill-data))
(nil? (:fill-color fill-data)))
(obj/set! attrs "fill" "black"))
(when (and (= :text type)
(nil? (:fill-color-gradient fill-data))
(nil? (:fill-color fill-data)))
(obj/set! attrs "fill" "black"))
attrs))
attrs)))
(defn add-stroke!
[attrs data render-id index open-path?]
@ -165,8 +167,10 @@
(obj/map->obj)))))
(defn get-fill-style
[fill-data index render-id type]
(add-fill! #js {} fill-data render-id index type))
([fill-data index render-id type]
(add-fill! #js {} fill-data render-id index type))
([fill-data index render-id type fill-default]
(add-fill! #js {} fill-data render-id index type fill-default)))
(defn add-fill-props!
([props shape render-id]
@ -242,8 +246,10 @@
(obj/set! style "fillOpacity" opacity)))
^boolean (d/not-empty? shape-fills)
(let [fill (nth shape-fills 0)]
(obj/merge! style (get-fill-style fill render-id 0 shape-type)))
(let [fill (nth shape-fills 0)
svg-fill (obj/get svg-attrs "fill")
fill-default (d/nilv svg-fill "none")]
(obj/merge! style (get-fill-style fill render-id 0 shape-type fill-default)))
(and ^boolean (cfh/path-shape? shape)
^boolean (empty? shape-fills))

3
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -476,7 +476,8 @@
svg-attrs (attrs/get-svg-props shape render-id)
style (-> (obj/get props "style")
(obj/clone))
(obj/clone)
(obj/merge! (obj/get svg-attrs "style")))
props (mf/spread-props svg-attrs
{:id stroke-id