🐛 Inner shadow with border not working properly

CHANGES.md

@@ -26,6 +26,7 @@
 
 ### :bug: Bugs fixed
 
+- Inner shadow with border not working properly [Taiga #2883](https://tree.taiga.io/project/penpot/issue/2883)
 - Fix ellipsis in long page names [Taiga #2962](https://tree.taiga.io/project/penpot/issue/2962)
 - 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)

frontend/src/app/main/ui/shapes/custom_stroke.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.custom-stroke
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
@@ -316,44 +317,51 @@
         [:& stroke-defs {:shape shape :render-id render-id :index index}]]
        child])))
 
-(defn build-stroke-props [position shape child value render-id]
+(defn build-fill-props [shape child render-id]
   (let [url-fill?    (or (some? (:fill-image shape))
                          (= :image (:type shape))
                          (> (count (:fills shape)) 1)
                          (some :fill-color-gradient (:fills shape)))
-        one-fill?    (= (count (:fills shape)) 1)
-        last-stroke? (= position (- (count (:strokes shape)) 1))
 
         props        (-> (obj/get child "props")
                          (obj/clone))
 
-        props (cond
+        props        (cond-> props
-                (and last-stroke? url-fill?)
+                       (d/not-empty? (:shadow shape))
-                (obj/set! props "fill" (str "url(#fill-0-" render-id ")"))
+                       (obj/set! "filter" (dm/fmt "url(#filter_%)" render-id)))]
 
-                (and last-stroke? one-fill?)
+    (cond
+      url-fill?
+      (let [props (obj/set! props
+                            "style"
+                            (-> (obj/get props "style")
+                                (obj/clone)
+                                (obj/without ["fill" "fillOpacity"])))]
+        (obj/set! props "fill" (dm/fmt "url(#fill-0-%)" render-id)))
+
+      (d/not-empty? (:fills shape))
       (let [fill-props
             (attrs/extract-fill-attrs (get-in shape [:fills 0]) render-id 0)
 
             style (-> (obj/get props "style")
                       (obj/clone)
                       (obj/merge! (obj/get fill-props "style")))]
+
         (cond-> (obj/merge! props fill-props)
           (some? style)
-                    (obj/set! "style" style)))
+          (obj/set! "style" style))))))
 
-                :else
+(defn build-stroke-props [position child value render-id]
+  (let [props (-> (obj/get child "props")
+                  (obj/clone)
+                  (obj/without ["fill" "fillOpacity"]))]
     (-> props
-                    (obj/without ["fill" "fillOpacity"])
         (obj/set!
          "style"
          (-> (obj/get props "style")
              (obj/set! "fill" "none")
-                         (obj/set! "fillOpacity" "none")))))
+             (obj/set! "fillOpacity" "none")))
-
+        (add-style (obj/get (attrs/extract-stroke-attrs value position render-id) "style")))))
-        props (-> props
-                  (add-style (obj/get (attrs/extract-stroke-attrs value position render-id) "style")))]
-    props))
 
 (mf/defc shape-custom-strokes
   {::mf/wrap-props false}
@@ -361,17 +369,22 @@
   (let [child     (obj/get props "children")
         shape     (obj/get props "shape")
         elem-name (obj/get child "type")
-        render-id (mf/use-ctx muc/render-ctx)]
+        render-id (mf/use-ctx muc/render-ctx)
+        stroke-props (-> (obj/new)
+                         (obj/set! "id" (dm/fmt "strokes-%" (:id shape)))
+                         (cond->
+                          (some? (:blur shape))
+                           (obj/set! "filter" (dm/fmt "url(#filter_blur_%)" render-id))))]
 
-    (cond
-      (d/not-empty? (:strokes shape))
     [:*
+     [:g {:id (dm/fmt "fills-%" (:id shape))}
+      [:> elem-name (build-fill-props shape child render-id)]]
+
+     (when
+      (d/not-empty? (:strokes shape))
+       [:> :g stroke-props
         (for [[index value] (-> (d/enumerate (:strokes shape)) reverse)]
-         (let [props (build-stroke-props index shape child value render-id)
+          (let [props (build-stroke-props index child value render-id)
                 shape (assoc value :points (:points shape))]
             [:& shape-custom-stroke {:shape shape :index index}
-            [:> elem-name props]]))]
+             [:> elem-name props]]))])]))
-
-      :else
-      [:& shape-custom-stroke {:shape shape :index 0}
-       child])))

frontend/src/app/main/ui/shapes/shape.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.shape
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]
@@ -37,14 +38,21 @@
 
         include-metadata? (mf/use-ctx ed/include-metadata-ctx)
 
+        shape-without-blur (dissoc shape :blur)
+        shape-without-shadows (assoc shape :shadow [])
+
         wrapper-props
         (-> (obj/clone props)
             (obj/without ["shape" "children"])
             (obj/set! "ref" ref)
-            (obj/set! "id" (str "shape-" (:id shape)))
+            (obj/set! "id" (dm/fmt "shape-%" (:id shape)))
-            (obj/set! "filter" (filters/filter-str filter-id shape))
             (obj/set! "style" styles))
 
+        wrapper-props
+        (cond-> wrapper-props
+          (some #(= (:type shape) %) [:group :svg-raw])
+          (obj/set! "filter" (filters/filter-str filter-id shape)))
+
         wrapper-props
         (cond-> wrapper-props
           (= :frame type)
@@ -61,6 +69,8 @@
       [:defs
        [:& defs/svg-defs          {:shape shape :render-id render-id}]
        [:& filters/filters        {:shape shape :filter-id filter-id}]
+       [:& filters/filters        {:shape shape-without-blur :filter-id (dm/fmt "filter_shadow_%" render-id)}]
+       [:& filters/filters        {:shape shape-without-shadows :filter-id (dm/fmt "filter_blur_%" render-id)}]
        [:& fills/fills            {:shape shape :render-id render-id}]
        [:& frame/frame-clip-def   {:shape shape :render-id render-id}]]
       children]]))