✨ Handoff handling nested frames

frontend/src/app/main/render.cljs

@@ -277,18 +277,33 @@
               (gpt/negate)
               (gmt/translate-matrix)))
 
+        children-ids
+        (cph/get-children-ids objects frame-id)
+
         objects
         (mf/with-memo [frame-id objects modifier]
           (let [update-fn #(assoc-in %1 [%2 :modifiers :displacement] modifier)]
-            (->> (cph/get-children-ids objects frame-id)
+            (->> children-ids
                  (into [frame-id])
                  (reduce update-fn objects))))
 
         frame
         (mf/with-memo [modifier]
-          (assoc-in frame [:modifiers :displacement] modifier))
+          (-> frame
+              (assoc-in [:modifiers :displacement] modifier)
+              (gsh/transform-shape)))
 
-        wrapper
+        bounds
+        (if (:show-content frame)
+          (gsh/selection-rect (concat [frame] (->> children-ids (map (d/getf objects)))))
+          (-> frame :points gsh/points->rect))
+
+        frame
+        (cond-> frame
+          (and (some? bounds) (nil? (:children-bounds bounds)))
+          (assoc :children-bounds bounds))
+
+        frame-wrapper
         (mf/with-memo [objects]
           (frame-wrapper-factory objects))
 
@@ -296,21 +311,18 @@
         height (* (:height bounds) zoom)
         vbox   (format-viewbox {:width (:width bounds 0) :height (:height bounds 0)})]
 
-    [:svg {:view-box vbox
-           :width (ust/format-precision width viewbox-decimal-precision)
-           :height (ust/format-precision height viewbox-decimal-precision)
-           :version "1.1"
-           :xmlns "http://www.w3.org/2000/svg"
-           :xmlnsXlink "http://www.w3.org/1999/xlink"
-           :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
-           :fill "none"}
-     (if (or (not show-thumbnails?) (nil? (:thumbnail frame)))
-       [:& wrapper {:shape frame :view-box vbox}]
+    [:& (mf/provider muc/render-thumbnails) {:value show-thumbnails?}
+     [:svg {:view-box vbox
+            :width (ust/format-precision width viewbox-decimal-precision)
+            :height (ust/format-precision height viewbox-decimal-precision)
+            :version "1.1"
+            :xmlns "http://www.w3.org/2000/svg"
+            :xmlnsXlink "http://www.w3.org/1999/xlink"
+            :xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")
+            :fill "none"}
 
-       ;; Render the frame thumbnail
-       (let [frame (gsh/transform-shape frame)]
-         [:> shape-container {:shape frame}
-          [:& frame/frame-thumbnail {:shape frame :bounds (assoc bounds :x 0 :y 0)}]]))]))
+      [:> shape-container {:shape frame}
+       [:& frame-wrapper {:shape frame :view-box vbox}]]]]))
 
 
 ;; Component for rendering a thumbnail of a single componenent. Mainly

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

@@ -7,8 +7,8 @@
 (ns app.main.ui.shapes.shape
   (:require
    [app.common.data :as d]
-   [app.common.pages.helpers :as cph]
    [app.common.data.macros :as dm]
+   [app.common.pages.helpers :as cph]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.attrs :as attrs]

frontend/src/app/main/ui/viewer/handoff/render.cljs

@@ -30,24 +30,26 @@
 (declare shape-container-factory)
 
 (defn handle-hover-shape
-  [{:keys [type id]} hover?]
+  [shape hover?]
   (fn [event]
-    (when-not (#{:group :frame} type)
+    (when-not (or (cph/group-shape? shape)
+                  (cph/root-frame? shape))
       (dom/prevent-default event)
       (dom/stop-propagation event)
-      (st/emit! (dv/hover-shape id hover?)))))
+      (st/emit! (dv/hover-shape (:id shape) hover?)))))
 
-(defn select-shape [{:keys [type id]}]
+(defn select-shape [shape]
   (fn [event]
-    (when-not (#{:group :frame} type)
+    (when-not (or (cph/group-shape? shape)
+                  (cph/root-frame? shape))
       (dom/stop-propagation event)
       (dom/prevent-default event)
       (cond
         (.-shiftKey ^js event)
-        (st/emit! (dv/toggle-selection id))
+        (st/emit! (dv/toggle-selection (:id shape)))
 
         :else
-        (st/emit! (dv/select-shape id))))))
+        (st/emit! (dv/select-shape (:id shape)))))))
 
 (defn shape-wrapper-factory
   [component]

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -6,10 +6,10 @@
 
 (ns app.main.ui.viewer.thumbnails
   (:require
-   [app.common.pages.helpers :as cph]
-   [app.common.geom.shapes :as gsh]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.common.geom.shapes :as gsh]
+   [app.common.pages.helpers :as cph]
    [app.main.data.viewer :as dv]
    [app.main.render :as render]
    [app.main.store :as st]
@@ -85,7 +85,8 @@
      [:div.thumbnail-preview
       {:class (dom/classnames :selected selected?)}
       [:& render/frame-svg {:frame (-> frame
-                                       (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame)))))
+                                       (assoc :thumbnail (get thumbnail-data (dm/str page-id (:id frame))))
+                                       (assoc :children-bounds children-bounds))
                             :objects objects
                             :show-thumbnails? true}]]
      [:div.thumbnail-info