✨ Grid layout infrastructure

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

@@ -47,12 +47,12 @@
     ptk/UpdateEvent
     (update [_ state]
 
-      (let [objects  (wsh/lookup-page-objects state)
-            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)
-            drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
+      (let [objects      (wsh/lookup-page-objects state)
+            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)
+            flex-layout? (ctl/flex-layout? objects frame-id)
+            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

@@ -179,8 +179,8 @@
   (let [origin-frame-ids (->> selected (group-by #(get-in objects [% :frame-id])))
         child-set (set (get-in objects [target-frame-id :shapes]))
 
-        target-frame (get objects target-frame-id)
-        target-layout? (ctl/layout? target-frame)
+        target-frame        (get objects target-frame-id)
+        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

@@ -240,12 +240,12 @@
   (ptk/reify ::setup-frame-path
     ptk/UpdateEvent
     (update [_ state]
-      (let [objects  (wsh/lookup-page-objects state)
-            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)
-            drop-index (when layout? (gsl/get-drop-index frame-id objects position))]
+      (let [objects      (wsh/lookup-page-objects state)
+            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)
+            flex-layout? (ctl/flex-layout? objects frame-id)
+            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
@@ -469,11 +470,11 @@
 
                       (rx/map
                        (fn [[move-vector mod?]]
-                         (let [position     (gpt/add from-position move-vector)
+                         (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)
-                               drop-index   (when layout? (gsl/get-drop-index target-frame objects position))]
+                               target-frame   (ctst/top-nested-frame objects position exclude-frames)
+                               flex-layout?   (ctl/flex-layout? objects target-frame)
+                               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 [_]
-          (st/emit! (dwsl/create-layout))
+        (fn [type]
+          (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 []
-        ;;                       (st/emit! (dwsl/remove-layout ids))
-        ;;                       (on-add-layout :flex))
-        ;;
-        ;; set-grid            (fn []
-        ;;                       (st/emit! (dwsl/remove-layout ids))
-        ;;                       (on-add-layout :grid))
+        set-flex            (fn []
+                              (st/emit! (dwsl/remove-layout ids))
+                              (on-add-layout :flex))
+        
+        set-grid            (fn []
+                              (st/emit! (dwsl/remove-layout ids))
+                              (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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
-        is-layout-container? (ctl/layout? shape)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        is-flex-layout-child? (mf/deref is-flex-layout-child-ref)
+        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-container? is-layout-container?
+         :is-layout-child? is-flex-layout-child?
+         :is-layout-container? is-flex-layout-container?
          :shape shape}])
 
      [:& layer-menu {:ids ids

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

@@ -29,15 +29,15 @@
   {::mf/wrap [mf/memo]
    ::mf/wrap-props false}
   [props]
-  (let [shape                   (unchecked-get props "shape")
-        shape-with-children     (unchecked-get props "shape-with-children")
-        shared-libs             (unchecked-get props "shared-libs")
-        objects                 (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
-        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-layout-child?        (mf/deref is-layout-child-ref)
+  (let [shape                    (unchecked-get props "shape")
+        shape-with-children      (unchecked-get props "shape-with-children")
+        shared-libs              (unchecked-get props "shared-libs")
+        objects                  (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
+        file-id                  (unchecked-get props "file-id")
+        layout-container-values  (select-keys shape layout-container-flex-attrs)
+        ids                      [(:id shape)]
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref all-layout-child-ref)
+        all-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/all-flex-layout-child? ids))
+        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-container? all-layout-container?
+         :is-layout-child? all-flex-layout-child?
+         :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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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-layout-child? (mf/deref is-layout-child-ref)
+        is-flex-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-flex-layout-child? ids))
+        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))))))