✨ Fix specs for grid layout

common/src/app/common/types/shape.cljc

@@ -19,8 +19,7 @@
    [app.common.types.shape.blur :as ctsb]
    [app.common.types.shape.export :as ctse]
    [app.common.types.shape.interactions :as ctsi]
-   ;; FIXME: missing spec -> schema
+   [app.common.types.shape.layout :as ctsl]
-   #_[app.common.types.shape.layout :as ctsl]
    [app.common.types.shape.shadow :as ctss]
    [app.common.types.shape.text :as ctsx]
    [app.common.uuid :as uuid]
@@ -232,48 +231,57 @@
    [:group
     [:merge {:title "GroupShape"}
      ::shape-attrs
-     ::group-attrs]]
+     ::group-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:frame
     [:merge {:title "FrameShape"}
      ::shape-attrs
-     ::frame-attrs]]
+     ::frame-attrs
+     ::ctsl/layout-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:bool
     [:merge {:title "BoolShape"}
      ::shape-attrs
-     ::bool-attrs]]
+     ::bool-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:rect
     [:merge {:title "RectShape"}
      ::shape-attrs
-     ::rect-attrs]]
+     ::rect-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:circle
     [:merge {:title "CircleShape"}
      ::shape-attrs
-     ::circle-attrs]]
+     ::circle-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:image
     [:merge {:title "ImageShape"}
      ::shape-attrs
-     ::image-attrs]]
+     ::image-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:svg-raw
     [:merge {:title "SvgRawShape"}
      ::shape-attrs
-     ::svg-raw-attrs]]
+     ::svg-raw-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:path
     [:merge {:title "PathShape"}
      ::shape-attrs
-     ::path-attrs]]
+     ::path-attrs
+     ::ctsl/layout-child-attrs]]
 
    [:text
     [:merge {:title "TextShape"}
      ::shape-attrs
-     ::text-attrs]]
+     ::text-attrs
-   ])
+     ::ctsl/layout-child-attrs]]])
 
 (def shape?
   (sm/pred-fn ::shape))

common/src/app/common/types/shape/layout.cljc

@@ -21,15 +21,16 @@
 ;; :layout-gap             ;; {:row-gap number , :column-gap number}
 
 ;; :layout-align-items     ;; :start :end :center :stretch
-;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly
 ;; :layout-align-content   ;; :start :center :end :space-between :space-around :space-evenly :stretch (by default)
+;; :layout-justify-items    ;; :start :center :end :space-between :space-around :space-evenly
+;; :layout-justify-content ;; :start :center :end :space-between :space-around :space-evenly
 ;; :layout-wrap-type       ;; :wrap, :nowrap
 ;; :layout-padding-type    ;; :simple, :multiple
 ;; :layout-padding         ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
 
-;; layout-grid-rows
+;; layout-grid-rows        ;; vector of grid-track
-;; layout-grid-columns
+;; layout-grid-columns     ;; vector of grid-track
-;; layout-justify-items
+;; layout-grid-cells       ;; map of id->grid-cell
 
 ;; ITEMS
 ;; :layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
@@ -40,8 +41,9 @@
 ;; :layout-item-min-h       ;; num
 ;; :layout-item-max-w       ;; num
 ;; :layout-item-min-w       ;; num
-;; :layout-item-absolute
+;; :layout-item-absolute    ;; boolean
-;; :layout-item-z-index
+;; :layout-item-z-index     ;; int
+
 
 (def layout-types
   #{:flex :grid})
@@ -49,6 +51,9 @@
 (def flex-direction-types
   #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script
 
+(def grid-direction-types
+  #{:row :column})
+
 (def gap-types
   #{:simple :multiple})
 
@@ -59,7 +64,7 @@
   #{:simple :multiple})
 
 (def justify-content-types
-  #{:start :center :end :space-between :space-around :space-evenly})
+  #{:start :center :end :space-between :space-around :space-evenly :stretch})
 
 (def align-content-types
   #{:start :end :center :space-between :space-around :space-evenly :stretch})
@@ -90,48 +95,49 @@
    [: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-align-items {:optional true} [::sm/one-of align-items-types]]
 
-;; (s/def :grid/type #{:percent :flex :auto :fixed})
+   [:layout-grid-dir {:optional true} [::sm/one-of grid-direction-types]]
-;; (s/def :grid/value (s/nilable ::us/safe-number))
+   [:layout-grid-rows {:optional true}
-;; (s/def ::grid-definition (s/keys :req-un [:grid/type]
+    [:vector {:gen/max 2} ::grid-track]]
-;;                                  :opt-un [:grid/value]))
+   [:layout-grid-columns {:optional true}
-;; (s/def ::layout-grid-rows (s/coll-of ::grid-definition :kind vector?))
+    [:vector {:gen/max 2} ::grid-track]]
-;; (s/def ::layout-grid-columns (s/coll-of ::grid-definition :kind vector?))
+   [:layout-grid-cells {:optional true}
+    [:map-of {:gen/max 5} ::sm/uuid ::grid-cell]]])
 
-;; (s/def :grid-cell/id uuid?)
+;; Grid types
-;; (s/def :grid-cell/area-name ::us/string)
+(def grid-track-types
-;; (s/def :grid-cell/row-start ::us/safe-integer)
+  #{:percent :flex :auto :fixed})
-;; (s/def :grid-cell/row-span ::us/safe-integer)
-;; (s/def :grid-cell/column-start ::us/safe-integer)
-;; (s/def :grid-cell/column-span ::us/safe-integer)
-;; (s/def :grid-cell/position #{:auto :manual :area})
-;; (s/def :grid-cell/align-self #{:auto :start :end :center :stretch})
-;; (s/def :grid-cell/justify-self #{:auto :start :end :center :stretch})
-;; (s/def :grid-cell/shapes (s/coll-of uuid?))
 
-;; (s/def ::grid-cell (s/keys :opt-un [:grid-cell/id
+(def grid-position-types
-;;                                     :grid-cell/area-name
+  #{:auto :manual :area})
-;;                                     :grid-cell/row-start
-;;                                     :grid-cell/row-span
-;;                                     :grid-cell/column-start
-;;                                     :grid-cell/column-span
-;;                                     :grid-cell/position ;; auto, manual, area
-;;                                     :grid-cell/align-self
-;;                                     :grid-cell/justify-self
-;;                                     :grid-cell/shapes]))
-;; (s/def ::layout-grid-cells (s/map-of uuid? ::grid-cell))
 
-;; (s/def ::layout-container-props
+(def grid-cell-align-self-types
-;;   (s/keys :opt-un [
+  #{:auto :start :center :end :stretch})
-;;                    ;; grid
-;;                    ::layout-grid-dir
-;;                    ::layout-justify-items
-;;                    ::layout-grid-rows
-;;                    ::layout-grid-columns
-;;                    ::layout-grid-cells
-;;                    ]))
 
+(def grid-cell-justify-self-types
+  #{:auto :start :center :end :stretch})
+
+(sm/def! ::grid-cell
+  [:map {:title "GridCell"}
+   [:id ::sm/uuid]
+   [:area-name {:optional true} :string]
+   [:row ::sm/safe-int]
+   [:row-span ::sm/safe-int]
+   [:column ::sm/safe-int]
+   [:column-span ::sm/safe-int]
+   [:position {:optional true} [::sm/one-of grid-position-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]]
+   [:shapes
+    [:vector {:gen/max 1} ::sm/uuid]]])
+
+(sm/def! ::grid-track
+  [:map {:title "GridTrack"}
+   [:type [::sm/one-of grid-track-types]]
+   [:value {:optional true} [:maybe ::sm/safe-number]]])
+
+;; LAYOUT CHILDREN
 
 (def item-margin-types
   #{:simple :multiple})
@@ -164,13 +170,7 @@
    [:layout-item-absolute {:optional true} :boolean]
    [:layout-item-z-index {:optional true} ::sm/safe-number]])
 
-(def schema:grid-definition
+(def grid-track? (sm/pred-fn ::grid-track))
-  [:map {:title "LayoutGridDefinition"}
-   [:type [::sm/one-of #{:percent :flex :auto :fixed}]]
-   [:value {:optional true} [:maybe ::sm/safe-int]]])
-
-(def grid-definition?
-  (sm/pred-fn schema:grid-definition))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; SCHEMAS
@@ -524,11 +524,11 @@
           :layout-wrap-type
           :layout-padding-type
           :layout-padding
+          :layout-align-content
           :layout-justify-content
           :layout-align-items
-          :layout-align-content
-          :layout-grid-dir
           :layout-justify-items
+          :layout-grid-dir
           :layout-grid-columns
           :layout-grid-rows
           ))
@@ -570,7 +570,6 @@
       (d/update-in-when [:layout-item-margin :m3] * scale)
       (d/update-in-when [:layout-item-margin :m4] * scale)))
 
-
 (declare assign-cells)
 
 (def default-track-value
@@ -589,7 +588,7 @@
   [parent value]
   (dm/assert!
    "expected a valid grid definition for `value`"
-   (grid-definition? value))
+   (grid-track? value))
 
   (let [rows (:layout-grid-rows parent)
         new-col-num (inc (count (:layout-grid-columns parent)))
@@ -612,7 +611,7 @@
   [parent value]
   (dm/assert!
    "expected a valid grid definition for `value`"
-   (grid-definition? value))
+   (grid-track? value))
 
   (let [cols (:layout-grid-columns parent)
         new-row-num (inc (count (:layout-grid-rows parent)))