✨ Instance component to grid layout

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

@@ -490,11 +490,13 @@
       (let [page      (wsh/lookup-page state)
             libraries (wsh/get-libraries state)
 
+            objects (:objects page)
             changes   (-> (pcb/empty-changes it (:id page))
-                          (pcb/with-objects (:objects page)))
+                          (pcb/with-objects objects))
 
             [new-shape changes]
             (dwlh/generate-instantiate-component changes
+                                                 objects
                                                  file-id
                                                  component-id
                                                  position

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

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.grid-layout :as gslg]
    [app.common.logging :as log]
    [app.common.pages.changes-builder :as pcb]
    [app.common.pages.helpers :as cph]
@@ -21,6 +22,7 @@
    [app.common.types.container :as ctn]
    [app.common.types.file :as ctf]
    [app.common.types.shape-tree :as ctst]
+   [app.common.types.shape.layout :as ctl]
    [app.common.types.typography :as cty]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.state-helpers :as wsh]
@@ -158,10 +160,10 @@
 
 (defn generate-instantiate-component
   "Generate changes to create a new instance from a component."
-  ([changes file-id component-id position page libraries]
-   (generate-instantiate-component changes file-id component-id position page libraries nil nil))
+  ([changes objects file-id component-id position page libraries]
+   (generate-instantiate-component changes objects file-id component-id position page libraries nil nil))
 
-  ([changes file-id component-id position page libraries old-id parent-id]
+  ([changes objects file-id component-id position page libraries old-id parent-id]
    (let [component     (ctf/get-component libraries file-id component-id)
          library       (get libraries file-id)
 
@@ -182,6 +184,19 @@
          changes (cond-> (pcb/add-object changes first-shape {:ignore-touched true})
                    (some? old-id) (pcb/amend-last-change #(assoc % :old-id old-id)))
 
+         changes
+         (if (ctl/grid-layout? objects (:parent-id first-shape))
+           (let [[row column] (gslg/get-drop-cell (:parent-id first-shape) objects position)]
+             (-> changes
+                 (pcb/update-shapes
+                  [(:parent-id first-shape)]
+                  (fn [shape]
+                    (-> shape
+                        (ctl/push-into-cell [(:id first-shape)] row column)
+                        (ctl/assign-cells))))
+                 (pcb/reorder-grid-children [(:parent-id first-shape)])))
+           changes)
+
          changes (reduce #(pcb/add-object %1 %2 {:ignore-touched true})
                          changes
                          (rest new-shapes))]

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

@@ -384,7 +384,7 @@
          (prepare-duplicate-guides shapes page ids-map delta)))))
 
 (defn- prepare-duplicate-component-change
-  [changes page component-root parent-id delta libraries library-data it]
+  [changes objects page component-root parent-id delta libraries library-data it]
   (let [component-id (:component-id component-root)
         file-id (:component-file component-root)
         main-component    (ctf/get-component libraries file-id component-id)
@@ -393,6 +393,7 @@
 
         instantiate-component
         #(dwlh/generate-instantiate-component changes
+                                              objects
                                               file-id
                                               (:component-id component-root)
                                               pos
@@ -421,7 +422,7 @@
      changes
 
      (ctf/is-known-component? obj libraries)
-     (prepare-duplicate-component-change changes page obj parent-id delta libraries library-data it)
+     (prepare-duplicate-component-change changes objects page obj parent-id delta libraries library-data it)
 
      :else
      (let [frame?      (cph/frame-shape? obj)

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

@@ -623,11 +623,12 @@
               (= mode :auto)
               ;; change the manual cells and move to auto
               (->> ids
-                   (reduce (fn [shape cell-id]
-                             (cond-> shape
-                               (= :manual (get-in shape [:layout-grid-cells cell-id :position]))
-                               (-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
-                                   (ctl/assign-cells))))
+                   (reduce
+                    (fn [shape cell-id]
+                      (cond-> shape
+                        (contains? #{:area :manual} (get-in shape [:layout-grid-cells cell-id :position]))
+                        (-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
+                            (ctl/assign-cells))))
                            shape)))))
          (dwge/clean-selection layout-id)
          (ptk/data-event :layout/update [layout-id])

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

@@ -173,7 +173,7 @@
         on-context-menu   (actions/on-context-menu hover hover-ids workspace-read-only?)
         on-double-click   (actions/on-double-click hover hover-ids hover-top-frame-id drawing-path? base-objects edition drawing-tool z? workspace-read-only?)
         on-drag-enter     (actions/on-drag-enter)
-        on-drag-over      (actions/on-drag-over)
+        on-drag-over      (actions/on-drag-over move-stream)
         on-drop           (actions/on-drop file)
         on-pointer-down   (actions/on-pointer-down @hover selected edition drawing-tool text-editing? node-editing? grid-editing?
                                                    drawing-path? create-comment? space? panning z? workspace-read-only?)

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -404,15 +404,17 @@
                (dnd/has-type? e "text/asset-id"))
        (dom/prevent-default e)))))
 
-(defn on-drag-over []
-  (mf/use-callback
-   (fn [e]
-     (when (or (dnd/has-type? e "penpot/shape")
-               (dnd/has-type? e "penpot/component")
-               (dnd/has-type? e "Files")
-               (dnd/has-type? e "text/uri-list")
-               (dnd/has-type? e "text/asset-id"))
-       (dom/prevent-default e)))))
+(defn on-drag-over [move-stream]
+  (let [on-pointer-move (on-pointer-move move-stream)]
+    (mf/use-callback
+     (fn [e]
+       (when (or (dnd/has-type? e "penpot/shape")
+                 (dnd/has-type? e "penpot/component")
+                 (dnd/has-type? e "Files")
+                 (dnd/has-type? e "text/uri-list")
+                 (dnd/has-type? e "text/asset-id"))
+         (on-pointer-move e)
+         (dom/prevent-default e))))))
 
 (defn on-drop
   [file]

frontend/test/frontend_tests/helpers/pages.cljs

@@ -153,12 +153,14 @@
   ([state label component-id file-id]
    (let [page      (current-page state)
          libraries (wsh/get-libraries state)
+         objects (:objects page)
 
          changes   (-> (pcb/empty-changes nil (:id page))
-                       (pcb/with-objects (:objects page)))
+                       (pcb/with-objects objects))
 
          [new-shape changes]
          (dwlh/generate-instantiate-component changes
+                                              objects
                                               file-id
                                               component-id
                                               (gpt/point 100 100)