github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-14 07:59:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

✨ Normalize layout schemas

Browse Source
This commit is contained in:
Andrey Antukh 2025-06-16 12:20:40 +02:00 committed by Alejandro Alonso
parent c6f4ee1974
commit 481d1ec53a
3 changed files with 73 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
common/src/app/common/files/shapes_helpers.cljc
View File

@ -91,10 +91,10 @@
parent-id (or parent-id (get selected-obj :parent-id)) parent-id (or parent-id (get selected-obj :parent-id))
base-parent (get objects parent-id) base-parent (get objects parent-id)
layout-props layout-attrs
(when (and (= 1 (count selected)) (when (and (= 1 (count selected))
(ctl/any-layout? base-parent)) (ctl/any-layout? base-parent))
(select-keys selected-obj ctl/layout-item-props)) (select-keys selected-obj ctl/layout-child-attrs))
target-cell-id target-cell-id
(if (and (nil? target-cell-id) (if (and (nil? target-cell-id)
@ -129,8 +129,8 @@
:parent-id parent-id :parent-id parent-id
:shapes (into [] selected)) :shapes (into [] selected))
(some? layout-props) (some? layout-attrs)
(d/patch-object layout-props) (d/patch-object layout-attrs)
;; Frames from shapes will not be displayed in viewer and no clipped ;; Frames from shapes will not be displayed in viewer and no clipped
(or (not= frame-id uuid/zero) without-fill?) (or (not= frame-id uuid/zero) without-fill?)

44
common/src/app/common/types/shape.cljc
View File

@ -313,7 +313,7 @@
:title "Shape"} :title "Shape"}
[:group [:group
[:merge {:title "GroupShape"} [:merge {:title "GroupShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:group-attrs schema:group-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -321,8 +321,8 @@
[:frame [:frame
[:merge {:title "FrameShape"} [:merge {:title "FrameShape"}
ctsl/schema:layout-child-attrs
ctsl/schema:layout-attrs ctsl/schema:layout-attrs
::ctsl/layout-attrs
schema:frame-attrs schema:frame-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -332,14 +332,14 @@
[:bool [:bool
[:merge {:title "BoolShape"} [:merge {:title "BoolShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:bool-attrs schema:bool-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-base-attrs]] schema:shape-base-attrs]]
[:rect [:rect
[:merge {:title "RectShape"} [:merge {:title "RectShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:rect-attrs schema:rect-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -347,7 +347,7 @@
[:circle [:circle
[:merge {:title "CircleShape"} [:merge {:title "CircleShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:circle-attrs schema:circle-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -355,7 +355,7 @@
[:image [:image
[:merge {:title "ImageShape"} [:merge {:title "ImageShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:image-attrs schema:image-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -363,7 +363,7 @@
[:svg-raw [:svg-raw
[:merge {:title "SvgRawShape"} [:merge {:title "SvgRawShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:svg-raw-attrs schema:svg-raw-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -371,14 +371,14 @@
[:path [:path
[:merge {:title "PathShape"} [:merge {:title "PathShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:path-attrs schema:path-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-base-attrs]] schema:shape-base-attrs]]
[:text [:text
[:merge {:title "TextShape"} [:merge {:title "TextShape"}
ctsl/schema:layout-attrs ctsl/schema:layout-child-attrs
schema:text-attrs schema:text-attrs
schema:shape-generic-attrs schema:shape-generic-attrs
schema:shape-geom-attrs schema:shape-geom-attrs
@ -682,23 +682,6 @@
:r3 :r3
:r4}) :r4})
(def ^:private layout-extract-props
#{:layout
:layout-flex-dir
:layout-gap-type
:layout-gap
:layout-wrap-type
:layout-align-items
:layout-align-content
:layout-justify-items
:layout-justify-content
:layout-padding-type
:layout-padding
:layout-grid-dir
:layout-grid-rows
:layout-grid-columns
:layout-grid-cells})
(defn extract-props (defn extract-props
"Retrieves an object with the 'pasteable' properties for a shape." "Retrieves an object with the 'pasteable' properties for a shape."
[shape] [shape]
@ -729,9 +712,8 @@
(assoc-props node txt/text-node-attrs))) (assoc-props node txt/text-node-attrs)))
props))) props)))
(extract-layout-props (extract-layout-attrs [props shape]
[props shape] (d/patch-object props (select-keys shape ctsl/layout-attrs)))]
(d/patch-object props (select-keys shape layout-extract-props)))]
(let [;; For texts we don't extract the fill (let [;; For texts we don't extract the fill
extract-props extract-props
@ -739,7 +721,7 @@
(-> shape (-> shape
(select-keys extract-props) (select-keys extract-props)
(cond-> (cfh/text-shape? shape) (extract-text-props shape)) (cond-> (cfh/text-shape? shape) (extract-text-props shape))
(cond-> (ctsl/any-layout? shape) (extract-layout-props shape)))))) (cond-> (ctsl/any-layout? shape) (extract-layout-attrs shape))))))
(defn patch-props (defn patch-props
"Given the object of `extract-props` applies it to a shape. Adapt the shape if necesary" "Given the object of `extract-props` applies it to a shape. Adapt the shape if necesary"
@ -764,7 +746,7 @@
(d/patch-object (select-keys props txt/text-node-attrs)))))))))) (d/patch-object (select-keys props txt/text-node-attrs))))))))))
(patch-layout-props [shape props] (patch-layout-props [shape props]
(let [shape (d/patch-object shape (select-keys props layout-extract-props))] (let [shape (d/patch-object shape (select-keys props ctsl/layout-attrs))]
(cond-> shape (cond-> shape
(ctsl/grid-layout? shape) (ctsl/grid-layout? shape)
(ctsl/assign-cells objects))))] (ctsl/assign-cells objects))))]

127
common/src/app/common/types/shape/layout.cljc
View File

@ -43,7 +43,6 @@
;; :layout-item-absolute ;; boolean ;; :layout-item-absolute ;; boolean
;; :layout-item-z-index ;; int ;; :layout-item-z-index ;; int
(def layout-types (def layout-types
#{:flex :grid}) #{:flex :grid})
@ -74,49 +73,6 @@
(def justify-items-types (def justify-items-types
#{:start :end :center :stretch}) #{:start :end :center :stretch})
(def layout-item-props
[: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-absolute
:layout-item-z-index])
(sm/register!
^{::sm/type ::layout-attrs}
[:map {:title "LayoutAttrs"}
[:layout {:optional true} [::sm/one-of layout-types]]
[:layout-flex-dir {:optional true} [::sm/one-of flex-direction-types]]
[:layout-gap {:optional true}
[:map
[:row-gap {:optional true} ::sm/safe-number]
[:column-gap {:optional true} ::sm/safe-number]]]
[:layout-gap-type {:optional true} [::sm/one-of gap-types]]
[:layout-wrap-type {:optional true} [::sm/one-of wrap-types]]
[:layout-padding-type {:optional true} [::sm/one-of padding-type]]
[:layout-padding {:optional true}
[:map
[:p1 ::sm/safe-number]
[:p2 ::sm/safe-number]
[:p3 ::sm/safe-number]
[:p4 ::sm/safe-number]]]
[:layout-justify-content {:optional true} [::sm/one-of justify-content-types]]
[:layout-justify-items {:optional true} [::sm/one-of justify-items-types]]
[:layout-align-content {:optional true} [::sm/one-of align-content-types]]
[:layout-align-items {:optional true} [::sm/one-of align-items-types]]
[:layout-grid-dir {:optional true} [::sm/one-of grid-direction-types]]
[:layout-grid-rows {:optional true}
[:vector {:gen/max 2} ::grid-track]]
[:layout-grid-columns {:optional true}
[:vector {:gen/max 2} ::grid-track]]
[:layout-grid-cells {:optional true}
[:map-of {:gen/max 5} ::sm/uuid ::grid-cell]]])
;; Grid types ;; Grid types
(def grid-track-types (def grid-track-types
#{:percent :flex :auto :fixed}) #{:percent :flex :auto :fixed})
@ -130,29 +86,59 @@
(def grid-cell-justify-self-types (def grid-cell-justify-self-types
#{:auto :start :center :end :stretch}) #{:auto :start :center :end :stretch})
(sm/register! (def ^:private schema:grid-cell
^{::sm/type ::grid-cell} [:map {:title "GridCell"}
[:map {:title "GridCell"} [:id ::sm/uuid]
[:id ::sm/uuid] [:area-name {:optional true} :string]
[:area-name {:optional true} :string] [:row ::sm/safe-int]
[:row ::sm/safe-int] [:row-span ::sm/safe-int]
[:row-span ::sm/safe-int] [:column ::sm/safe-int]
[:column ::sm/safe-int] [:column-span ::sm/safe-int]
[:column-span ::sm/safe-int] [:position {:optional true} [::sm/one-of grid-position-types]]
[:position {:optional true} [::sm/one-of grid-position-types]] [:align-self {:optional true} [::sm/one-of grid-cell-align-self-types]]
[:align-self {:optional true} [::sm/one-of grid-cell-align-self-types]] [:justify-self {:optional true} [::sm/one-of grid-cell-justify-self-types]]
[:justify-self {:optional true} [::sm/one-of grid-cell-justify-self-types]] [:shapes
[:shapes [:vector {:gen/max 1} ::sm/uuid]]])
[:vector {:gen/max 1} ::sm/uuid]]])
(sm/register! (def ^:private schema:grid-track
^{::sm/type ::grid-track} [:map {:title "GridTrack"}
[:map {:title "GridTrack"} [:type [::sm/one-of grid-track-types]]
[:type [::sm/one-of grid-track-types]] [:value {:optional true} [:maybe ::sm/safe-number]]])
[:value {:optional true} [:maybe ::sm/safe-number]]])
(def check-grid-track! (def schema:layout-attrs
(sm/check-fn ::grid-track)) [:map {:title "LayoutAttrs"}
[:layout {:optional true} [::sm/one-of layout-types]]
[:layout-flex-dir {:optional true} [::sm/one-of flex-direction-types]]
[:layout-gap {:optional true}
[:map
[:row-gap {:optional true} ::sm/safe-number]
[:column-gap {:optional true} ::sm/safe-number]]]
[:layout-gap-type {:optional true} [::sm/one-of gap-types]]
[:layout-wrap-type {:optional true} [::sm/one-of wrap-types]]
[:layout-padding-type {:optional true} [::sm/one-of padding-type]]
[:layout-padding {:optional true}
[:map
[:p1 ::sm/safe-number]
[:p2 ::sm/safe-number]
[:p3 ::sm/safe-number]
[:p4 ::sm/safe-number]]]
[:layout-justify-content {:optional true} [::sm/one-of justify-content-types]]
[:layout-justify-items {:optional true} [::sm/one-of justify-items-types]]
[:layout-align-content {:optional true} [::sm/one-of align-content-types]]
[:layout-align-items {:optional true} [::sm/one-of align-items-types]]
[:layout-grid-dir {:optional true} [::sm/one-of grid-direction-types]]
[:layout-grid-rows {:optional true}
[:vector {:gen/max 2} schema:grid-track]]
[:layout-grid-columns {:optional true}
[:vector {:gen/max 2} schema:grid-track]]
[:layout-grid-cells {:optional true}
[:map-of {:gen/max 5} ::sm/uuid schema:grid-cell]]])
(def ^:private check-grid-track
(sm/check-fn schema:grid-track))
(def layout-attrs
(sm/keys schema:layout-attrs))
;; LAYOUT CHILDREN ;; LAYOUT CHILDREN
@ -168,7 +154,7 @@
(def item-align-self-types (def item-align-self-types
#{:start :end :center :stretch}) #{:start :end :center :stretch})
(def schema:layout-attrs (def schema:layout-child-attrs
[:map {:title "LayoutChildAttrs"} [:map {:title "LayoutChildAttrs"}
[:layout-item-margin-type {:optional true} [::sm/one-of item-margin-types]] [:layout-item-margin-type {:optional true} [::sm/one-of item-margin-types]]
[:layout-item-margin {:optional true} [:layout-item-margin {:optional true}
@ -187,6 +173,9 @@
[:layout-item-absolute {:optional true} :boolean] [:layout-item-absolute {:optional true} :boolean]
[:layout-item-z-index {:optional true} ::sm/safe-number]]) [:layout-item-z-index {:optional true} ::sm/safe-number]])
(def layout-child-attrs
(sm/keys schema:layout-child-attrs))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; SCHEMAS ;; SCHEMAS
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -194,8 +183,6 @@
(def valid-layouts (def valid-layouts
#{:flex :grid}) #{:flex :grid})
(sm/register! ::layout [::sm/one-of valid-layouts])
(defn flex-layout? (defn flex-layout?
([objects id] ([objects id]
(flex-layout? (get objects id))) (flex-layout? (get objects id)))
@ -754,9 +741,7 @@
([type parent value] ([type parent value]
(add-grid-track type parent value nil)) (add-grid-track type parent value nil))
([type parent value index] ([type parent value index]
(dm/assert! (assert (check-grid-track value))
"expected a valid grid definition for `value`"
(check-grid-track! value))
(let [[tracks-prop tracks-prop-other prop prop-other prop-span prop-span-other] (let [[tracks-prop tracks-prop-other prop prop-other prop-span prop-span-other]
(if (= type :column) (if (= type :column)