Update component drag and drop to perform better

packages/builder/src/builderStore/store/frontend.js

@@ -507,7 +507,7 @@ export const getFrontendStore = () => {
         }
         await store.actions.preview.saveSelected()
       },
-      copy: (component, cut = false) => {
+      copy: (component, cut = false, selectParent = true) => {
         const selectedAsset = get(currentAsset)
         if (!selectedAsset) {
           return null
@@ -527,10 +527,12 @@ export const getFrontendStore = () => {
             parent._children = parent._children.filter(
               child => child._id !== component._id
             )
-            store.update(state => {
-              state.selectedComponentId = parent._id
-              return state
-            })
+            if (selectParent) {
+              store.update(state => {
+                state.selectedComponentId = parent._id
+                return state
+              })
+            }
           }
         }
       },

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte

@@ -31,6 +31,7 @@
       component._component
     )
     const canHaveChildren = definition?.hasChildren
+    const hasChildren = componentHasChildren(component)
 
     e.dataTransfer.dropEffect = DropEffect.COPY
 
@@ -43,6 +44,7 @@
       component,
       index,
       canHaveChildren,
+      hasChildren,
       mousePosition,
     })
 
@@ -122,6 +124,7 @@
           class:above={$dragDropStore.dropPosition === DropPosition.ABOVE}
           class:below={$dragDropStore.dropPosition === DropPosition.BELOW}
           class:inside={$dragDropStore.dropPosition === DropPosition.INSIDE}
+          class:hasChildren={componentHasChildren(component)}
           on:drop={onDrop}
           ondragover="return false"
           ondragenter="return false"
@@ -187,8 +190,8 @@
     position: absolute;
     top: calc(var(--indicatorY) - 1px);
     left: var(--indicatorX);
-    width: 100px;
-      border-radius: 4px;
+    width: calc(100% - var(--indicatorX));
+    border-radius: 4px;
   }
   .drop-item.above {
   }
@@ -200,5 +203,6 @@
     border: 2px solid var(--spectrum-global-color-static-green-500);
     height: 29px;
     pointer-events: none;
+    width: calc(100% - var(--indicatorX) - 4px);
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/dragDropStore.js

@@ -23,29 +23,30 @@ export default function () {
         return state
       })
     },
-    dragover: ({ component, canHaveChildren, mousePosition }) => {
+    dragover: ({ component, canHaveChildren, hasChildren, mousePosition }) => {
       store.update(state => {
-        state.targetComponent = component
-        // only allow dropping inside when container is empty
-        // if container has children, drag over them
-
         if (canHaveChildren) {
           if (mousePosition <= 0.33) {
-            // hovered above center of target
             state.dropPosition = DropPosition.ABOVE
           } else if (mousePosition >= 0.66) {
-            // hovered around bottom of target
             state.dropPosition = DropPosition.BELOW
           } else {
-            // hovered in center of target
             state.dropPosition = DropPosition.INSIDE
           }
-          return state
+        } else {
+          state.dropPosition =
+            mousePosition > 0.5 ? DropPosition.BELOW : DropPosition.ABOVE
+        }
+
+        // If hovering over a component with children and attempting to drop
+        // below, we need to change this to be above the first child instead
+        if (state.dropPosition === DropPosition.BELOW && hasChildren) {
+          state.targetComponent = component._children[0]
+          state.dropPosition = DropPosition.ABOVE
+        } else {
+          state.targetComponent = component
         }
 
-        // bottom half
-        state.dropPosition =
-          mousePosition > 0.5 ? DropPosition.BELOW : DropPosition.ABOVE
         return state
       })
     },
@@ -76,7 +77,7 @@ export default function () {
       }
 
       // Cut and paste the component
-      frontendStore.actions.components.copy(state.dragged, true)
+      frontendStore.actions.components.copy(state.dragged, true, false)
       await frontendStore.actions.components.paste(
         state.targetComponent,
         state.dropPosition