🐛 Fix problems with imported SVG shadows

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

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)
+          (some? filter-str)
-                   (cph/frame-shape? shape)
+          (obj/set! "filter" filter-str))
-                   (cph/svg-raw-shape? shape))
-               (not disable-shadows?))
-          (obj/set! "filter" (filters/filter-str filter-id shape)))
 
         svg-group? (and (contains? shape :svg-attrs) (= :group type))
 

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)}]

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
+            (let [old-x      (dom/get-attribute node "data-old-x")
-              (dom/set-attribute! node "x" (dom/get-attribute node "data-old-x"))
+                  old-y      (dom/get-attribute node "data-old-y")
-              (dom/set-attribute! node "y" (dom/get-attribute node "data-old-y"))
+                  old-width  (dom/get-attribute node "data-old-width")
-              (dom/set-attribute! node "width" (dom/get-attribute node "data-old-width"))
+                  old-height (dom/get-attribute node "data-old-height")]
-              (dom/set-attribute! node "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")

version.txt

@@ -1 +1 @@
-1.18.0
+1.18.1