From e0fcb20fbead969bceeca79e679b8b93ef457b61 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 28 Sep 2022 14:16:09 +0100
Subject: [PATCH 01/36] Expand component trees with padding when dragging and
 dropping

---
 packages/client/src/components/Component.svelte | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 2d586df24d..2a6c46feec 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -453,6 +453,7 @@
     class:interactive
     class:editing
     class:block={isBlock}
+    class:explode={children.length && !isLayout && $builderStore.isDragging}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -481,15 +482,19 @@
   .component {
     display: contents;
   }
-
+  .component :global(> *) {
+    transition: padding 250ms ease, border 250ms ease;
+  }
+  .component.explode :global(> *) {
+    padding: 12px 4px !important;
+    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+  }
   .interactive :global(*:hover) {
     cursor: pointer;
   }
-
   .draggable :global(*:hover) {
     cursor: grab;
   }
-
   .editing :global(*:hover) {
     cursor: auto;
   }

From 9c82a9d073c2617dd8d2d536fe4ddaf8c5a58e84 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 6 Oct 2022 09:17:26 +0100
Subject: [PATCH 02/36] Don't clear drop target on invalid selection

---
 .../client/src/components/Component.svelte    |  6 +-
 .../src/components/preview/DNDHandler.svelte  | 89 +++++++++++++++----
 packages/client/src/stores/builder.js         | 18 ++++
 packages/client/src/stores/components.js      | 10 ++-
 packages/client/src/stores/screens.js         | 41 ++++++++-
 5 files changed, 139 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 2a6c46feec..f3c3e4b25c 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -96,6 +96,7 @@
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
+  $: inDropPath = $componentStore.dropPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
 
   // Derive definition properties which can all be optional, so need to be
@@ -108,7 +109,7 @@
   // Interactive components can be selected, dragged and highlighted inside
   // the builder preview
   $: builderInteractive =
-    $builderStore.inBuilder && insideScreenslot && !isBlock
+    $builderStore.inBuilder && insideScreenslot && !isBlock && !instance.static
   $: devToolsInteractive = $devToolsStore.allowSelection && !isBlock
   $: interactive = builderInteractive || devToolsInteractive
   $: editing = editable && selected && $builderStore.editMode
@@ -453,10 +454,11 @@
     class:interactive
     class:editing
     class:block={isBlock}
-    class:explode={children.length && !isLayout && $builderStore.isDragging}
+    class:explode={children.length && !isLayout && inDropPath && false}
     data-id={id}
     data-name={name}
     data-icon={icon}
+    data-placeholder={id === "placeholder"}
   >
     <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
       {#if hasMissingRequiredSettings}
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index c37eb93afa..03ee97d610 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -77,19 +77,16 @@
     builderStore.actions.setDragging(false)
   }
 
-  // Callback when on top of a component
-  const onDragOver = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || !dropInfo) {
-      return
+  const validateDrop = (dropInfo, e) => {
+    if (!dropInfo) {
+      return null
     }
 
-    e.preventDefault()
     const { droppableInside, bounds } = dropInfo
     const { top, left, height, width } = bounds
     const mouseY = e.clientY
     const mouseX = e.clientX
-    const snapFactor = droppableInside ? 0.33 : 0.5
+    const snapFactor = droppableInside ? 0.25 : 0.5
     const snapLimitV = Math.min(40, height * snapFactor)
     const snapLimitH = Math.min(40, width * snapFactor)
 
@@ -108,20 +105,32 @@
 
     // When no edges match, drop inside if possible
     if (!sides.length) {
-      dropInfo.mode = droppableInside ? "inside" : null
-      dropInfo.side = null
-      return
+      if (droppableInside) {
+        return {
+          ...dropInfo,
+          mode: "inside",
+          side: null,
+        }
+      } else {
+        return null
+      }
     }
 
     // When one edge matches, use that edge
     if (sides.length === 1) {
-      dropInfo.side = sides[0]
       if ([Sides.Top, Sides.Left].includes(sides[0])) {
-        dropInfo.mode = "above"
+        return {
+          ...dropInfo,
+          mode: "above",
+          side: sides[0],
+        }
       } else {
-        dropInfo.mode = "below"
+        return {
+          ...dropInfo,
+          mode: "below",
+          side: sides[0],
+        }
       }
-      return
     }
 
     // When 2 edges match, work out which is closer
@@ -134,9 +143,34 @@
     const edge = delta1 < delta2 ? sides[0] : sides[1]
     dropInfo.side = edge
     if ([Sides.Top, Sides.Left].includes(edge)) {
-      dropInfo.mode = "above"
+      return {
+        ...dropInfo,
+        mode: "above",
+        side: edge,
+      }
     } else {
-      dropInfo.mode = "below"
+      return {
+        ...dropInfo,
+        mode: "below",
+        side: edge,
+      }
+    }
+  }
+
+  // Callback when on top of a component
+  const onDragOver = e => {
+    // Skip if we aren't validly dragging currently
+    if (!dragInfo || !dropInfo) {
+      return
+    }
+
+    e.preventDefault()
+
+    const nextDropInfo = validateDrop(dropInfo, e)
+    if (nextDropInfo) {
+      console.log("set from over")
+      dropInfo = nextDropInfo
+      console.log(dropInfo.mode, dropInfo.target)
     }
   }
 
@@ -147,6 +181,16 @@
       return
     }
 
+    // Update drop target
+    const dropTarget = e.target.closest(".component")
+    builderStore.actions.setDropTarget(dropTarget?.dataset.id)
+
+    // // Do nothing if this is the placeholder
+    // if (element.dataset.id === "placeholder") {
+    //   console.log("placeholder")
+    //   return
+    // }
+
     const element = e.target.closest(".component:not(.block)")
     if (
       element &&
@@ -172,15 +216,20 @@
       // dragOver
       const child = getDOMNodeForComponent(e.target)
       const bounds = child.getBoundingClientRect()
-      dropInfo = {
+      let nextDropInfo = {
         target,
         name: element.dataset.name,
         icon: element.dataset.icon,
         droppableInside: element.classList.contains("empty"),
         bounds,
       }
+      nextDropInfo = validateDrop(nextDropInfo, e)
+      if (nextDropInfo) {
+        console.log("set from enter")
+        dropInfo = nextDropInfo
+      }
     } else {
-      dropInfo = null
+      // dropInfo = null
     }
   }
 
@@ -200,6 +249,10 @@
     }
   }
 
+  $: mode = dropInfo?.mode
+  $: target = dropInfo?.target
+  $: builderStore.actions.updateDNDPlaceholder(mode, target)
+
   onMount(() => {
     // Events fired on the draggable target
     document.addEventListener("dragstart", onDragStart, false)
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index fea070c27c..f935c580b6 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -1,6 +1,7 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
 import { devToolsStore } from "./devTools.js"
+import { findComponentPathById } from "../utils/components.js"
 
 const dispatchEvent = (type, data = {}) => {
   window.parent.postMessage({ type, data })
@@ -20,6 +21,9 @@ const createBuilderStore = () => {
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
+    dndMode: null,
+    dndTarget: null,
+    dropTarget: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -102,6 +106,20 @@ const createBuilderStore = () => {
       // Notify the builder so we can reload component definitions
       dispatchEvent("reload-plugin")
     },
+    updateDNDPlaceholder: (mode, target) => {
+      console.log(mode, target)
+      store.update(state => {
+        state.dndMode = mode
+        state.dndTarget = target
+        return state
+      })
+    },
+    setDropTarget: target => {
+      store.update(state => {
+        state.dropTarget = target
+        return state
+      })
+    },
   }
   return {
     ...store,
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 98edfaddae..ee75be484a 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -36,8 +36,13 @@ const createComponentStore = () => {
       const definition = getComponentDefinition(component?._component)
 
       // Derive the selected component path
-      const path =
+      const selectedPath =
         findComponentPathById(asset?.props, selectedComponentId) || []
+      let dropPath = []
+      if ($builderState.isDragging) {
+        dropPath =
+          findComponentPathById(asset?.props, $builderState.dropTarget) || []
+      }
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -45,9 +50,10 @@ const createComponentStore = () => {
           $store.mountedComponents[selectedComponentId],
         selectedComponent: component,
         selectedComponentDefinition: definition,
-        selectedComponentPath: path?.map(component => component._id),
+        selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
+        dropPath: dropPath?.map(component => component._id),
       }
     }
   )
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 84cd4000c1..2920ee333e 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -3,6 +3,11 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { RoleUtils } from "@budibase/frontend-core"
+import {
+  findComponentById,
+  findComponentPathById,
+} from "../utils/components.js"
+import { Helpers } from "@budibase/bbui"
 
 const createScreenStore = () => {
   const store = derived(
@@ -13,7 +18,7 @@ const createScreenStore = () => {
 
       if ($builderStore.inBuilder) {
         // Use builder defined definitions if inside the builder preview
-        activeScreen = $builderStore.screen
+        activeScreen = Helpers.cloneDeep($builderStore.screen)
         screens = [activeScreen]
 
         // Legacy - allow the builder to specify a layout
@@ -24,8 +29,10 @@ const createScreenStore = () => {
         // Find the correct screen by matching the current route
         screens = $appStore.screens || []
         if ($routeStore.activeRoute) {
-          activeScreen = screens.find(
-            screen => screen._id === $routeStore.activeRoute.screenId
+          activeScreen = Helpers.cloneDeep(
+            screens.find(
+              screen => screen._id === $routeStore.activeRoute.screenId
+            )
           )
         }
 
@@ -40,6 +47,34 @@ const createScreenStore = () => {
         }
       }
 
+      // Insert DND placeholder if required
+      const { dndTarget, dndMode, selectedComponentId } = $builderStore
+      const insert = false
+      if (insert && activeScreen && dndTarget && dndMode) {
+        let selectedComponent = findComponentById(
+          activeScreen.props,
+          selectedComponentId
+        )
+        const placeholder = {
+          ...selectedComponent,
+          _id: "placeholder",
+          static: true,
+        }
+        // delete selectedComponent._component
+        if (dndMode === "inside") {
+          const target = findComponentById(activeScreen.props, dndTarget)
+          target._children = [placeholder]
+        } else {
+          const path = findComponentPathById(activeScreen.props, dndTarget)
+          const parent = path?.[path.length - 2]
+          if (parent) {
+            const idx = parent._children.findIndex(x => x._id === dndTarget)
+            const delta = dndMode === "below" ? 1 : -1
+            parent._children.splice(idx + delta, 0, placeholder)
+          }
+        }
+      }
+
       // Assign ranks to screens, preferring higher roles and home screens
       screens.forEach(screen => {
         const roleId = screen.routing.roleId

From bb8388133a1bf4aab371b46f3dec95ed74437565 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 08:05:44 +0100
Subject: [PATCH 03/36] Rewrite drag and drop from scratch using mouse position
 heuristics

---
 .../client/src/components/Component.svelte    |  20 +-
 .../src/components/preview/DNDHandler.svelte  | 351 +++++++++++-------
 .../src/components/preview/Placeholder.svelte |  11 +
 .../preview/PlaceholderOverlay.svelte         |  43 +++
 packages/client/src/index.js                  |   1 +
 packages/client/src/stores/builder.js         |  19 +-
 packages/client/src/stores/components.js      |  11 +-
 packages/client/src/stores/screens.js         |  32 +-
 8 files changed, 315 insertions(+), 173 deletions(-)
 create mode 100644 packages/client/src/components/preview/Placeholder.svelte
 create mode 100644 packages/client/src/components/preview/PlaceholderOverlay.svelte

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index f3c3e4b25c..93620606c8 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -27,6 +27,8 @@
   export let isLayout = false
   export let isScreen = false
   export let isBlock = false
+  export let parent = null
+  export let index = 0
 
   // Get parent contexts
   const context = getContext("context")
@@ -96,7 +98,7 @@
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
-  $: inDropPath = $componentStore.dropPath?.includes(id)
+  $: isDndParent = $componentStore.dndParent === id
   $: inDragPath = inSelectedPath && $builderStore.editMode
 
   // Derive definition properties which can all be optional, so need to be
@@ -119,7 +121,7 @@
     !isLayout &&
     !isScreen &&
     definition?.draggable !== false
-  $: droppable = interactive && !isLayout && !isScreen
+  $: droppable = interactive
   $: builderHidden =
     $builderStore.inBuilder && $builderStore.hiddenComponentIds?.includes(id)
 
@@ -451,21 +453,24 @@
     class:draggable
     class:droppable
     class:empty
+    class:parent={hasChildren}
     class:interactive
     class:editing
     class:block={isBlock}
-    class:explode={children.length && !isLayout && inDropPath && false}
+    class:explode={interactive && hasChildren && $builderStore.isDragging}
+    class:placeholder={id === "placeholder"}
     data-id={id}
     data-name={name}
     data-icon={icon}
-    data-placeholder={id === "placeholder"}
+    data-parent={parent}
+    data-index={index}
   >
     <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
       {#if hasMissingRequiredSettings}
         <ComponentPlaceholder />
       {:else if children.length}
-        {#each children as child (child._id)}
-          <svelte:self instance={child} />
+        {#each children as child, idx (child._id)}
+          <svelte:self instance={child} parent={id} index={idx} />
         {/each}
       {:else if emptyState}
         {#if isScreen}
@@ -488,8 +493,9 @@
     transition: padding 250ms ease, border 250ms ease;
   }
   .component.explode :global(> *) {
-    padding: 12px 4px !important;
+    padding: 16px !important;
     border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+    border-radius: 4px !important;
   }
   .interactive :global(*:hover) {
     cursor: pointer;
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 03ee97d610..37bd9d3402 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -12,10 +12,12 @@
   import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
+  import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
 
   let dragInfo
   let dropInfo
+  let placeholderInfo
 
   const getEdges = (bounds, mousePoint) => {
     const { width, height, top, left } = bounds
@@ -33,39 +35,37 @@
     return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
   }
 
-  const getDOMNodeForComponent = component => {
-    const parent = component.closest(".component")
-    const children = Array.from(parent.children)
-    return children[0]
+  const getDOMNode = id => {
+    const component = document.getElementsByClassName(id)[0]
+    return [...component.children][0]
   }
 
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
-    const parent = e.target.closest(".component")
-    if (!parent?.classList.contains("draggable")) {
+    const component = e.target.closest(".component")
+    if (!component?.classList.contains("draggable")) {
       return
     }
 
     // Update state
     dragInfo = {
-      target: parent.dataset.id,
-      parent: parent.dataset.parent,
+      target: component.dataset.id,
     }
     builderStore.actions.selectComponent(dragInfo.target)
     builderStore.actions.setDragging(true)
 
     // Highlight being dragged by setting opacity
-    const child = getDOMNodeForComponent(e.target)
+    const child = getDOMNode(component.dataset.id)
     if (child) {
       child.style.opacity = "0.5"
     }
   }
 
   // Callback when drag stops (whether dropped or not)
-  const onDragEnd = e => {
+  const onDragEnd = () => {
     // Reset opacity style
     if (dragInfo) {
-      const child = getDOMNodeForComponent(e.target)
+      const child = getDOMNode(dragInfo.target)
       if (child) {
         child.style.opacity = ""
       }
@@ -77,84 +77,179 @@
     builderStore.actions.setDragging(false)
   }
 
-  const validateDrop = (dropInfo, e) => {
+  const variance = arr => {
+    const mean = arr.reduce((a, b) => a + b, 0) / arr.length
+    let squareSum = 0
+    arr.forEach(value => {
+      const delta = value - mean
+      squareSum += delta * delta
+    })
+    return squareSum / arr.length
+  }
+
+  const handleEvent = e => {
     if (!dropInfo) {
       return null
     }
+    e.preventDefault()
 
-    const { droppableInside, bounds } = dropInfo
-    const { top, left, height, width } = bounds
+    let { id, parent, node, index, acceptsChildren, empty } = dropInfo
     const mouseY = e.clientY
     const mouseX = e.clientX
-    const snapFactor = droppableInside ? 0.25 : 0.5
-    const snapLimitV = Math.min(40, height * snapFactor)
-    const snapLimitH = Math.min(40, width * snapFactor)
 
-    // Determine all sies we are within snap range of
-    let sides = []
-    if (mouseY <= top + snapLimitV) {
-      sides.push(Sides.Top)
-    } else if (mouseY >= top + height - snapLimitV) {
-      sides.push(Sides.Bottom)
-    }
-    if (mouseX < left + snapLimitH) {
-      sides.push(Sides.Left)
-    } else if (mouseX > left + width - snapLimitH) {
-      sides.push(Sides.Right)
+    // if (!dropInfo.bounds) {
+    // } else {
+    //   dropInfo.bounds.top = node.offsetTop
+    //   dropInfo.bounds.left = node.offsetLeft
+    //   console.log(node.offsetTop)
+    // }
+
+    // console.log("calc")
+    // dropInfo.bounds = bounds
+
+    // If we're over something that does not accept children then we must go
+    // above or below this component
+    if (!acceptsChildren) {
+      id = parent
+      acceptsChildren = true
+      empty = false
+      node = getDOMNode(parent)
+      //
+      //
+      // const bounds = node.getBoundingClientRect()
+      // const { top, left, height, width } = bounds
+      // const snapFactor = 0.5
+      // const snapLimitV = Math.min(40, height * snapFactor)
+      // const snapLimitH = Math.min(40, width * snapFactor)
+      //
+      // // Determine all sides we are within snap range of
+      // let sides = []
+      // if (mouseY <= top + snapLimitV) {
+      //   sides.push(Sides.Top)
+      // } else if (mouseY >= top + height - snapLimitV) {
+      //   sides.push(Sides.Bottom)
+      // }
+      // if (mouseX < left + snapLimitH) {
+      //   sides.push(Sides.Left)
+      // } else if (mouseX > left + width - snapLimitH) {
+      //   sides.push(Sides.Right)
+      // }
+      //
+      // // If we're somehow not in range of any side, do nothing
+      // if (!sides.length) {
+      //   console.log("no sides match")
+      //   return
+      // }
+      //
+      // let side
+      // if (sides.length === 1) {
+      //   // When one edge matches, use that edge
+      //   side = sides[0]
+      // } else {
+      //   // When 2 edges match, work out which is closer
+      //   const mousePoint = [mouseX, mouseY]
+      //   const edges = getEdges(bounds, mousePoint)
+      //   const edge1 = edges[sides[0]]
+      //   const delta1 = calculatePointDelta(mousePoint, edge1)
+      //   const edge2 = edges[sides[1]]
+      //   const delta2 = calculatePointDelta(mousePoint, edge2)
+      //   side = delta1 < delta2 ? sides[0] : sides[1]
+      // }
+      // if ([Sides.Top, Sides.Left].includes(side)) {
+      //   // Before, so use the current index
+      //   console.log("before")
+      //   placeholderInfo = {
+      //     parent: parent,
+      //     index: index,
+      //   }
+      // } else {
+      //   console.log("after")
+      //   // After, so use the next index
+      //   placeholderInfo = {
+      //     parent: parent,
+      //     index: index + 1,
+      //   }
+      // }
     }
 
-    // When no edges match, drop inside if possible
-    if (!sides.length) {
-      if (droppableInside) {
-        return {
-          ...dropInfo,
-          mode: "inside",
-          side: null,
-        }
-      } else {
-        return null
+    // We're now hovering over something which does accept children.
+    // If it is empty, just go inside it
+    if (empty) {
+      placeholderInfo = {
+        parent: id,
+        index: 0,
       }
+      return
     }
 
-    // When one edge matches, use that edge
-    if (sides.length === 1) {
-      if ([Sides.Top, Sides.Left].includes(sides[0])) {
-        return {
-          ...dropInfo,
-          mode: "above",
-          side: sides[0],
-        }
-      } else {
-        return {
-          ...dropInfo,
-          mode: "below",
-          side: sides[0],
-        }
-      }
+    // We're now hovering over something which accepts children and is not
+    // empty, so we need to work out where to inside the placeholder
+
+    // Check we're actually inside
+    // if (
+    //   mouseY < top ||
+    //   mouseY > top + height ||
+    //   mouseX < left ||
+    //   mouseX > left + width
+    // ) {
+    //   console.log("not inside")
+    //   return
+    // }
+
+    // Get all DOM nodes of children of this component.
+    // Filter out the placeholder as we don't want it to affect the index of
+    // the new placeholder.
+    const children = [...(node.children || [])]
+      .filter(x => !x.classList.contains("placeholder"))
+      .map(x => x.children[0])
+
+    // Calculate centers of each child
+    const centers = children.map(child => {
+      const childBounds = child.getBoundingClientRect()
+      return [
+        childBounds.left + childBounds.width / 2,
+        childBounds.top + childBounds.height / 2,
+      ]
+    })
+
+    // Calculate variance of X and Y centers to determine layout
+    const xCoords = centers.map(x => x[0])
+    const yCoords = centers.map(x => x[1])
+    const xVariance = variance(xCoords)
+    const yVariance = variance(yCoords)
+    const column = xVariance <= yVariance
+    console.log(column ? "COL" : "ROW")
+
+    // Now that we know the layout, find which children in this axis we are
+    // between
+    const childPositions = column ? yCoords : xCoords
+    const mousePosition = column ? mouseY : mouseX
+
+    let idx = 0
+    while (idx < children.length && childPositions[idx] < mousePosition) {
+      idx++
     }
 
-    // When 2 edges match, work out which is closer
-    const mousePoint = [mouseX, mouseY]
-    const edges = getEdges(bounds, mousePoint)
-    const edge1 = edges[sides[0]]
-    const delta1 = calculatePointDelta(mousePoint, edge1)
-    const edge2 = edges[sides[1]]
-    const delta2 = calculatePointDelta(mousePoint, edge2)
-    const edge = delta1 < delta2 ? sides[0] : sides[1]
-    dropInfo.side = edge
-    if ([Sides.Top, Sides.Left].includes(edge)) {
-      return {
-        ...dropInfo,
-        mode: "above",
-        side: edge,
-      }
-    } else {
-      return {
-        ...dropInfo,
-        mode: "below",
-        side: edge,
-      }
+    placeholderInfo = {
+      parent: id,
+      index: idx,
     }
+    // // When no edges match, drop inside if possible
+    // if (!sides.length) {
+    //   if (empty) {
+    //     console.log("allowed inside")
+    //     return {
+    //       ...dropInfo,
+    //       mode: "inside",
+    //       side: null,
+    //       bounds,
+    //     }
+    //   } else {
+    //     // No sides but also not empty?
+    //     console.log("no sides match, but not empty")
+    //     return null
+    //   }
+    // }
   }
 
   // Callback when on top of a component
@@ -163,15 +258,7 @@
     if (!dragInfo || !dropInfo) {
       return
     }
-
-    e.preventDefault()
-
-    const nextDropInfo = validateDrop(dropInfo, e)
-    if (nextDropInfo) {
-      console.log("set from over")
-      dropInfo = nextDropInfo
-      console.log(dropInfo.mode, dropInfo.target)
-    }
+    handleEvent(e)
   }
 
   // Callback when entering a potential drop target
@@ -181,53 +268,53 @@
       return
     }
 
-    // Update drop target
-    const dropTarget = e.target.closest(".component")
-    builderStore.actions.setDropTarget(dropTarget?.dataset.id)
-
-    // // Do nothing if this is the placeholder
+    // Do nothing if this is the placeholder
     // if (element.dataset.id === "placeholder") {
     //   console.log("placeholder")
     //   return
     // }
 
-    const element = e.target.closest(".component:not(.block)")
+    const component = e.target.closest(".component:not(.block)")
     if (
-      element &&
-      element.classList.contains("droppable") &&
-      element.dataset.id !== dragInfo.target
+      component &&
+      component.classList.contains("droppable") &&
+      component.dataset.id !== dragInfo.target
     ) {
       // Do nothing if this is the same target
-      if (element.dataset.id === dropInfo?.target) {
+      if (component.dataset.id === dropInfo?.target) {
         return
       }
 
       // Ensure the dragging flag is always set.
       // There's a bit of a race condition between the app reinitialisation
       // after selecting the DND component and setting this the first time
-      if (!get(builderStore).isDragging) {
-        builderStore.actions.setDragging(true)
-      }
-
-      // Store target ID
-      const target = element.dataset.id
+      // if (!get(builderStore).isDragging) {
+      //   builderStore.actions.setDragging(true)
+      // }
 
       // Precompute and store some info to avoid recalculating everything in
       // dragOver
-      const child = getDOMNodeForComponent(e.target)
-      const bounds = child.getBoundingClientRect()
-      let nextDropInfo = {
-        target,
-        name: element.dataset.name,
-        icon: element.dataset.icon,
-        droppableInside: element.classList.contains("empty"),
-        bounds,
-      }
-      nextDropInfo = validateDrop(nextDropInfo, e)
-      if (nextDropInfo) {
-        console.log("set from enter")
-        dropInfo = nextDropInfo
+      dropInfo = {
+        id: component.dataset.id,
+        parent: component.dataset.parent,
+        index: parseInt(component.dataset.index),
+        node: getDOMNode(component.dataset.id),
+        empty: component.classList.contains("empty"),
+        acceptsChildren: component.classList.contains("parent"),
       }
+
+      // console.log(
+      //   "enter",
+      //   component.dataset.name,
+      //   "id",
+      //   dropInfo.id,
+      //   "parent",
+      //   dropInfo.parent,
+      //   "index",
+      //   dropInfo.index
+      // )
+
+      handleEvent(e)
     } else {
       // dropInfo = null
     }
@@ -240,18 +327,22 @@
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
     e.preventDefault()
+    dropInfo = null
+    placeholderInfo = null
+    dragInfo = null
+    builderStore.actions.setDragging(false)
     if (dropInfo?.mode) {
-      builderStore.actions.moveComponent(
-        dragInfo.target,
-        dropInfo.target,
-        dropInfo.mode
-      )
+      // builderStore.actions.moveComponent(
+      //   dragInfo.target,
+      //   dropInfo.target,
+      //   dropInfo.mode
+      // )
     }
   }
 
-  $: mode = dropInfo?.mode
-  $: target = dropInfo?.target
-  $: builderStore.actions.updateDNDPlaceholder(mode, target)
+  $: parent = placeholderInfo?.parent
+  $: index = placeholderInfo?.index
+  $: builderStore.actions.updateDNDPlaceholder(parent, index)
 
   onMount(() => {
     // Events fired on the draggable target
@@ -279,16 +370,20 @@
 </script>
 
 <IndicatorSet
-  componentId={dropInfo?.mode === "inside" ? dropInfo.target : null}
+  componentId={$builderStore.dndParent}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="930"
   transition
   prefix="Inside"
 />
 
-<DNDPositionIndicator
-  {dropInfo}
-  color="var(--spectrum-global-color-static-green-500)"
-  zIndex="940"
-  transition
-/>
+{#if $builderStore.isDragging}
+  <PlaceholderOverlay />
+{/if}
+
+<!--<DNDPositionIndicator-->
+<!--  {dropInfo}-->
+<!--  color="var(&#45;&#45;spectrum-global-color-static-green-500)"-->
+<!--  zIndex="940"-->
+<!--  transition-->
+<!--/>-->
diff --git a/packages/client/src/components/preview/Placeholder.svelte b/packages/client/src/components/preview/Placeholder.svelte
new file mode 100644
index 0000000000..3457a49e6d
--- /dev/null
+++ b/packages/client/src/components/preview/Placeholder.svelte
@@ -0,0 +1,11 @@
+<div id="placeholder" class="placeholder" />
+
+<style>
+  .placeholder {
+    display: block;
+    min-height: 64px;
+    min-width: 64px;
+    flex: 0 0 64px;
+    opacity: 0;
+  }
+</style>
diff --git a/packages/client/src/components/preview/PlaceholderOverlay.svelte b/packages/client/src/components/preview/PlaceholderOverlay.svelte
new file mode 100644
index 0000000000..86950c533e
--- /dev/null
+++ b/packages/client/src/components/preview/PlaceholderOverlay.svelte
@@ -0,0 +1,43 @@
+<script>
+  import { onMount } from "svelte"
+
+  let left, top, height, width
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      const node = document.getElementById("placeholder")
+      if (!node) {
+        height = 0
+        width = 0
+      } else {
+        const bounds = node.getBoundingClientRect()
+        left = bounds.left
+        top = bounds.top
+        height = bounds.height
+        width = bounds.width
+      }
+    }, 100)
+
+    return () => {
+      clearInterval(interval)
+    }
+  })
+</script>
+
+{#if left != null}
+  <div
+    class="overlay"
+    style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"
+  />
+{/if}
+
+<style>
+  .overlay {
+    position: fixed;
+    z-index: 800;
+    background: hsl(160, 64%, 90%);
+    border-radius: 4px;
+    transition: all 130ms ease-out;
+    border: 2px solid var(--spectrum-global-color-static-green-500);
+  }
+</style>
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 0e8ab8c258..e31de18e4a 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -24,6 +24,7 @@ let app
 const loadBudibase = async () => {
   // Update builder store with any builder flags
   builderStore.set({
+    ...get(builderStore),
     inBuilder: !!window["##BUDIBASE_IN_BUILDER##"],
     layout: window["##BUDIBASE_PREVIEW_LAYOUT##"],
     screen: window["##BUDIBASE_PREVIEW_SCREEN##"],
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index f935c580b6..0930ef62b8 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -21,9 +21,9 @@ const createBuilderStore = () => {
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
-    dndMode: null,
-    dndTarget: null,
-    dropTarget: null,
+
+    dndParent: null,
+    dndIndex: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -106,17 +106,10 @@ const createBuilderStore = () => {
       // Notify the builder so we can reload component definitions
       dispatchEvent("reload-plugin")
     },
-    updateDNDPlaceholder: (mode, target) => {
-      console.log(mode, target)
+    updateDNDPlaceholder: (parent, index) => {
       store.update(state => {
-        state.dndMode = mode
-        state.dndTarget = target
-        return state
-      })
-    },
-    setDropTarget: target => {
-      store.update(state => {
-        state.dropTarget = target
+        state.dndParent = parent
+        state.dndIndex = index
         return state
       })
     },
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index ee75be484a..e73b498648 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -5,6 +5,7 @@ import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
+import Placeholder from "../components/preview/Placeholder.svelte"
 import * as AppComponents from "../components/app/index.js"
 
 const budibasePrefix = "@budibase/standard-components/"
@@ -38,11 +39,6 @@ const createComponentStore = () => {
       // Derive the selected component path
       const selectedPath =
         findComponentPathById(asset?.props, selectedComponentId) || []
-      let dropPath = []
-      if ($builderState.isDragging) {
-        dropPath =
-          findComponentPathById(asset?.props, $builderState.dropTarget) || []
-      }
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -53,7 +49,6 @@ const createComponentStore = () => {
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
-        dropPath: dropPath?.map(component => component._id),
       }
     }
   )
@@ -113,6 +108,8 @@ const createComponentStore = () => {
     // Screenslot is an edge case
     if (type === "screenslot") {
       type = `${budibasePrefix}${type}`
+    } else if (type === "placeholder") {
+      return {}
     }
 
     // Handle built-in components
@@ -132,6 +129,8 @@ const createComponentStore = () => {
     }
     if (type === "screenslot") {
       return Router
+    } else if (type === "placeholder") {
+      return Placeholder
     }
 
     // Handle budibase components
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 2920ee333e..e642fa9004 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -48,30 +48,24 @@ const createScreenStore = () => {
       }
 
       // Insert DND placeholder if required
-      const { dndTarget, dndMode, selectedComponentId } = $builderStore
-      const insert = false
-      if (insert && activeScreen && dndTarget && dndMode) {
-        let selectedComponent = findComponentById(
-          activeScreen.props,
-          selectedComponentId
-        )
+      const { dndParent, dndIndex } = $builderStore
+      const insert = true
+      if (insert && activeScreen && dndParent && dndIndex != null) {
+        // let selectedComponent = findComponentById(
+        //   activeScreen.props,
+        //   selectedComponentId
+        // )
+        // delete selectedComponent._component
         const placeholder = {
-          ...selectedComponent,
+          _component: "placeholder",
           _id: "placeholder",
           static: true,
         }
-        // delete selectedComponent._component
-        if (dndMode === "inside") {
-          const target = findComponentById(activeScreen.props, dndTarget)
-          target._children = [placeholder]
+        let parent = findComponentById(activeScreen.props, dndParent)
+        if (!parent._children?.length) {
+          parent._children = [placeholder]
         } else {
-          const path = findComponentPathById(activeScreen.props, dndTarget)
-          const parent = path?.[path.length - 2]
-          if (parent) {
-            const idx = parent._children.findIndex(x => x._id === dndTarget)
-            const delta = dndMode === "below" ? 1 : -1
-            parent._children.splice(idx + delta, 0, placeholder)
-          }
+          parent._children.splice(dndIndex, 0, placeholder)
         }
       }
 

From c4bb3ac0143461a276a0e6e7af52740d1b5247bd Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 08:20:51 +0100
Subject: [PATCH 04/36] Only explode components when dragging over them

---
 packages/client/src/components/Component.svelte | 4 ++--
 packages/client/src/stores/components.js        | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 93620606c8..ba5ca95f5a 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -98,8 +98,8 @@
   $: selected =
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
-  $: isDndParent = $componentStore.dndParent === id
   $: inDragPath = inSelectedPath && $builderStore.editMode
+  $: inDndPath = $componentStore.dndPath?.includes(id)
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
@@ -457,7 +457,7 @@
     class:interactive
     class:editing
     class:block={isBlock}
-    class:explode={interactive && hasChildren && $builderStore.isDragging}
+    class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === "placeholder"}
     data-id={id}
     data-name={name}
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index e73b498648..43bc1c2ff6 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -39,6 +39,8 @@ const createComponentStore = () => {
       // Derive the selected component path
       const selectedPath =
         findComponentPathById(asset?.props, selectedComponentId) || []
+      const dndPath =
+        findComponentPathById(asset?.props, $builderState.dndParent) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -49,6 +51,7 @@ const createComponentStore = () => {
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
+        dndPath: dndPath?.map(component => component._id),
       }
     }
   )

From d4a767f93ea7bdd382e4657fc8dbee2c4d64f671 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 08:46:38 +0100
Subject: [PATCH 05/36] Improve row vs column detection to fix any edge cases

---
 .../client/src/components/Component.svelte    |   6 +-
 .../src/components/preview/DNDHandler.svelte  | 219 ++++--------------
 .../preview/DNDPositionIndicator.svelte       |  66 ------
 3 files changed, 44 insertions(+), 247 deletions(-)
 delete mode 100644 packages/client/src/components/preview/DNDPositionIndicator.svelte

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index ba5ca95f5a..0f60c7f707 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -28,7 +28,6 @@
   export let isScreen = false
   export let isBlock = false
   export let parent = null
-  export let index = 0
 
   // Get parent contexts
   const context = getContext("context")
@@ -463,14 +462,13 @@
     data-name={name}
     data-icon={icon}
     data-parent={parent}
-    data-index={index}
   >
     <svelte:component this={constructor} bind:this={ref} {...initialSettings}>
       {#if hasMissingRequiredSettings}
         <ComponentPlaceholder />
       {:else if children.length}
-        {#each children as child, idx (child._id)}
-          <svelte:self instance={child} parent={id} index={idx} />
+        {#each children as child (child._id)}
+          <svelte:self instance={child} parent={id} />
         {/each}
       {:else if emptyState}
         {#if isScreen}
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 37bd9d3402..50ea287a9b 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -9,32 +9,14 @@
 
 <script>
   import { onMount, onDestroy } from "svelte"
-  import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore } from "stores"
   import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
 
   let dragInfo
   let dropInfo
   let placeholderInfo
 
-  const getEdges = (bounds, mousePoint) => {
-    const { width, height, top, left } = bounds
-    return {
-      [Sides.Top]: [mousePoint[0], top],
-      [Sides.Right]: [left + width, mousePoint[1]],
-      [Sides.Bottom]: [mousePoint[0], top + height],
-      [Sides.Left]: [left, mousePoint[1]],
-    }
-  }
-
-  const calculatePointDelta = (point1, point2) => {
-    const deltaX = Math.abs(point1[0] - point2[0])
-    const deltaY = Math.abs(point1[1] - point2[1])
-    return Math.sqrt(deltaX * deltaX + deltaY * deltaY)
-  }
-
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
     return [...component.children][0]
@@ -93,83 +75,16 @@
     }
     e.preventDefault()
 
-    let { id, parent, node, index, acceptsChildren, empty } = dropInfo
+    let { id, parent, node, acceptsChildren, empty } = dropInfo
     const mouseY = e.clientY
     const mouseX = e.clientX
 
-    // if (!dropInfo.bounds) {
-    // } else {
-    //   dropInfo.bounds.top = node.offsetTop
-    //   dropInfo.bounds.left = node.offsetLeft
-    //   console.log(node.offsetTop)
-    // }
-
-    // console.log("calc")
-    // dropInfo.bounds = bounds
-
-    // If we're over something that does not accept children then we must go
-    // above or below this component
+    // If we're over something that does not accept children then we go up a
+    // level and consider the mouse position relative to the parent
     if (!acceptsChildren) {
       id = parent
-      acceptsChildren = true
       empty = false
       node = getDOMNode(parent)
-      //
-      //
-      // const bounds = node.getBoundingClientRect()
-      // const { top, left, height, width } = bounds
-      // const snapFactor = 0.5
-      // const snapLimitV = Math.min(40, height * snapFactor)
-      // const snapLimitH = Math.min(40, width * snapFactor)
-      //
-      // // Determine all sides we are within snap range of
-      // let sides = []
-      // if (mouseY <= top + snapLimitV) {
-      //   sides.push(Sides.Top)
-      // } else if (mouseY >= top + height - snapLimitV) {
-      //   sides.push(Sides.Bottom)
-      // }
-      // if (mouseX < left + snapLimitH) {
-      //   sides.push(Sides.Left)
-      // } else if (mouseX > left + width - snapLimitH) {
-      //   sides.push(Sides.Right)
-      // }
-      //
-      // // If we're somehow not in range of any side, do nothing
-      // if (!sides.length) {
-      //   console.log("no sides match")
-      //   return
-      // }
-      //
-      // let side
-      // if (sides.length === 1) {
-      //   // When one edge matches, use that edge
-      //   side = sides[0]
-      // } else {
-      //   // When 2 edges match, work out which is closer
-      //   const mousePoint = [mouseX, mouseY]
-      //   const edges = getEdges(bounds, mousePoint)
-      //   const edge1 = edges[sides[0]]
-      //   const delta1 = calculatePointDelta(mousePoint, edge1)
-      //   const edge2 = edges[sides[1]]
-      //   const delta2 = calculatePointDelta(mousePoint, edge2)
-      //   side = delta1 < delta2 ? sides[0] : sides[1]
-      // }
-      // if ([Sides.Top, Sides.Left].includes(side)) {
-      //   // Before, so use the current index
-      //   console.log("before")
-      //   placeholderInfo = {
-      //     parent: parent,
-      //     index: index,
-      //   }
-      // } else {
-      //   console.log("after")
-      //   // After, so use the next index
-      //   placeholderInfo = {
-      //     parent: parent,
-      //     index: index + 1,
-      //   }
-      // }
     }
 
     // We're now hovering over something which does accept children.
@@ -184,72 +99,56 @@
 
     // We're now hovering over something which accepts children and is not
     // empty, so we need to work out where to inside the placeholder
-
-    // Check we're actually inside
-    // if (
-    //   mouseY < top ||
-    //   mouseY > top + height ||
-    //   mouseX < left ||
-    //   mouseX > left + width
-    // ) {
-    //   console.log("not inside")
-    //   return
-    // }
-
-    // Get all DOM nodes of children of this component.
-    // Filter out the placeholder as we don't want it to affect the index of
-    // the new placeholder.
-    const children = [...(node.children || [])]
-      .filter(x => !x.classList.contains("placeholder"))
-      .map(x => x.children[0])
-
-    // Calculate centers of each child
-    const centers = children.map(child => {
-      const childBounds = child.getBoundingClientRect()
-      return [
-        childBounds.left + childBounds.width / 2,
-        childBounds.top + childBounds.height / 2,
-      ]
+    // Calculate the coordinates of various locations on each child.
+    // We include the placeholder component in this as it guarantees we have
+    // at least 2 child components, and therefore guarantee there is no
+    // ambiguity in the layout.
+    const childCoords = [...(node.children || [])].map(node => {
+      const bounds = node.children[0].getBoundingClientRect()
+      return {
+        placeholder: node.classList.contains("placeholder"),
+        centerX: bounds.left + bounds.width / 2,
+        centerY: bounds.top + bounds.height / 2,
+        left: bounds.left,
+        right: bounds.right,
+        top: bounds.top,
+        bottom: bounds.bottom,
+      }
     })
 
-    // Calculate variance of X and Y centers to determine layout
-    const xCoords = centers.map(x => x[0])
-    const yCoords = centers.map(x => x[1])
-    const xVariance = variance(xCoords)
-    const yVariance = variance(yCoords)
-    const column = xVariance <= yVariance
+    // Calculate the variance between each set of positions on the children
+    const variances = Object.keys(childCoords[0]).map(key => {
+      const coords = childCoords.map(x => x[key])
+      return {
+        variance: variance(coords),
+        side: key,
+      }
+    })
+
+    // Sort by variance. The lowest variance position indicates whether we are
+    // in a row or column layout
+    variances.sort((a, b) => {
+      return a.variance < b.variance ? -1 : 1
+    })
+    const column = ["centerX", "left", "right"].includes(variances[0].side)
     console.log(column ? "COL" : "ROW")
 
-    // Now that we know the layout, find which children in this axis we are
-    // between
-    const childPositions = column ? yCoords : xCoords
+    // Find the correct index to drop in based on the midpoints of each child
+    // in their primary axis.
+    // Here we filter out the placeholder component as we do not want it to
+    // affect the determination of the new index.
+    const childPositions = column
+      ? childCoords.filter(x => !x.placeholder).map(x => x.centerY)
+      : childCoords.filter(x => !x.placeholder).map(x => x.centerX)
     const mousePosition = column ? mouseY : mouseX
-
     let idx = 0
-    while (idx < children.length && childPositions[idx] < mousePosition) {
+    while (idx < childPositions.length && childPositions[idx] < mousePosition) {
       idx++
     }
-
     placeholderInfo = {
       parent: id,
       index: idx,
     }
-    // // When no edges match, drop inside if possible
-    // if (!sides.length) {
-    //   if (empty) {
-    //     console.log("allowed inside")
-    //     return {
-    //       ...dropInfo,
-    //       mode: "inside",
-    //       side: null,
-    //       bounds,
-    //     }
-    //   } else {
-    //     // No sides but also not empty?
-    //     console.log("no sides match, but not empty")
-    //     return null
-    //   }
-    // }
   }
 
   // Callback when on top of a component
@@ -268,12 +167,6 @@
       return
     }
 
-    // Do nothing if this is the placeholder
-    // if (element.dataset.id === "placeholder") {
-    //   console.log("placeholder")
-    //   return
-    // }
-
     const component = e.target.closest(".component:not(.block)")
     if (
       component &&
@@ -285,38 +178,17 @@
         return
       }
 
-      // Ensure the dragging flag is always set.
-      // There's a bit of a race condition between the app reinitialisation
-      // after selecting the DND component and setting this the first time
-      // if (!get(builderStore).isDragging) {
-      //   builderStore.actions.setDragging(true)
-      // }
-
       // Precompute and store some info to avoid recalculating everything in
       // dragOver
       dropInfo = {
         id: component.dataset.id,
         parent: component.dataset.parent,
-        index: parseInt(component.dataset.index),
         node: getDOMNode(component.dataset.id),
         empty: component.classList.contains("empty"),
         acceptsChildren: component.classList.contains("parent"),
       }
 
-      // console.log(
-      //   "enter",
-      //   component.dataset.name,
-      //   "id",
-      //   dropInfo.id,
-      //   "parent",
-      //   dropInfo.parent,
-      //   "index",
-      //   dropInfo.index
-      // )
-
       handleEvent(e)
-    } else {
-      // dropInfo = null
     }
   }
 
@@ -380,10 +252,3 @@
 {#if $builderStore.isDragging}
   <PlaceholderOverlay />
 {/if}
-
-<!--<DNDPositionIndicator-->
-<!--  {dropInfo}-->
-<!--  color="var(&#45;&#45;spectrum-global-color-static-green-500)"-->
-<!--  zIndex="940"-->
-<!--  transition-->
-<!--/>-->
diff --git a/packages/client/src/components/preview/DNDPositionIndicator.svelte b/packages/client/src/components/preview/DNDPositionIndicator.svelte
deleted file mode 100644
index 4af4674126..0000000000
--- a/packages/client/src/components/preview/DNDPositionIndicator.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-  import Indicator from "./Indicator.svelte"
-  import { Sides } from "./DNDHandler.svelte"
-
-  export let dropInfo
-  export let zIndex
-  export let color
-  export let transition
-
-  $: dimensions = getDimensions(dropInfo)
-  $: prefix = dropInfo?.mode === "above" ? "Before" : "After"
-  $: text = `${prefix} ${dropInfo?.name}`
-  $: icon = dropInfo?.icon
-  $: renderKey = `${dropInfo?.target}-${dropInfo?.side}`
-
-  const getDimensions = info => {
-    const { bounds, side } = info ?? {}
-    if (!bounds || !side) {
-      return null
-    }
-
-    // Get preview offset
-    const root = document.getElementById("clip-root")
-    const rootBounds = root.getBoundingClientRect()
-
-    // Subtract preview offset from bounds
-    let { left, top, width, height } = bounds
-    left -= rootBounds.left
-    top -= rootBounds.top
-
-    // Determine position
-    if (side === Sides.Top || side === Sides.Bottom) {
-      return {
-        top: side === Sides.Top ? top - 4 : top + height,
-        left: left - 2,
-        width: width + 4,
-        height: 0,
-      }
-    } else {
-      return {
-        top: top - 2,
-        left: side === Sides.Left ? left - 4 : left + width,
-        width: 0,
-        height: height + 4,
-      }
-    }
-  }
-</script>
-
-{#key renderKey}
-  {#if dimensions && dropInfo?.mode !== "inside"}
-    <Indicator
-      left={Math.round(dimensions.left)}
-      top={Math.round(dimensions.top)}
-      width={dimensions.width}
-      height={dimensions.height}
-      {text}
-      {icon}
-      {zIndex}
-      {color}
-      {transition}
-      alignRight={dropInfo?.side === Sides.Right}
-      line
-    />
-  {/if}
-{/key}

From 5beb6819ec3cd6d4497b9009f7a6c270975b0f7c Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 12:45:22 +0100
Subject: [PATCH 06/36] Fix issue with layout determination

---
 .../src/components/preview/DNDHandler.svelte    | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 50ea287a9b..f7783990a5 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -117,19 +117,22 @@
     })
 
     // Calculate the variance between each set of positions on the children
-    const variances = Object.keys(childCoords[0]).map(key => {
-      const coords = childCoords.map(x => x[key])
-      return {
-        variance: variance(coords),
-        side: key,
-      }
-    })
+    const variances = Object.keys(childCoords[0])
+      .filter(x => x !== "placeholder")
+      .map(key => {
+        const coords = childCoords.map(x => x[key])
+        return {
+          variance: variance(coords),
+          side: key,
+        }
+      })
 
     // Sort by variance. The lowest variance position indicates whether we are
     // in a row or column layout
     variances.sort((a, b) => {
       return a.variance < b.variance ? -1 : 1
     })
+    console.log(variances[0].side)
     const column = ["centerX", "left", "right"].includes(variances[0].side)
     console.log(column ? "COL" : "ROW")
 

From eb1dbc7302fc7be287ed0774067e6359c5a39e6d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 14:34:47 +0100
Subject: [PATCH 07/36] Hide the selected component when dragging

---
 packages/client/src/stores/screens.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index e642fa9004..d5525d15c7 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -48,14 +48,14 @@ const createScreenStore = () => {
       }
 
       // Insert DND placeholder if required
-      const { dndParent, dndIndex } = $builderStore
+      const { dndParent, dndIndex, selectedComponentId } = $builderStore
       const insert = true
       if (insert && activeScreen && dndParent && dndIndex != null) {
-        // let selectedComponent = findComponentById(
-        //   activeScreen.props,
-        //   selectedComponentId
-        // )
-        // delete selectedComponent._component
+        let selectedComponent = findComponentById(
+          activeScreen.props,
+          selectedComponentId
+        )
+        delete selectedComponent._component
         const placeholder = {
           _component: "placeholder",
           _id: "placeholder",

From 09f2cc1f726b66104ec5c13b149659e9f7bf9afc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 20:00:25 +0100
Subject: [PATCH 08/36] Reduce jank by computing symmetrical component
 breakpoint whens considering DND candidate positions and ignoring the hidden
 selected component

---
 .../client/src/components/Component.svelte    |   7 +
 .../src/components/preview/DNDHandler.svelte  | 172 +++++++++---------
 packages/client/src/stores/screens.js         |   3 +
 3 files changed, 93 insertions(+), 89 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 0f60c7f707..005eb12f2d 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -407,6 +407,7 @@
   }
 
   const scrollIntoView = () => {
+    return
     const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
@@ -458,6 +459,9 @@
     class:block={isBlock}
     class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === "placeholder"}
+    class:screen={isScreen}
+    class:dragging={$builderStore.selectedComponentId === id &&
+      $builderStore.isDragging}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -504,4 +508,7 @@
   .editing :global(*:hover) {
     cursor: auto;
   }
+  .dragging {
+    pointer-events: none;
+  }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index f7783990a5..fbfdf06310 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,12 +1,3 @@
-<script context="module">
-  export const Sides = {
-    Top: "Top",
-    Right: "Right",
-    Bottom: "Bottom",
-    Left: "Left",
-  }
-</script>
-
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
@@ -17,11 +8,46 @@
   let dropInfo
   let placeholderInfo
 
+  $: parent = placeholderInfo?.parent
+  $: index = placeholderInfo?.index
+  $: builderStore.actions.updateDNDPlaceholder(parent, index)
+
+  // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
     return [...component.children][0]
   }
 
+  // Util to calculate the variance of a set of data
+  const variance = arr => {
+    const mean = arr.reduce((a, b) => a + b, 0) / arr.length
+    let squareSum = 0
+    arr.forEach(value => {
+      const delta = value - mean
+      squareSum += delta * delta
+    })
+    return squareSum / arr.length
+  }
+
+  // Callback when drag stops (whether dropped or not)
+  const stopDragging = () => {
+    console.log("END")
+
+    // Reset state
+    dragInfo = null
+    dropInfo = null
+    placeholderInfo = null
+    builderStore.actions.setDragging(false)
+
+    // Reset listener
+    if (dragInfo?.target) {
+      const component = document.getElementsByClassName(dragInfo.target)[0]
+      if (component) {
+        component.removeEventListener("dragend", stopDragging)
+      }
+    }
+  }
+
   // Callback when initially starting a drag on a draggable component
   const onDragStart = e => {
     const component = e.target.closest(".component")
@@ -29,6 +55,12 @@
       return
     }
 
+    // Hide drag ghost image
+    e.dataTransfer.setDragImage(new Image(), 0, 0)
+
+    // Add event handler to clear all drag state when dragging ends
+    component.addEventListener("dragend", stopDragging)
+
     // Update state
     dragInfo = {
       target: component.dataset.id,
@@ -36,37 +68,11 @@
     builderStore.actions.selectComponent(dragInfo.target)
     builderStore.actions.setDragging(true)
 
-    // Highlight being dragged by setting opacity
-    const child = getDOMNode(component.dataset.id)
-    if (child) {
-      child.style.opacity = "0.5"
-    }
-  }
-
-  // Callback when drag stops (whether dropped or not)
-  const onDragEnd = () => {
-    // Reset opacity style
-    if (dragInfo) {
-      const child = getDOMNode(dragInfo.target)
-      if (child) {
-        child.style.opacity = ""
-      }
-    }
-
-    // Reset state and styles
-    dragInfo = null
-    dropInfo = null
-    builderStore.actions.setDragging(false)
-  }
-
-  const variance = arr => {
-    const mean = arr.reduce((a, b) => a + b, 0) / arr.length
-    let squareSum = 0
-    arr.forEach(value => {
-      const delta = value - mean
-      squareSum += delta * delta
-    })
-    return squareSum / arr.length
+    // Execute this asynchronously so we don't kill the drag event by hiding
+    // the component in the same handler as starting the drag event
+    setTimeout(() => {
+      onDragEnter(e)
+    }, 0)
   }
 
   const handleEvent = e => {
@@ -106,7 +112,7 @@
     const childCoords = [...(node.children || [])].map(node => {
       const bounds = node.children[0].getBoundingClientRect()
       return {
-        placeholder: node.classList.contains("placeholder"),
+        // placeholder: node.classList.contains("placeholder"),
         centerX: bounds.left + bounds.width / 2,
         centerY: bounds.top + bounds.height / 2,
         left: bounds.left,
@@ -117,35 +123,45 @@
     })
 
     // Calculate the variance between each set of positions on the children
-    const variances = Object.keys(childCoords[0])
-      .filter(x => x !== "placeholder")
-      .map(key => {
-        const coords = childCoords.map(x => x[key])
-        return {
-          variance: variance(coords),
-          side: key,
-        }
-      })
+    const variances = Object.keys(childCoords[0]).map(key => {
+      const coords = childCoords.map(x => x[key])
+      return {
+        variance: variance(coords),
+        side: key,
+      }
+    })
 
     // Sort by variance. The lowest variance position indicates whether we are
     // in a row or column layout
     variances.sort((a, b) => {
       return a.variance < b.variance ? -1 : 1
     })
-    console.log(variances[0].side)
     const column = ["centerX", "left", "right"].includes(variances[0].side)
     console.log(column ? "COL" : "ROW")
 
-    // Find the correct index to drop in based on the midpoints of each child
-    // in their primary axis.
-    // Here we filter out the placeholder component as we do not want it to
-    // affect the determination of the new index.
-    const childPositions = column
-      ? childCoords.filter(x => !x.placeholder).map(x => x.centerY)
-      : childCoords.filter(x => !x.placeholder).map(x => x.centerX)
+    // Calculate breakpoints between children
+    let midpoints = []
+    for (let i = 0; i < childCoords.length - 1; i++) {
+      const child1 = childCoords[i]
+      const child2 = childCoords[i + 1]
+      let midpoint
+      if (column) {
+        const top = Math.min(child1.top, child2.top)
+        const bottom = Math.max(child1.bottom, child2.bottom)
+        midpoint = (top + bottom) / 2
+      } else {
+        const left = Math.min(child1.left, child2.left)
+        const right = Math.max(child1.right, child2.right)
+        midpoint = (left + right) / 2
+      }
+      midpoints.push(midpoint)
+    }
+    // let midpoints = childCoords.map(x => (column ? x.centerY : x.centerX))
+
+    // Determine the index to drop the component in
     const mousePosition = column ? mouseY : mouseX
     let idx = 0
-    while (idx < childPositions.length && childPositions[idx] < mousePosition) {
+    while (idx < midpoints.length && midpoints[idx] < mousePosition) {
       idx++
     }
     placeholderInfo = {
@@ -171,11 +187,7 @@
     }
 
     const component = e.target.closest(".component:not(.block)")
-    if (
-      component &&
-      component.classList.contains("droppable") &&
-      component.dataset.id !== dragInfo.target
-    ) {
+    if (component && component.classList.contains("droppable")) {
       // Do nothing if this is the same target
       if (component.dataset.id === dropInfo?.target) {
         return
@@ -195,51 +207,33 @@
     }
   }
 
-  // Callback when leaving a potential drop target.
-  // Since we don't style our targets, we don't need to unset anything.
-  const onDragLeave = () => {}
-
   // Callback when dropping a drag on top of some component
-  const onDrop = e => {
-    e.preventDefault()
-    dropInfo = null
-    placeholderInfo = null
-    dragInfo = null
-    builderStore.actions.setDragging(false)
-    if (dropInfo?.mode) {
-      // builderStore.actions.moveComponent(
-      //   dragInfo.target,
-      //   dropInfo.target,
-      //   dropInfo.mode
-      // )
-    }
+  const onDrop = () => {
+    console.log("DROP")
+    // builderStore.actions.moveComponent(
+    //   dragInfo.target,
+    //   dropInfo.target,
+    //   dropInfo.mode
+    // )
   }
 
-  $: parent = placeholderInfo?.parent
-  $: index = placeholderInfo?.index
-  $: builderStore.actions.updateDNDPlaceholder(parent, index)
-
   onMount(() => {
     // Events fired on the draggable target
     document.addEventListener("dragstart", onDragStart, false)
-    document.addEventListener("dragend", onDragEnd, false)
 
     // Events fired on the drop targets
     document.addEventListener("dragover", onDragOver, false)
     document.addEventListener("dragenter", onDragEnter, false)
-    document.addEventListener("dragleave", onDragLeave, false)
     document.addEventListener("drop", onDrop, false)
   })
 
   onDestroy(() => {
     // Events fired on the draggable target
     document.removeEventListener("dragstart", onDragStart, false)
-    document.removeEventListener("dragend", onDragEnd, false)
 
     // Events fired on the drop targets
     document.removeEventListener("dragover", onDragOver, false)
     document.removeEventListener("dragenter", onDragEnter, false)
-    document.removeEventListener("dragleave", onDragLeave, false)
     document.removeEventListener("drop", onDrop, false)
   })
 </script>
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index d5525d15c7..85293cd0ce 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -65,6 +65,9 @@ const createScreenStore = () => {
         if (!parent._children?.length) {
           parent._children = [placeholder]
         } else {
+          parent._children = parent._children.filter(
+            x => x._id !== selectedComponentId
+          )
           parent._children.splice(dndIndex, 0, placeholder)
         }
       }

From e9769b07218601352f3164d7dfb0f8b8252aa6ec Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 8 Oct 2022 15:03:44 +0100
Subject: [PATCH 09/36] Add throttle utility as an improved debounce

---
 packages/frontend-core/src/utils/utils.js | 36 +++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js
index 587d057351..ed76f13494 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -4,6 +4,8 @@
  * @param fn the async function to run
  * @return {Promise} a sequential version of the function
  */
+import { lastIndexOf } from "lodash/array"
+
 export const sequential = fn => {
   let queue = []
   return async (...params) => {
@@ -40,3 +42,37 @@ export const debounce = (callback, minDelay = 1000) => {
     })
   }
 }
+
+/**
+ * Utility to throttle invocations of a synchronous function. This is better
+ * than a simple debounce invocation for a number of reasons. Features include:
+ * - First invocation is immediate (no initial delay)
+ * - Every invocation has the latest params (no stale params)
+ * - There will always be a final invocation with the last params (no missing
+ *   final update)
+ * @param callback
+ * @param minDelay
+ * @returns {Function} a throttled version function
+ */
+export const throttle = (callback, minDelay = 1000) => {
+  let lastParams
+  let stalled = false
+  let pending = false
+  const invoke = (...params) => {
+    lastParams = params
+    if (stalled) {
+      pending = true
+      return
+    }
+    callback(...lastParams)
+    stalled = true
+    setTimeout(() => {
+      stalled = false
+      if (pending) {
+        pending = false
+        invoke(...lastParams)
+      }
+    }, minDelay)
+  }
+  return invoke
+}

From c2b32f8c5e3d20cdac14942120b7b952b86898d2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 8 Oct 2022 15:04:18 +0100
Subject: [PATCH 10/36] Throttle updates to prevent all jank and revert to
 component center breakboints for DND candidates

---
 .../client/src/components/Component.svelte    |   3 +-
 .../src/components/preview/DNDHandler.svelte  | 111 ++++++++++++++----
 2 files changed, 89 insertions(+), 25 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 005eb12f2d..e6dbbf8579 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -495,7 +495,8 @@
     transition: padding 250ms ease, border 250ms ease;
   }
   .component.explode :global(> *) {
-    padding: 16px !important;
+    padding: 32px !important;
+    gap: 16px !important;
     border: 2px dashed var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
   }
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index fbfdf06310..20bbc8bada 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -3,6 +3,7 @@
   import IndicatorSet from "./IndicatorSet.svelte"
   import { builderStore } from "stores"
   import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
+  import { Utils } from "@budibase/frontend-core"
 
   let dragInfo
   let dropInfo
@@ -75,15 +76,34 @@
     }, 0)
   }
 
-  const handleEvent = e => {
+  let lastX
+  let lastY
+  let lastTime
+
+  const processEvent = (mouseX, mouseY) => {
     if (!dropInfo) {
       return null
     }
-    e.preventDefault()
 
     let { id, parent, node, acceptsChildren, empty } = dropInfo
-    const mouseY = e.clientY
-    const mouseX = e.clientX
+
+    // Debounce by 10px difference
+    // if (lastX != null && lastY != null) {
+    //   const delta = Math.abs(mouseY - lastY) + Math.abs(mouseX - lastX)
+    //   if (delta < 10) {
+    //     console.log("delta fail")
+    //     return
+    //   }
+    // }
+    // lastX = mouseX
+    // lastY = mouseY
+
+    // Debounce by time
+    // if (Date.now() - (lastTime || 0) < 100) {
+    //   console.log("time fail")
+    //   return
+    // }
+    // lastTime = Date.now()
 
     // If we're over something that does not accept children then we go up a
     // level and consider the mouse position relative to the parent
@@ -112,7 +132,7 @@
     const childCoords = [...(node.children || [])].map(node => {
       const bounds = node.children[0].getBoundingClientRect()
       return {
-        // placeholder: node.classList.contains("placeholder"),
+        placeholder: node.classList.contains("placeholder"),
         centerX: bounds.left + bounds.width / 2,
         centerY: bounds.top + bounds.height / 2,
         left: bounds.left,
@@ -139,36 +159,79 @@
     const column = ["centerX", "left", "right"].includes(variances[0].side)
     console.log(column ? "COL" : "ROW")
 
-    // Calculate breakpoints between children
-    let midpoints = []
-    for (let i = 0; i < childCoords.length - 1; i++) {
-      const child1 = childCoords[i]
-      const child2 = childCoords[i + 1]
-      let midpoint
-      if (column) {
-        const top = Math.min(child1.top, child2.top)
-        const bottom = Math.max(child1.bottom, child2.bottom)
-        midpoint = (top + bottom) / 2
-      } else {
-        const left = Math.min(child1.left, child2.left)
-        const right = Math.max(child1.right, child2.right)
-        midpoint = (left + right) / 2
-      }
-      midpoints.push(midpoint)
-    }
-    // let midpoints = childCoords.map(x => (column ? x.centerY : x.centerX))
+    /** SYMMETRICAL BREAKPOINTS **/
+    // let breakpoints = []
+    // for (let i = 0; i < childCoords.length - 1; i++) {
+    //   const child1 = childCoords[i]
+    //   const child2 = childCoords[i + 1]
+    //   let breakpoint
+    //   if (column) {
+    //     const top = Math.min(child1.top, child2.top)
+    //     const bottom = Math.max(child1.bottom, child2.bottom)
+    //     breakpoint = (top + bottom) / 2
+    //   } else {
+    //     const left = Math.min(child1.left, child2.left)
+    //     const right = Math.max(child1.right, child2.right)
+    //     breakpoint = (left + right) / 2
+    //   }
+    //   breakpoints.push(breakpoint)
+    // }
+
+    /** CENTER BREAKPOINTS **/
+    let breakpoints = childCoords
+      .filter(x => !x.placeholder)
+      .map(x => {
+        return column ? x.centerY : x.centerX
+      })
+
+    /** NEXT EDGE BREAKPOINTS **/
+    // let breakpoints = []
+    // for (let i = 0; i < childCoords.length; i++) {
+    //   let breakpoint
+    //   if (column) {
+    //     if (mouseY > childCoords[i].top && mouseY < childCoords[i].bottom) {
+    //       // Inside this container
+    //       if (childCoords[i + 1]) {
+    //         breakpoint = childCoords[i + 1].top
+    //       } else {
+    //         breakpoint = childCoords[i].top
+    //       }
+    //     } else {
+    //       breakpoint =
+    //         mouseY < childCoords[i].bottom
+    //           ? childCoords[i].top
+    //           : childCoords[i].bottom
+    //     }
+    //   } else {
+    //     breakpoint =
+    //       mouseX < childCoords[i].left
+    //         ? childCoords[i].left
+    //         : childCoords[i].right
+    //   }
+    //   breakpoints.push(breakpoint)
+    // }
 
     // Determine the index to drop the component in
     const mousePosition = column ? mouseY : mouseX
+
     let idx = 0
-    while (idx < midpoints.length && midpoints[idx] < mousePosition) {
+    while (idx < breakpoints.length && breakpoints[idx] < mousePosition) {
       idx++
     }
+
+    // console.log(mousePosition, breakpoints.map(Math.round), idx)
+
     placeholderInfo = {
       parent: id,
       index: idx,
     }
   }
+  const throttledProcessEvent = Utils.throttle(processEvent, 250)
+
+  const handleEvent = e => {
+    e.preventDefault()
+    throttledProcessEvent(e.clientX, e.clientY)
+  }
 
   // Callback when on top of a component
   const onDragOver = e => {

From 234d8953f2f7652981a37fe69c544632c70bc003 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 8 Oct 2022 15:18:05 +0100
Subject: [PATCH 11/36] Fix row/column detection, add comments and remove old
 code

---
 .../src/components/preview/DNDHandler.svelte  | 112 +++---------------
 1 file changed, 17 insertions(+), 95 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 20bbc8bada..625c139e5e 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -76,35 +76,12 @@
     }, 0)
   }
 
-  let lastX
-  let lastY
-  let lastTime
-
   const processEvent = (mouseX, mouseY) => {
     if (!dropInfo) {
       return null
     }
-
     let { id, parent, node, acceptsChildren, empty } = dropInfo
 
-    // Debounce by 10px difference
-    // if (lastX != null && lastY != null) {
-    //   const delta = Math.abs(mouseY - lastY) + Math.abs(mouseX - lastX)
-    //   if (delta < 10) {
-    //     console.log("delta fail")
-    //     return
-    //   }
-    // }
-    // lastX = mouseX
-    // lastY = mouseY
-
-    // Debounce by time
-    // if (Date.now() - (lastTime || 0) < 100) {
-    //   console.log("time fail")
-    //   return
-    // }
-    // lastTime = Date.now()
-
     // If we're over something that does not accept children then we go up a
     // level and consider the mouse position relative to the parent
     if (!acceptsChildren) {
@@ -114,7 +91,7 @@
     }
 
     // We're now hovering over something which does accept children.
-    // If it is empty, just go inside it
+    // If it is empty, just go inside it.
     if (empty) {
       placeholderInfo = {
         parent: id,
@@ -143,13 +120,15 @@
     })
 
     // Calculate the variance between each set of positions on the children
-    const variances = Object.keys(childCoords[0]).map(key => {
-      const coords = childCoords.map(x => x[key])
-      return {
-        variance: variance(coords),
-        side: key,
-      }
-    })
+    const variances = Object.keys(childCoords[0])
+      .filter(x => x !== "placeholder")
+      .map(key => {
+        const coords = childCoords.map(x => x[key])
+        return {
+          variance: variance(coords),
+          side: key,
+        }
+      })
 
     // Sort by variance. The lowest variance position indicates whether we are
     // in a row or column layout
@@ -157,76 +136,29 @@
       return a.variance < b.variance ? -1 : 1
     })
     const column = ["centerX", "left", "right"].includes(variances[0].side)
-    console.log(column ? "COL" : "ROW")
 
-    /** SYMMETRICAL BREAKPOINTS **/
-    // let breakpoints = []
-    // for (let i = 0; i < childCoords.length - 1; i++) {
-    //   const child1 = childCoords[i]
-    //   const child2 = childCoords[i + 1]
-    //   let breakpoint
-    //   if (column) {
-    //     const top = Math.min(child1.top, child2.top)
-    //     const bottom = Math.max(child1.bottom, child2.bottom)
-    //     breakpoint = (top + bottom) / 2
-    //   } else {
-    //     const left = Math.min(child1.left, child2.left)
-    //     const right = Math.max(child1.right, child2.right)
-    //     breakpoint = (left + right) / 2
-    //   }
-    //   breakpoints.push(breakpoint)
-    // }
-
-    /** CENTER BREAKPOINTS **/
+    // Calculate breakpoints between child components so we can determine the
+    // index to drop the component in.
+    // We want to ignore the placeholder from this calculation as it should not
+    // be considered a real child of the parent.
     let breakpoints = childCoords
       .filter(x => !x.placeholder)
       .map(x => {
         return column ? x.centerY : x.centerX
       })
 
-    /** NEXT EDGE BREAKPOINTS **/
-    // let breakpoints = []
-    // for (let i = 0; i < childCoords.length; i++) {
-    //   let breakpoint
-    //   if (column) {
-    //     if (mouseY > childCoords[i].top && mouseY < childCoords[i].bottom) {
-    //       // Inside this container
-    //       if (childCoords[i + 1]) {
-    //         breakpoint = childCoords[i + 1].top
-    //       } else {
-    //         breakpoint = childCoords[i].top
-    //       }
-    //     } else {
-    //       breakpoint =
-    //         mouseY < childCoords[i].bottom
-    //           ? childCoords[i].top
-    //           : childCoords[i].bottom
-    //     }
-    //   } else {
-    //     breakpoint =
-    //       mouseX < childCoords[i].left
-    //         ? childCoords[i].left
-    //         : childCoords[i].right
-    //   }
-    //   breakpoints.push(breakpoint)
-    // }
-
     // Determine the index to drop the component in
     const mousePosition = column ? mouseY : mouseX
-
     let idx = 0
     while (idx < breakpoints.length && breakpoints[idx] < mousePosition) {
       idx++
     }
-
-    // console.log(mousePosition, breakpoints.map(Math.round), idx)
-
     placeholderInfo = {
       parent: id,
       index: idx,
     }
   }
-  const throttledProcessEvent = Utils.throttle(processEvent, 250)
+  const throttledProcessEvent = Utils.throttle(processEvent, 200)
 
   const handleEvent = e => {
     e.preventDefault()
@@ -235,7 +167,6 @@
 
   // Callback when on top of a component
   const onDragOver = e => {
-    // Skip if we aren't validly dragging currently
     if (!dragInfo || !dropInfo) {
       return
     }
@@ -244,20 +175,12 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    // Skip if we aren't validly dragging currently
-    if (!dragInfo || !e.target.closest) {
+    if (!dragInfo) {
       return
     }
 
-    const component = e.target.closest(".component:not(.block)")
+    const component = e.target?.closest?.(".component:not(.block)")
     if (component && component.classList.contains("droppable")) {
-      // Do nothing if this is the same target
-      if (component.dataset.id === dropInfo?.target) {
-        return
-      }
-
-      // Precompute and store some info to avoid recalculating everything in
-      // dragOver
       dropInfo = {
         id: component.dataset.id,
         parent: component.dataset.parent,
@@ -265,7 +188,6 @@
         empty: component.classList.contains("empty"),
         acceptsChildren: component.classList.contains("parent"),
       }
-
       handleEvent(e)
     }
   }

From 0d35e03bdfc2aa1e5080cf3338fb7c132b7cd299 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 8 Oct 2022 15:28:22 +0100
Subject: [PATCH 12/36] Rename DND state variables for clarity

---
 .../src/components/preview/DNDHandler.svelte  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 625c139e5e..783578ad21 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -5,12 +5,14 @@
   import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
 
-  let dragInfo
+  let sourceId
+  let targetInfo
   let dropInfo
-  let placeholderInfo
 
-  $: parent = placeholderInfo?.parent
-  $: index = placeholderInfo?.index
+  // These reactive statements are just a trick to only update the store when
+  // the value of one of the properties actually changes
+  $: parent = dropInfo?.parent
+  $: index = dropInfo?.index
   $: builderStore.actions.updateDNDPlaceholder(parent, index)
 
   // Util to get the inner DOM node by a component ID
@@ -35,14 +37,14 @@
     console.log("END")
 
     // Reset state
-    dragInfo = null
+    sourceId = null
+    targetInfo = null
     dropInfo = null
-    placeholderInfo = null
     builderStore.actions.setDragging(false)
 
     // Reset listener
-    if (dragInfo?.target) {
-      const component = document.getElementsByClassName(dragInfo.target)[0]
+    if (sourceId) {
+      const component = document.getElementsByClassName(sourceId)[0]
       if (component) {
         component.removeEventListener("dragend", stopDragging)
       }
@@ -63,10 +65,8 @@
     component.addEventListener("dragend", stopDragging)
 
     // Update state
-    dragInfo = {
-      target: component.dataset.id,
-    }
-    builderStore.actions.selectComponent(dragInfo.target)
+    sourceId = component.dataset.id
+    builderStore.actions.selectComponent(sourceId)
     builderStore.actions.setDragging(true)
 
     // Execute this asynchronously so we don't kill the drag event by hiding
@@ -76,11 +76,13 @@
     }, 0)
   }
 
+  // Core logic for handling drop events and determining where to render the
+  // drop target placeholder
   const processEvent = (mouseX, mouseY) => {
-    if (!dropInfo) {
+    if (!targetInfo) {
       return null
     }
-    let { id, parent, node, acceptsChildren, empty } = dropInfo
+    let { id, parent, node, acceptsChildren, empty } = targetInfo
 
     // If we're over something that does not accept children then we go up a
     // level and consider the mouse position relative to the parent
@@ -93,7 +95,7 @@
     // We're now hovering over something which does accept children.
     // If it is empty, just go inside it.
     if (empty) {
-      placeholderInfo = {
+      dropInfo = {
         parent: id,
         index: 0,
       }
@@ -153,7 +155,7 @@
     while (idx < breakpoints.length && breakpoints[idx] < mousePosition) {
       idx++
     }
-    placeholderInfo = {
+    dropInfo = {
       parent: id,
       index: idx,
     }
@@ -167,7 +169,7 @@
 
   // Callback when on top of a component
   const onDragOver = e => {
-    if (!dragInfo || !dropInfo) {
+    if (!sourceId || !targetInfo) {
       return
     }
     handleEvent(e)
@@ -175,13 +177,15 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    if (!dragInfo) {
+    if (!sourceId) {
       return
     }
 
+    // Find the next valid component to consider dropping over, ignoring nested
+    // block components
     const component = e.target?.closest?.(".component:not(.block)")
     if (component && component.classList.contains("droppable")) {
-      dropInfo = {
+      targetInfo = {
         id: component.dataset.id,
         parent: component.dataset.parent,
         node: getDOMNode(component.dataset.id),

From 608e41277a2b2a91783dde53ac45fcc36bad8add Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Sat, 8 Oct 2022 15:32:36 +0100
Subject: [PATCH 13/36] Reduce padding when dragging over a component tree and
 remove unused component class names

---
 packages/client/src/components/Component.svelte | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index e6dbbf8579..c3d6de5cae 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -459,9 +459,6 @@
     class:block={isBlock}
     class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === "placeholder"}
-    class:screen={isScreen}
-    class:dragging={$builderStore.selectedComponentId === id &&
-      $builderStore.isDragging}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -495,7 +492,7 @@
     transition: padding 250ms ease, border 250ms ease;
   }
   .component.explode :global(> *) {
-    padding: 32px !important;
+    padding: 16px !important;
     gap: 16px !important;
     border: 2px dashed var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
@@ -509,7 +506,4 @@
   .editing :global(*:hover) {
     cursor: auto;
   }
-  .dragging {
-    pointer-events: none;
-  }
 </style>

From 7d72cee30431f5fc03a0e315b7421c2935884a4d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 09:22:47 +0100
Subject: [PATCH 14/36] Tune DND throttle rate

---
 packages/client/src/components/preview/DNDHandler.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 783578ad21..a4e737214f 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -160,7 +160,7 @@
       index: idx,
     }
   }
-  const throttledProcessEvent = Utils.throttle(processEvent, 200)
+  const throttledProcessEvent = Utils.throttle(processEvent, 130)
 
   const handleEvent = e => {
     e.preventDefault()

From b2be069ef1696e119dfd341ad29549a9f20f402d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 09:36:17 +0100
Subject: [PATCH 15/36] Make DND work again by converting new parent+index
 params into old target+mode

---
 .../src/components/preview/DNDHandler.svelte  | 43 +++++++++++++++----
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index a4e737214f..04503f8020 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -1,9 +1,11 @@
 <script>
   import { onMount, onDestroy } from "svelte"
+  import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
+  import { findComponentById } from "utils/components.js"
 
   let sourceId
   let targetInfo
@@ -34,8 +36,6 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = () => {
-    console.log("END")
-
     // Reset state
     sourceId = null
     targetInfo = null
@@ -198,12 +198,37 @@
 
   // Callback when dropping a drag on top of some component
   const onDrop = () => {
-    console.log("DROP")
-    // builderStore.actions.moveComponent(
-    //   dragInfo.target,
-    //   dropInfo.target,
-    //   dropInfo.mode
-    // )
+    let target, mode
+
+    // Convert parent + index into target + mode
+    if (sourceId && dropInfo?.parent && dropInfo.index != null) {
+      const parent = findComponentById(
+        get(componentStore).currentAsset?.props,
+        dropInfo.parent
+      )
+      if (!parent) {
+        return
+      }
+
+      // Filter out source component from consideration
+      const children = parent._children?.filter(x => x._id !== sourceId)
+
+      // Use inside if no existing children
+      if (!children?.length) {
+        target = parent._id
+        mode = "inside"
+      } else if (dropInfo.index === 0) {
+        target = children[0]?._id
+        mode = "above"
+      } else {
+        target = children[dropInfo.index - 1]?._id
+        mode = "below"
+      }
+    }
+
+    if (target && mode) {
+      builderStore.actions.moveComponent(sourceId, target, mode)
+    }
   }
 
   onMount(() => {

From 73a206e2f1a425dc5fd84aa7dc784a602d3c2d54 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 09:51:13 +0100
Subject: [PATCH 16/36] Fully remove source component from client tree while
 dragging

---
 .../src/components/preview/DNDHandler.svelte  |  6 +++--
 packages/client/src/stores/screens.js         | 14 +++++++-----
 packages/client/src/utils/components.js       | 22 +++++++++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 04503f8020..df36d7cb85 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -210,8 +210,10 @@
         return
       }
 
-      // Filter out source component from consideration
-      const children = parent._children?.filter(x => x._id !== sourceId)
+      // Filter out source component and placeholder from consideration
+      const children = parent._children?.filter(
+        x => x._id !== "placeholder" && x._id !== sourceId
+      )
 
       // Use inside if no existing children
       if (!children?.length) {
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 85293cd0ce..69dcf99b07 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -3,10 +3,7 @@ import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
 import { RoleUtils } from "@budibase/frontend-core"
-import {
-  findComponentById,
-  findComponentPathById,
-} from "../utils/components.js"
+import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
 
 const createScreenStore = () => {
@@ -51,11 +48,16 @@ const createScreenStore = () => {
       const { dndParent, dndIndex, selectedComponentId } = $builderStore
       const insert = true
       if (insert && activeScreen && dndParent && dndIndex != null) {
-        let selectedComponent = findComponentById(
+        // Remove selected component from tree
+        let selectedParent = findComponentParent(
           activeScreen.props,
           selectedComponentId
         )
-        delete selectedComponent._component
+        selectedParent._children = selectedParent._children?.filter(
+          x => x._id !== selectedComponentId
+        )
+
+        // Insert placeholder
         const placeholder = {
           _component: "placeholder",
           _id: "placeholder",
diff --git a/packages/client/src/utils/components.js b/packages/client/src/utils/components.js
index 4b1b8a7ada..1812175c2c 100644
--- a/packages/client/src/utils/components.js
+++ b/packages/client/src/utils/components.js
@@ -60,3 +60,25 @@ export const findChildrenByType = (component, type, children = []) => {
     findChildrenByType(child, type, children)
   })
 }
+
+/**
+ * Recursively searches for the parent component of a specific component ID
+ */
+export const findComponentParent = (rootComponent, id, parentComponent) => {
+  if (!rootComponent || !id) {
+    return null
+  }
+  if (rootComponent._id === id) {
+    return parentComponent
+  }
+  if (!rootComponent._children) {
+    return null
+  }
+  for (const child of rootComponent._children) {
+    const childResult = findComponentParent(child, id, rootComponent)
+    if (childResult) {
+      return childResult
+    }
+  }
+  return null
+}

From e90a79257f4a830ecb01a257af999cffa769d1ba Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 10 Oct 2022 14:00:37 +0100
Subject: [PATCH 17/36] Remove dragged component from consideration of drop
 target

---
 packages/client/src/components/preview/DNDHandler.svelte | 4 +++-
 packages/client/src/stores/screens.js                    | 3 +--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index df36d7cb85..8dd9a666bf 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -183,7 +183,9 @@
 
     // Find the next valid component to consider dropping over, ignoring nested
     // block components
-    const component = e.target?.closest?.(".component:not(.block)")
+    const component = e.target?.closest?.(
+      `.component:not(.block):not(.${sourceId})`
+    )
     if (component && component.classList.contains("droppable")) {
       targetInfo = {
         id: component.dataset.id,
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 69dcf99b07..7419e24a53 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -46,8 +46,7 @@ const createScreenStore = () => {
 
       // Insert DND placeholder if required
       const { dndParent, dndIndex, selectedComponentId } = $builderStore
-      const insert = true
-      if (insert && activeScreen && dndParent && dndIndex != null) {
+      if (activeScreen && dndParent && dndIndex != null) {
         // Remove selected component from tree
         let selectedParent = findComponentParent(
           activeScreen.props,

From efe9425d3dcbf6804b1de001babbb9f1ff5013b1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 11 Oct 2022 08:52:45 +0100
Subject: [PATCH 18/36] Improve column/row detection by appending an ephemeral
 child component and tune timings

---
 .../client/src/components/Component.svelte    | 18 ++++++----------
 .../src/components/preview/DNDHandler.svelte  | 21 +++++++++++++++----
 .../src/components/preview/Indicator.svelte   |  4 ++--
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index c3d6de5cae..9466bc461b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -489,21 +489,15 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 250ms ease, border 250ms ease;
+    transition: padding 260ms ease, border 260ms ease;
   }
   .component.explode :global(> *) {
-    padding: 16px !important;
-    gap: 16px !important;
-    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
+    padding: 12px !important;
+    gap: 12px !important;
+    border: 2px dotted var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
   }
-  .interactive :global(*:hover) {
-    cursor: pointer;
-  }
-  .draggable :global(*:hover) {
-    cursor: grab;
-  }
-  .editing :global(*:hover) {
-    cursor: auto;
+  .interactive :global(*) {
+    cursor: default;
   }
 </style>
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 8dd9a666bf..01929d58d8 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -102,14 +102,21 @@
       return
     }
 
+    // Append an ephemeral div to allow us to determine layout if only one
+    // child exists
+    let ephemeralDiv
+    if (node.children.length === 1) {
+      ephemeralDiv = document.createElement("div")
+      ephemeralDiv.classList.add("placeholder")
+      node.appendChild(ephemeralDiv)
+    }
+
     // We're now hovering over something which accepts children and is not
     // empty, so we need to work out where to inside the placeholder
     // Calculate the coordinates of various locations on each child.
-    // We include the placeholder component in this as it guarantees we have
-    // at least 2 child components, and therefore guarantee there is no
-    // ambiguity in the layout.
     const childCoords = [...(node.children || [])].map(node => {
-      const bounds = node.children[0].getBoundingClientRect()
+      const child = node.children?.[0] || node
+      const bounds = child.getBoundingClientRect()
       return {
         placeholder: node.classList.contains("placeholder"),
         centerX: bounds.left + bounds.width / 2,
@@ -121,6 +128,12 @@
       }
     })
 
+    // Now that we've calculated the position of the children, we no longer need
+    // the ephemeral div
+    if (ephemeralDiv) {
+      node.removeChild(ephemeralDiv)
+    }
+
     // Calculate the variance between each set of positions on the children
     const variances = Object.keys(childCoords[0])
       .filter(x => x !== "placeholder")
diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte
index 1cb669bdc4..0b5b95e00b 100644
--- a/packages/client/src/components/preview/Indicator.svelte
+++ b/packages/client/src/components/preview/Indicator.svelte
@@ -19,8 +19,8 @@
 
 <div
   in:fade={{
-    delay: transition ? 130 : 0,
-    duration: transition ? 130 : 0,
+    delay: transition ? 100 : 0,
+    duration: transition ? 100 : 0,
   }}
   class="indicator"
   class:flipped

From f7d6e8db603dae65eeefefd11a896362c61353c5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 11 Oct 2022 16:02:09 +0100
Subject: [PATCH 19/36] Improve DND experience, use correct size of drop
 placeholder and don't drop if the position is unchanged

---
 .../client/src/components/Component.svelte    |  3 +-
 .../src/components/preview/DNDHandler.svelte  | 64 +++++++++++++------
 .../components/preview/DNDPlaceholder.svelte  | 33 ++++++++++
 ...ay.svelte => DNDPlaceholderOverlay.svelte} |  3 +-
 .../src/components/preview/Placeholder.svelte | 11 ----
 packages/client/src/constants.js              |  4 ++
 packages/client/src/stores/builder.js         |  6 +-
 packages/client/src/stores/components.js      | 13 ++--
 packages/client/src/stores/screens.js         |  5 +-
 9 files changed, 100 insertions(+), 42 deletions(-)
 create mode 100644 packages/client/src/components/preview/DNDPlaceholder.svelte
 rename packages/client/src/components/preview/{PlaceholderOverlay.svelte => DNDPlaceholderOverlay.svelte} (88%)
 delete mode 100644 packages/client/src/components/preview/Placeholder.svelte

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 9466bc461b..4f82523ec0 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -22,6 +22,7 @@
   import Placeholder from "components/app/Placeholder.svelte"
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
+  import { DNDPlaceholderID } from "constants"
 
   export let instance = {}
   export let isLayout = false
@@ -458,7 +459,7 @@
     class:editing
     class:block={isBlock}
     class:explode={interactive && hasChildren && inDndPath}
-    class:placeholder={id === "placeholder"}
+    class:placeholder={id === DNDPlaceholderID}
     data-id={id}
     data-name={name}
     data-icon={icon}
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 01929d58d8..40f52dd1ae 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -3,11 +3,11 @@
   import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
   import { builderStore, componentStore } from "stores"
-  import PlaceholderOverlay from "./PlaceholderOverlay.svelte"
+  import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
 
-  let sourceId
+  let sourceInfo
   let targetInfo
   let dropInfo
 
@@ -15,7 +15,8 @@
   // the value of one of the properties actually changes
   $: parent = dropInfo?.parent
   $: index = dropInfo?.index
-  $: builderStore.actions.updateDNDPlaceholder(parent, index)
+  $: bounds = sourceInfo?.bounds
+  $: builderStore.actions.updateDNDPlaceholder(parent, index, bounds)
 
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
@@ -37,14 +38,14 @@
   // Callback when drag stops (whether dropped or not)
   const stopDragging = () => {
     // Reset state
-    sourceId = null
+    sourceInfo = null
     targetInfo = null
     dropInfo = null
     builderStore.actions.setDragging(false)
 
     // Reset listener
-    if (sourceId) {
-      const component = document.getElementsByClassName(sourceId)[0]
+    if (sourceInfo) {
+      const component = document.getElementsByClassName(sourceInfo.id)[0]
       if (component) {
         component.removeEventListener("dragend", stopDragging)
       }
@@ -65,14 +66,33 @@
     component.addEventListener("dragend", stopDragging)
 
     // Update state
-    sourceId = component.dataset.id
-    builderStore.actions.selectComponent(sourceId)
+    const parentId = component.dataset.parent
+    const parent = findComponentById(
+      get(componentStore).currentAsset.props,
+      parentId
+    )
+    const index = parent._children.findIndex(
+      x => x._id === component.dataset.id
+    )
+    sourceInfo = {
+      id: component.dataset.id,
+      bounds: component.children[0].getBoundingClientRect(),
+      parent: parentId,
+      index,
+    }
+    builderStore.actions.selectComponent(sourceInfo.id)
     builderStore.actions.setDragging(true)
 
-    // Execute this asynchronously so we don't kill the drag event by hiding
-    // the component in the same handler as starting the drag event
+    // Set initial drop info to show placeholder exactly where the dragged
+    // component is.
+    // Execute this asynchronously to prevent bugs caused by updating state in
+    // the same handler as selecting a new component (which causes a client
+    // re-initialisation).
     setTimeout(() => {
-      onDragEnter(e)
+      dropInfo = {
+        parent: parentId,
+        index,
+      }
     }, 0)
   }
 
@@ -182,7 +202,7 @@
 
   // Callback when on top of a component
   const onDragOver = e => {
-    if (!sourceId || !targetInfo) {
+    if (!sourceInfo || !targetInfo) {
       return
     }
     handleEvent(e)
@@ -190,14 +210,14 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    if (!sourceId) {
+    if (!sourceInfo) {
       return
     }
 
     // Find the next valid component to consider dropping over, ignoring nested
     // block components
     const component = e.target?.closest?.(
-      `.component:not(.block):not(.${sourceId})`
+      `.component:not(.block):not(.${sourceInfo.id})`
     )
     if (component && component.classList.contains("droppable")) {
       targetInfo = {
@@ -216,7 +236,7 @@
     let target, mode
 
     // Convert parent + index into target + mode
-    if (sourceId && dropInfo?.parent && dropInfo.index != null) {
+    if (sourceInfo && dropInfo?.parent && dropInfo.index != null) {
       const parent = findComponentById(
         get(componentStore).currentAsset?.props,
         dropInfo.parent
@@ -225,9 +245,17 @@
         return
       }
 
+      // Do nothing if we didn't change the location
+      if (
+        sourceInfo.parent === dropInfo.parent &&
+        sourceInfo.index === dropInfo.index
+      ) {
+        return
+      }
+
       // Filter out source component and placeholder from consideration
       const children = parent._children?.filter(
-        x => x._id !== "placeholder" && x._id !== sourceId
+        x => x._id !== "placeholder" && x._id !== sourceInfo.id
       )
 
       // Use inside if no existing children
@@ -244,7 +272,7 @@
     }
 
     if (target && mode) {
-      builderStore.actions.moveComponent(sourceId, target, mode)
+      builderStore.actions.moveComponent(sourceInfo.id, target, mode)
     }
   }
 
@@ -278,5 +306,5 @@
 />
 
 {#if $builderStore.isDragging}
-  <PlaceholderOverlay />
+  <DNDPlaceholderOverlay />
 {/if}
diff --git a/packages/client/src/components/preview/DNDPlaceholder.svelte b/packages/client/src/components/preview/DNDPlaceholder.svelte
new file mode 100644
index 0000000000..9efabdbc27
--- /dev/null
+++ b/packages/client/src/components/preview/DNDPlaceholder.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { builderStore } from "stores"
+  import { DNDPlaceholderID } from "constants"
+
+  $: style = getStyle($builderStore.dndBounds)
+
+  const getStyle = bounds => {
+    if (!bounds) {
+      return null
+    }
+    return `--height: ${bounds.height}px; --width: ${bounds.width}px;`
+  }
+</script>
+
+{#if style}
+  <div class="wrapper">
+    <div class="placeholder" id={DNDPlaceholderID} {style} />
+  </div>
+{/if}
+
+<style>
+  .wrapper {
+    overflow: hidden;
+  }
+  .placeholder {
+    display: block;
+    height: var(--height);
+    width: var(--width);
+    max-height: 100%;
+    max-width: 100%;
+    opacity: 0;
+  }
+</style>
diff --git a/packages/client/src/components/preview/PlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
similarity index 88%
rename from packages/client/src/components/preview/PlaceholderOverlay.svelte
rename to packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
index 86950c533e..a762f35319 100644
--- a/packages/client/src/components/preview/PlaceholderOverlay.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -1,11 +1,12 @@
 <script>
   import { onMount } from "svelte"
+  import { DNDPlaceholderID } from "constants"
 
   let left, top, height, width
 
   onMount(() => {
     const interval = setInterval(() => {
-      const node = document.getElementById("placeholder")
+      const node = document.getElementById(DNDPlaceholderID)
       if (!node) {
         height = 0
         width = 0
diff --git a/packages/client/src/components/preview/Placeholder.svelte b/packages/client/src/components/preview/Placeholder.svelte
deleted file mode 100644
index 3457a49e6d..0000000000
--- a/packages/client/src/components/preview/Placeholder.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<div id="placeholder" class="placeholder" />
-
-<style>
-  .placeholder {
-    display: block;
-    min-height: 64px;
-    min-width: 64px;
-    flex: 0 0 64px;
-    opacity: 0;
-  }
-</style>
diff --git a/packages/client/src/constants.js b/packages/client/src/constants.js
index 51ef3fd124..23d44a34f5 100644
--- a/packages/client/src/constants.js
+++ b/packages/client/src/constants.js
@@ -29,3 +29,7 @@ export const ActionTypes = {
   ClearForm: "ClearForm",
   ChangeFormStep: "ChangeFormStep",
 }
+
+export const DNDPlaceholderID = "dnd-placeholder"
+export const DNDPlaceholderType = "dnd-placeholder"
+export const ScreenslotType = "screenslot"
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index e3cf2b3579..0404183c91 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -1,7 +1,6 @@
 import { writable, get } from "svelte/store"
 import { API } from "api"
 import { devToolsStore } from "./devTools.js"
-import { findComponentPathById } from "../utils/components.js"
 
 const dispatchEvent = (type, data = {}) => {
   window.parent.postMessage({ type, data })
@@ -21,9 +20,9 @@ const createBuilderStore = () => {
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
-
     dndParent: null,
     dndIndex: null,
+    dndBounds: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -109,10 +108,11 @@ const createBuilderStore = () => {
       // Notify the builder so we can reload component definitions
       dispatchEvent("reload-plugin")
     },
-    updateDNDPlaceholder: (parent, index) => {
+    updateDNDPlaceholder: (parent, index, bounds) => {
       store.update(state => {
         state.dndParent = parent
         state.dndIndex = index
+        state.dndBounds = bounds
         return state
       })
     },
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 43bc1c2ff6..e1d6012150 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -5,8 +5,9 @@ import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
 import Router from "../components/Router.svelte"
-import Placeholder from "../components/preview/Placeholder.svelte"
+import DNDPlaceholder from "../components/preview/DNDPlaceholder.svelte"
 import * as AppComponents from "../components/app/index.js"
+import { DNDPlaceholderType, ScreenslotType } from "../constants.js"
 
 const budibasePrefix = "@budibase/standard-components/"
 
@@ -109,9 +110,9 @@ const createComponentStore = () => {
     }
 
     // Screenslot is an edge case
-    if (type === "screenslot") {
+    if (type === ScreenslotType) {
       type = `${budibasePrefix}${type}`
-    } else if (type === "placeholder") {
+    } else if (type === DNDPlaceholderType) {
       return {}
     }
 
@@ -130,10 +131,10 @@ const createComponentStore = () => {
     if (!type) {
       return null
     }
-    if (type === "screenslot") {
+    if (type === ScreenslotType) {
       return Router
-    } else if (type === "placeholder") {
-      return Placeholder
+    } else if (type === DNDPlaceholderType) {
+      return DNDPlaceholder
     }
 
     // Handle budibase components
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 7419e24a53..5c630d2adf 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -5,6 +5,7 @@ import { appStore } from "./app"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
+import { DNDPlaceholderID, DNDPlaceholderType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
@@ -58,8 +59,8 @@ const createScreenStore = () => {
 
         // Insert placeholder
         const placeholder = {
-          _component: "placeholder",
-          _id: "placeholder",
+          _component: DNDPlaceholderID,
+          _id: DNDPlaceholderType,
           static: true,
         }
         let parent = findComponentById(activeScreen.props, dndParent)

From a71a553ee6d7e4229c42d35a045a13b34aeb6cdc Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 13:37:14 +0100
Subject: [PATCH 20/36] Add ability to drag new components into the preview

---
 .../src/builderStore/store/frontend.js        | 109 +++++++-----
 .../[screenId]/_components/AppPreview.svelte  |   3 +
 .../new/_components/NewComponentPanel.svelte  |  11 ++
 .../src/components/preview/DNDHandler.svelte  | 163 +++++++++---------
 .../components/preview/DNDPlaceholder.svelte  |   4 +-
 .../components/preview/HoverIndicator.svelte  |   4 +-
 .../preview/SelectionIndicator.svelte         |   4 +-
 .../src/components/preview/SettingsBar.svelte |   4 +-
 packages/client/src/index.js                  |  19 ++
 packages/client/src/stores/builder.js         |  27 ++-
 packages/client/src/stores/components.js      |   8 +-
 .../client/src/stores/derived/currentRole.js  |  11 ++
 packages/client/src/stores/derived/index.js   |   2 +
 .../client/src/stores/derived/isDragging.js   |  10 ++
 packages/client/src/stores/dnd.js             |  60 +++++++
 packages/client/src/stores/index.js           |  14 +-
 packages/client/src/stores/screens.js         |  39 +++--
 17 files changed, 318 insertions(+), 174 deletions(-)
 create mode 100644 packages/client/src/stores/derived/currentRole.js
 create mode 100644 packages/client/src/stores/derived/index.js
 create mode 100644 packages/client/src/stores/derived/isDragging.js
 create mode 100644 packages/client/src/stores/dnd.js

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index c90ab10c9a..4122954303 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { selectedScreen, selectedComponent } from "builderStore"
+import { selectedScreen, selectedComponent, store } from "builderStore"
 import {
   datasources,
   integrations,
@@ -451,7 +451,7 @@ export const getFrontendStore = () => {
           ...extras,
         }
       },
-      create: async (componentName, presetProps) => {
+      create: async (componentName, presetProps, parent, index) => {
         const state = get(store)
         const componentInstance = store.actions.components.createInstance(
           componentName,
@@ -461,48 +461,62 @@ export const getFrontendStore = () => {
           return
         }
 
-        // Patch selected screen
-        await store.actions.screens.patch(screen => {
-          // Find the selected component
-          const currentComponent = findComponent(
-            screen.props,
-            state.selectedComponentId
-          )
-          if (!currentComponent) {
-            return false
-          }
-
-          // Find parent node to attach this component to
-          let parentComponent
-          if (currentComponent) {
-            // Use selected component as parent if one is selected
-            const definition = store.actions.components.getDefinition(
-              currentComponent._component
-            )
-            if (definition?.hasChildren) {
-              // Use selected component if it allows children
-              parentComponent = currentComponent
+        // Insert in position if specified
+        if (parent && index != null) {
+          await store.actions.screens.patch(screen => {
+            let parentComponent = findComponent(screen.props, parent)
+            if (!parentComponent._children?.length) {
+              parentComponent._children = [componentInstance]
             } else {
-              // Otherwise we need to use the parent of this component
-              parentComponent = findComponentParent(
-                screen.props,
-                currentComponent._id
-              )
+              parentComponent._children.splice(index, 0, componentInstance)
             }
-          } else {
-            // Use screen or layout if no component is selected
-            parentComponent = screen.props
-          }
+          })
+        }
 
-          // Attach new component
-          if (!parentComponent) {
-            return false
-          }
-          if (!parentComponent._children) {
-            parentComponent._children = []
-          }
-          parentComponent._children.push(componentInstance)
-        })
+        // Otherwise we work out where this component should be inserted
+        else {
+          await store.actions.screens.patch(screen => {
+            // Find the selected component
+            const currentComponent = findComponent(
+              screen.props,
+              state.selectedComponentId
+            )
+            if (!currentComponent) {
+              return false
+            }
+
+            // Find parent node to attach this component to
+            let parentComponent
+            if (currentComponent) {
+              // Use selected component as parent if one is selected
+              const definition = store.actions.components.getDefinition(
+                currentComponent._component
+              )
+              if (definition?.hasChildren) {
+                // Use selected component if it allows children
+                parentComponent = currentComponent
+              } else {
+                // Otherwise we need to use the parent of this component
+                parentComponent = findComponentParent(
+                  screen.props,
+                  currentComponent._id
+                )
+              }
+            } else {
+              // Use screen or layout if no component is selected
+              parentComponent = screen.props
+            }
+
+            // Attach new component
+            if (!parentComponent) {
+              return false
+            }
+            if (!parentComponent._children) {
+              parentComponent._children = []
+            }
+            parentComponent._children.push(componentInstance)
+          })
+        }
 
         // Select new component
         store.update(state => {
@@ -990,6 +1004,19 @@ export const getFrontendStore = () => {
         }))
       },
     },
+    dnd: {
+      start: component => {
+        store.actions.preview.sendEvent("dragging-new-component", {
+          dragging: true,
+          component,
+        })
+      },
+      stop: () => {
+        store.actions.preview.sendEvent("dragging-new-component", {
+          dragging: false,
+        })
+      },
+    },
   }
 
   return store
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 309b676a70..a4c4c5b839 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -213,6 +213,9 @@
         await store.actions.components.handleEjectBlock(id, definition)
       } else if (type === "reload-plugin") {
         await store.actions.components.refreshDefinitions()
+      } else if (type === "drop-new-component") {
+        const { component, parent, index } = data
+        await store.actions.components.create(component, null, parent, index)
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 8cef10fb26..07781441c5 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -169,6 +169,14 @@
       window.removeEventListener("keydown", handleKeyDown)
     }
   })
+
+  const onDragStart = component => {
+    store.actions.dnd.start(component)
+  }
+
+  const onDragEnd = () => {
+    store.actions.dnd.stop()
+  }
 </script>
 
 <div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
@@ -206,6 +214,9 @@
               <div class="category-label">{category.name}</div>
               {#each category.children as component}
                 <div
+                  draggable="true"
+                  on:dragstart={() => onDragStart(component.component)}
+                  on:dragend={onDragEnd}
                   data-cy={`component-${component.name}`}
                   class="component"
                   class:selected={selectedIndex ===
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 40f52dd1ae..361f11dff2 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -2,21 +2,22 @@
   import { onMount, onDestroy } from "svelte"
   import { get } from "svelte/store"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, componentStore } from "stores"
+  import {
+    builderStore,
+    componentStore,
+    dndStore,
+    dndParent,
+    isDragging,
+  } from "stores"
   import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
 
-  let sourceInfo
-  let targetInfo
-  let dropInfo
-
-  // These reactive statements are just a trick to only update the store when
-  // the value of one of the properties actually changes
-  $: parent = dropInfo?.parent
-  $: index = dropInfo?.index
-  $: bounds = sourceInfo?.bounds
-  $: builderStore.actions.updateDNDPlaceholder(parent, index, bounds)
+  // Cache some dnd store state as local variables as it massively helps
+  // performance. It lets us avoid calling svelte getters on every DOM action.
+  $: source = $dndStore.source
+  $: target = $dndStore.target
+  $: drop = $dndStore.drop
 
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
@@ -37,19 +38,16 @@
 
   // Callback when drag stops (whether dropped or not)
   const stopDragging = () => {
-    // Reset state
-    sourceInfo = null
-    targetInfo = null
-    dropInfo = null
-    builderStore.actions.setDragging(false)
-
     // Reset listener
-    if (sourceInfo) {
-      const component = document.getElementsByClassName(sourceInfo.id)[0]
+    if (source?.id) {
+      const component = document.getElementsByClassName(source?.id)[0]
       if (component) {
         component.removeEventListener("dragend", stopDragging)
       }
     }
+
+    // Reset state
+    dndStore.actions.reset()
   }
 
   // Callback when initially starting a drag on a draggable component
@@ -66,6 +64,7 @@
     component.addEventListener("dragend", stopDragging)
 
     // Update state
+    const id = component.dataset.id
     const parentId = component.dataset.parent
     const parent = findComponentById(
       get(componentStore).currentAsset.props,
@@ -74,14 +73,13 @@
     const index = parent._children.findIndex(
       x => x._id === component.dataset.id
     )
-    sourceInfo = {
-      id: component.dataset.id,
+    dndStore.actions.startDragging({
+      id,
       bounds: component.children[0].getBoundingClientRect(),
       parent: parentId,
       index,
-    }
-    builderStore.actions.selectComponent(sourceInfo.id)
-    builderStore.actions.setDragging(true)
+    })
+    builderStore.actions.selectComponent(id)
 
     // Set initial drop info to show placeholder exactly where the dragged
     // component is.
@@ -89,20 +87,20 @@
     // the same handler as selecting a new component (which causes a client
     // re-initialisation).
     setTimeout(() => {
-      dropInfo = {
+      dndStore.actions.updateDrop({
         parent: parentId,
         index,
-      }
+      })
     }, 0)
   }
 
   // Core logic for handling drop events and determining where to render the
   // drop target placeholder
   const processEvent = (mouseX, mouseY) => {
-    if (!targetInfo) {
+    if (!target) {
       return null
     }
-    let { id, parent, node, acceptsChildren, empty } = targetInfo
+    let { id, parent, node, acceptsChildren, empty } = target
 
     // If we're over something that does not accept children then we go up a
     // level and consider the mouse position relative to the parent
@@ -115,10 +113,10 @@
     // We're now hovering over something which does accept children.
     // If it is empty, just go inside it.
     if (empty) {
-      dropInfo = {
+      dndStore.actions.updateDrop({
         parent: id,
         index: 0,
-      }
+      })
       return
     }
 
@@ -188,10 +186,10 @@
     while (idx < breakpoints.length && breakpoints[idx] < mousePosition) {
       idx++
     }
-    dropInfo = {
+    dndStore.actions.updateDrop({
       parent: id,
       index: idx,
-    }
+    })
   }
   const throttledProcessEvent = Utils.throttle(processEvent, 130)
 
@@ -202,7 +200,7 @@
 
   // Callback when on top of a component
   const onDragOver = e => {
-    if (!sourceInfo || !targetInfo) {
+    if (!source || !target) {
       return
     }
     handleEvent(e)
@@ -210,69 +208,80 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    if (!sourceInfo) {
+    if (!source) {
       return
     }
 
     // Find the next valid component to consider dropping over, ignoring nested
     // block components
     const component = e.target?.closest?.(
-      `.component:not(.block):not(.${sourceInfo.id})`
+      `.component:not(.block):not(.${source.id})`
     )
     if (component && component.classList.contains("droppable")) {
-      targetInfo = {
+      dndStore.actions.updateTarget({
         id: component.dataset.id,
         parent: component.dataset.parent,
         node: getDOMNode(component.dataset.id),
         empty: component.classList.contains("empty"),
         acceptsChildren: component.classList.contains("parent"),
-      }
+      })
       handleEvent(e)
     }
   }
 
   // Callback when dropping a drag on top of some component
   const onDrop = () => {
-    let target, mode
-
-    // Convert parent + index into target + mode
-    if (sourceInfo && dropInfo?.parent && dropInfo.index != null) {
-      const parent = findComponentById(
-        get(componentStore).currentAsset?.props,
-        dropInfo.parent
-      )
-      if (!parent) {
-        return
-      }
-
-      // Do nothing if we didn't change the location
-      if (
-        sourceInfo.parent === dropInfo.parent &&
-        sourceInfo.index === dropInfo.index
-      ) {
-        return
-      }
-
-      // Filter out source component and placeholder from consideration
-      const children = parent._children?.filter(
-        x => x._id !== "placeholder" && x._id !== sourceInfo.id
-      )
-
-      // Use inside if no existing children
-      if (!children?.length) {
-        target = parent._id
-        mode = "inside"
-      } else if (dropInfo.index === 0) {
-        target = children[0]?._id
-        mode = "above"
-      } else {
-        target = children[dropInfo.index - 1]?._id
-        mode = "below"
-      }
+    if (!source || !drop?.parent || drop?.index == null) {
+      return
     }
 
-    if (target && mode) {
-      builderStore.actions.moveComponent(sourceInfo.id, target, mode)
+    // Check if we're adding a new component rather than moving one
+    if (source.newComponentType) {
+      builderStore.actions.dropNewComponent(
+        source.newComponentType,
+        drop.parent,
+        drop.index
+      )
+    }
+
+    // Convert parent + index into target + mode
+    let legacyDropTarget, legacyDropMode
+    const parent = findComponentById(
+      get(componentStore).currentAsset?.props,
+      drop.parent
+    )
+    if (!parent) {
+      return
+    }
+
+    // Do nothing if we didn't change the location
+    if (source.parent === drop.parent && source.index === drop.index) {
+      return
+    }
+
+    // Filter out source component and placeholder from consideration
+    const children = parent._children?.filter(
+      x => x._id !== "placeholder" && x._id !== source.id
+    )
+
+    // Use inside if no existing children
+    if (!children?.length) {
+      legacyDropTarget = parent._id
+      legacyDropMode = "inside"
+    } else if (drop.index === 0) {
+      legacyDropTarget = children[0]?._id
+      legacyDropMode = "above"
+    } else {
+      legacyDropTarget = children[drop.index - 1]?._id
+      legacyDropMode = "below"
+    }
+
+    if (legacyDropTarget && legacyDropMode) {
+      builderStore.actions.moveComponent(
+        source.id,
+        legacyDropTarget,
+        legacyDropMode
+      )
     }
   }
 
@@ -298,13 +307,13 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.dndParent}
+  componentId={$dndParent}
   color="var(--spectrum-global-color-static-green-500)"
   zIndex="930"
   transition
   prefix="Inside"
 />
 
-{#if $builderStore.isDragging}
+{#if $isDragging}
   <DNDPlaceholderOverlay />
 {/if}
diff --git a/packages/client/src/components/preview/DNDPlaceholder.svelte b/packages/client/src/components/preview/DNDPlaceholder.svelte
index 9efabdbc27..3725f9e06e 100644
--- a/packages/client/src/components/preview/DNDPlaceholder.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholder.svelte
@@ -1,8 +1,8 @@
 <script>
-  import { builderStore } from "stores"
+  import { dndBounds } from "stores"
   import { DNDPlaceholderID } from "constants"
 
-  $: style = getStyle($builderStore.dndBounds)
+  $: style = getStyle($dndBounds)
 
   const getStyle = bounds => {
     if (!bounds) {
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 1a9e6477ac..ed28938d4e 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore } from "stores"
+  import { builderStore, isDragging } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.isDragging ? null : componentId}
+  componentId={$isDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index 5eacbf9b2e..a4037e5c9c 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { builderStore } from "stores"
+  import { builderStore, isDragging } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
@@ -8,7 +8,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$builderStore.selectedComponentId}
+  componentId={$isDragging ? null : $builderStore.selectedComponentId}
   {color}
   zIndex="910"
   transition
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 5ea9b2339f..3716f83d4a 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -3,7 +3,7 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore } from "stores"
+  import { builderStore, componentStore, isDragging } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 36
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $componentStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar && !$builderStore.isDragging
+  $: showBar = definition?.showSettingsBar && !$isDragging
   $: settings = getBarSettings(definition)
 
   const getBarSettings = definition => {
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 526ed1c10d..17f1c94359 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -6,6 +6,7 @@ import {
   blockStore,
   componentStore,
   environmentStore,
+  dndStore,
 } from "./stores"
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 import { get } from "svelte/store"
@@ -60,6 +61,24 @@ const loadBudibase = async () => {
     if (name === "eject-block") {
       const block = blockStore.actions.getBlock(payload)
       block?.eject()
+    } else if (name === "dragging-new-component") {
+      const { dragging, component } = payload
+      if (dragging) {
+        dndStore.actions.startDragging({
+          id: null,
+          parent: null,
+          bounds: {
+            height: 64,
+            width: 64,
+          },
+          index: null,
+          newComponentType: component,
+        })
+        builderStore.actions.setDraggingNewComponent(true)
+      } else {
+        dndStore.actions.reset()
+        builderStore.actions.setDraggingNewComponent(false)
+      }
     }
   }
 
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 0bb5693edb..135c08343e 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -16,13 +16,10 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    isDragging: false,
+    draggingNewComponent: false,
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
-    dndParent: null,
-    dndIndex: null,
-    dndBounds: null,
 
     // Legacy - allow the builder to specify a layout
     layout: null,
@@ -70,11 +67,19 @@ const createBuilderStore = () => {
         mode,
       })
     },
-    setDragging: dragging => {
-      if (dragging === get(store).isDragging) {
+    dropNewComponent: (component, parent, index) => {
+      console.log("dispatch", component, parent, index)
+      dispatchEvent("drop-new-component", {
+        component,
+        parent,
+        index,
+      })
+    },
+    setDraggingNewComponent: draggingNewComponent => {
+      if (draggingNewComponent === get(store).draggingNewComponent) {
         return
       }
-      store.update(state => ({ ...state, isDragging: dragging }))
+      store.update(state => ({ ...state, draggingNewComponent }))
     },
     setEditMode: enabled => {
       if (enabled === get(store).editMode) {
@@ -111,14 +116,6 @@ const createBuilderStore = () => {
       // Notify the builder so we can reload component definitions
       dispatchEvent("reload-plugin")
     },
-    updateDNDPlaceholder: (parent, index, bounds) => {
-      store.update(state => {
-        state.dndParent = parent
-        state.dndIndex = index
-        state.dndBounds = bounds
-        return state
-      })
-    },
   }
   return {
     ...store,
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index e1d6012150..71b7deb5a6 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -4,6 +4,7 @@ import { findComponentById, findComponentPathById } from "../utils/components"
 import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
+import { dndParent } from "./dnd.js"
 import Router from "../components/Router.svelte"
 import DNDPlaceholder from "../components/preview/DNDPlaceholder.svelte"
 import * as AppComponents from "../components/app/index.js"
@@ -19,8 +20,8 @@ const createComponentStore = () => {
   })
 
   const derivedStore = derived(
-    [store, builderStore, devToolsStore, screenStore],
-    ([$store, $builderState, $devToolsState, $screenState]) => {
+    [store, builderStore, devToolsStore, screenStore, dndParent],
+    ([$store, $builderState, $devToolsState, $screenState, $dndParent]) => {
       // Avoid any of this logic if we aren't in the builder preview
       if (!$builderState.inBuilder && !$devToolsState.visible) {
         return {}
@@ -40,8 +41,7 @@ const createComponentStore = () => {
       // Derive the selected component path
       const selectedPath =
         findComponentPathById(asset?.props, selectedComponentId) || []
-      const dndPath =
-        findComponentPathById(asset?.props, $builderState.dndParent) || []
+      const dndPath = findComponentPathById(asset?.props, $dndParent) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
diff --git a/packages/client/src/stores/derived/currentRole.js b/packages/client/src/stores/derived/currentRole.js
new file mode 100644
index 0000000000..28287e1ea4
--- /dev/null
+++ b/packages/client/src/stores/derived/currentRole.js
@@ -0,0 +1,11 @@
+import { derived } from "svelte/store"
+import { devToolsStore } from "../devTools.js"
+import { authStore } from "../auth.js"
+
+// Derive the current role of the logged-in user
+export const currentRole = derived(
+  [devToolsStore, authStore],
+  ([$devToolsStore, $authStore]) => {
+    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
+  }
+)
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
new file mode 100644
index 0000000000..85df1aaafa
--- /dev/null
+++ b/packages/client/src/stores/derived/index.js
@@ -0,0 +1,2 @@
+export { isDragging } from "./isDragging.js"
+export { currentRole } from "./currentRole.js"
diff --git a/packages/client/src/stores/derived/isDragging.js b/packages/client/src/stores/derived/isDragging.js
new file mode 100644
index 0000000000..d3edd586c6
--- /dev/null
+++ b/packages/client/src/stores/derived/isDragging.js
@@ -0,0 +1,10 @@
+import { derived } from "svelte/store"
+import { dndStore } from "../dnd"
+import { builderStore } from "../builder.js"
+
+// Derive whether we are dragging or not
+export const isDragging = derived(
+  [dndStore, builderStore],
+  ([$dndStore, $builderStore]) =>
+    $dndStore.source != null || $builderStore.draggingNewComponent
+)
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
new file mode 100644
index 0000000000..805ec8c339
--- /dev/null
+++ b/packages/client/src/stores/dnd.js
@@ -0,0 +1,60 @@
+import { writable, derived } from "svelte/store"
+
+const createDndStore = () => {
+  const initialState = {
+    // Info about the dragged component
+    source: null,
+
+    // Info about the target component being hovered over
+    target: null,
+
+    // Info about where the component would be dropped
+    drop: null,
+  }
+  const store = writable(initialState)
+
+  // newComponentType is an optional field to signify we are creating a new
+  // component rather than moving an existing one
+  const startDragging = ({ id, parent, bounds, index, newComponentType }) => {
+    store.set({
+      ...initialState,
+      source: { id, parent, bounds, index, newComponentType },
+    })
+  }
+
+  const updateTarget = ({ id, parent, node, empty, acceptsChildren }) => {
+    store.update(state => {
+      state.target = { id, parent, node, empty, acceptsChildren }
+      return state
+    })
+  }
+
+  const updateDrop = ({ parent, index }) => {
+    store.update(state => {
+      state.drop = { parent, index }
+      return state
+    })
+  }
+
+  const reset = () => {
+    store.set(initialState)
+  }
+
+  return {
+    subscribe: store.subscribe,
+    actions: {
+      startDragging,
+      updateTarget,
+      updateDrop,
+      reset,
+    },
+  }
+}
+
+export const dndStore = createDndStore()
+export const dndParent = derived(dndStore, $dndStore => $dndStore.drop?.parent)
+export const dndIndex = derived(dndStore, $dndStore => $dndStore.drop?.index)
+export const dndBounds = derived(
+  dndStore,
+  $dndStore => $dndStore.source?.bounds
+)
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 5b77762223..f86c0a0517 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -1,7 +1,3 @@
-import { derived } from "svelte/store"
-import { devToolsStore } from "./devTools.js"
-import { authStore } from "./auth.js"
-
 export { authStore } from "./auth"
 export { appStore } from "./app"
 export { notificationStore } from "./notification"
@@ -19,6 +15,7 @@ export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
 export { blockStore } from "./blocks.js"
 export { environmentStore } from "./environment"
+export { dndStore, dndIndex, dndParent, dndBounds } from "./dnd"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
@@ -26,10 +23,5 @@ export { createContextStore } from "./context"
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
 
-// Derive the current role of the logged-in user
-export const currentRole = derived(
-  [devToolsStore, authStore],
-  ([$devToolsStore, $authStore]) => {
-    return ($devToolsStore.enabled && $devToolsStore.role) || $authStore?.roleId
-  }
-)
+// Derived state
+export * from "./derived"
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index 5c630d2adf..b0bc06eee9 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -2,6 +2,7 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
+import { dndIndex, dndParent } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
@@ -9,8 +10,8 @@ import { DNDPlaceholderID, DNDPlaceholderType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
-    [appStore, routeStore, builderStore],
-    ([$appStore, $routeStore, $builderStore]) => {
+    [appStore, routeStore, builderStore, dndParent, dndIndex],
+    ([$appStore, $routeStore, $builderStore, $dndParent, $dndIndex]) => {
       let activeLayout, activeScreen
       let screens
 
@@ -46,31 +47,33 @@ const createScreenStore = () => {
       }
 
       // Insert DND placeholder if required
-      const { dndParent, dndIndex, selectedComponentId } = $builderStore
-      if (activeScreen && dndParent && dndIndex != null) {
-        // Remove selected component from tree
-        let selectedParent = findComponentParent(
-          activeScreen.props,
-          selectedComponentId
-        )
-        selectedParent._children = selectedParent._children?.filter(
-          x => x._id !== selectedComponentId
-        )
+      if (activeScreen && $dndParent && $dndIndex != null) {
+        // Remove selected component from tree if we are moving an existing
+        // component
+        const { selectedComponentId, draggingNewComponent } = $builderStore
+        if (!draggingNewComponent) {
+          let selectedParent = findComponentParent(
+            activeScreen.props,
+            selectedComponentId
+          )
+          if (selectedParent) {
+            selectedParent._children = selectedParent._children?.filter(
+              x => x._id !== selectedComponentId
+            )
+          }
+        }
 
-        // Insert placeholder
+        // Insert placeholder component
         const placeholder = {
           _component: DNDPlaceholderID,
           _id: DNDPlaceholderType,
           static: true,
         }
-        let parent = findComponentById(activeScreen.props, dndParent)
+        let parent = findComponentById(activeScreen.props, $dndParent)
         if (!parent._children?.length) {
           parent._children = [placeholder]
         } else {
-          parent._children = parent._children.filter(
-            x => x._id !== selectedComponentId
-          )
-          parent._children.splice(dndIndex, 0, placeholder)
+          parent._children.splice($dndIndex, 0, placeholder)
         }
       }
 

From 4e94b6633fcb943df324a499c8cd85de646e95c3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 15:45:02 +0100
Subject: [PATCH 21/36] Don't reset component padded state for DND until
 dragging stops, to prevent jankiness due to losing space

---
 .../client/src/components/Component.svelte    | 22 ++++++++++++++-----
 .../src/components/preview/DNDHandler.svelte  |  4 +++-
 packages/client/src/index.js                  |  2 +-
 packages/client/src/stores/components.js      |  1 +
 4 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 4f82523ec0..3d65db7206 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -16,7 +16,13 @@
     propsAreSame,
     getSettingsDefinition,
   } from "utils/componentProps"
-  import { builderStore, devToolsStore, componentStore, appStore } from "stores"
+  import {
+    builderStore,
+    devToolsStore,
+    componentStore,
+    appStore,
+    isDragging,
+  } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
@@ -152,6 +158,12 @@
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
+  // When dragging and dropping, pad components to allow dropping between
+  // nested layers. Only reset this when dragging stops.
+  let pad = false
+  $: pad = pad || (interactive && hasChildren && inDndPath)
+  $: $isDragging, (pad = false)
+
   // Update component context
   $: store.set({
     id,
@@ -454,11 +466,11 @@
     class:draggable
     class:droppable
     class:empty
-    class:parent={hasChildren}
     class:interactive
     class:editing
+    class:pad
+    class:parent={hasChildren}
     class:block={isBlock}
-    class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === DNDPlaceholderID}
     data-id={id}
     data-name={name}
@@ -490,9 +502,9 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 260ms ease, border 260ms ease;
+    transition: padding 260ms ease-in, border 260ms ease-in;
   }
-  .component.explode :global(> *) {
+  .component.pad :global(> *) {
     padding: 12px !important;
     gap: 12px !important;
     border: 2px dotted var(--spectrum-global-color-gray-400) !important;
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 361f11dff2..e2222300e0 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -13,6 +13,8 @@
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
 
+  const ThrottleRate = 130
+
   // Cache some dnd store state as local variables as it massively helps
   // performance. It lets us avoid calling svelte getters on every DOM action.
   $: source = $dndStore.source
@@ -191,7 +193,7 @@
       index: idx,
     })
   }
-  const throttledProcessEvent = Utils.throttle(processEvent, 130)
+  const throttledProcessEvent = Utils.throttle(processEvent, ThrottleRate)
 
   const handleEvent = e => {
     e.preventDefault()
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 17f1c94359..383421cc35 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -69,7 +69,7 @@ const loadBudibase = async () => {
           parent: null,
           bounds: {
             height: 64,
-            width: 64,
+            width: 128,
           },
           index: null,
           newComponentType: component,
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index 71b7deb5a6..e246299741 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -53,6 +53,7 @@ const createComponentStore = () => {
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
         dndPath: dndPath?.map(component => component._id),
+        dndDepth: dndPath?.length || 0,
       }
     }
   )

From 2ffb29dddfbaf960798256a251b6e07bc521826a Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 18:16:19 +0100
Subject: [PATCH 22/36] Invert some client store dependencies to improve
 performance and prevent dependency cycles

---
 packages/client/manifest.json                 |  4 ++
 .../client/src/components/Component.svelte    | 11 +++--
 .../src/components/preview/DNDHandler.svelte  | 19 ++++----
 .../components/preview/HoverIndicator.svelte  |  4 +-
 .../preview/SelectionIndicator.svelte         |  4 +-
 .../src/components/preview/SettingsBar.svelte |  4 +-
 packages/client/src/index.js                  | 15 ++-----
 packages/client/src/stores/builder.js         |  8 ----
 packages/client/src/stores/components.js      | 30 +++++--------
 .../src/stores/derived/dndComponentPath.js    | 13 ++++++
 packages/client/src/stores/derived/index.js   |  5 ++-
 .../client/src/stores/derived/isDragging.js   | 10 -----
 packages/client/src/stores/dnd.js             | 45 ++++++++++++++++---
 packages/client/src/stores/index.js           |  9 +++-
 packages/client/src/stores/screens.js         | 24 +++++++---
 15 files changed, 122 insertions(+), 83 deletions(-)
 create mode 100644 packages/client/src/stores/derived/dndComponentPath.js
 delete mode 100644 packages/client/src/stores/derived/isDragging.js

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 0edb5c0f39..14092b7b4d 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -85,6 +85,10 @@
     "icon": "Selection",
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "styles": [
       "padding",
       "size",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 3d65db7206..fe5f363152 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -21,14 +21,14 @@
     devToolsStore,
     componentStore,
     appStore,
-    isDragging,
+    dndIsDragging,
+    dndComponentPath,
   } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
   import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
   import ComponentPlaceholder from "components/app/ComponentPlaceholder.svelte"
-  import { DNDPlaceholderID } from "constants"
 
   export let instance = {}
   export let isLayout = false
@@ -105,7 +105,7 @@
     $builderStore.inBuilder && $builderStore.selectedComponentId === id
   $: inSelectedPath = $componentStore.selectedComponentPath?.includes(id)
   $: inDragPath = inSelectedPath && $builderStore.editMode
-  $: inDndPath = $componentStore.dndPath?.includes(id)
+  $: inDndPath = $dndComponentPath?.includes(id)
 
   // Derive definition properties which can all be optional, so need to be
   // coerced to booleans
@@ -162,7 +162,7 @@
   // nested layers. Only reset this when dragging stops.
   let pad = false
   $: pad = pad || (interactive && hasChildren && inDndPath)
-  $: $isDragging, (pad = false)
+  $: $dndIsDragging, (pad = false)
 
   // Update component context
   $: store.set({
@@ -471,7 +471,6 @@
     class:pad
     class:parent={hasChildren}
     class:block={isBlock}
-    class:placeholder={id === DNDPlaceholderID}
     data-id={id}
     data-name={name}
     data-icon={icon}
@@ -502,7 +501,7 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 260ms ease-in, border 260ms ease-in;
+    transition: padding 260ms ease-out, border 260ms ease-out;
   }
   .component.pad :global(> *) {
     padding: 12px !important;
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index e2222300e0..392cdceb36 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -4,14 +4,15 @@
   import IndicatorSet from "./IndicatorSet.svelte"
   import {
     builderStore,
-    componentStore,
+    screenStore,
     dndStore,
     dndParent,
-    isDragging,
+    dndIsDragging,
   } from "stores"
   import DNDPlaceholderOverlay from "./DNDPlaceholderOverlay.svelte"
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
+  import { DNDPlaceholderID } from "constants"
 
   const ThrottleRate = 130
 
@@ -69,13 +70,13 @@
     const id = component.dataset.id
     const parentId = component.dataset.parent
     const parent = findComponentById(
-      get(componentStore).currentAsset.props,
+      get(screenStore).activeScreen?.props,
       parentId
     )
     const index = parent._children.findIndex(
       x => x._id === component.dataset.id
     )
-    dndStore.actions.startDragging({
+    dndStore.actions.startDraggingExistingComponent({
       id,
       bounds: component.children[0].getBoundingClientRect(),
       parent: parentId,
@@ -127,7 +128,7 @@
     let ephemeralDiv
     if (node.children.length === 1) {
       ephemeralDiv = document.createElement("div")
-      ephemeralDiv.classList.add("placeholder")
+      ephemeralDiv.dataset.id = DNDPlaceholderID
       node.appendChild(ephemeralDiv)
     }
 
@@ -138,7 +139,7 @@
       const child = node.children?.[0] || node
       const bounds = child.getBoundingClientRect()
       return {
-        placeholder: node.classList.contains("placeholder"),
+        placeholder: node.dataset.id === DNDPlaceholderID,
         centerX: bounds.left + bounds.width / 2,
         centerY: bounds.top + bounds.height / 2,
         left: bounds.left,
@@ -249,7 +250,7 @@
     // Convert parent + index into target + mode
     let legacyDropTarget, legacyDropMode
     const parent = findComponentById(
-      get(componentStore).currentAsset?.props,
+      get(screenStore).activeScreen?.props,
       drop.parent
     )
     if (!parent) {
@@ -263,7 +264,7 @@
 
     // Filter out source component and placeholder from consideration
     const children = parent._children?.filter(
-      x => x._id !== "placeholder" && x._id !== source.id
+      x => x._id !== DNDPlaceholderID && x._id !== source.id
     )
 
     // Use inside if no existing children
@@ -316,6 +317,6 @@
   prefix="Inside"
 />
 
-{#if $isDragging}
+{#if $dndIsDragging}
   <DNDPlaceholderOverlay />
 {/if}
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index ed28938d4e..d5583ed3db 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,7 +1,7 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, isDragging } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
 
   let componentId
   $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
@@ -30,7 +30,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$isDragging ? null : componentId}
+  componentId={$dndIsDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
   {zIndex}
diff --git a/packages/client/src/components/preview/SelectionIndicator.svelte b/packages/client/src/components/preview/SelectionIndicator.svelte
index a4037e5c9c..49341a7976 100644
--- a/packages/client/src/components/preview/SelectionIndicator.svelte
+++ b/packages/client/src/components/preview/SelectionIndicator.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { builderStore, isDragging } from "stores"
+  import { builderStore, dndIsDragging } from "stores"
   import IndicatorSet from "./IndicatorSet.svelte"
 
   $: color = $builderStore.editMode
@@ -8,7 +8,7 @@
 </script>
 
 <IndicatorSet
-  componentId={$isDragging ? null : $builderStore.selectedComponentId}
+  componentId={$dndIsDragging ? null : $builderStore.selectedComponentId}
   {color}
   zIndex="910"
   transition
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 3716f83d4a..757d8b88db 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -3,7 +3,7 @@
   import SettingsButton from "./SettingsButton.svelte"
   import SettingsColorPicker from "./SettingsColorPicker.svelte"
   import SettingsPicker from "./SettingsPicker.svelte"
-  import { builderStore, componentStore, isDragging } from "stores"
+  import { builderStore, componentStore, dndIsDragging } from "stores"
   import { domDebounce } from "utils/domDebounce"
 
   const verticalOffset = 36
@@ -16,7 +16,7 @@
   let measured = false
 
   $: definition = $componentStore.selectedComponentDefinition
-  $: showBar = definition?.showSettingsBar && !$isDragging
+  $: showBar = definition?.showSettingsBar && !$dndIsDragging
   $: settings = getBarSettings(definition)
 
   const getBarSettings = definition => {
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 383421cc35..706cb4fc9f 100644
--- a/packages/client/src/index.js
+++ b/packages/client/src/index.js
@@ -64,20 +64,11 @@ const loadBudibase = async () => {
     } else if (name === "dragging-new-component") {
       const { dragging, component } = payload
       if (dragging) {
-        dndStore.actions.startDragging({
-          id: null,
-          parent: null,
-          bounds: {
-            height: 64,
-            width: 128,
-          },
-          index: null,
-          newComponentType: component,
-        })
-        builderStore.actions.setDraggingNewComponent(true)
+        const definition =
+          componentStore.actions.getComponentDefinition(component)
+        dndStore.actions.startDraggingNewComponent({ component, definition })
       } else {
         dndStore.actions.reset()
-        builderStore.actions.setDraggingNewComponent(false)
       }
     }
   }
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index 135c08343e..b937b7f696 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -16,7 +16,6 @@ const createBuilderStore = () => {
     theme: null,
     customTheme: null,
     previewDevice: "desktop",
-    draggingNewComponent: false,
     navigation: null,
     hiddenComponentIds: [],
     usedPlugins: null,
@@ -68,19 +67,12 @@ const createBuilderStore = () => {
       })
     },
     dropNewComponent: (component, parent, index) => {
-      console.log("dispatch", component, parent, index)
       dispatchEvent("drop-new-component", {
         component,
         parent,
         index,
       })
     },
-    setDraggingNewComponent: draggingNewComponent => {
-      if (draggingNewComponent === get(store).draggingNewComponent) {
-        return
-      }
-      store.update(state => ({ ...state, draggingNewComponent }))
-    },
     setEditMode: enabled => {
       if (enabled === get(store).editMode) {
         return
diff --git a/packages/client/src/stores/components.js b/packages/client/src/stores/components.js
index e246299741..b34dfe375d 100644
--- a/packages/client/src/stores/components.js
+++ b/packages/client/src/stores/components.js
@@ -4,7 +4,6 @@ import { findComponentById, findComponentPathById } from "../utils/components"
 import { devToolsStore } from "./devTools"
 import { screenStore } from "./screens"
 import { builderStore } from "./builder"
-import { dndParent } from "./dnd.js"
 import Router from "../components/Router.svelte"
 import DNDPlaceholder from "../components/preview/DNDPlaceholder.svelte"
 import * as AppComponents from "../components/app/index.js"
@@ -20,28 +19,22 @@ const createComponentStore = () => {
   })
 
   const derivedStore = derived(
-    [store, builderStore, devToolsStore, screenStore, dndParent],
-    ([$store, $builderState, $devToolsState, $screenState, $dndParent]) => {
+    [store, builderStore, devToolsStore, screenStore],
+    ([$store, $builderStore, $devToolsStore, $screenStore]) => {
+      const { inBuilder, selectedComponentId } = $builderStore
+
       // Avoid any of this logic if we aren't in the builder preview
-      if (!$builderState.inBuilder && !$devToolsState.visible) {
+      if (!inBuilder && !$devToolsStore.visible) {
         return {}
       }
 
-      // Derive the selected component instance and definition
-      let asset
-      const { screen, selectedComponentId } = $builderState
-      if ($builderState.inBuilder) {
-        asset = screen
-      } else {
-        asset = $screenState.activeScreen
-      }
-      const component = findComponentById(asset?.props, selectedComponentId)
+      const root = $screenStore.activeScreen?.props
+      const component = findComponentById(root, selectedComponentId)
       const definition = getComponentDefinition(component?._component)
 
       // Derive the selected component path
       const selectedPath =
-        findComponentPathById(asset?.props, selectedComponentId) || []
-      const dndPath = findComponentPathById(asset?.props, $dndParent) || []
+        findComponentPathById(root, selectedComponentId) || []
 
       return {
         customComponentManifest: $store.customComponentManifest,
@@ -51,9 +44,6 @@ const createComponentStore = () => {
         selectedComponentDefinition: definition,
         selectedComponentPath: selectedPath?.map(component => component._id),
         mountedComponentCount: Object.keys($store.mountedComponents).length,
-        currentAsset: asset,
-        dndPath: dndPath?.map(component => component._id),
-        dndDepth: dndPath?.length || 0,
       }
     }
   )
@@ -101,8 +91,8 @@ const createComponentStore = () => {
   }
 
   const getComponentById = id => {
-    const asset = get(derivedStore).currentAsset
-    return findComponentById(asset?.props, id)
+    const root = get(screenStore).activeScreen?.props
+    return findComponentById(root, id)
   }
 
   const getComponentDefinition = type => {
diff --git a/packages/client/src/stores/derived/dndComponentPath.js b/packages/client/src/stores/derived/dndComponentPath.js
new file mode 100644
index 0000000000..58fb395dd6
--- /dev/null
+++ b/packages/client/src/stores/derived/dndComponentPath.js
@@ -0,0 +1,13 @@
+import { derived } from "svelte/store"
+import { findComponentPathById } from "utils/components.js"
+import { dndParent } from "../dnd.js"
+import { screenStore } from "../screens.js"
+
+export const dndComponentPath = derived(
+  [dndParent, screenStore],
+  ([$dndParent, $screenStore]) => {
+    const root = $screenStore.activeScreen?.props
+    const path = findComponentPathById(root, $dndParent) || []
+    return path?.map(component => component._id)
+  }
+)
diff --git a/packages/client/src/stores/derived/index.js b/packages/client/src/stores/derived/index.js
index 85df1aaafa..4f6a6ab91d 100644
--- a/packages/client/src/stores/derived/index.js
+++ b/packages/client/src/stores/derived/index.js
@@ -1,2 +1,5 @@
-export { isDragging } from "./isDragging.js"
+// These derived stores are pulled out from their parent stores to avoid
+// dependency loops. By inverting store dependencies and extracting them
+// separately we can keep our actual stores lean and performant.
 export { currentRole } from "./currentRole.js"
+export { dndComponentPath } from "./dndComponentPath.js"
diff --git a/packages/client/src/stores/derived/isDragging.js b/packages/client/src/stores/derived/isDragging.js
deleted file mode 100644
index d3edd586c6..0000000000
--- a/packages/client/src/stores/derived/isDragging.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { derived } from "svelte/store"
-import { dndStore } from "../dnd"
-import { builderStore } from "../builder.js"
-
-// Derive whether we are dragging or not
-export const isDragging = derived(
-  [dndStore, builderStore],
-  ([$dndStore, $builderStore]) =>
-    $dndStore.source != null || $builderStore.draggingNewComponent
-)
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
index 805ec8c339..1e7d7a6d50 100644
--- a/packages/client/src/stores/dnd.js
+++ b/packages/client/src/stores/dnd.js
@@ -2,6 +2,10 @@ import { writable, derived } from "svelte/store"
 
 const createDndStore = () => {
   const initialState = {
+    // Flags for whether we are inserting a new component or not
+    isNewComponent: false,
+    newComponentType: null,
+
     // Info about the dragged component
     source: null,
 
@@ -13,12 +17,32 @@ const createDndStore = () => {
   }
   const store = writable(initialState)
 
-  // newComponentType is an optional field to signify we are creating a new
-  // component rather than moving an existing one
-  const startDragging = ({ id, parent, bounds, index, newComponentType }) => {
+  const startDraggingExistingComponent = ({ id, parent, bounds, index }) => {
     store.set({
       ...initialState,
-      source: { id, parent, bounds, index, newComponentType },
+      source: { id, parent, bounds, index },
+    })
+  }
+
+  const startDraggingNewComponent = ({ type, definition }) => {
+    if (!type || !definition) {
+      return
+    }
+
+    // Get size of new component so we can show a properly sized placeholder
+    const width = definition.size?.width || 128
+    const height = definition.size?.height || 64
+
+    store.set({
+      ...initialState,
+      isNewComponent: true,
+      newComponentType: type,
+      source: {
+        id: null,
+        parent: null,
+        bounds: { height, width },
+        index: null,
+      },
     })
   }
 
@@ -43,7 +67,8 @@ const createDndStore = () => {
   return {
     subscribe: store.subscribe,
     actions: {
-      startDragging,
+      startDraggingExistingComponent,
+      startDraggingNewComponent,
       updateTarget,
       updateDrop,
       reset,
@@ -52,9 +77,19 @@ const createDndStore = () => {
 }
 
 export const dndStore = createDndStore()
+
+// The DND store is updated extremely frequently, so we can greatly improve
+// performance by deriving any state that needs to be externally observed.
+// By doing this and using primitives, we can avoid invalidating other stores
+// or components which depend on DND state unless values actually change.
+export const dndIsDragging = derived(dndStore, $dndStore => !!$dndStore.source)
 export const dndParent = derived(dndStore, $dndStore => $dndStore.drop?.parent)
 export const dndIndex = derived(dndStore, $dndStore => $dndStore.drop?.index)
 export const dndBounds = derived(
   dndStore,
   $dndStore => $dndStore.source?.bounds
 )
+export const dndIsNewComponent = derived(
+  dndStore,
+  $dndStore => $dndStore.isNewComponent
+)
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index f86c0a0517..c431302d43 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -15,7 +15,14 @@ export { uploadStore } from "./uploads.js"
 export { rowSelectionStore } from "./rowSelection.js"
 export { blockStore } from "./blocks.js"
 export { environmentStore } from "./environment"
-export { dndStore, dndIndex, dndParent, dndBounds } from "./dnd"
+export {
+  dndStore,
+  dndIndex,
+  dndParent,
+  dndBounds,
+  dndIsNewComponent,
+  dndIsDragging,
+} from "./dnd"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
diff --git a/packages/client/src/stores/screens.js b/packages/client/src/stores/screens.js
index b0bc06eee9..0787610d80 100644
--- a/packages/client/src/stores/screens.js
+++ b/packages/client/src/stores/screens.js
@@ -2,7 +2,7 @@ import { derived } from "svelte/store"
 import { routeStore } from "./routes"
 import { builderStore } from "./builder"
 import { appStore } from "./app"
-import { dndIndex, dndParent } from "./dnd.js"
+import { dndIndex, dndParent, dndIsNewComponent } from "./dnd.js"
 import { RoleUtils } from "@budibase/frontend-core"
 import { findComponentById, findComponentParent } from "../utils/components.js"
 import { Helpers } from "@budibase/bbui"
@@ -10,8 +10,22 @@ import { DNDPlaceholderID, DNDPlaceholderType } from "constants"
 
 const createScreenStore = () => {
   const store = derived(
-    [appStore, routeStore, builderStore, dndParent, dndIndex],
-    ([$appStore, $routeStore, $builderStore, $dndParent, $dndIndex]) => {
+    [
+      appStore,
+      routeStore,
+      builderStore,
+      dndParent,
+      dndIndex,
+      dndIsNewComponent,
+    ],
+    ([
+      $appStore,
+      $routeStore,
+      $builderStore,
+      $dndParent,
+      $dndIndex,
+      $dndIsNewComponent,
+    ]) => {
       let activeLayout, activeScreen
       let screens
 
@@ -50,8 +64,8 @@ const createScreenStore = () => {
       if (activeScreen && $dndParent && $dndIndex != null) {
         // Remove selected component from tree if we are moving an existing
         // component
-        const { selectedComponentId, draggingNewComponent } = $builderStore
-        if (!draggingNewComponent) {
+        const { selectedComponentId } = $builderStore
+        if (!$dndIsNewComponent) {
           let selectedParent = findComponentParent(
             activeScreen.props,
             selectedComponentId

From bebe2f62c3a990546a7786a6cad90db73eff42c3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 18:17:02 +0100
Subject: [PATCH 23/36] Fix crash when dragging from client preview into
 component tree

---
 .../[componentId]/_components/navigation/ComponentTree.svelte  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
index 427fd98775..5cb6d31345 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte
@@ -76,6 +76,9 @@
       const compDef = store.actions.components.getDefinition(
         $dndStore.source?._component
       )
+      if (!compDef) {
+        return
+      }
       const compTypeName = compDef.name.toLowerCase()
       const path = findComponentPath(currentScreen.props, component._id)
 

From 1a210e3ee63155093b8044f2bb3bca86ee64b09f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 18:24:47 +0100
Subject: [PATCH 24/36] Fix issues dropping components from new component panel

---
 .../client/src/components/preview/DNDHandler.svelte |  1 +
 packages/client/src/stores/dnd.js                   | 13 ++++---------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 392cdceb36..61b34eefd3 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -245,6 +245,7 @@
         drop.parent,
         drop.index
       )
+      return
     }
 
     // Convert parent + index into target + mode
diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
index 1e7d7a6d50..cebdb7c6ae 100644
--- a/packages/client/src/stores/dnd.js
+++ b/packages/client/src/stores/dnd.js
@@ -2,10 +2,6 @@ import { writable, derived } from "svelte/store"
 
 const createDndStore = () => {
   const initialState = {
-    // Flags for whether we are inserting a new component or not
-    isNewComponent: false,
-    newComponentType: null,
-
     // Info about the dragged component
     source: null,
 
@@ -24,8 +20,8 @@ const createDndStore = () => {
     })
   }
 
-  const startDraggingNewComponent = ({ type, definition }) => {
-    if (!type || !definition) {
+  const startDraggingNewComponent = ({ component, definition }) => {
+    if (!component || !definition) {
       return
     }
 
@@ -35,13 +31,12 @@ const createDndStore = () => {
 
     store.set({
       ...initialState,
-      isNewComponent: true,
-      newComponentType: type,
       source: {
         id: null,
         parent: null,
         bounds: { height, width },
         index: null,
+        newComponentType: component,
       },
     })
   }
@@ -91,5 +86,5 @@ export const dndBounds = derived(
 )
 export const dndIsNewComponent = derived(
   dndStore,
-  $dndStore => $dndStore.isNewComponent
+  $dndStore => $dndStore.source?.newComponentType != null
 )

From 4c2a0028d6e6c7906f1225c7f8a80b6354014203 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 18:59:23 +0100
Subject: [PATCH 25/36] Add default size for every component type

---
 packages/client/manifest.json | 296 ++++++++++++++++++++++++----------
 1 file changed, 208 insertions(+), 88 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 14092b7b4d..763ac46b3f 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -87,7 +87,7 @@
     "showSettingsBar": true,
     "size": {
       "width": 400,
-      "height": 200
+      "height": 100
     },
     "styles": [
       "padding",
@@ -259,6 +259,10 @@
       "section"
     ],
     "showEmptyState": false,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "section",
@@ -280,6 +284,10 @@
     "icon": "Button",
     "editable": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 105,
+      "height": 35
+    },
     "settings": [
       {
         "type": "text",
@@ -372,6 +380,10 @@
     "illegalChildren": [
       "section"
     ],
+    "size": {
+      "width": 400,
+      "height": 10
+    },
     "settings": [
       {
         "type": "select",
@@ -409,6 +421,10 @@
     ],
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -588,6 +604,7 @@
     ]
   },
   "card": {
+    "deprecated": true,
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
@@ -668,6 +685,10 @@
     ],
     "showSettingsBar": true,
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 30
+    },
     "settings": [
       {
         "type": "text",
@@ -790,6 +811,10 @@
     ],
     "showSettingsBar": true,
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 40
+    },
     "settings": [
       {
         "type": "text",
@@ -907,6 +932,10 @@
     "name": "Tag",
     "icon": "Label",
     "showSettingsBar": true,
+    "size": {
+      "width": 100,
+      "height": 25
+    },
     "settings": [
       {
         "type": "text",
@@ -958,12 +987,13 @@
     "name": "Image",
     "description": "A basic component for displaying images",
     "icon": "Image",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 300
+    },
     "settings": [
       {
         "type": "text",
@@ -980,9 +1010,10 @@
     "styles": [
       "size"
     ],
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 300
+    },
     "settings": [
       {
         "type": "text",
@@ -1040,9 +1071,10 @@
     "name": "Icon",
     "description": "A basic component for displaying icons",
     "icon": "Shapes",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 25,
+      "height": 25
+    },
     "settings": [
       {
         "type": "icon",
@@ -1159,9 +1191,10 @@
     "icon": "Link",
     "showSettingsBar": true,
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 200,
+      "height": 30
+    },
     "settings": [
       {
         "type": "text",
@@ -1271,12 +1304,10 @@
     ]
   },
   "cardhorizontal": {
+    "deprecated": true,
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
-    "illegalChildren": [
-      "section"
-    ],
     "settings": [
       {
         "type": "text",
@@ -1367,27 +1398,31 @@
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
     "icon": "Card",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 260,
+      "height": 143
+    },
     "settings": [
       {
         "type": "text",
         "label": "Title",
         "key": "title",
-        "placeholder": "Total Revenue"
+        "placeholder": "Total Revenue",
+        "defaultValue": "Title"
       },
       {
         "type": "text",
         "label": "Value",
         "key": "value",
-        "placeholder": "$1,981,983"
+        "placeholder": "$1,981,983",
+        "defaultValue": "Value"
       },
       {
         "type": "text",
         "label": "Label",
         "key": "label",
-        "placeholder": "Stripe"
+        "placeholder": "Stripe",
+        "defaultValue": "Label"
       }
     ]
   },
@@ -1395,12 +1430,13 @@
     "name": "Embed",
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "text",
@@ -1414,9 +1450,10 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1575,9 +1612,10 @@
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1735,9 +1773,10 @@
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -1907,9 +1946,10 @@
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2035,9 +2075,10 @@
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2163,9 +2204,10 @@
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -2270,6 +2312,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",
@@ -2356,6 +2402,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "number",
@@ -2376,6 +2426,10 @@
       "size"
     ],
     "hasChildren": true,
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",
@@ -2402,13 +2456,14 @@
   "stringfield": {
     "name": "Text Field",
     "icon": "Text",
-    "illegalChildren": [
-      "section"
-    ],
     "styles": [
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/string",
@@ -2496,9 +2551,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/number",
@@ -2552,9 +2608,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/string",
@@ -2608,9 +2665,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/options",
@@ -2775,9 +2833,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/array",
@@ -2933,9 +2992,10 @@
     "name": "Checkbox",
     "icon": "SelectBox",
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/boolean",
@@ -3013,6 +3073,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 150
+    },
     "settings": [
       {
         "type": "field/longform",
@@ -3088,9 +3152,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/datetime",
@@ -3167,9 +3232,10 @@
     "styles": [
       "size"
     ],
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/barcode/qr",
@@ -3218,29 +3284,27 @@
       "size"
     ],
     "draggable": false,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 320
+    },
     "settings": [
       {
         "type": "dataProvider",
         "label": "Provider",
-        "key": "dataProvider",
-        "required": true
+        "key": "dataProvider"
       },
       {
         "type": "field",
         "label": "Latitude Key",
         "key": "latitudeKey",
-        "dependsOn": "dataProvider",
-        "required": true
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
         "label": "Longitude Key",
         "key": "longitudeKey",
-        "dependsOn": "dataProvider",
-        "required": true
+        "dependsOn": "dataProvider"
       },
       {
         "type": "field",
@@ -3334,9 +3398,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "settings": [
       {
         "type": "field/attachment",
@@ -3391,9 +3456,10 @@
       "size"
     ],
     "editable": true,
-    "illegalChildren": [
-      "section"
-    ],
+    "size": {
+      "width": 400,
+      "height": 50
+    },
     "settings": [
       {
         "type": "field/link",
@@ -3453,6 +3519,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "field/json",
@@ -3501,6 +3571,10 @@
       "size"
     ],
     "editable": true,
+    "size": {
+      "width": 400,
+      "height": 200
+    },
     "settings": [
       {
         "type": "field/attachment",
@@ -3563,6 +3637,10 @@
     "actions": [
       "RefreshDatasource"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataSource",
@@ -3643,6 +3721,10 @@
     ],
     "hasChildren": true,
     "showEmptyState": false,
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3741,6 +3823,10 @@
       "size"
     ],
     "hasChildren": false,
+    "size": {
+      "width": 200,
+      "height": 50
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3777,21 +3863,28 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 300,
+      "height": 120
+    },
     "settings": [
       {
         "type": "text",
         "key": "title",
-        "label": "Title"
+        "label": "Title",
+        "defaultValue": "Title"
       },
       {
         "type": "text",
         "key": "subtitle",
-        "label": "Subtitle"
+        "label": "Subtitle",
+        "defaultValue": "Subtitle"
       },
       {
         "type": "text",
         "key": "description",
-        "label": "Description"
+        "label": "Description",
+        "defaultValue": "Description"
       },
       {
         "type": "text",
@@ -3835,6 +3928,10 @@
     "name": "Dynamic Filter",
     "icon": "Filter",
     "showSettingsBar": true,
+    "size": {
+      "width": 100,
+      "height": 35
+    },
     "settings": [
       {
         "type": "dataProvider",
@@ -3882,6 +3979,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -4047,6 +4148,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 600,
+      "height": 400
+    },
     "settings": [
       {
         "type": "text",
@@ -4105,19 +4210,22 @@
             "type": "text",
             "key": "cardTitle",
             "label": "Title",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Title"
           },
           {
             "type": "text",
             "key": "cardSubtitle",
             "label": "Subtitle",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Subtitle"
           },
           {
             "type": "text",
             "key": "cardDescription",
             "label": "Description",
-            "nested": true
+            "nested": true,
+            "defaultValue": "Description"
           },
           {
             "type": "text",
@@ -4219,6 +4327,10 @@
     ],
     "hasChildren": true,
     "showSettingsBar": true,
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "dataSource",
@@ -4441,6 +4553,10 @@
     "styles": [
       "size"
     ],
+    "size": {
+      "width": 400,
+      "height": 100
+    },
     "settings": [
       {
         "type": "text",
@@ -4458,6 +4574,10 @@
     ],
     "block": true,
     "info": "Form blocks are only compatible with internal or SQL tables",
+    "size": {
+      "width": 400,
+      "height": 400
+    },
     "settings": [
       {
         "type": "select",

From 1b08e88c6f42c2703d9db6d0aea67ebfdae7d1ee Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 18:59:32 +0100
Subject: [PATCH 26/36] Fix double empty state around blocks

---
 packages/client/src/components/Component.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index fe5f363152..6d341b2eb8 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -135,8 +135,9 @@
   // Empty states can be shown for these components, but can be disabled
   // in the component manifest.
   $: empty =
-    (interactive && !children.length && hasChildren) ||
-    hasMissingRequiredSettings
+    !isBlock &&
+    ((interactive && !children.length && hasChildren) ||
+      hasMissingRequiredSettings)
   $: emptyState = empty && showEmptyState
 
   // Enrich component settings

From ef28b10deffbe1cd9b4e5dd26f992b240f3c0d74 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 19:04:05 +0100
Subject: [PATCH 27/36] Prevent showing placeholder dot when placeholder is
 invisible

---
 .../client/src/components/preview/DNDPlaceholderOverlay.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
index a762f35319..12103e3904 100644
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -25,7 +25,7 @@
   })
 </script>
 
-{#if left != null}
+{#if left != null && top != null && width && height}
   <div
     class="overlay"
     style="left: {left}px; top: {top}px; width: {width}px; height: {height}px;"

From 3fd7952a17cfb751d369f7f00dc29fcb4d795b90 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 19:13:44 +0100
Subject: [PATCH 28/36] Use block name in placeholders inside blocks

---
 packages/client/src/components/Block.svelte           | 3 +++
 packages/client/src/components/app/Placeholder.svelte | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index 05d92f208c..75474dfd6f 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -67,6 +67,9 @@
     // any depth
     id: $component.id,
 
+    // Name can be used down the tree in placeholders
+    name: $component.name,
+
     // We register block components with their raw props so that we can eject
     // blocks later on
     registerComponent: registerBlockComponent,
diff --git a/packages/client/src/components/app/Placeholder.svelte b/packages/client/src/components/app/Placeholder.svelte
index 203071e0b1..54553cb934 100644
--- a/packages/client/src/components/app/Placeholder.svelte
+++ b/packages/client/src/components/app/Placeholder.svelte
@@ -3,13 +3,14 @@
 
   const { builderStore } = getContext("sdk")
   const component = getContext("component")
+  const block = getContext("block")
 
   export let text
 </script>
 
 {#if $builderStore.inBuilder}
   <div>
-    {text || $component.name || "Placeholder"}
+    {text || block?.name || $component.name || "Placeholder"}
   </div>
 {/if}
 

From fecb8bb1a65abd87376dd3361814272be3910c36 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 19:34:23 +0100
Subject: [PATCH 29/36] Fix DND not working in field groups and any other
 component where children are not rendered inside the first DOM node

---
 packages/client/src/components/preview/DNDHandler.svelte | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 61b34eefd3..a9c52f0099 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -123,6 +123,14 @@
       return
     }
 
+    // As the first DOM node in a component may not necessarily contain the
+    // child components, we can find to try the parent of the first child
+    // component and use that as the real parent DOM node
+    const childNode = node.getElementsByClassName("component")[0]
+    if (childNode?.parentNode) {
+      node = childNode.parentNode
+    }
+
     // Append an ephemeral div to allow us to determine layout if only one
     // child exists
     let ephemeralDiv

From dabc93e1b6365616c7457d46cb9c8a7f5a1ca421 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 19:39:38 +0100
Subject: [PATCH 30/36] Fix unused plugins not being able to be dragged into
 the preview

---
 packages/client/src/stores/dnd.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/stores/dnd.js b/packages/client/src/stores/dnd.js
index cebdb7c6ae..a1f85af92c 100644
--- a/packages/client/src/stores/dnd.js
+++ b/packages/client/src/stores/dnd.js
@@ -21,13 +21,13 @@ const createDndStore = () => {
   }
 
   const startDraggingNewComponent = ({ component, definition }) => {
-    if (!component || !definition) {
+    if (!component) {
       return
     }
 
     // Get size of new component so we can show a properly sized placeholder
-    const width = definition.size?.width || 128
-    const height = definition.size?.height || 64
+    const width = definition?.size?.width || 128
+    const height = definition?.size?.height || 64
 
     store.set({
       ...initialState,

From 3f429ff3ce955085a9bbbf4685d019a902980912 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 19:45:47 +0100
Subject: [PATCH 31/36] Lint and prevent scrolling to selected component when
 starting dragging

---
 packages/builder/src/builderStore/store/frontend.js | 2 +-
 packages/client/src/components/Component.svelte     | 6 +++++-
 packages/frontend-core/src/utils/utils.js           | 2 --
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 4122954303..848dd4405a 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -1,6 +1,6 @@
 import { get, writable } from "svelte/store"
 import { cloneDeep } from "lodash/fp"
-import { selectedScreen, selectedComponent, store } from "builderStore"
+import { selectedScreen, selectedComponent } from "builderStore"
 import {
   datasources,
   integrations,
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 6d341b2eb8..5996b182eb 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -421,7 +421,11 @@
   }
 
   const scrollIntoView = () => {
-    return
+    // Don't scroll into view if we selected this component because we were
+    // starting dragging on it
+    if (get(dndIsDragging)) {
+      return
+    }
     const node = document.getElementsByClassName(id)?.[0]?.children[0]
     if (!node) {
       return
diff --git a/packages/frontend-core/src/utils/utils.js b/packages/frontend-core/src/utils/utils.js
index ed76f13494..8aa49392fb 100644
--- a/packages/frontend-core/src/utils/utils.js
+++ b/packages/frontend-core/src/utils/utils.js
@@ -4,8 +4,6 @@
  * @param fn the async function to run
  * @return {Promise} a sequential version of the function
  */
-import { lastIndexOf } from "lodash/array"
-
 export const sequential = fn => {
   let queue = []
   return async (...params) => {

From 0e83bcfe9eef056e681b5e5e14aadd1a7b206606 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 20:30:58 +0100
Subject: [PATCH 32/36] Update styles of padded DND components

---
 packages/client/src/components/Component.svelte | 6 +++---
 packages/client/src/utils/styleable.js          | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 5996b182eb..c9872f246b 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -509,9 +509,9 @@
     transition: padding 260ms ease-out, border 260ms ease-out;
   }
   .component.pad :global(> *) {
-    padding: 12px !important;
-    gap: 12px !important;
-    border: 2px dotted var(--spectrum-global-color-gray-400) !important;
+    padding: var(--spacing-l) !important;
+    gap: var(--spacing-l) !important;
+    border: 2px dashed var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
   }
   .interactive :global(*) {
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index b07a3213d9..9ad17ceff0 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -27,7 +27,7 @@ export const styleable = (node, styles = {}) => {
   const setupStyles = (newStyles = {}) => {
     let baseStyles = {}
     if (newStyles.empty) {
-      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-600)"
+      baseStyles.border = "2px dashed var(--spectrum-global-color-gray-400)"
       baseStyles.padding = "var(--spacing-l)"
       baseStyles.overflow = "hidden"
     }

From 0378e0655008573278bd9ec5defa281b81048ea8 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Oct 2022 08:46:09 +0100
Subject: [PATCH 33/36] Add ability to drag new blocks into app preview

---
 .../[componentId]/new/_components/NewComponentPanel.svelte     | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
index 07781441c5..778a14ffff 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
@@ -240,8 +240,11 @@
         <Layout noPadding gap="XS">
           {#each blocks as block}
             <div
+              draggable="true"
               class="component"
               on:click={() => addComponent(block.component)}
+              on:dragstart={() => onDragStart(block.component)}
+              on:dragend={onDragEnd}
             >
               <Icon name={block.icon} />
               <Body size="XS">{block.name}</Body>

From 8c1c84e9aa9990ca657a1f8257c1f030c852d1d3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Oct 2022 08:48:32 +0100
Subject: [PATCH 34/36] Use requestAnimationFrame for DND overlay placeholder
 updates to further improve performance

---
 .../preview/DNDPlaceholderOverlay.svelte      | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
index 12103e3904..6ed2df6a87 100644
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -1,24 +1,27 @@
 <script>
   import { onMount } from "svelte"
   import { DNDPlaceholderID } from "constants"
+  import { domDebounce } from "utils/domDebounce.js"
 
   let left, top, height, width
 
-  onMount(() => {
-    const interval = setInterval(() => {
-      const node = document.getElementById(DNDPlaceholderID)
-      if (!node) {
-        height = 0
-        width = 0
-      } else {
-        const bounds = node.getBoundingClientRect()
-        left = bounds.left
-        top = bounds.top
-        height = bounds.height
-        width = bounds.width
-      }
-    }, 100)
+  const updatePosition = () => {
+    const node = document.getElementById(DNDPlaceholderID)
+    if (!node) {
+      height = 0
+      width = 0
+    } else {
+      const bounds = node.getBoundingClientRect()
+      left = bounds.left
+      top = bounds.top
+      height = bounds.height
+      width = bounds.width
+    }
+  }
+  const debouncedUpdate = domDebounce(updatePosition)
 
+  onMount(() => {
+    const interval = setInterval(debouncedUpdate, 100)
     return () => {
       clearInterval(interval)
     }

From 682203fbda7d992703f0ff14e1e5f02af476b031 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Oct 2022 09:00:55 +0100
Subject: [PATCH 35/36] Only transition padding when expanding components
 during DND, but remove it immediately on drop to avoid layout thrashing

---
 packages/client/src/components/Component.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index c9872f246b..1885d22836 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -505,14 +505,12 @@
   .component {
     display: contents;
   }
-  .component :global(> *) {
-    transition: padding 260ms ease-out, border 260ms ease-out;
-  }
   .component.pad :global(> *) {
     padding: var(--spacing-l) !important;
     gap: var(--spacing-l) !important;
     border: 2px dashed var(--spectrum-global-color-gray-400) !important;
     border-radius: 4px !important;
+    transition: padding 260ms ease-out, border 260ms ease-out;
   }
   .interactive :global(*) {
     cursor: default;

From ceecfb50e9af67f78888c15e86ae9e430d003618 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Oct 2022 09:23:52 +0100
Subject: [PATCH 36/36] Hide new component panel when selected component
 changes

---
 packages/builder/src/helpers/urlStateSync.js        | 10 ++++++++++
 .../components/[componentId]/_layout.svelte         | 13 +++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index f6357ae5d9..7618ee5155 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -10,6 +10,7 @@ export const syncURLToState = options => {
     fallbackUrl,
     store,
     routify,
+    beforeNavigate,
   } = options || {}
   if (
     !urlParam ||
@@ -41,6 +42,15 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    if (beforeNavigate) {
+      const res = beforeNavigate(url, params)
+      if (res?.url) {
+        url = res.url
+      }
+      if (res?.params) {
+        params = res.params
+      }
+    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
index 530ef44452..e6cbbf71fe 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
@@ -7,6 +7,18 @@
   import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
   import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 
+  const cleanUrl = url => {
+    // Strip trailing slashes
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Hide new component panel whenever component ID changes
+    if (url?.endsWith("/new")) {
+      url = url.replace("/new", "")
+    }
+    return { url }
+  }
+
   // Keep URL and state in sync for selected component ID
   const stopSyncing = syncURLToState({
     urlParam: "componentId",
@@ -15,6 +27,7 @@
     fallbackUrl: "../",
     store,
     routify,
+    beforeNavigate: cleanUrl,
   })
 
   onDestroy(stopSyncing)