🐛 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

@@ -35,9 +35,9 @@
        ::mf/forward-ref true}
       [props ref]
 
-      (let [shape         (unchecked-get props "shape")
+      (let [shape      (unchecked-get props "shape")
-            childs-ref    (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape)))
+            childs-ref (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape)))
-            childs        (mf/deref childs-ref)]
+            childs     (mf/deref childs-ref)]
 
         [:& (mf/provider embed/context) {:value true}
          [:& shape-container {:shape shape :ref ref :disable-shadows? (cph/root-frame? shape)}
@@ -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)]
@@ -58,81 +58,92 @@
        ::mf/wrap-props false}
       [props]
 
-      (let [shape (unchecked-get props "shape")
+      (let [shape         (unchecked-get props "shape")
-            frame-id           (:id 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)]
 
-            ;; References to the current rendered node and the its parentn
+        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
-            node-ref           (mf/use-var nil)
+        (let [shape (unchecked-get props "shape")]
+          [:& frame-shape {:shape shape :ref node-ref}])))))
 
-            objects            (wsh/lookup-page-objects @st/state)
+(defn root-frame-wrapper-factory
+  [shape-wrapper]
 
-            ;; Modifiers
+  (let [frame-shape (frame-shape-factory shape-wrapper)]
-            modifiers-ref      (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
+    (mf/fnc frame-wrapper
-            modifiers          (mf/deref modifiers-ref)]
+      {::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)
+        (let [thumbnail?         (unchecked-get props "thumbnail?")
-          [:& frame-shape {:shape shape :ref node-ref}]
+              fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
+              fonts              (-> fonts (hooks/use-equal-memo))
 
-          ;; If the current shape is root we handle its thumbnail and the dynamic modifiers
+              force-render       (mf/use-state false)
-          (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))
 
-                force-render       (mf/use-state false)
+              ;; Thumbnail data
+              page-id            (mf/use-ctx ctx/current-page-id)
 
-                ;; Thumbnail data
+              ;; when `true` we've called the mount for the frame
-                page-id            (mf/use-ctx ctx/current-page-id)
+              rendered?          (mf/use-var false)
 
-                ;; when `true` we've called the mount for the frame
+              disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
-                rendered?          (mf/use-var false)
 
-                disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
+              [on-load-frame-dom render-frame? thumbnail-renderer]
+              (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
 
-                [on-load-frame-dom render-frame? thumbnail-renderer]
+              on-frame-load
-                (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
+              (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
 
-                on-frame-load
+          (mf/use-effect
-                (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
+           (mf/deps fonts)
+           (fn []
+             (->> (rx/from fonts)
+                  (rx/merge-map fonts/fetch-font-css)
+                  (rx/ignore))))
 
-            (mf/use-effect
+          (mf/use-effect
-             (mf/deps fonts)
+           (fn []
-             (fn []
+             ;; When a change in the data is received a "force-render" event is emited
-               (->> (rx/from fonts)
+             ;; that will force the component to be mounted in memory
-                    (rx/merge-map fonts/fetch-font-css)
+             (let [sub
-                    (rx/ignore))))
+                   (->> (dwt/force-render-stream (:id shape))
+                        (rx/take-while #(not @rendered?))
+                        (rx/subs #(reset! force-render true)))]
+               #(when sub
+                  (rx/dispose! sub)))))
 
-            (mf/use-effect
+          (mf/use-effect
-             (fn []
+           (mf/deps shape fonts thumbnail? on-load-frame-dom @force-render render-frame?)
-               ;; When a change in the data is received a "force-render" event is emited
+           (fn []
-               ;; that will force the component to be mounted in memory
+             (when (and (some? @node-ref) (or @rendered? (not thumbnail?) @force-render render-frame?))
-               (let [sub
+               (mf/mount
-                     (->> (dwt/force-render-stream (:id shape))
+                (mf/element frame-shape
-                          (rx/take-while #(not @rendered?))
+                            #js {:ref on-load-frame-dom :shape shape :fonts fonts})
-                          (rx/subs #(reset! force-render true)))]
-                 #(when sub
-                    (rx/dispose! sub)))))
 
-            (mf/use-effect
+                @node-ref)
-             (mf/deps shape fonts thumbnail? on-load-frame-dom @force-render render-frame?)
+               (when (not @rendered?) (reset! rendered? true)))))
-             (fn []
-               (when (and (some? @node-ref) (or @rendered? (not thumbnail?) @force-render render-frame?))
-                 (mf/mount
-                  (mf/element frame-shape
-                              #js {:ref on-load-frame-dom :shape shape :fonts fonts})
 
-                  @node-ref)
+          [:& shape-container {:shape shape}
-                 (when (not @rendered?) (reset! rendered? true)))))
+           [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
-
+                                :key "frame-container"
-            [:& shape-container {:shape shape}
+                                :ref on-frame-load
-             [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
+                                :opacity (when (:hidden shape) 0)}
-                                  :key "frame-container"
+            [:& ff/fontfaces-style {:fonts fonts}]
-                                  :ref on-frame-load
+            [:g.frame-thumbnail-wrapper
-                                  :opacity (when (:hidden shape) 0)}
+             {:id (dm/str "thumbnail-container-" (:id shape))
-              [:& ff/fontfaces-style {:fonts fonts}]
+              ;; Hide the thumbnail when not displaying
-              [:g.frame-thumbnail-wrapper
+              :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               {:id (dm/str "thumbnail-container-" (:id shape))
+             thumbnail-renderer]]])))))
-                ;; Hide the thumbnail when not displaying
-                :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               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
-                                   :objects objects}]
+          {:shape shape
-         [:& shapes/shape-wrapper {:shape item
+           :key (:id shape)}]
-                                   :key (:id item)}]))]))
+
+         (cph/root-frame? shape)
+         [:& shapes/root-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects objects}]
+
+         :else
+         [:& shapes/nested-frame-wrapper
+          {:shape shape
+           :key (:id shape)
+           :objects objects}]))]))
 
 (mf/defc pixel-overlay
   {::mf/wrap-props false}