✨ Fixed export/import for nested frames

common/src/app/common/file_builder.cljc

@@ -222,9 +222,13 @@
 
 (defn close-artboard [file]
   (assert (nil? (:current-component-id file)))
-  (-> file
+
-      (assoc :current-frame-id root-frame)
+  (let [parent-id (peek (get file :parent-stack))
-      (update :parent-stack pop)))
+        parent (lookup-shape file parent-id)
+        current-frame-id (or (:frame-id parent) root-frame)]
+    (-> file
+        (assoc :current-frame-id current-frame-id)
+        (update :parent-stack pop))))
 
 (defn add-group [file data]
   (let [frame-id (:current-frame-id file)

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

@@ -105,9 +105,10 @@
   "Returns a vector of parents of the specified shape."
   [objects shape-id]
   (loop [result [] id shape-id]
-    (if-let [parent-id (dm/get-in objects [id :parent-id])]
+    (let [parent-id (dm/get-in objects [id :parent-id])]
-      (recur (conj result parent-id) parent-id)
+      (if (and (some? parent-id) (not= parent-id id))
-      result)))
+        (recur (conj result parent-id) parent-id)
+        result))))
 
 (defn get-frame
   "Get the frame that contains the shape. If the shape is already a
@@ -241,16 +242,15 @@
   (let [[base index-a index-b] (get-base objects base-shape-id over-shape-id)]
     (cond
       (= base base-shape-id)
-
+      (and (frame-shape? objects base-shape-id)
-      (and (frame-shape? objects over-shape-id)
+           (root-frame? objects base-shape-id))
-           (root-frame? objects over-shape-id))
 
       (= base over-shape-id)
       (or (not (frame-shape? objects over-shape-id))
           (not (root-frame? objects over-shape-id)))
 
       :else
-      (> index-a index-b))))
+      (< index-a index-b))))
 
 (defn sort-z-index
   ([objects ids]
@@ -667,3 +667,10 @@
            (if (empty? next-pending-ids)
              next-val
              (recur next-val (first next-pending-ids) (rest next-pending-ids)))))))))
+
+(defn selected-with-children
+  [objects selected]
+
+  (into selected
+        (mapcat #(get-children-ids objects %))
+        selected))

frontend/src/app/main/render.cljs

@@ -79,8 +79,7 @@
       [{:keys [shape] :as props}]
       (let [childs (mapv #(get objects %) (:shapes shape))
             shape  (gsh/transform-shape shape)]
-        [:> shape-container {:shape shape}
+        [:& frame-shape {:shape shape :childs childs}]))))
-         [:& frame-shape {:shape shape :childs childs}]]))))
 
 (defn group-wrapper-factory
   [objects]
@@ -255,8 +254,9 @@
               [:& frame/frame-thumbnail {:shape item}]]
 
              frame?
-             [:& frame-wrapper {:shape item
+             [:> shape-container {:shape item}
-                                :key (:id item)}]
+              [:& frame-wrapper {:shape item
+                                 :key (:id item)}]]
              :else
              [:& shape-wrapper {:shape item
                                 :key (:id item)}])))]]]))
@@ -389,42 +389,44 @@
         text-shapes   (sequence (filter cph/text-shape?) (vals objects))
         render-texts? (and render-texts? (d/seek (comp nil? :position-data) text-shapes))]
 
-    [:& (mf/provider embed/context) {:value render-embed?}
+    [:& (mf/provider export/include-metadata-ctx) {:value true}
-     [:svg {:id (dm/str "screenshot-" object-id)
+     [:& (mf/provider embed/context) {:value render-embed?}
-            :view-box vbox
+      [:svg {:id (dm/str "screenshot-" object-id)
-            :width width
+             :view-box vbox
-            :height height
+             :width width
-            :version "1.1"
+             :height height
-            :xmlns "http://www.w3.org/2000/svg"
+             :version "1.1"
-            :xmlnsXlink "http://www.w3.org/1999/xlink"
+             :xmlns "http://www.w3.org/2000/svg"
-            ;; Fix Chromium bug about color of html texts
+             :xmlnsXlink "http://www.w3.org/1999/xlink"
-            ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
+             ;; Fix Chromium bug about color of html texts
-            :style {:-webkit-print-color-adjust :exact}
+             ;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
-            :fill "none"}
+             :style {:-webkit-print-color-adjust :exact}
+             :fill "none"}
 
-      (let [fonts (ff/shape->fonts object objects)]
+       (let [fonts (ff/shape->fonts object objects)]
-        [:& ff/fontfaces-style {:fonts fonts}])
+         [:& ff/fontfaces-style {:fonts fonts}])
 
-      (case (:type object)
+       (case (:type object)
-        :frame [:& frame-wrapper {:shape object :view-box vbox}]
+         :frame [:> shape-container {:shape object}
-        :group [:> shape-container {:shape object}
+                 [:& frame-wrapper {:shape object :view-box vbox}]]
-                [:& group-wrapper {:shape object}]]
+         :group [:> shape-container {:shape object}
-        [:& shape-wrapper {:shape object}])]
+                 [:& group-wrapper {:shape object}]]
+         [:& shape-wrapper {:shape object}])]
 
-     ;; Auxiliary SVG for rendering text-shapes
+      ;; Auxiliary SVG for rendering text-shapes
-     (when render-texts?
+      (when render-texts?
-       (for [object text-shapes]
+        (for [object text-shapes]
-         [:& (mf/provider muc/text-plain-colors-ctx) {:value true}
+          [:& (mf/provider muc/text-plain-colors-ctx) {:value true}
-          [:svg
+           [:svg
-           {:id (dm/str "screenshot-text-" (:id object))
+            {:id (dm/str "screenshot-text-" (:id object))
-            :view-box (dm/str "0 0 " (:width object) " " (:height object))
+             :view-box (dm/str "0 0 " (:width object) " " (:height object))
-            :width (:width object)
+             :width (:width object)
-            :height (:height object)
+             :height (:height object)
-            :version "1.1"
+             :version "1.1"
-            :xmlns "http://www.w3.org/2000/svg"
+             :xmlns "http://www.w3.org/2000/svg"
-            :xmlnsXlink "http://www.w3.org/1999/xlink"
+             :xmlnsXlink "http://www.w3.org/1999/xlink"
-            :fill "none"}
+             :fill "none"}
-           [:& shape-wrapper {:shape (assoc object :x 0 :y 0)}]]]))]))
+            [:& shape-wrapper {:shape (assoc object :x 0 :y 0)}]]]))]]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SPRITES (DEBUG)

frontend/src/app/main/ui/components/context_menu.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.components.context-menu
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.refs :as refs]
    [app.main.ui.components.dropdown :refer [dropdown']]
    [app.main.ui.icons :as i]
@@ -110,10 +111,10 @@
            (for [[index [option-name option-handler sub-options data-test]] (d/enumerate (:options level))]
              (when option-name
                (if (= option-name :separator)
-                 [:li.separator]
+                 [:li.separator {:key (dm/str "context-item-" index)}]
                  [:li.context-menu-item
                   {:class (dom/classnames :is-selected (and selected (= option-name selected)))
-                   :key index}
+                   :key (dm/str "context-item-" index)}
                   (if-not sub-options
                     [:a.context-menu-action {:on-click #(do (dom/stop-propagation %)
                                                             (on-close)

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

@@ -95,6 +95,10 @@
         (add! :constraints-v)
         (add! :fixed-scroll)
 
+        (cond-> frame?
+          (-> (add! :show-content)
+              (add! :hide-in-viewer)))
+
         (cond-> (and (or rect? image? frame?) (some? (:r1 shape)))
           (-> (add! :r1)
               (add! :r2)

frontend/src/app/util/import/parser.cljs

@@ -789,10 +789,14 @@
           :content node-content}))))
 
 (defn add-frame-data [props node]
-  (let [grids (parse-grids node)]
+  (let [grids (parse-grids node)
-    (cond-> props
+        show-content (get-meta node :show-content str->bool)
-      (d/not-empty? grids)
+        hide-in-viewer (get-meta node :hide-in-viewer str->bool)]
-      (assoc :grids grids))))
+    (-> props
+        (assoc :show-content show-content)
+        (assoc :hide-in-viewer hide-in-viewer)
+        (cond-> (d/not-empty? grids)
+          (assoc :grids grids)))))
 
 (defn has-image?
   [node]