🐛 Fix error when moving nested frames outside

CHANGES.md

@@ -4,7 +4,9 @@
 
 ### :bug: Bugs fixed
 
+- Fix error when moving nested frames outside [Taiga #4017] https://tree.taiga.io/project/penpot/issue/4017
 - Fix problem when hovering over nested frames [Taiga #4018] https://tree.taiga.io/project/penpot/issue/4018
+
 ## 1.15.2-beta
 
 ### :bug: Bugs fixed

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

@@ -32,7 +32,8 @@
 (declare group-wrapper)
 (declare svg-raw-wrapper)
 (declare bool-wrapper)
-(declare frame-wrapper)
+(declare root-frame-wrapper)
+(declare nested-frame-wrapper)
 
 (def circle-wrapper (common/generic-wrapper-factory circle/circle-shape))
 (def image-wrapper (common/generic-wrapper-factory image/image-shape))
@@ -62,15 +63,25 @@
                   (mapcat #(cph/get-children-with-self objects (:id %))))]
        [:& ff/fontfaces-style {:shapes (into [] xform shapes)}])
 
-     (for [item shapes]
+     (for [shape shapes]
-       (if (cph/frame-shape? item)
+       (cond
-         [:& frame-wrapper {:shape item
+         (not (cph/frame-shape? shape))
-                            :key (:id item)
+         [:& shape-wrapper
-                            :objects (get frame-objects (:id item))
+          {:shape shape
-                            :thumbnail? (not (contains? active-frames (:id item)))}]
+           :key (:id shape)}]
 
-         [:& shape-wrapper {:shape item
+         (cph/root-frame? shape)
-                            :key (:id item)}]))]))
+         [:& root-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects (get frame-objects (:id shape))
+           :thumbnail? (not (contains? active-frames (:id shape)))}]
+
+         :else
+         [:& nested-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects (get frame-objects (:id shape))}]))]))
 
 (mf/defc shape-wrapper
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))]
@@ -98,12 +109,13 @@
         :bool    [:> bool-wrapper opts]
 
         ;; Only used when drawing a new frame.
-        :frame [:> frame-wrapper opts]
+        :frame [:> nested-frame-wrapper opts]
 
         nil))))
 
 (def group-wrapper (group/group-wrapper-factory shape-wrapper))
 (def svg-raw-wrapper (svg-raw/svg-raw-wrapper-factory shape-wrapper))
 (def bool-wrapper (bool/bool-wrapper-factory shape-wrapper))
-(def frame-wrapper (frame/frame-wrapper-factory shape-wrapper))
+(def root-frame-wrapper (frame/root-frame-wrapper-factory shape-wrapper))
+(def nested-frame-wrapper (frame/nested-frame-wrapper-factory shape-wrapper))
 

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

@@ -49,7 +49,7 @@
        (= (unchecked-get new-props "thumbnail?") (unchecked-get old-props "thumbnail?"))
        (= (unchecked-get new-props "shape") (unchecked-get old-props "shape"))))
 
-(defn frame-wrapper-factory
+(defn nested-frame-wrapper-factory
   [shape-wrapper]
 
   (let [frame-shape (frame-shape-factory shape-wrapper)]
@@ -60,22 +60,33 @@
 
       (let [shape         (unchecked-get props "shape")
             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)
+            node-ref      (mf/use-var nil)
+            modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+            modifiers     (mf/deref modifiers-ref)]
 
-            ;; Modifiers
+        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
+        (let [shape (unchecked-get props "shape")]
+          [:& frame-shape {:shape shape :ref node-ref}])))))
+
+(defn root-frame-wrapper-factory
+  [shape-wrapper]
+
+  (let [frame-shape (frame-shape-factory shape-wrapper)]
+    (mf/fnc frame-wrapper
+      {::mf/wrap [#(mf/memo' % check-props)]
+       ::mf/wrap-props false}
+      [props]
+
+      (let [shape         (unchecked-get props "shape")
+            frame-id      (:id shape)
+            objects       (wsh/lookup-page-objects @st/state)
+            node-ref      (mf/use-var nil)
             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?")
               fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
               fonts              (-> fonts (hooks/use-equal-memo))
@@ -135,4 +146,4 @@
              {:id (dm/str "thumbnail-container-" (:id shape))
               ;; Hide the thumbnail when not displaying
               :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               thumbnail-renderer]]]))))))
+             thumbnail-renderer]]])))))

frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.viewport.pixel-overlay
   (:require
    [app.common.data :as d]
+   [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.data.modal :as modal]
    [app.main.data.workspace.colors :as dwc]
@@ -41,13 +42,24 @@
         shapes   (->> (:shapes root)
                       (map (d/getf objects)))]
     [:g.shapes
-     (for [item shapes]
+     (for [shape shapes]
-       (if (= (:type item) :frame)
+       (cond
-         [:& shapes/frame-wrapper {:shape item
+         (not (cph/frame-shape? shape))
-                                   :key (:id item)
+         [:& shapes/shape-wrapper
+          {:shape shape
+           :key (:id shape)}]
+
+         (cph/root-frame? shape)
+         [:& shapes/root-frame-wrapper
+          {:shape shape
+           :key (:id shape)
            :objects objects}]
-         [:& shapes/shape-wrapper {:shape item
+
-                                   :key (:id item)}]))]))
+         :else
+         [:& shapes/nested-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects objects}]))]))
 
 (mf/defc pixel-overlay
   {::mf/wrap-props false}