✨ Grid layout infrastructure

common/src/app/common/geom/shapes/constraints.cljc

@@ -288,7 +288,7 @@
 
         constraints-h
         (cond
-          (and (ctl/layout? parent) (not (ctl/layout-absolute? child)))
+          (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
           :left
 
           (not ignore-constraints)
@@ -299,7 +299,7 @@
 
         constraints-v
         (cond
-          (and (ctl/layout? parent) (not (ctl/layout-absolute? child)))
+          (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
           :top
 
           (not ignore-constraints)

common/src/app/common/geom/shapes/grid_layout.cljc

@@ -0,0 +1,16 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.common.geom.shapes.grid-layout
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.geom.shapes.grid-layout.layout-data :as glld]
+   [app.common.geom.shapes.grid-layout.positions :as glp]))
+
+(dm/export glld/calc-layout-data)
+(dm/export glld/get-cell-data)
+(dm/export glld/get-child-coordinates)
+(dm/export glp/child-modifiers)

common/src/app/common/geom/shapes/grid_layout/layout_data.cljc

@@ -0,0 +1,71 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.common.geom.shapes.grid-layout.layout-data
+  (:require
+   [app.common.data.macros :as dm]
+   [app.common.geom.point :as gpt]
+   [app.common.geom.shapes.points :as gpo]))
+
+(defn calc-layout-data
+  [_parent _children transformed-parent-bounds]
+  (let [num-columns 3
+        num-rows 2
+
+        height (gpo/height-points transformed-parent-bounds)
+        width  (gpo/width-points transformed-parent-bounds)
+
+        row-lines
+        (->> (range 0 num-rows)
+             (reduce (fn [[result start-dist] _]
+                       (let [height (/ height num-rows)]
+                         [(conj result {:distance start-dist
+                                        :height height})
+                          (+ start-dist height)]))
+
+                     [[] 0])
+             first)
+
+        column-lines
+        (->> (range 0 num-columns)
+             (reduce (fn [[result start-dist] _]
+                       (let [width (/ width num-columns)]
+                         [(conj result {:distance start-dist
+                                        :width width})
+                          (+ start-dist width)]))
+                     [[] 0])
+             first)]
+    {:columns 3
+     :rows 3
+     :row-lines row-lines
+     :column-lines column-lines}))
+
+(defn get-child-coordinates
+  [{:keys [columns]} _child child-idx]
+  [;; Row
+   (quot child-idx columns)
+   ;; column
+   (mod child-idx columns)])
+
+(defn get-cell-data
+  [grid-data transformed-parent-bounds row col]
+
+  (let [origin (gpo/origin transformed-parent-bounds)
+        hv #(gpo/start-hv transformed-parent-bounds %)
+        vv #(gpo/start-vv transformed-parent-bounds %)
+
+        {col-dist :distance width :width} (dm/get-in grid-data [:column-lines col])
+        {row-dist :distance height :height} (dm/get-in grid-data [:row-lines row])
+
+        start-p
+        (-> origin
+            (gpt/add (hv col-dist))
+            (gpt/add (vv row-dist)))]
+    {:start-p  start-p
+     :width width
+     :height height
+     :row row
+     :col col}))

common/src/app/common/geom/shapes/grid_layout/positions.cljc

@@ -0,0 +1,16 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.common.geom.shapes.grid-layout.positions
+  (:require
+   [app.common.geom.point :as gpt]
+   [app.common.geom.shapes.points :as gpo]
+   [app.common.types.modifiers :as ctm]))
+
+(defn child-modifiers
+  [_parent _transformed-parent-bounds _child child-bounds cell-data]
+  (ctm/move-modifiers
+   (gpt/subtract (:start-p cell-data) (gpo/origin child-bounds))))

common/src/app/common/geom/shapes/modifiers.cljc

@@ -10,7 +10,8 @@
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes.constraints :as gct]
-   [app.common.geom.shapes.flex-layout :as gcl]
+   [app.common.geom.shapes.flex-layout :as gcfl]
+   [app.common.geom.shapes.grid-layout :as gcgl]
    [app.common.geom.shapes.pixel-precision :as gpp]
    [app.common.geom.shapes.points :as gpo]
    [app.common.geom.shapes.transforms :as gtr]
@@ -90,12 +91,12 @@
                   contains-parent? (some #(contains? result %) root-parents)]
               (cond-> result
                 (not contains-parent?)
-                (conj root)))))]
+                (conj root)))))
 
-    (let [roots (->> ids (reduce calculate-common-roots #{}))]
+        roots (->> ids (reduce calculate-common-roots #{}))]
     (concat
      (when (contains? ids uuid/zero) [(get objects uuid/zero)])
-       (mapcat #(children-sequence % objects) roots)))))
+     (mapcat #(children-sequence % objects) roots))))
 
 (defn- set-children-modifiers
   "Propagates the modifiers from a parent too its children applying constraints if necesary"
@@ -157,7 +158,7 @@
         (not (ctm/empty? modifiers))
         (gtr/transform-bounds modifiers)))))
 
-(defn- set-layout-modifiers
+(defn- set-flex-layout-modifiers
   [modif-tree children objects bounds parent transformed-parent-bounds]
 
   (letfn [(apply-modifiers [child]
@@ -167,7 +168,7 @@
 
           (set-child-modifiers [[layout-line modif-tree] [child-bounds child]]
             (let [[modifiers layout-line]
-                  (gcl/layout-child-modifiers parent transformed-parent-bounds child child-bounds layout-line)
+                  (gcfl/layout-child-modifiers parent transformed-parent-bounds child child-bounds layout-line)
 
                   modif-tree
                   (cond-> modif-tree
@@ -180,7 +181,7 @@
                             (map (d/getf objects))
                             (remove :hidden)
                             (map apply-modifiers))
-          layout-data  (gcl/calc-layout-data parent children @transformed-parent-bounds)
+          layout-data  (gcfl/calc-layout-data parent children @transformed-parent-bounds)
           children     (into [] (cond-> children (not (:reverse? layout-data)) reverse))
           max-idx      (dec (count children))
           layout-lines (:layout-lines layout-data)]
@@ -198,6 +199,35 @@
 
           modif-tree)))))
 
+(defn- set-grid-layout-modifiers
+  [modif-tree objects bounds parent transformed-parent-bounds]
+
+  (letfn [(apply-modifiers [child]
+            [(-> (get-group-bounds objects bounds modif-tree child)
+                 (gpo/parent-coords-bounds @transformed-parent-bounds))
+             child])
+          (set-child-modifiers [modif-tree cell-data [child-bounds child]]
+            (let [modifiers (gcgl/child-modifiers parent transformed-parent-bounds child child-bounds cell-data)
+                  modif-tree
+                  (cond-> modif-tree
+                    (d/not-empty? modifiers)
+                    (update-in [(:id child) :modifiers] ctm/add-modifiers modifiers))]
+              modif-tree))]
+    (let [children     (->> (cph/get-immediate-children objects (:id parent))
+                            (remove :hidden)
+                            (map apply-modifiers))
+          grid-data    (gcgl/calc-layout-data parent children @transformed-parent-bounds)]
+      (loop [modif-tree modif-tree
+             child-idx 0
+             child (first children)
+             pending (rest children)]
+        (if (some? child)
+          (let [[row col] (gcgl/get-child-coordinates grid-data child child-idx)
+                cell-data (gcgl/get-cell-data grid-data @transformed-parent-bounds row col)
+                modif-tree (set-child-modifiers modif-tree cell-data child)]
+            (recur modif-tree (inc child-idx) (first pending) (rest pending)))
+          modif-tree)))))
+
 (defn- calc-auto-modifiers
   "Calculates the modifiers to adjust the bounds for auto-width/auto-height shapes"
   [objects bounds parent]
@@ -223,7 +253,7 @@
 
         content-bounds
         (when (and (d/not-empty? children) (or (ctl/auto-height? parent) (ctl/auto-width? parent)))
-          (gcl/layout-content-bounds bounds parent children))
+          (gcfl/layout-content-bounds bounds parent children))
 
         auto-width (when content-bounds (gpo/width-points content-bounds))
         auto-height (when content-bounds (gpo/height-points content-bounds))]
@@ -259,14 +289,15 @@
         modifiers      (-> (dm/get-in modif-tree [parent-id :modifiers])
                            (ctm/select-geometry))
         has-modifiers? (ctm/child-modifiers? modifiers)
-        layout?        (ctl/layout? parent)
+        flex-layout?   (ctl/flex-layout? parent)
+        grid-layout?   (ctl/grid-layout? parent)
         auto?          (or (ctl/auto-height? parent) (ctl/auto-width? parent))
         parent?        (or (cph/group-like-shape? parent) (cph/frame-shape? parent))
 
         transformed-parent-bounds (delay (gtr/transform-bounds @(get bounds parent-id) modifiers))
 
         children-modifiers
-        (if layout?
+        (if flex-layout?
           (->> (:shapes parent)
                (filter #(ctl/layout-absolute? objects %)))
           (:shapes parent))
@@ -280,8 +311,11 @@
        (and has-modifiers? parent? (not root?))
        (set-children-modifiers children-modifiers objects bounds parent transformed-parent-bounds ignore-constraints)
 
-       layout?
+       flex-layout?
-       (set-layout-modifiers children-layout objects bounds parent transformed-parent-bounds))
+       (set-flex-layout-modifiers children-layout objects bounds parent transformed-parent-bounds))
+
+       grid-layout?
+       (set-grid-layout-modifiers objects bounds parent transformed-parent-bounds))
 
      ;; Auto-width/height can change the positions in the parent so we need to recalculate
      (cond-> autolayouts auto? (conj (:id parent)))]))
@@ -377,7 +411,7 @@
 
                       to-reflow
                       (cond-> to-reflow
-                        (and (ctl/layout-descent? objects parent-base)
+                        (and (ctl/flex-layout-descent? objects parent-base)
                              (not= uuid/zero (:frame-id parent-base)))
                         (conj (:frame-id parent-base)))]
                   (recur modif-tree
@@ -409,6 +443,7 @@
   ([old-modif-tree modif-tree objects
     {:keys [ignore-constraints snap-pixel? snap-precision snap-ignore-axis]
      :or {ignore-constraints false snap-pixel? false snap-precision 1 snap-ignore-axis nil}}]
+
    (let [objects (-> objects
                      (cond-> (some? old-modif-tree)
                        (apply-structure-modifiers old-modif-tree))

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

@@ -14,6 +14,7 @@
 ;; :layout-flex-dir        ;; :row, :row-reverse, :column, :column-reverse
 ;; :layout-gap-type        ;; :simple, :multiple
 ;; :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)
@@ -21,6 +22,10 @@
 ;; :layout-padding-type    ;; :simple, :multiple
 ;; :layout-padding         ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative
 
+;; layout-grid-rows
+;; layout-grid-columns
+;; layout-justify-items
+
 ;; ITEMS
 ;; :layout-item-margin      ;; {:m1 0 :m2 0 :m3 0 :m4 0}
 ;; :layout-item-margin-type ;; :simple :multiple
@@ -34,15 +39,25 @@
 ;; :layout-item-z-index
 
 (s/def ::layout  #{:flex :grid})
+
 (s/def ::layout-flex-dir #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script
 (s/def ::layout-gap-type #{:simple :multiple})
 (s/def ::layout-gap ::us/safe-number)
+
 (s/def ::layout-align-items #{:start :end :center :stretch})
+(s/def ::layout-justify-items #{:start :end :center :stretch})
 (s/def ::layout-align-content #{:start :end :center :space-between :space-around :space-evenly :stretch})
 (s/def ::layout-justify-content #{:start :center :end :space-between :space-around :space-evenly})
 (s/def ::layout-wrap-type #{:wrap :nowrap :no-wrap}) ;;TODO remove no-wrap after script
 (s/def ::layout-padding-type #{:simple :multiple})
 
+(s/def :grid/type #{:fr :auto :fixed})
+(s/def :grid/value (s/nilable ::us/string))
+(s/def ::grid-definition (s/keys :opt-un [:grid/type
+                                          :grid/value]))
+(s/def ::layout-grid-rows (s/coll-of ::grid-definition :kind vector?))
+(s/def ::layout-grid-columns (s/coll-of ::grid-definition :kind vector?))
+
 (s/def ::p1 ::us/safe-number)
 (s/def ::p2 ::us/safe-number)
 (s/def ::p3 ::us/safe-number)
@@ -67,7 +82,13 @@
                    ::layout-padding
                    ::layout-justify-content
                    ::layout-align-items
-                   ::layout-align-content]))
+                   ::layout-align-content
+
+                   ;; grid
+                   ::layout-justify-items
+                   ::layout-grid-rows
+                   ::layout-grid-columns
+                   ]))
 
 (s/def ::m1 ::us/safe-number)
 (s/def ::m2 ::us/safe-number)
@@ -100,26 +121,61 @@
                    ::layout-item-absolute
                    ::layout-item-z-index]))
 
-(defn layout?
+(defn flex-layout?
   ([objects id]
-   (layout? (get objects id)))
+   (flex-layout? (get objects id)))
   ([shape]
-   (and (= :frame (:type shape)) (= :flex (:layout shape)))))
+   (and (= :frame (:type shape))
+        (= :flex (:layout shape)))))
 
-(defn layout-immediate-child? [objects shape]
+(defn grid-layout?
+  ([objects id]
+   (grid-layout? (get objects id)))
+  ([shape]
+   (and (= :frame (:type shape))
+        (= :grid (:layout shape)))))
+
+(defn any-layout?
+  ([objects id]
+   (any-layout? (get objects id)))
+
+  ([shape]
+   (or (flex-layout? shape) (grid-layout? shape))))
+
+(defn flex-layout-immediate-child? [objects shape]
   (let [parent-id (:parent-id shape)
         parent (get objects parent-id)]
-    (layout? parent)))
+    (flex-layout? parent)))
 
-(defn layout-immediate-child-id? [objects id]
+(defn any-layout-immediate-child? [objects shape]
+  (let [parent-id (:parent-id shape)
+        parent (get objects parent-id)]
+    (any-layout? parent)))
+
+(defn flex-layout-immediate-child-id? [objects id]
   (let [parent-id (dm/get-in objects [id :parent-id])
         parent (get objects parent-id)]
-    (layout? parent)))
+    (flex-layout? parent)))
 
-(defn layout-descent? [objects shape]
+(defn any-layout-immediate-child-id? [objects id]
+  (let [parent-id (dm/get-in objects [id :parent-id])
+        parent (get objects parent-id)]
+    (any-layout? parent)))
+
+(defn flex-layout-descent? [objects shape]
   (let [frame-id (:frame-id shape)
         frame (get objects frame-id)]
-    (layout? frame)))
+    (flex-layout? frame)))
+
+(defn grid-layout-descent? [objects shape]
+  (let [frame-id (:frame-id shape)
+        frame (get objects frame-id)]
+    (grid-layout? frame)))
+
+(defn any-layout-descent? [objects shape]
+  (let [frame-id (:frame-id shape)
+        frame (get objects frame-id)]
+    (any-layout? frame)))
 
 (defn inside-layout?
   "Check if the shape is inside a layout"
@@ -360,7 +416,7 @@
 
 (defn change-h-sizing?
   [frame-id objects children-ids]
-  (and (layout? objects frame-id)
+  (and (flex-layout? objects frame-id)
        (auto-width? objects frame-id)
        (or (and (col? objects frame-id)
                 (->> children-ids
@@ -373,7 +429,7 @@
 
 (defn change-v-sizing?
   [frame-id objects children-ids]
-  (and (layout? objects frame-id)
+  (and (flex-layout? objects frame-id)
        (auto-height? objects frame-id)
        (or (and (col? objects frame-id)
                 (some (partial fill-height? objects) children-ids))

frontend/src/app/main/data/workspace.cljs

@@ -714,7 +714,7 @@
         ;; Fix the sizing when moving a shape
         (pcb/update-shapes parents
                            (fn [parent]
-                             (if (ctl/layout? parent)
+                             (if (ctl/flex-layout? parent)
                                (cond-> parent
                                  (ctl/change-h-sizing? (:id parent) objects (:shapes parent))
                                  (assoc :layout-item-h-sizing :fix)

frontend/src/app/main/data/workspace/drawing/box.cljs

@@ -82,8 +82,9 @@
             focus      (:workspace-focus-selected state)
 
             fid        (ctst/top-nested-frame objects initial)
-            layout?    (ctl/layout? objects fid)
+
-            drop-index (when layout? (gsl/get-drop-index fid objects initial))
+            flex-layout? (ctl/flex-layout? objects fid)
+            drop-index   (when flex-layout? (gsl/get-drop-index fid objects initial))
 
             shape   (get-in state [:workspace-drawing :object])
             shape   (-> shape

frontend/src/app/main/data/workspace/drawing/curve.cljs

@@ -51,8 +51,8 @@
             content      (get-in state [:workspace-drawing :object :content] [])
             position     (gpt/point (get-in content [0 :params] nil))
             frame-id     (ctst/top-nested-frame objects position)
-            layout?    (ctl/layout? objects frame-id)
+            flex-layout? (ctl/flex-layout? objects frame-id)
-            drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
+            drop-index   (when flex-layout? (gsl/get-drop-index frame-id objects position))]
         (-> state
             (assoc-in [:workspace-drawing :object :frame-id] frame-id)
             (cond-> (some? drop-index)

frontend/src/app/main/data/workspace/modifiers.cljs

@@ -180,7 +180,7 @@
         child-set (set (get-in objects [target-frame-id :shapes]))
 
         target-frame        (get objects target-frame-id)
-        target-layout? (ctl/layout? target-frame)
+        target-flex-layout? (ctl/flex-layout? target-frame)
 
         children-ids (concat (:shapes target-frame) selected)
 
@@ -201,7 +201,7 @@
         (fn [modif-tree [original-frame shapes]]
           (let [shapes (->> shapes (d/removev #(= target-frame-id %)))
                 shapes (cond->> shapes
-                         (and target-layout? (= original-frame target-frame-id))
+                         (and target-flex-layout? (= original-frame target-frame-id))
                          ;; When movining inside a layout frame remove the shapes that are not immediate children
                          (filterv #(contains? child-set %)))
                 children-ids (->> (dm/get-in objects [original-frame :shapes])
@@ -219,7 +219,7 @@
                   (cond-> v-sizing?
                     (update-in [original-frame :modifiers] ctm/change-property :layout-item-v-sizing :fix)))
 
-              (and target-layout? (= original-frame target-frame-id))
+              (and target-flex-layout? (= original-frame target-frame-id))
               (update-in [target-frame-id :modifiers] ctm/add-children shapes drop-index))))]
 
     (as-> modif-tree $

frontend/src/app/main/data/workspace/path/drawing.cljs

@@ -244,8 +244,8 @@
             content      (get-in state [:workspace-drawing :object :content] [])
             position     (gpt/point (get-in content [0 :params] nil))
             frame-id     (ctst/top-nested-frame objects position)
-            layout?    (ctl/layout? objects frame-id)
+            flex-layout? (ctl/flex-layout? objects frame-id)
-            drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
+            drop-index   (when flex-layout? (gsl/get-drop-index frame-id objects position))]
         (-> state
             (assoc-in [:workspace-drawing :object :frame-id] frame-id)
             (cond-> (some? drop-index)

frontend/src/app/main/data/workspace/shape_layout.cljs

@@ -53,11 +53,25 @@
    :layout-padding         {:p1 0 :p2 0 :p3 0 :p4 0}})
 
 (def initial-grid-layout ;; TODO
-  {:layout :grid})
+  {:layout :grid
+   :layout-gap-type        :multiple
+   :layout-gap             {:row-gap 0 :column-gap 0}
+   :layout-align-items     :start
+   :layout-align-content   :stretch
+   :layout-justify-items   :start
+   :layout-justify-content :start
+   :layout-padding-type    :simple
+   :layout-padding         {:p1 0 :p2 0 :p3 0 :p4 0}
+
+   :layout-grid-rows       []
+   :layout-grid-columns    []})
 
 (defn get-layout-initializer
   [type from-frame?]
-  (let [initial-layout-data (if (= type :flex) initial-flex-layout initial-grid-layout)]
+  (let [initial-layout-data
+        (case type
+          :flex initial-flex-layout
+          :grid initial-grid-layout)]
     (fn [shape]
       (-> shape
           (merge initial-layout-data)
@@ -288,7 +302,7 @@
          (dwu/commit-undo-transaction undo-id))))))
 
 (defn create-layout
-  []
+  [type]
   (ptk/reify ::create-layout
     ptk/WatchEvent
     (watch [_ state _]
@@ -303,11 +317,11 @@
         (if (and single? is-frame?)
           (rx/of
            (dwu/start-undo-transaction undo-id)
-           (create-layout-from-id [(first selected)] :flex true)
+           (create-layout-from-id [(first selected)] type true)
            (dwu/commit-undo-transaction undo-id))
           (rx/of
            (dwu/start-undo-transaction undo-id)
-           (create-layout-from-selection :flex)
+           (create-layout-from-selection type)
            (dwu/commit-undo-transaction undo-id)))))))
 
 (defn toggle-layout-flex
@@ -320,12 +334,12 @@
             selected         (wsh/lookup-selected state)
             selected-shapes  (map (d/getf objects) selected)
             single?          (= (count selected-shapes) 1)
-            has-flex-layout? (and single? (ctl/layout? objects (:id (first selected-shapes))))]
+            has-flex-layout? (and single? (ctl/flex-layout? objects (:id (first selected-shapes))))]
 
         (when (not= 0 (count selected))
           (if has-flex-layout?
             (rx/of (remove-layout selected))
-            (rx/of (create-layout))))))))
+            (rx/of (create-layout :flex))))))))
 
 (defn update-layout
   [ids changes]

frontend/src/app/main/data/workspace/shapes.cljs

@@ -18,7 +18,6 @@
    [app.common.types.shape :as cts]
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.interactions :as ctsi]
-   [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]
    [app.main.data.comments :as dc]
    [app.main.data.workspace.changes :as dch]
@@ -194,10 +193,6 @@
   [file page objects ids it components-v2]
   (let [lookup  (d/getf objects)
 
-        layout-ids (->> ids
-                        (mapcat (partial cph/get-parent-ids objects))
-                        (filter (partial ctl/layout? objects)))
-
         groups-to-unmask
         (reduce (fn [group-ids id]
                   ;; When the shape to delete is the mask of a masked group,
@@ -319,7 +314,6 @@
            (dc/detach-comment-thread ids)
            (ptk/data-event :layout/update all-parents)
            (dch/commit-changes changes)
-           (ptk/data-event :layout/update layout-ids)
            (dwu/commit-undo-transaction undo-id))))
 
 (defn create-and-add-shape

frontend/src/app/main/data/workspace/transforms.cljs

@@ -438,9 +438,10 @@
                    (cph/selected-with-children objects selected))
 
              exclude-frames-siblings
-             (into exclude-frames
+             exclude-frames
+             #_(into exclude-frames
                    (comp (mapcat (partial cph/get-siblings-ids objects))
-                         (filter (partial ctl/layout-immediate-child-id? objects)))
+                         (filter (partial ctl/any-layout-immediate-child-id? objects)))
                    selected)
 
              position (->> ms/mouse-position
@@ -472,8 +473,8 @@
                          (let [position       (gpt/add from-position move-vector)
                                exclude-frames (if mod? exclude-frames exclude-frames-siblings)
                                target-frame   (ctst/top-nested-frame objects position exclude-frames)
-                               layout?      (ctl/layout? objects target-frame)
+                               flex-layout?   (ctl/flex-layout? objects target-frame)
-                               drop-index   (when layout? (gsl/get-drop-index target-frame objects position))]
+                               drop-index     (when flex-layout? (gsl/get-drop-index target-frame objects position))]
                            [move-vector target-frame drop-index])))
 
                       (rx/take-until stopper))]
@@ -529,7 +530,8 @@
             get-new-position
             (fn [parent-id position]
               (let [parent (get objects parent-id)]
-                (when (ctl/layout? parent)
+                (cond
+                  (ctl/flex-layout? parent)
                   (if (or
                        (and (ctl/reverse? parent)
                             (or (= direction :left)
@@ -538,7 +540,12 @@
                             (or (= direction :right)
                                 (= direction :down))))
                     (dec position)
-                    (+ position 2)))))
+                    (+ position 2))
+
+                  ;; TODO: GRID
+                  (ctl/grid-layout? parent)
+                  nil
+                  )))
 
             add-children-position
             (fn [[parent-id children]]
@@ -643,7 +650,7 @@
       (let [objects (wsh/lookup-page-objects state)
             selected (wsh/lookup-selected state {:omit-blocked? true})
             selected-shapes (->> selected (map (d/getf objects)))]
-        (if (every? #(and (ctl/layout-immediate-child? objects %)
+        (if (every? #(and (ctl/any-layout-immediate-child? objects %)
                           (not (ctl/layout-absolute? %)))
                     selected-shapes)
           (rx/of (reorder-selected-layout-child direction))

frontend/src/app/main/refs.cljs

@@ -405,7 +405,7 @@
      (let [objects  (wsh/lookup-page-objects state)]
        (into []
              (comp (map (d/getf objects))
-                   (filter (partial ctl/layout-immediate-child? objects)))
+                   (filter (partial ctl/flex-layout-immediate-child? objects)))
              ids)))
    st/state =))
 
@@ -478,22 +478,22 @@
 (defn workspace-text-modifier-by-id [id]
   (l/derived #(get % id) workspace-text-modifier =))
 
-(defn is-layout-child?
+(defn is-flex-layout-child?
   [ids]
   (l/derived
    (fn [objects]
      (->> ids
           (map (d/getf objects))
-          (some (partial ctl/layout-immediate-child? objects))))
+          (some (partial ctl/flex-layout-immediate-child? objects))))
    workspace-page-objects))
 
-(defn all-layout-child?
+(defn all-flex-layout-child?
   [ids]
   (l/derived
    (fn [objects]
      (->> ids
           (map (d/getf objects))
-          (every? (partial ctl/layout-immediate-child? objects))))
+          (every? (partial ctl/flex-layout-immediate-child? objects))))
    workspace-page-objects))
 
 (defn get-flex-child-viewer
@@ -503,7 +503,7 @@
      (let [objects (wsh/lookup-viewer-objects state page-id)]
        (into []
              (comp (map (d/getf objects))
-                   (filter (partial ctl/layout-immediate-child? objects)))
+                   (filter (partial ctl/flex-layout-immediate-child? objects)))
              ids)))
    st/state =))
 

frontend/src/app/main/ui/components/shape_icon.cljs

@@ -20,12 +20,14 @@
       i/component-copy)
     (case (:type shape)
       :frame (cond
-               (and (ctl/layout? shape) (ctl/col? shape))
+               (and (ctl/flex-layout? shape) (ctl/col? shape))
                i/layout-columns
 
-               (and (ctl/layout? shape) (ctl/row? shape))
+               (and (ctl/flex-layout? shape) (ctl/row? shape))
                i/layout-rows
 
+               ;; TODO: GRID ICON
+
                :else
                i/artboard)
       :image i/image

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs

@@ -308,8 +308,8 @@
         layout-type         (:layout values)
 
         on-add-layout
-        (fn [_]
+        (fn [type]
-          (st/emit! (dwsl/create-layout))
+          (st/emit! (dwsl/create-layout type))
           (reset! open? true))
 
 
@@ -319,13 +319,13 @@
           (reset! open? false))
 
         ;; Uncomment when activating the grid options
-        ;; set-flex            (fn []
+        set-flex            (fn []
-        ;;                       (st/emit! (dwsl/remove-layout ids))
+                              (st/emit! (dwsl/remove-layout ids))
-        ;;                       (on-add-layout :flex))
+                              (on-add-layout :flex))
-        ;;
+        
-        ;; set-grid            (fn []
+        set-grid            (fn []
-        ;;                       (st/emit! (dwsl/remove-layout ids))
+                              (st/emit! (dwsl/remove-layout ids))
-        ;;                       (on-add-layout :grid))
+                              (on-add-layout :grid))
 
         ;; Flex-direction
 
@@ -394,7 +394,7 @@
        [:span "Layout"]
        (if (and (not multiple) (:layout values))
          [:div.title-actions
-          #_[:div.layout-btns
+          [:div.layout-btns
              [:button {:on-click set-flex
                        :class (dom/classnames
                                :active (= :flex layout-type))} "Flex"]

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -83,9 +83,9 @@
         selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
         selection-parents     (mf/deref selection-parents-ref)
 
-        flex-child? (->> selection-parents (some ctl/layout?))
+        flex-child? (->> selection-parents (some ctl/flex-layout?))
         absolute? (ctl/layout-absolute? shape)
-        flex-container? (ctl/layout? shape)
+        flex-container? (ctl/flex-layout? shape)
         flex-auto-width? (ctl/auto-width? shape)
         flex-fill-width? (ctl/fill-width? shape)
         flex-auto-height? (ctl/auto-height? shape)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs

@@ -30,8 +30,8 @@
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
 
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
@@ -41,7 +41,7 @@
                         :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
      
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu
         {:ids ids
          :type type
@@ -49,7 +49,7 @@
          :is-layout-child? true
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
      [:& layer-menu {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -32,7 +32,7 @@
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
         is-layout-child? (mf/deref is-layout-child-ref)
 
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
@@ -43,14 +43,14 @@
                         :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
      
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu {:ids ids
                              :type type
                              :values layout-item-values
                              :is-layout-child? true
                              :is-layout-container? false
                              :shape shape}])
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
      [:& layer-menu {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs

@@ -36,9 +36,9 @@
         layout-item-values (select-keys shape layout-item-attrs)
         [comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
-        is-layout-container? (ctl/layout? shape)
+        is-flex-layout-container? (ctl/flex-layout? shape)]
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids [(:id shape)]
@@ -48,18 +48,18 @@
      [:& component-menu {:ids comp-ids
                          :values comp-values
                          :shape-name (:name shape)}]
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
-     (when (or is-layout-child? is-layout-container?)
+     (when (or is-flex-layout-child? is-flex-layout-container?)
        [:& layout-item-menu
         {:ids ids
          :type type
          :values layout-item-values
-         :is-layout-child? is-layout-child?
+         :is-layout-child? is-flex-layout-child?
-         :is-layout-container? is-layout-container?
+         :is-layout-container? is-flex-layout-container?
          :shape shape}])
 
      [:& layer-menu {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -36,8 +36,8 @@
         file-id                  (unchecked-get props "file-id")
         layout-container-values  (select-keys shape layout-container-flex-attrs)
         ids                      [(:id shape)]
-        is-layout-child-ref     (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child?        (mf/deref is-layout-child-ref)
+        is-flex-layout-child?    (mf/deref is-flex-layout-child-ref)
         is-layout-child-absolute? (ctl/layout-absolute? shape)
 
         type :group
@@ -58,7 +58,7 @@
      [:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu
         {:type type
          :ids layout-item-ids
@@ -66,7 +66,7 @@
          :is-layout-container? false
          :values layout-item-values}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids constraint-ids :values constraint-values}])
 
      [:& layer-menu {:type type :ids layer-ids :values layer-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs

@@ -32,8 +32,8 @@
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -42,7 +42,7 @@
                         :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
      
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu
         {:ids ids
          :type type
@@ -50,7 +50,7 @@
          :is-layout-child? true
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -294,17 +294,17 @@
         all-types (into #{} (map :type shapes))
 
         ids (->> shapes (map :id))
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
 
         has-text? (contains? all-types :text)
 
-        has-layout-container? (->> shapes (some ctl/layout?))
+        has-flex-layout-container? (->> shapes (some ctl/flex-layout?))
 
-        all-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-layout-child? ids))
+        all-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-flex-layout-child? ids))
-        all-layout-child? (mf/deref all-layout-child-ref)
+        all-flex-layout-child? (mf/deref all-flex-layout-child-ref)
 
-        all-layout-container? (->> shapes (every? ctl/layout?))
+        all-flex-layout-container? (->> shapes (every? ctl/flex-layout?))
 
         [measure-ids    measure-values]    (get-attrs shapes objects :measure)
 
@@ -342,15 +342,15 @@
 
      [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}]
 
-     (when (or is-layout-child? has-layout-container?)
+     (when (or is-flex-layout-child? has-flex-layout-container?)
        [:& layout-item-menu
         {:type type
          :ids layout-item-ids
-         :is-layout-child? all-layout-child?
+         :is-layout-child? all-flex-layout-child?
-         :is-layout-container? all-layout-container?
+         :is-layout-container? all-flex-layout-container?
          :values layout-item-values}])
 
-     (when-not (or (empty? constraint-ids) is-layout-child?)
+     (when-not (or (empty? constraint-ids) is-flex-layout-child?)
        [:& constraints-menu {:ids constraint-ids :values constraint-values}])
 
      (when-not (empty? layer-ids)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -32,8 +32,8 @@
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -42,14 +42,14 @@
                         :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu {:ids ids
                              :type type
                              :values layout-item-values
                              :is-layout-child? true
                              :is-layout-container? false
                              :shape shape}])
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids
                              :values constraint-values}])
      [:& layer-menu {:ids ids

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -32,8 +32,8 @@
         stroke-values (select-keys shape stroke-attrs)
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -41,7 +41,7 @@
                         :values measure-values
                         :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu
         {:ids ids
          :type type

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -106,8 +106,8 @@
         layout-item-values (select-keys shape layout-item-attrs)
         layout-container-values (select-keys shape layout-container-flex-attrs)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)]
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
 
     (when (contains? svg-elements tag)
@@ -118,7 +118,7 @@
                           :shape shape}]
        [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
-       (when is-layout-child?
+       (when is-flex-layout-child?
          [:& layout-item-menu
           {:ids ids
            :type type
@@ -126,7 +126,7 @@
            :is-layout-child? true
            :shape shape}])
 
-       (when (or (not is-layout-child?) is-layout-child-absolute?)
+       (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
          [:& constraints-menu {:ids ids
                                :values constraint-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -28,8 +28,8 @@
   (let [ids    [(:id shape)]
         type   (:type shape)
 
-        is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids))
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
-        is-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
         layout-container-values (select-keys shape layout-container-flex-attrs)
         is-layout-child-absolute? (ctl/layout-absolute? shape)
         state-map    (mf/deref refs/workspace-editor-state)
@@ -76,7 +76,7 @@
        :shape shape}]
      [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}]
 
-     (when is-layout-child?
+     (when is-flex-layout-child?
        [:& layout-item-menu
         {:ids ids
          :type type
@@ -84,7 +84,7 @@
          :is-layout-child? true
          :shape shape}])
 
-     (when (or (not is-layout-child?) is-layout-child-absolute?)
+     (when (or (not is-flex-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu
         {:ids ids
          :values (select-keys shape constraint-attrs)}])

frontend/src/app/main/ui/workspace/viewport.cljs

@@ -338,7 +338,7 @@
               :zoom zoom
               :modifiers modifiers}]
 
-            (when (ctl/layout? outlined-frame)
+            (when (ctl/any-layout? outlined-frame)
               [:g.ghost-outline
                [:& outline/shape-outlines
                 {:objects base-objects

frontend/src/app/main/ui/workspace/viewport/debug.cljs

@@ -68,7 +68,7 @@
 
         shape (or selected-frame (get objects hover-top-frame-id))]
 
-    (when (and shape (ctl/layout? shape))
+    (when (and shape (ctl/flex-layout? shape))
       (let [row? (ctl/row? shape)
             col? (ctl/col? shape)
 

frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs

@@ -268,7 +268,7 @@
         frame           (mf/deref (refs/object-by-id frame-id))
         selrect         (gsh/selection-rect selected-shapes)]
 
-    (when-not (ctl/layout? frame)
+    (when-not (ctl/any-layout? frame)
       [:g.distance
        [:& shape-distance
         {:selrect selrect

frontend/src/app/main/ui/workspace/viewport/snap_points.cljs

@@ -175,7 +175,7 @@
 
         shapes    (if drawing [drawing] shapes)
         frame-id (snap/snap-frame-id shapes)]
-    (when-not (ctl/layout? objects frame-id)
+    (when-not (ctl/any-layout? objects frame-id)
       [:& snap-feedback {:shapes shapes
                          :page-id page-id
                          :remove-snap? remove-snap?

frontend/src/app/util/snap_data.cljs

@@ -82,7 +82,7 @@
         grid-y-data (get-grids-snap-points frame :y)]
 
     (cond-> page-data
-      (not (ctl/layout-descent? objects frame))
+      (not (ctl/any-layout-descent? objects frame))
 
       (-> ;; Update root frame information
        (assoc-in [uuid/zero :objects-data frame-id] frame-data)
@@ -106,7 +106,7 @@
                                  :id (:id shape)
                                  :pt %)))]
     (cond-> page-data
-      (not (ctl/layout-descent? objects shape))
+      (not (ctl/any-layout-descent? objects shape))
       (-> (assoc-in [frame-id :objects-data (:id shape)] shape-data)
           (update-in [frame-id :x] (make-insert-tree-data shape-data :x))
           (update-in [frame-id :y] (make-insert-tree-data shape-data :y))))))