✨ Fix nested frames with thumbnails

common/src/app/common/pages/helpers.cljc

@@ -674,3 +674,12 @@
   (into selected
         (mapcat #(get-children-ids objects %))
         selected))
+
+(defn get-shape-id-root-frame
+  [objects shape-id]
+  (->> (get-parents-seq objects shape-id)
+       (map (d/getf objects))
+       (d/seek #(and (= :frame (:type %))
+                     (= uuid/zero (:frame-id %))))
+
+       :id))

frontend/src/app/main/data/workspace/changes.cljs

@@ -10,6 +10,7 @@
    [app.common.logging :as log]
    [app.common.pages :as cp]
    [app.common.pages.changes-builder :as pcb]
+   [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
    [app.common.spec.change :as spec.change]
    [app.common.uuid :as uuid]
@@ -126,9 +127,7 @@
             []))]
     (into #{}
           (comp (mapcat change->ids)
-                (keep #(if (= :frame (get-in objects [% :type]))
+                (keep #(cph/get-shape-id-root-frame objects %))
-                         %
-                         (get-in objects [% :frame-id])))
                 (remove #(= uuid/zero %)))
           changes)))
 

frontend/src/app/main/data/workspace/state_helpers.cljs

@@ -70,6 +70,14 @@
          selected (dm/get-in state [:workspace-local :selected])]
      (process-selected-shapes objects selected options))))
 
+(defn lookup-shape
+  ([state id]
+   (lookup-shape state (:current-page-id state) id))
+
+  ([state page-id id]
+   (let [objects (lookup-page-objects state page-id)]
+     (get objects id))))
+
 (defn lookup-shapes
   ([state ids]
    (lookup-shapes state (:current-page-id state) ids))

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.thumbnails :as dwt]
@@ -59,9 +60,25 @@
       [props]
 
       (let [shape (unchecked-get props "shape")
-            thumbnail?         (unchecked-get props "thumbnail?")
+            frame-id           (:id shape)
+
+            ;; References to the current rendered node and the its parentn
+            node-ref           (mf/use-var nil)
+
             objects            (wsh/lookup-page-objects @st/state)
 
+            ;; Modifiers
+            modifiers-ref      (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+            modifiers          (mf/deref modifiers-ref)]
+
+        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
+
+        (if-not (cph/root-frame? shape)
+          [:& frame-shape {:shape shape :ref node-ref}]
+
+          ;; If the current shape is root we handle its thumbnail and the dynamic modifiers
+          (let [thumbnail?         (unchecked-get props "thumbnail?")
+
                 render-id          (mf/use-memo #(str (uuid/next)))
                 fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
                 fonts              (-> fonts (hooks/use-equal-memo))
@@ -69,19 +86,11 @@
                 force-render       (mf/use-state false)
 
                 ;; Thumbnail data
-            frame-id           (:id shape)
                 page-id            (mf/use-ctx ctx/current-page-id)
 
-            ;; References to the current rendered node and the its parentn
-            node-ref           (mf/use-var nil)
-
                 ;; when `true` we've called the mount for the frame
                 rendered?          (mf/use-var false)
 
-            ;; Modifiers
-            modifiers-ref      (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
-            modifiers          (mf/deref modifiers-ref)
-
                 disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
 
                 [on-load-frame-dom render-frame? thumbnail-renderer]
@@ -90,8 +99,6 @@
                 [on-frame-load in-memory?]
                 (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
 
-        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
-
             (mf/use-effect
              (mf/deps fonts)
              (fn []
@@ -131,4 +138,4 @@
                {:id (dm/str "thumbnail-container-" (:id shape))
                 ;; Hide the thumbnail when not displaying
                 :opacity (when (and @rendered? (not thumbnail?) (not render-frame?) (not in-memory?)) 0)}
-           thumbnail-renderer]]]))))
+               thumbnail-renderer]]]))))))