From 23eb09ab6aebba56dd983ac5a7bfec5144f02acf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 14 Oct 2022 15:45:02 +0100
Subject: [PATCH] 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,
       }
     }
   )