Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

✨ Add import/export svg for grid

Browse source
This commit is contained in:
alonso.torres 2023-05-18 16:08:57 +02:00
parent 664825a2a6
commit b3b984d339
4 changed files with 131 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/app/main/ui/shapes/export.cljs
View file

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

2
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

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

67
frontend/src/app/util/import/parser.cljs
View file

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

11
frontend/src/app/worker/import.cljs
View file

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