✨ Add import/export svg for grid

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

@@ -340,9 +340,14 @@
            layout-wrap-type
            layout-padding-type
            layout-padding
+           layout-justify-items
            layout-justify-content
            layout-align-items
-           layout-align-content]}]
+           layout-align-content
+           layout-grid-dir
+           layout-grid-rows
+           layout-grid-columns
+           layout-grid-cells]}]
 
   (when layout
     (mf/html
@@ -358,9 +363,48 @@
            :penpot:layout-padding-p2 (:p2 layout-padding)
            :penpot:layout-padding-p3 (:p3 layout-padding)
            :penpot:layout-padding-p4 (:p4 layout-padding)
+           :penpot:layout-justify-items (d/name layout-justify-items)
            :penpot:layout-justify-content (d/name layout-justify-content)
            :penpot:layout-align-items (d/name layout-align-items)
-           :penpot:layout-align-content (d/name layout-align-content)}])))
+           :penpot:layout-align-content (d/name layout-align-content)
+           :penpot:layout-grid-dir (d/name layout-grid-dir)}
+
+      [:> "penpot:grid-rows" #js {}
+       (for [[idx {:keys [type value]}] (d/enumerate layout-grid-rows)]
+         [:> "penpot:grid-track"
+          #js {:penpot:index idx
+               :penpot:type (d/name type)
+               :penpot:value value}])]
+
+      [:> "penpot:grid-columns" #js {}
+       (for [[idx {:keys [type value]}] (d/enumerate layout-grid-columns)]
+         [:> "penpot:grid-track"
+          #js {:penpot:index idx
+               :penpot:type (d/name type)
+               :penpot:value value}])]
+
+      [:> "penpot:grid-cells" #js {}
+       (for [[_ {:keys [id
+                        area-name
+                        row
+                        row-span
+                        column
+                        column-span
+                        position
+                        align-self
+                        justify-self
+                        shapes]}] layout-grid-cells]
+         [:> "penpot:grid-cell"
+          #js {:penpot:id id
+               :penpot:area-name area-name
+               :penpot:row row
+               :penpot:row-span row-span
+               :penpot:column column
+               :penpot:column-span column-span
+               :penpot:position (d/name position)
+               :penpot:align-self (d/name align-self)
+               :penpot:justify-self (d/name justify-self)
+               :penpot:shapes (str/join " " shapes)}])]])))
 
 (defn- export-layout-item-data
   [{:keys [layout-item-margin
@@ -371,7 +415,9 @@
            layout-item-min-h
            layout-item-max-w
            layout-item-min-w
-           layout-item-align-self]}]
+           layout-item-align-self
+           layout-item-absolute
+           layout-item-z-index]}]
 
   (when (or layout-item-margin
             layout-item-margin-type
@@ -381,7 +427,9 @@
             layout-item-min-h
             layout-item-max-w
             layout-item-min-w
-            layout-item-align-self)
+            layout-item-align-self
+            layout-item-absolute
+            layout-item-z-index)
     (mf/html
      [:> "penpot:layout-item"
       #js {:penpot:layout-item-margin-m1 (:m1 layout-item-margin)
@@ -395,7 +443,9 @@
            :penpot:layout-item-min-h layout-item-min-h
            :penpot:layout-item-max-w layout-item-max-w
            :penpot:layout-item-min-w layout-item-min-w
-           :penpot:layout-item-align-self (d/name layout-item-align-self)}])))
+           :penpot:layout-item-align-self (d/name layout-item-align-self)
+           :penpot:layout-item-absolute layout-item-absolute
+           :penpot:layout-item-z-index layout-item-z-index}])))
 
 
 (mf/defc export-data

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

@@ -564,7 +564,7 @@
 
              (if (some? track-type)
                (do (st/emit! (dwsl/change-layout-track [(:id shape)] type index {:type track-type :value value}))
-                   (dom/set-data! target "default-value" (format-size {:type type :value value})))
+                   (dom/set-data! target "default-value" (format-size {:type track-type :value value})))
                (obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
 
         handle-keydown-track-input

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

@@ -869,12 +869,64 @@
           :style
           parse-style))))
 
+(defn parse-grid-tracks
+  [node label]
+  (let [node (-> (get-data node :penpot:layout)
+                 (find-node label))]
+    (->> node
+         :content
+         (mapv
+          (fn [track-node]
+            (let [{:keys [type value]} (-> track-node :attrs remove-penpot-prefix)]
+              {:type (keyword type)
+               :value (d/parse-double value)}))))))
+
+(defn parse-grid-cells
+  [node]
+  (let [node (-> (get-data node :penpot:layout)
+                 (find-node :penpot:grid-cells))]
+    (->> node
+         :content
+         (mapv
+          (fn [cell-node]
+            (let [{:keys [id
+                          area-name
+                          row
+                          row-span
+                          column
+                          column-span
+                          position
+                          align-self
+                          justify-self
+                          shapes]} (-> cell-node :attrs remove-penpot-prefix)
+                  id (uuid/uuid id)]
+              [id (d/without-nils
+                   {:id id
+                    :area-name area-name
+                    :row (d/parse-integer  row)
+                    :row-span (d/parse-integer row-span)
+                    :column (d/parse-integer column)
+                    :column-span (d/parse-integer column-span)
+                    :position (keyword position)
+                    :align-self (keyword align-self)
+                    :justify-self (keyword justify-self)
+                    :shapes (if (and (some? shapes) (d/not-empty? shapes))
+                              (->> (str/split shapes " ")
+                                   (mapv uuid/uuid))
+                              [])})])))
+         (into {}))))
+
 (defn add-layout-container-data [props node]
   (if-let [data (get-data node :penpot:layout)]
-    (merge props
+    (let [layout-grid-rows (parse-grid-tracks node :penpot:grid-rows)
+          layout-grid-columns (parse-grid-tracks node :penpot:grid-columns)
+          layout-grid-cells (parse-grid-cells node)]
+      (-> props
+          (merge
            (d/without-nils
             {:layout (get-meta data :layout keyword)
              :layout-flex-dir (get-meta data :layout-flex-dir keyword)
+             :layout-grid-dir (get-meta data :layout-grid-dir keyword)
              :layout-wrap-type (get-meta data :layout-wrap-type keyword)
 
              :layout-gap-type (get-meta data :layout-gap-type keyword)
@@ -891,9 +943,17 @@
                :p3 (get-meta data :layout-padding-p3 d/parse-double)
                :p4 (get-meta data :layout-padding-p4 d/parse-double)})
 
+             :layout-justify-items (get-meta data :layout-justify-items keyword)
              :layout-justify-content (get-meta data :layout-justify-content keyword)
              :layout-align-items (get-meta data :layout-align-items keyword)
              :layout-align-content (get-meta data :layout-align-content keyword)}))
+
+          (cond-> (d/not-empty? layout-grid-rows)
+            (assoc :layout-grid-rows layout-grid-rows))
+          (cond-> (d/not-empty? layout-grid-columns)
+            (assoc :layout-grid-columns layout-grid-columns))
+          (cond-> (d/not-empty? layout-grid-cells)
+            (assoc :layout-grid-cells layout-grid-cells))))
     props))
 
 (defn add-layout-item-data [props node]
@@ -914,7 +974,10 @@
              :layout-item-min-h (get-meta data :layout-item-min-h d/parse-double)
              :layout-item-max-w (get-meta data :layout-item-max-w d/parse-double)
              :layout-item-min-w (get-meta data :layout-item-min-w d/parse-double)
-             :layout-item-align-self (get-meta data :layout-item-align-self keyword)}))
+             :layout-item-align-self (get-meta data :layout-item-align-self keyword)
+             :layout-item-align-absolute (get-meta data :layout-item-align-absolute str->bool)
+             :layout-item-align-index (get-meta data :layout-item-align-index d/parse-double)
+             }))
     props))
 
 (defn parse-data

frontend/src/app/worker/import.cljs

@@ -229,7 +229,16 @@
         (d/update-when :shape-ref resolve)
 
         (cond-> (= type :text)
-          (d/update-when :content resolve-text-content context)))))
+          (d/update-when :content resolve-text-content context))
+
+        (cond-> (and (= type :frame) (= :grid (:layout data)))
+          (update
+           :layout-grid-cells
+           (fn [cells]
+             (->> (vals cells)
+                  (reduce (fn [cells {:keys [id shapes]}]
+                            (assoc-in cells [id :shapes] (mapv resolve shapes)))
+                          cells))))))))
 
 (defn- translate-frame
   [data type file]