0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00

Import/export layout data

This commit is contained in:
alonso.torres 2022-12-13 16:43:28 +01:00
parent 27c4cdb5f9
commit 029efefb62
5 changed files with 128 additions and 13 deletions

View file

@ -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

View file

@ -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

View file

@ -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)]))

View file

@ -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}}))

View file

@ -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))