🐛 Fix keep cells when create component inside grid layout

common/src/app/common/files/shapes_helpers.cljc

@@ -71,6 +71,23 @@
              parent-id   (or parent-id (dm/get-in objects [selected-id :parent-id]))
              base-parent (get objects parent-id)
 
+             layout-props
+             (when (and (= 1 (count selected))
+                        (ctl/any-layout? base-parent))
+               (let [shape (get objects selected-id)]
+                 (select-keys shape ctl/layout-item-props)))
+
+             target-cell-id
+             (if (and (nil? target-cell-id)
+                      (ctl/grid-layout? objects parent-id))
+               ;; Find the top-left grid cell of the selected elements
+               (let [ncols (count (:layout-grid-columns base-parent))]
+                 (->> selected
+                      (map #(ctl/get-cell-by-shape-id base-parent %))
+                      (apply min-key (fn [{:keys [row column]}] (+ (* ncols row) column)))
+                      :id))
+               target-cell-id)
+
              attrs       {:type :frame
                           :x (:x srect)
                           :y (:y srect)
@@ -90,12 +107,14 @@
                                  :parent-id parent-id
                                  :shapes (into [] selected))
 
-                          :always
-                          (with-meta {:index new-index})
+                          (some? layout-props)
+                          (d/patch-object layout-props)
 
                           (or (not= frame-id uuid/zero) without-fill?)
                           (assoc :fills [] :hide-in-viewer true)))
 
+             shape     (with-meta shape {:index new-index})
+
              [shape changes]
              (prepare-add-shape changes shape objects)
 
@@ -105,15 +124,23 @@
              changes
              (cond-> changes
                (ctl/grid-layout? objects (:parent-id shape))
-               (-> (cond-> (some? target-cell-id)
-                     (pcb/update-shapes
-                      [(:parent-id shape)]
-                      (fn [parent]
-                        (-> parent
-                            (assoc :layout-grid-cells (:layout-grid-cells base-parent))
-                            (assoc-in [:layout-grid-cells target-cell-id :shapes] [id])
-                            (assoc :position :auto)))))
-                   (pcb/update-shapes [(:parent-id shape)] ctl/assign-cells {:with-objects? true})
+               (-> (pcb/update-shapes
+                    [(:parent-id shape)]
+                    (fn [parent objects]
+                      ;; This restores the grid layout before adding and moving the shapes
+                      ;; this is done because the add+move could have altered the layout and we
+                      ;; want to do it after both operations are completed. Also here we could
+                      ;; asign the new element to a target-cell
+                      (-> parent
+                          (assoc :layout-grid-cells (:layout-grid-cells base-parent))
+                          (assoc :layout-grid-rows (:layout-grid-rows base-parent))
+                          (assoc :layout-grid-columns (:layout-grid-columns base-parent))
+
+                          (cond-> (some? target-cell-id)
+                            (assoc-in [:layout-grid-cells target-cell-id :shapes] [(:id shape)]))
+                          (ctl/assign-cells objects)))
+                    {:with-objects? true})
+
                    (pcb/reorder-grid-children [(:parent-id shape)])))]
 
          [shape changes])))))

common/src/app/common/types/container.cljc

@@ -6,6 +6,7 @@
 
 (ns app.common.types.container
   (:require
+   [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.geom.point :as gpt]
@@ -287,7 +288,8 @@
          component-shape (if components-v2
                            (-> (get-shape component-page (:main-instance-id component))
                                (assoc :parent-id nil) ;; On v2 we force parent-id to nil in order to behave like v1
-                               (assoc :frame-id uuid/zero))
+                               (assoc :frame-id uuid/zero)
+                               (d/without-keys ctk/swap-keep-attrs))
                            (get-shape component (:id component)))
 
          orig-pos        (gpt/point (:x component-shape) (:y component-shape))

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

@@ -73,6 +73,18 @@
 (def justify-items-types
   #{:start :end :center :stretch})
 
+(def layout-item-props
+  [:layout-item-margin
+   :layout-item-margin-type
+   :layout-item-h-sizing
+   :layout-item-v-sizing
+   :layout-item-max-h
+   :layout-item-min-h
+   :layout-item-max-w
+   :layout-item-min-w
+   :layout-item-absolute
+   :layout-item-z-index])
+
 (sm/def! ::layout-attrs
   [:map {:title "LayoutAttrs"}
    [:layout {:optional true} [::sm/one-of layout-types]]

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

@@ -1010,12 +1010,16 @@
               (rx/of (dch/commit-changes (assoc changes ;; TODO a ver qué pasa con esto
                                                 :file-id file-id))))
             (when-not (empty? updated-frames)
-              (->> (rx/from updated-frames)
-                   (rx/mapcat (fn [shape]
-                                (rx/of
-                                 (dwt/clear-thumbnail file-id (:page-id shape) (:id shape) "frame")
-                                 (when-not (= (:frame-id shape) uuid/zero)
-                                   (dwt/clear-thumbnail file-id (:page-id shape) (:frame-id shape) "frame")))))))
+              (rx/merge
+               (rx/of (ptk/data-event :layout/update (map :id updated-frames)))
+               (->> (rx/from updated-frames)
+                    (rx/mapcat
+                     (fn [shape]
+                       (rx/of
+                        (dwt/clear-thumbnail file-id (:page-id shape) (:id shape) "frame")
+                        (when-not (= (:frame-id shape) uuid/zero)
+                          (dwt/clear-thumbnail file-id (:page-id shape) (:frame-id shape) "frame"))))))))
+
             (when (not= file-id library-id)
               ;; When we have just updated the library file, give some time for the
               ;; update to finish, before marking this file as synced.

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

@@ -106,8 +106,9 @@
        [:span {:class (stl/css :title)} title]
        (when shortcut
          [:span   {:class (stl/css :shortcut)}
-          (for [sc (scd/split-sc shortcut)]
-            [:span {:class (stl/css :shortcut-key)} sc])])
+          (for [[idx sc] (d/enumerate (scd/split-sc shortcut))]
+            [:span {:key (dm/str shortcut "-" idx)
+                    :class (stl/css :shortcut-key)} sc])])
 
        (when (> (count children) 1)
          [:span {:class (stl/css :submenu-icon)} i/arrow-refactor])

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

@@ -555,7 +555,8 @@
                        :on-change #(set-justify % type)
                        :name (dm/str "grid-justify-items-" (d/name type))}
      (for [justify [:start :center :end :space-around :space-between :stretch]]
-       [:& radio-button {:value (d/name justify)
+       [:& radio-button {:key   (dm/str "justify-item-" (d/name justify))
+                         :value (d/name justify)
                          :icon  (get-layout-grid-icon-refactor :justify-items justify is-col?)
                          :title (dm/str "Justify items " (d/name justify))
                          :id    (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])]))