🐛 Fix thumbnail not taking frame blending mode

CHANGES.md

@@ -57,6 +57,7 @@
 - Fix scroll jumps in handoff mode [Taiga #2383](https://tree.taiga.io/project/penpot/issue/2383)
 - Fix handoff text with opacity [Taiga #2384](https://tree.taiga.io/project/penpot/issue/2384)
 - Restored rules color [Taiga #2460](https://tree.taiga.io/project/penpot/issue/2460)
+- Fix thumbnail not taking frame blending mode [Taiga #2301](https://tree.taiga.io/project/penpot/issue/2301)
 
 ### :arrow_up: Deps updates
 

frontend/src/app/main/exports.cljs

@@ -195,14 +195,9 @@
           (let [frame? (= (:type item) :frame)]
             (cond
               (and frame? thumbnails? (some? (:thumbnail item)))
-              [:image {:xlinkHref (:thumbnail item)
+              [:> shape-container {:shape item}
-                       :x (:x item)
+               [:& frame/frame-thumbnail {:shape item}]]
-                       :y (:y item)
+
-                       :width (:width item)
-                       :height (:height item)
-                       ;; DEBUG
-                       :style {:filter (when (debug? :thumbnails) "sepia(1)")}
-                       }]
               frame?
               [:& frame-wrapper {:shape item
                                  :key (:id item)}]

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

@@ -8,6 +8,7 @@
   (:require
    [app.main.ui.shapes.attrs :as attrs]
    [app.util.object :as obj]
+   [debug :refer [debug?]]
    [rumext.alpha :as mf]))
 
 (defn frame-clip-id
@@ -26,6 +27,21 @@
       [:clipPath {:id (frame-clip-id shape render-id) :class "frame-clip"}
        [:rect {:x x :y y :width width :height height}]])))
 
+(mf/defc frame-thumbnail
+  {::mf/wrap-props false}
+  [props]
+  (let [shape (obj/get props "shape")]
+    (when (:thumbnail shape)
+      [:image.frame-thumbnail
+       {:id (str "thumbnail-" (:id shape))
+        :xlinkHref (:thumbnail shape)
+        :x (:x shape)
+        :y (:y shape)
+        :width (:width shape)
+        :height (:height shape)
+        ;; DEBUG
+        :style {:filter (when (debug? :thumbnails) "sepia(1)")}}])))
+
 (defn frame-shape
   [shape-wrapper]
   (mf/fnc frame-shape

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -15,7 +15,6 @@
    [app.util.object :as obj]
    [app.util.timers :as ts]
    [beicon.core :as rx]
-   [debug :refer [debug?]]
    [rumext.alpha :as mf]))
 
 (defn check-frame-props
@@ -36,27 +35,12 @@
          (= new-thumbnail? old-thumbnail?)
          (= new-children old-children))))
 
-(mf/defc thumbnail
-  {::mf/wrap-props false}
-  [props]
-  (let [shape (obj/get props "shape")]
-    (when (:thumbnail shape)
-      [:image.frame-thumbnail
-       {:id (str "thumbnail-" (:id shape))
-        :xlinkHref (:thumbnail shape)
-        :x (:x shape)
-        :y (:y shape)
-        :width (:width shape)
-        :height (:height shape)
-        ;; DEBUG
-        :style {:filter (when (debug? :thumbnails) "sepia(1)")}}])))
-
 (mf/defc frame-placeholder
   {::mf/wrap-props false}
   [props]
   (let [{:keys [x y width height fill-color] :as shape} (obj/get props "shape")]
     (if (some? (:thumbnail shape))
-      [:& thumbnail {:shape shape}]
+      [:& frame/frame-thumbnail {:shape shape}]
       [:rect {:x x :y y :width width :height height :style {:fill (or fill-color "var(--color-white)")}}])))
 
 (defn custom-deferred
@@ -128,7 +112,7 @@
            [:> shape-container {:shape shape}
             [:& ff/fontfaces-style {:shapes all-children}]
             (if show-thumbnail?
-              [:& thumbnail {:shape shape}]
+              [:& frame/frame-thumbnail {:shape shape}]
               [:& deferred-frame-shape
                {:shape shape
                 :childs children}])]])))))