From 029efefb62ff5fa4e3d952898c294d9e4e60bafe Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 13 Dec 2022 16:43:28 +0100 Subject: [PATCH] :sparkles: Import/export layout data --- common/src/app/common/pages/common.cljc | 1 - common/src/app/common/types/shape/layout.cljc | 2 - frontend/src/app/main/ui/shapes/export.cljs | 84 +++++++++++++++++-- .../options/menus/layout_container.cljs | 1 - frontend/src/app/util/import/parser.cljs | 53 +++++++++++- 5 files changed, 128 insertions(+), 13 deletions(-) diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index de34e6b74..885cdb967 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -76,7 +76,6 @@ :layout :layout-container :layout-dir :layout-container :layout-gap :layout-container - :layout-type :layout-container :layout-wrap-type :layout-container :layout-padding-type :layout-container :layout-padding :layout-container diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 1fb0f4050..bfe99ed20 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -50,7 +50,6 @@ (s/def ::row-gap ::us/safe-number) (s/def ::column-gap ::us/safe-number) -(s/def ::layout-type #{:flex :grid}) (s/def ::layout-gap (s/keys :opt-un [::row-gap ::column-gap])) @@ -60,7 +59,6 @@ ::layout-flex-dir ::layout-gap ::layout-gap-type - ::layout-type ::layout-wrap-type ::layout-padding-type ::layout-padding diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index 1ea742ceb..00de59a7a 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -332,16 +332,84 @@ :penpot:preserve-scroll ((d/nilf str) (:preserve-scroll interaction))}])]))) +(defn- export-layout-container-data + [{:keys [layout + layout-flex-dir + layout-gap + layout-gap-type + layout-wrap-type + layout-padding-type + layout-padding + layout-justify-content + layout-align-items + layout-align-content]}] + + (when layout + (mf/html + [:> "penpot:layout" + #js {:penpot:layout (d/name layout) + :penpot:layout-flex-dir (d/name layout-flex-dir) + :penpot:layout-gap-type (d/name layout-gap-type) + :penpot:layout-gap-row (:row-gap layout-gap) + :penpot:layout-gap-column (:column-gap layout-gap) + :penpot:layout-wrap-type (d/name layout-wrap-type) + :penpot:layout-padding-type (d/name layout-padding-type) + :penpot:layout-padding-p1 (:p1 layout-padding) + :penpot:layout-padding-p2 (:p2 layout-padding) + :penpot:layout-padding-p3 (:p3 layout-padding) + :penpot:layout-padding-p4 (:p4 layout-padding) + :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)}]))) + +(defn- export-layout-item-data + [{:keys [layout-item-margin + layout-item-margin-type + layout-item-h-sizing + layout-item-v-sizing + layout-item-max-h + layout-item-min-h + layout-item-max-w + layout-item-min-w + layout-item-align-self]}] + + (when (or layout-item-margin + layout-item-margin-type + layout-item-h-sizing + layout-item-v-sizing + layout-item-max-h + layout-item-min-h + layout-item-max-w + layout-item-min-w + layout-item-align-self) + (mf/html + [:> "penpot:layout-item" + #js {:penpot:layout-item-margin-m1 (:m1 layout-item-margin) + :penpot:layout-item-margin-m2 (:m2 layout-item-margin) + :penpot:layout-item-margin-m3 (:m3 layout-item-margin) + :penpot:layout-item-margin-m4 (:m4 layout-item-margin) + :penpot:layout-item-margin-type (d/name layout-item-margin-type) + :penpot:layout-item-h-sizing (d/name layout-item-h-sizing) + :penpot:layout-item-v-sizing (d/name layout-item-v-sizing) + :penpot:layout-item-max-h layout-item-max-h + :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)}]))) + + (mf/defc export-data [{:keys [shape]}] (let [props (-> (obj/create) (add-data shape) (add-library-refs shape))] [:> "penpot:shape" props - (export-shadow-data shape) - (export-blur-data shape) - (export-exports-data shape) - (export-svg-data shape) - (export-interactions-data shape) - (export-fills-data shape) - (export-strokes-data shape) - (export-grid-data shape)])) + (export-shadow-data shape) + (export-blur-data shape) + (export-exports-data shape) + (export-svg-data shape) + (export-interactions-data shape) + (export-fills-data shape) + (export-strokes-data shape) + (export-grid-data shape) + (export-layout-container-data shape) + (export-layout-item-data shape)])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index fe63d9831..bb1d40472 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -382,7 +382,6 @@ on-padding-change (fn [type prop val] - (prn "??" type prop val) (cond (and (= type :simple) (= prop :p1)) (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}})) diff --git a/frontend/src/app/util/import/parser.cljs b/frontend/src/app/util/import/parser.cljs index 34479481e..cd908e112 100644 --- a/frontend/src/app/util/import/parser.cljs +++ b/frontend/src/app/util/import/parser.cljs @@ -869,6 +869,54 @@ :style parse-style)))) +(defn add-layout-container-data [props node] + (if-let [data (get-data node :penpot:layout)] + (merge props + (d/without-nils + {:layout (get-meta data :layout keyword) + :layout-flex-dir (get-meta data :layout-flex-dir keyword) + :layout-wrap-type (get-meta data :layout-wrap-type keyword) + + :layout-gap-type (get-meta data :layout-gap-type keyword) + :layout-gap + (d/without-nils + {:row-gap (get-meta data :layout-gap-row d/parse-double) + :column-gap (get-meta data :layout-gap-column d/parse-double)}) + + :layout-padding-type (get-meta data :layout-padding-type keyword) + :layout-padding + (d/without-nils + {:p1 (get-meta data :layout-padding-p1 d/parse-double) + :p2 (get-meta data :layout-padding-p2 d/parse-double) + :p3 (get-meta data :layout-padding-p3 d/parse-double) + :p4 (get-meta data :layout-padding-p4 d/parse-double)}) + + :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)})) + props)) + +(defn add-layout-item-data [props node] + (if-let [data (get-data node :penpot:layout-item)] + (merge props + (d/without-nils + {:layout-item-margin + (d/without-nils + {:m1 (get-meta data :layout-item-margin-m1 d/parse-double) + :m2 (get-meta data :layout-item-margin-m2 d/parse-double) + :m3 (get-meta data :layout-item-margin-m3 d/parse-double) + :m4 (get-meta data :layout-item-margin-m4 d/parse-double)}) + + :layout-item-margin-type (get-meta data :layout-item-margin-type keyword) + :layout-item-h-sizing (get-meta data :layout-item-h-sizing keyword) + :layout-item-v-sizing (get-meta data :layout-item-v-sizing keyword) + :layout-item-max-h (get-meta data :layout-item-max-h d/parse-double) + :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)})) + props)) + (defn parse-data [type node] @@ -894,7 +942,10 @@ (add-svg-content node)) (cond-> (= :frame type) - (add-frame-data node)) + (-> (add-frame-data node) + (add-layout-container-data node))) + + (add-layout-item-data node) (cond-> (= :group type) (add-group-data node))