From 4b086ab2bc995dfd595cc43f4ce56e69c0c49b13 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 3 Apr 2023 12:28:57 +0200 Subject: [PATCH 1/2] :bug: Fix problems with imported SVG shadows --- CHANGES.md | 6 ++++++ frontend/src/app/main/ui/shapes/shape.cljs | 15 ++++++++++----- frontend/src/app/main/ui/shapes/svg_defs.cljs | 10 ++++++++++ .../workspace/shapes/frame/dynamic_modifiers.cljs | 13 ++++++++----- version.txt | 2 +- 5 files changed, 35 insertions(+), 11 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index 65a48dc534..af8a2b4255 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,5 +1,11 @@ # CHANGELOG +## 1.18.1 + +### :bug: Bugs fixed + +- Fix problems with imported SVG shadows [Taiga #4922](https://tree.taiga.io/project/penpot/issue/4922) + ## 1.18.0 ### :sparkles: New features diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index c3b4c70d31..7e398d302c 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -67,6 +67,14 @@ shape-without-blur (dissoc shape :blur) shape-without-shadows (assoc shape :shadow []) + + filter-str + (when (and (or (cph/group-shape? shape) + (cph/frame-shape? shape) + (cph/svg-raw-shape? shape)) + (not disable-shadows?)) + (filters/filter-str filter-id shape)) + wrapper-props (-> (obj/clone props) (obj/without ["shape" "children" "disable-shadows?"]) @@ -79,11 +87,8 @@ (= :group type) (attrs/add-style-attrs shape render-id) - (and (or (cph/group-shape? shape) - (cph/frame-shape? shape) - (cph/svg-raw-shape? shape)) - (not disable-shadows?)) - (obj/set! "filter" (filters/filter-str filter-id shape))) + (some? filter-str) + (obj/set! "filter" filter-str)) svg-group? (and (contains? shape :svg-attrs) (= :group type)) diff --git a/frontend/src/app/main/ui/shapes/svg_defs.cljs b/frontend/src/app/main/ui/shapes/svg_defs.cljs index 174e095ea4..1be7aade58 100644 --- a/frontend/src/app/main/ui/shapes/svg_defs.cljs +++ b/frontend/src/app/main/ui/shapes/svg_defs.cljs @@ -64,6 +64,16 @@ (or transform-filter? transform-mask?) (merge bounds))) + ;; Fixes race condition with dynamic modifiers forcing redraw this properties before + ;; the effect triggers + attrs + (cond-> attrs + (or (= tag :filter) (= tag :mask)) + (merge {:data-old-x (:x attrs) + :data-old-y (:y attrs) + :data-old-width (:width attrs) + :data-old-height (:height attrs)})) + [wrapper wrapper-props] (if (= tag :mask) ["g" #js {:className "svg-mask-wrapper" :transform (str transform)}] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index 1863e9cd33..caba728b9c 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs @@ -181,11 +181,14 @@ (or (= (dom/get-tag-name node) "mask") (= (dom/get-tag-name node) "filter")) - (do - (dom/set-attribute! node "x" (dom/get-attribute node "data-old-x")) - (dom/set-attribute! node "y" (dom/get-attribute node "data-old-y")) - (dom/set-attribute! node "width" (dom/get-attribute node "data-old-width")) - (dom/set-attribute! node "height" (dom/get-attribute node "data-old-height")) + (let [old-x (dom/get-attribute node "data-old-x") + old-y (dom/get-attribute node "data-old-y") + old-width (dom/get-attribute node "data-old-width") + old-height (dom/get-attribute node "data-old-height")] + (dom/set-attribute! node "x" old-x) + (dom/set-attribute! node "y" old-y) + (dom/set-attribute! node "width" old-width) + (dom/set-attribute! node "height" old-height) (dom/remove-attribute! node "data-old-x") (dom/remove-attribute! node "data-old-y") diff --git a/version.txt b/version.txt index 84cc529467..ec6d649be6 100644 --- a/version.txt +++ b/version.txt @@ -1 +1 @@ -1.18.0 +1.18.1 From da953f0bc00558e73bf0d584836fde4c87f89867 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 3 Apr 2023 14:12:24 +0200 Subject: [PATCH 2/2] :bug: Fix problems with imported SVG embedded images and transforms --- CHANGES.md | 1 + .../app/main/data/workspace/svg_upload.cljs | 22 +++++++++---------- .../src/app/main/ui/workspace/shapes.cljs | 4 +--- frontend/src/app/util/svg.cljs | 9 +++++++- 4 files changed, 20 insertions(+), 16 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index af8a2b4255..347147c73d 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -5,6 +5,7 @@ ### :bug: Bugs fixed - Fix problems with imported SVG shadows [Taiga #4922](https://tree.taiga.io/project/penpot/issue/4922) +- Fix problems with imported SVG embedded images and transforms [Taiga #4639](https://tree.taiga.io/project/penpot/issue/4639) ## 1.18.0 diff --git a/frontend/src/app/main/data/workspace/svg_upload.cljs b/frontend/src/app/main/data/workspace/svg_upload.cljs index ae5354b150..0a9b3c5d08 100644 --- a/frontend/src/app/main/data/workspace/svg_upload.cljs +++ b/frontend/src/app/main/data/workspace/svg_upload.cljs @@ -181,7 +181,7 @@ (-> (update-in [:svg-attrs :style] dissoc :mix-blend-mode) (assoc :blend-mode (-> (get-in shape [:svg-attrs :style :mix-blend-mode]) keyword))))) -(defn create-raw-svg [name frame-id svg-data {:keys [attrs] :as data}] +(defn create-raw-svg [name frame-id svg-data {:keys [tag attrs] :as data}] (let [{:keys [x y width height offset-x offset-y]} svg-data] (-> {:id (uuid/next) :type :svg-raw @@ -191,6 +191,7 @@ :height height :x x :y y + :hidden (= tag :defs) :content (cond-> data (map? data) (update :attrs usvg/clean-attrs))} (assoc :svg-attrs attrs) @@ -388,7 +389,7 @@ disp-matrix (str (gmt/translate-matrix displacement)) element-data (-> element-data (assoc :tag :g) - (update :attrs dissoc :x :y :width :height :href :xlink:href) + (update :attrs dissoc :x :y :width :height :href :xlink:href :transform) (update :attrs usvg/add-transform disp-matrix) (assoc :content [use-data]))] (parse-svg-element frame-id svg-data element-data unames)) @@ -419,7 +420,7 @@ hidden (assoc :hidden true)) children (cond->> (:content element-data) - (or (= tag :g) (= tag :svg)) + (contains? usvg/parent-tags tag) (mapv #(usvg/inherit-attributes attrs %)))] [shape children])))))) @@ -469,12 +470,12 @@ (rx/map (fn [uri] (merge {:file-id file-id - :is-local true} + :is-local true + :url uri} (if (str/starts-with? uri "data:") {:name "image" :content (data-uri->blob uri)} - {:name (extract-name uri) - :url uri})))) + {:name (extract-name uri)})))) (rx/mapcat (fn [uri-data] (->> (rp/command! (if (contains? uri-data :content) :upload-file-media-object @@ -577,12 +578,9 @@ (pcb/add-object new-shape)) changes - (reduce (fn [changes [index new-child]] - (-> changes - (pcb/add-object new-child) - (pcb/change-parent (:parent-id new-child) [new-child] index))) - changes - (d/enumerate new-children)) + (reduce (fn [changes new-child] + (-> changes (pcb/add-object new-child))) + changes new-children) changes (pcb/resize-parents changes (->> changes diff --git a/frontend/src/app/main/ui/workspace/shapes.cljs b/frontend/src/app/main/ui/workspace/shapes.cljs index 1bc7e29d00..e7b5ae517d 100644 --- a/frontend/src/app/main/ui/workspace/shapes.cljs +++ b/frontend/src/app/main/ui/workspace/shapes.cljs @@ -100,10 +100,8 @@ opts #js {:shape shape :thumbnail? thumbnail?} - svg-leaf? (and (= :svg-raw (:type shape)) (string? (:content shape))) - [wrapper wrapper-props] - (if svg-leaf? + (if (= :svg-raw (:type shape)) [mf/Fragment nil] ["g" #js {:className "workspace-shape-wrapper"}])] diff --git a/frontend/src/app/util/svg.cljs b/frontend/src/app/util/svg.cljs index 21f084d848..e724136a53 100644 --- a/frontend/src/app/util/svg.cljs +++ b/frontend/src/app/util/svg.cljs @@ -389,7 +389,8 @@ :mask-type}) (defonce inheritable-props - [:clip-rule + [:style + :clip-rule :color :color-interpolation :color-interpolation-filters @@ -458,6 +459,12 @@ :feTile :feTurbulence}) +(def parent-tags + #{:g + :svg + :text + :tspan}) + ;; By spec: https://www.w3.org/TR/SVG11/single-page.html#struct-GElement (defonce svg-group-safe-tags #{:animate