✨ Update grid on child changes

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

@@ -208,6 +208,11 @@
         parent (get objects parent-id)]
     (flex-layout? parent)))
 
+(defn grid-layout-immediate-child? [objects shape]
+  (let [parent-id (:parent-id shape)
+        parent (get objects parent-id)]
+    (grid-layout? parent)))
+
 (defn any-layout-immediate-child? [objects shape]
   (let [parent-id (:parent-id shape)
         parent (get objects parent-id)]
@@ -218,6 +223,11 @@
         parent (get objects parent-id)]
     (flex-layout? parent)))
 
+(defn grid-layout-immediate-child-id? [objects id]
+  (let [parent-id (dm/get-in objects [id :parent-id])
+        parent (get objects parent-id)]
+    (grid-layout? parent)))
+
 (defn any-layout-immediate-child-id? [objects id]
   (let [parent-id (dm/get-in objects [id :parent-id])
         parent (get objects parent-id)]

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

@@ -783,6 +783,12 @@
                                  (assoc :layout-item-v-sizing :fix))
                                parent)))
 
+        ;; Update grid layout
+        (pcb/update-shapes parents
+                           (fn [parent]
+                             (cond-> parent
+                               (ctl/grid-layout? parent)
+                               (ctl/assign-cells))))
         ;; Resize parent containers that need to
         (pcb/resize-parents parents))))
 
@@ -1800,7 +1806,9 @@
 
                   changes  (-> (dws/prepare-duplicate-changes all-objects page selected delta it libraries library-data file-id)
                                (pcb/amend-changes (partial process-rchange media-idx))
-                               (pcb/amend-changes (partial change-add-obj-index paste-objects selected index)))
+                               (pcb/amend-changes (partial change-add-obj-index paste-objects selected index))
+                               (cond-> (ctl/grid-layout? all-objects parent-id)
+                                 (pcb/update-shapes [parent-id] ctl/assign-cells)))
 
                   ;; Adds a resize-parents operation so the groups are updated. We add all the new objects
                   new-objects-ids (->> changes :redo-changes (filter #(= (:type %) :add-obj)) (mapv :id))

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

@@ -18,6 +18,7 @@
    [app.common.types.file :as ctf]
    [app.common.types.page :as ctp]
    [app.common.types.shape.interactions :as ctsi]
+   [app.common.types.shape.layout :as ctl]
    [app.common.uuid :as uuid]
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
@@ -324,6 +325,16 @@
         (when selected
           (rx/of (select-shape (:id selected))))))))
 
+(defn remap-grid-cells
+  "Remaps the shapes inside the cells"
+  [shape ids-map]
+
+  (let [do-remap-cells
+        (fn [cell]
+          (-> cell
+              (update :shapes #(mapv ids-map %))))]
+
+    (update shape :layout-grid-cells update-vals do-remap-cells)))
 
 ;; --- Duplicate Shapes
 (declare prepare-duplicate-shape-change)
@@ -431,10 +442,15 @@
                                    :shape-ref
                                    :use-for-thumbnail?)
                            (gsh/move delta)
-                           (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects)))
+                           (d/update-when :interactions #(ctsi/remap-interactions % ids-map objects))
+
+                           (cond-> (ctl/grid-layout? obj)
+                             (remap-grid-cells ids-map)))
 
            changes (-> (pcb/add-object changes new-obj)
-                       (pcb/amend-last-change #(assoc % :old-id (:id obj))))
+                       (pcb/amend-last-change #(assoc % :old-id (:id obj)))
+                       (cond-> (ctl/grid-layout? objects (:parent-id obj))
+                         (pcb/update-shapes [(:parent-id obj)] ctl/assign-cells)))
 
            changes (cond-> changes
                      (and is-component-root? is-component-main?)

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

@@ -178,7 +178,7 @@
 
 (mf/defc layout-item-menu
   {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type" "is-layout-child?"]))]}
-  [{:keys [ids values is-layout-child? is-layout-container?] :as props}]
+  [{: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))
         selection-parents     (mf/deref selection-parents-ref)
@@ -188,11 +188,15 @@
           (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type})))
 
         align-self         (:layout-item-align-self values)
-        set-align-self     (fn [value]
-                             (if (= align-self value)
-                               (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
-                               (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))
-        
+
+        set-align-self
+        (mf/use-callback
+         (mf/deps ids align-self)
+         (fn [value]
+           (if (= align-self value)
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil}))
+             (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))
+
         is-absolute? (:layout-item-absolute values)
 
         is-col? (every? ctl/col? selection-parents)
@@ -231,9 +235,18 @@
 
     [:div.element-set
      [:div.element-set-title
-      [:span (if (and is-layout-container? (not is-layout-child?))
+      [:span (cond
+               (and is-layout-container? (not is-layout-child?))
                "Flex board"
-               "Flex element")]]
+
+               is-flex-parent?
+               "Flex element"
+
+               is-grid-parent?
+               "Grid element"
+
+               :else
+               "Layout element")]]
 
      [:div.element-set-content.layout-item-menu
       (when is-layout-child?