From 9df86362b921e4877309e7e7f09ef7e96215b1e5 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Fri, 7 Oct 2022 08:20:51 +0100
Subject: [PATCH] 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),
       }
     }
   )