diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index 00de59a7a..999977282 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs index 1a10b91b1..0ff2557cd 100644 --- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs +++ b/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 diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index f692f3543..0da933bea 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/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 diff --git a/frontend/src/app/worker/import.cljs b/frontend/src/app/worker/import.cljs index 2e533d894..5a561cfac 100644 --- a/frontend/src/app/worker/import.cljs +++ b/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]