From a4d362d43d9f351f1ab32278a900f7333ced7775 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 17 Mar 2022 15:12:05 +0100 Subject: [PATCH] :bug: Fix problem when importing a SVG with text --- CHANGES.md | 1 + frontend/src/app/main/ui/shapes/attrs.cljs | 15 ++++--- .../src/app/main/ui/workspace/shapes.cljs | 33 ++++++-------- .../app/main/ui/workspace/shapes/svg_raw.cljs | 9 ++-- frontend/src/app/util/svg.cljs | 43 +++++++++++++++++++ 5 files changed, 69 insertions(+), 32 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 2492e416f5..66178ed012 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,7 @@ - Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852) - Fix display code icon on preview hover [Taiga #2838](https://tree.taiga.io/project/penpot/us/2838) - Fix crash on iOS when displaying viewer [#1522](https://github.com/penpot/penpot/issues/1522) +- Fix problem when importing a SVG with text [#1532](https://github.com/penpot/penpot/issues/1532) ### :arrow_up: Deps updates ### :heart: Community contributions by (Thank you!) diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index b6e18d8625..d555f574ea 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/frontend/src/app/main/ui/shapes/attrs.cljs @@ -98,14 +98,8 @@ (contains? shape :fill-color) {:fill (:fill-color shape)} - ;; If contains svg-attrs the origin is svg. If it's not svg origin - ;; we setup the default fill as transparent (instead of black) - (and (not (contains? shape :svg-attrs)) - (not (#{:svg-raw :group} (:type shape)))) - {:fill "none"} - :else - {}) + {:fill "none"}) fill-attrs (cond-> fill-attrs (contains? shape :fill-opacity) @@ -212,6 +206,13 @@ (obj/set! "fill" (obj/get svg-styles "fill")) (obj/set! "fillOpacity" (obj/get svg-styles "fillOpacity"))) + ;; If contains svg-attrs the origin is svg. If it's not svg origin + ;; we setup the default fill as transparent (instead of black) + (and (contains? shape :svg-attrs) + (#{:svg-raw :group} (:type shape)) + (empty? (:fills shape))) + styles + :else (add-fill styles (d/without-nils (get-in shape [:fills 0])) render-id 0))] diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index 359e2c56f9..aa1ad49906 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/frontend/src/app/main/ui/workspace/shapes.cljs @@ -69,31 +69,24 @@ ::mf/wrap-props false} [props] (let [shape (obj/get props "shape") - opts #js {:shape shape} - - svg-element? (and (= (:type shape) :svg-raw) - (not= :svg (get-in shape [:content :tag])))] + opts #js {:shape shape}] (when (and (some? shape) (not (:hidden shape))) [:* - (if-not svg-element? - (case (:type shape) - :path [:> path/path-wrapper opts] - :text [:> text/text-wrapper opts] - :group [:> group-wrapper opts] - :rect [:> rect-wrapper opts] - :image [:> image-wrapper opts] - :circle [:> circle-wrapper opts] - :svg-raw [:> svg-raw-wrapper opts] - :bool [:> bool-wrapper opts] + (case (:type shape) + :path [:> path/path-wrapper opts] + :text [:> text/text-wrapper opts] + :group [:> group-wrapper opts] + :rect [:> rect-wrapper opts] + :image [:> image-wrapper opts] + :circle [:> circle-wrapper opts] + :svg-raw [:> svg-raw-wrapper opts] + :bool [:> bool-wrapper opts] - ;; Only used when drawing a new frame. - :frame [:> frame-wrapper opts] + ;; Only used when drawing a new frame. + :frame [:> frame-wrapper opts] - nil) - - ;; Don't wrap svg elements inside a otherwise some can break - [:> svg-raw-wrapper opts]) + nil) (when (debug? :bounding-boxes) [:> bounding-box opts])]))) diff --git a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs index 22919126a5..7a3d7b1a41 100644 --- a/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/svg_raw.cljs @@ -9,6 +9,7 @@ [app.main.refs :as refs] [app.main.ui.shapes.shape :refer [shape-container]] [app.main.ui.shapes.svg-raw :as svg-raw] + [app.util.svg :as usvg] [rumext.alpha :as mf])) (defn svg-raw-wrapper-factory @@ -20,11 +21,9 @@ [props] (let [shape (unchecked-get props "shape") childs-ref (mf/use-memo (mf/deps shape) #(refs/objects-by-id (:shapes shape))) - childs (mf/deref childs-ref)] - - - (if (or (= (get-in shape [:content :tag]) :svg) - (and (contains? shape :svg-attrs) (map? (:content shape)))) + childs (mf/deref childs-ref) + svg-tag (get-in shape [:content :tag])] + (if (contains? usvg/svg-group-safe-tags svg-tag) [:> shape-container {:shape shape} [:& svg-raw-shape {:shape shape :childs childs}]] diff --git a/frontend/src/app/util/svg.cljs b/frontend/src/app/util/svg.cljs index 549798bf88..f7a7296a38 100644 --- a/frontend/src/app/util/svg.cljs +++ b/frontend/src/app/util/svg.cljs @@ -458,6 +458,49 @@ :feTile :feTurbulence}) +;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement +(defonce svg-group-safe-tags + #{:animate + :animateColor + :animateMotion + :animateTransform + :set + :desc + :metadata + :title + :circle + :ellipse + :line + :path + :polygon + :polyline + :rect + :defs + :g + :svg + :symbol + :use + :linearGradient + :radialGradient + :a + :altGlyphDef + :clipPath + :color-profile + :cursor + :filter + :font + :font-face + :foreignObject + :image + :marker + :mask + :pattern + :script + :style + :switch + :text + :view}) + ;; Props not supported by react we need to keep them lowercase (defonce non-react-props #{:mask-type})