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:
parent
27c4cdb5f9
commit
029efefb62
5 changed files with 128 additions and 13 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)]))
|
||||
|
||||
|
|
|
@ -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}}))
|
||||
|
|
|
@ -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))
|
||||
|
|
Loading…
Add table
Reference in a new issue