✨ Hug content to frames

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

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.pages.helpers :as cph]
    [app.common.types.modifiers :as ctm]
+   [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.changes :as dwc]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.transforms :as dwt]
@@ -68,7 +69,6 @@
         (rx/of (dwc/update-shapes ids #(merge % initial-grid-layout))
                (update-layout-positions ids))))))
 
-
 (defn remove-layout
   [ids]
   (ptk/reify ::remove-layout
@@ -91,6 +91,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (let [objects (wsh/lookup-page-objects state)
-            parent-ids (->> ids (map #(cph/get-parent-id objects %)))]
+            parent-ids (->> ids (map #(cph/get-parent-id objects %)))
+            layout-ids (->> ids (filter (comp ctl/layout? (d/getf objects))))]
         (rx/of (dwc/update-shapes ids #(d/deep-merge (or % {}) changes))
-               (update-layout-positions parent-ids))))))
+               (update-layout-positions (d/concat-vec layout-ids parent-ids)))))))

frontend/src/app/main/refs.cljs

@@ -11,6 +11,7 @@
    [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.types.shape-tree :as ctt]
+   [app.common.types.shape.layout :as ctl]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.store :as st]
    [okulary.core :as l]))
@@ -442,7 +443,7 @@
   (l/derived
    (fn [objects]
      (->> ids
-          (some #(-> (cph/get-parent objects %) :layout))))
+          (some #(-> (cph/get-parent objects %) ctl/layout?))))
    workspace-page-objects))
 
 (defn get-flex-child-viewer?

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

@@ -80,7 +80,7 @@
 (mf/defc element-behavior
   [{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}]
   (let [fill? is-layout-child?
-        auto?  is-layout-container?]
+        auto? is-layout-container?]
 
     [:div.btn-wrapper
      [:div.layout-behavior.horizontal
@@ -98,7 +98,7 @@
       (when auto?
         [:button.behavior-btn.tooltip.tooltip-bottom
          {:alt "Fit content"
-          :class  (dom/classnames :active (= layout-item-v-sizing :auto))
+          :class  (dom/classnames :active (= layout-item-h-sizing :auto))
           :on-click #(on-change-behavior :h :auto)}
          i/auto-hug])]
 
@@ -188,9 +188,11 @@
                              :on-change-behavior on-change-behavior}]]
 
 
-      [:& margin-section {:values values
-                          :change-margin-style change-margin-style
-                          :on-margin-change on-margin-change}]
+      (when is-layout-child?
+        [:& margin-section {:values values
+                            :change-margin-style change-margin-style
+                            :on-margin-change on-margin-change}])
+
       [:div.advanced-ops-container
        [:button.advanced-ops.toltip.tooltip-bottom
         {:on-click toggle-open
@@ -200,12 +202,13 @@
 
       (when @open?
         [:div.advanced-ops-body
-         [:div.layout-row
-          [:div.direction-wrap.row-title "Align"]
-          [:div.btn-wrapper
-           [:& align-self-row {:is-col? is-col?
-                               :align-self align-self
-                               :set-align-self set-align-self}]]]
+         (when is-layout-child?
+           [:div.layout-row
+            [:div.direction-wrap.row-title "Align"]
+            [:div.btn-wrapper
+             [:& align-self-row {:is-col? is-col?
+                                 :align-self align-self
+                                 :set-align-self set-align-self}]]])
          [:div.input-wrapper
           (for  [item [:layout-item-max-h :layout-item-min-h :layout-item-max-w :layout-item-min-w]]
             [:div.tooltip.tooltip-bottom

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.workspace.sidebar.options.shapes.frame
   (:require
+   [app.common.types.shape.layout :as ctl]
    [app.main.features :as features]
    [app.main.refs :as refs]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
@@ -35,7 +36,8 @@
         layout-item-values (select-keys shape layout-item-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-child? (mf/deref is-layout-child-ref)
+        is-layout-container? (ctl/layout? shape)]
     [:*
      [:& measures-menu {:ids [(:id shape)]
                         :values measure-values
@@ -43,18 +45,17 @@
                         :shape shape}]
      [:& constraints-menu {:ids ids
                            :values constraint-values}]
-     (when layout-active?
-       [:*
-        [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}]
+     (when (or layout-active? is-layout-container?)
+       [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}])
 
-        (when is-layout-child?
-          [:& layout-item-menu
-           {:ids ids
-            :type type
-            :values layout-item-values
-            :is-layout-child? is-layout-child?
-            :is-layout-container? (:layout shape)
-            :shape shape}])])
+     (when (and layout-active? (or is-layout-child? is-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?
+         :shape shape}])
 
      [:& layer-menu {:ids ids
                      :type type