✨ Child element options

frontend/src/app/main/refs.cljs

@@ -501,7 +501,25 @@
      (->> ids
           (map (d/getf objects))
           (every? (partial ctl/any-layout-immediate-child? objects))))
-   workspace-page-objects))
+   workspace-page-objects =))
+
+(defn flex-layout-child?
+  [ids]
+  (l/derived
+   (fn [objects]
+     (->> ids
+          (map (d/getf objects))
+          (every? (partial ctl/flex-layout-immediate-child? objects))))
+   workspace-page-objects =))
+
+(defn grid-layout-child?
+  [ids]
+  (l/derived
+   (fn [objects]
+     (->> ids
+          (map (d/getf objects))
+          (every? (partial ctl/grid-layout-immediate-child? objects))))
+   workspace-page-objects =))
 
 (defn get-flex-child-viewer
   [ids page-id]

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

@@ -177,7 +177,7 @@
         (get-layout-flex-icon :align-self align is-col?)])]))
 
 (mf/defc layout-item-menu
-  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]}
+  {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]}
   [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent?] :as props}]
 
   (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
@@ -285,7 +285,7 @@
                                 :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix)
                                 :on-change-behavior on-change-behavior}]]
 
-         (when is-layout-child?
+         (when (and is-layout-child? is-flex-parent?)
            [:div.layout-row
             [:div.row-title "Align"]
             [:div.btn-wrapper

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

@@ -33,6 +33,12 @@
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -47,6 +53,8 @@
          :type type
          :values layout-item-values
          :is-layout-child? true
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :shape shape}])
 
      (when (or (not is-layout-child?) is-layout-child-absolute?)

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

@@ -34,6 +34,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -48,6 +55,8 @@
                              :values layout-item-values
                              :is-layout-child? true
                              :is-layout-container? false
+                             :is-flex-parent? is-flex-parent?
+                             :is-grid-parent? is-grid-parent?
                              :shape shape}])
      (when (or (not is-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids

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

@@ -38,6 +38,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-flex-layout-container? (ctl/flex-layout? shape)
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
@@ -58,6 +65,8 @@
         {:ids ids
          :type type
          :values layout-item-values
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :is-layout-child? is-layout-child?
          :is-layout-container? is-flex-layout-container?
          :shape shape}])

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

@@ -38,6 +38,13 @@
         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)
+
+        is-flex-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)
 
         type :group
@@ -64,6 +71,8 @@
          :ids layout-item-ids
          :is-layout-child? true
          :is-layout-container? false
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
      (when (or (not is-layout-child?) is-layout-child-absolute?)

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

@@ -34,6 +34,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -48,6 +55,8 @@
          :type type
          :values layout-item-values
          :is-layout-child? true
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :shape shape}])
 
      (when (or (not is-layout-child?) is-layout-child-absolute?)

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

@@ -297,6 +297,12 @@
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         has-text? (contains? all-types :text)
 
         has-flex-layout-container? (->> shapes (some ctl/flex-layout?))
@@ -348,6 +354,8 @@
          :ids layout-item-ids
          :is-layout-child? all-layout-child?
          :is-layout-container? all-flex-layout-container?
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :values layout-item-values}])
 
      (when-not (or (empty? constraint-ids) is-layout-child?)

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

@@ -34,6 +34,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -48,6 +55,8 @@
                              :values layout-item-values
                              :is-layout-child? true
                              :is-layout-container? false
+                             :is-flex-parent? is-flex-parent?
+                             :is-grid-parent? is-grid-parent?
                              :shape shape}])
      (when (or (not is-layout-child?) is-layout-child-absolute?)
        [:& constraints-menu {:ids ids

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

@@ -32,8 +32,15 @@
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
     [:*
      [:& measures-menu {:ids ids
@@ -47,6 +54,8 @@
          :type type
          :values layout-item-values
          :is-layout-child? true
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :shape shape}])
 
      (when (or (not is-layout-child?) is-layout-child-absolute?)

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

@@ -108,6 +108,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-ref)
+
         is-layout-child-absolute? (ctl/layout-absolute? shape)]
 
     (when (contains? svg-elements tag)
@@ -124,6 +131,8 @@
            :type type
            :values layout-item-values
            :is-layout-child? true
+           :is-flex-parent? is-flex-parent?
+           :is-grid-parent? is-grid-parent?
            :shape shape}])
 
        (when (or (not is-layout-child?) is-layout-child-absolute?)

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

@@ -30,6 +30,13 @@
 
         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-parent-ref (mf/use-memo (mf/deps ids) #(refs/flex-layout-child? ids))
+        is-flex-parent? (mf/deref is-flex-parent-ref)
+
+        is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
+        is-grid-parent? (mf/deref is-grid-parent-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)
@@ -82,6 +89,8 @@
          :type type
          :values layout-item-values
          :is-layout-child? true
+         :is-flex-parent? is-flex-parent?
+         :is-grid-parent? is-grid-parent?
          :shape shape}])
 
      (when (or (not is-layout-child?) is-layout-child-absolute?)