3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-31 12:18:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Grid area attributes for html generation

Browse source
This commit is contained in:
alonso.torres 2023-10-02 16:01:57 +02:00
parent f639c73d03
commit d420f30835
5 changed files with 126 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

43
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -598,8 +598,34 @@
(dwc/update-shapes
[layout-id]
(fn [shape]
(cond
(= mode :area)
(case mode
:auto
;; change the manual cells and move to auto
(->> ids
(reduce
(fn [shape cell-id]
(let [cell (get-in shape [:layout-grid-cells cell-id])]
(cond-> shape
(or (contains? #{:area :manual} (:position cell))
(> (:row-span cell) 1)
(> (:column-span cell) 1))
(-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
(ctl/resize-cell-area (:row cell) (:column cell) (:row cell) (:column cell) 1 1)
(ctl/assign-cells)))))
shape))
:manual
(->> ids
(reduce
(fn [shape cell-id]
(let [cell (get-in shape [:layout-grid-cells cell-id])]
(cond-> shape
(contains? #{:area :auto} (:position cell))
(-> (d/assoc-in-when [:layout-grid-cells cell-id :position] :manual)
(ctl/assign-cells)))))
shape))
:area
;; Create area with the selected cells
(let [{:keys [first-row first-column last-row last-column]}
(ctl/cells-coordinates (->> ids (map #(get-in shape [:layout-grid-cells %]))))
@ -618,18 +644,7 @@
(ctl/assign-cells))]
(-> shape
(d/update-in-when [:layout-grid-cells (:id target-cell)] assoc :position :area)))
(= mode :auto)
;; change the manual cells and move to auto
(->> ids
(reduce
(fn [shape cell-id]
(cond-> shape
(contains? #{:area :manual} (get-in shape [:layout-grid-cells cell-id :position]))
(-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
(ctl/assign-cells))))
shape)))))
(d/update-in-when [:layout-grid-cells (:id target-cell)] assoc :position :area))))))
(dwge/clean-selection layout-id)
(ptk/data-event :layout/update [layout-id])
(dwu/commit-undo-transaction undo-id))))))

4
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -611,7 +611,9 @@
(ctl/swap-shapes id (:id next-cell)))))
parent))]
(-> changes
(pcb/update-shapes [(:id parent)] (fn [shape] (assoc shape :layout-grid-cells layout-grid-cells)))
(pcb/update-shapes [(:id parent)] (fn [shape] (-> shape
(assoc :layout-grid-cells layout-grid-cells)
(ctl/assign-cells))))
(pcb/reorder-grid-children [(:id parent)]))))
changes

2
frontend/src/app/util/code_gen/style_css.cljs
View file

@ -100,6 +100,7 @@ body {
;; Grid related properties
:grid-template-rows
:grid-template-columns
:grid-template-areas
;; Flex/grid self properties
:flex-shrink
@ -114,6 +115,7 @@ body {
;; Grid cell properties
:grid-column
:grid-row
:grid-area
])
(def text-node-css-properties

41
frontend/src/app/util/code_gen/style_css_values.cljs
View file

@ -14,7 +14,8 @@
[app.common.pages.helpers :as cph]
[app.common.types.shape.layout :as ctl]
[app.main.ui.formats :as fmt]
[app.util.code-gen.common :as cgc]))
[app.util.code-gen.common :as cgc]
[cuerdas.core :as str]))
(defn fill->color
[{:keys [fill-color fill-opacity fill-color-gradient]}]
@ -279,15 +280,38 @@
[_ shape _]
(:layout-grid-columns shape))
(defmethod get-value :grid-template-areas
[_ shape _]
(when (ctl/grid-layout? shape)
(let [result
(->> (d/enumerate (:layout-grid-rows shape))
(map
(fn [[row _]]
(dm/str
"\""
(->> (d/enumerate (:layout-grid-columns shape))
(map (fn [[column _]]
(let [cell (ctl/get-cell-by-position shape (inc row) (inc column))]
(str/replace (:area-name cell ".") " " "-"))))
(str/join " "))
"\"")))
(str/join "\n"))]
result)))
(defn get-grid-coord
[shape objects prop span-prop]
(when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape)))
(let [parent (get objects (:parent-id shape))
cell (ctl/get-cell-by-shape-id parent (:id shape))]
(if (> (get cell span-prop) 1)
(dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop)))
(get cell prop)))))
(when (and
(not (and (= (:position cell) :area) (d/not-empty? (:area-name cell))))
(or (= (:position cell) :manual)
(> (:row-span cell) 1)
(> (:column-span cell) 1)))
(if (> (get cell span-prop) 1)
(dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop)))
(get cell prop))))))
(defmethod get-value :grid-column
[_ shape objects]
@ -297,6 +321,15 @@
[_ shape objects]
(get-grid-coord shape objects :row :row-span))
(defmethod get-value :grid-area
[_ shape objects]
(when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape)))
(let [parent (get objects (:parent-id shape))
cell (ctl/get-cell-by-shape-id parent (:id shape))]
(when (and (= (:position cell) :area) (d/not-empty? (:area-name cell)))
(str/replace (:area-name cell) " " "-")))))
(defmethod get-value :flex-shrink
[_ shape objects]
(when (and (ctl/flex-layout-immediate-child? objects shape)