From 4e17942a1d0f80c07467fca7f3ae497908ab69bf Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 18 Oct 2022 18:49:24 +0100
Subject: [PATCH] Allow normal DND in and out of grid children

---
 packages/client/manifest.json                         |  4 +++-
 .../client/src/components/preview/DNDHandler.svelte   | 11 +++++++----
 .../src/components/preview/GridDNDHandler.svelte      |  8 +++++++-
 .../src/components/preview/HoverIndicator.svelte      |  4 ----
 .../client/src/components/preview/IndicatorSet.svelte |  5 +++--
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 80ed9623cd..16f4bc10c6 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -4573,7 +4573,9 @@
     "hasChildren": true,
     "styles": [
       "size"
-    ]
+    ],
+    "illegalChildren": ["grid", "section"],
+    "allowedDirectChildren": [""]
   },
   "formblock": {
     "name": "Form Block",
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index 43d1d52480..f556346ad2 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -23,7 +23,10 @@
   $: drop = $dndStore.drop
 
   const insideGrid = e => {
-    return e.target?.closest?.(".grid") != null
+    return e.target
+      ?.closest?.(".component")
+      ?.parentNode?.closest?.(".component")
+      ?.childNodes[0]?.classList.contains("grid")
   }
 
   // Util to get the inner DOM node by a component ID
@@ -218,7 +221,7 @@
 
   // Callback when on top of a component.
   const onDragOver = e => {
-    if (!source || !target || insideGrid(e)) {
+    if (!source || !target) {
       return
     }
     handleEvent(e)
@@ -226,7 +229,7 @@
 
   // Callback when entering a potential drop target
   const onDragEnter = e => {
-    if (!source || insideGrid(e)) {
+    if (!source) {
       return
     }
 
@@ -249,7 +252,7 @@
 
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
-    if (!source || !drop?.parent || drop?.index == null || insideGrid(e)) {
+    if (!source || !drop?.parent || drop?.index == null) {
       return
     }
 
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 22fecc9d1d..2b1541e1e4 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -11,7 +11,13 @@
   $: applyStyles(dragNode, gridStyles)
 
   const insideGrid = e => {
-    return e.target?.closest?.(".grid") || e.target.classList.contains("anchor")
+    return (
+      e.target
+        ?.closest?.(".component")
+        ?.parentNode?.closest?.(".component")
+        ?.childNodes[0]?.classList.contains("grid") ||
+      e.target.classList.contains("anchor")
+    )
   }
 
   // Util to get the inner DOM node by a component ID
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 380520d469..230edeb70c 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -9,21 +9,17 @@
   const onMouseOver = e => {
     // Ignore if dragging
     if (e.buttons > 0) {
-      console.log("ignore")
       return
     }
 
     let newId
-
     if (e.target.classList.contains("anchor")) {
       // Handle resize anchors
       newId = e.target.dataset.id
-      console.log("anchor", newId)
     } else {
       // Handle normal components
       const element = e.target.closest(".interactive.component")
       newId = element?.dataset?.id
-      console.log("normal", newId)
     }
 
     if (newId !== componentId) {
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index dc4355b30f..51a60ce981 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -34,8 +34,9 @@
       return false
     }
 
-    // Check if we're a descendent of a grid
-    return domNode?.closest(".grid") != null
+    return component?.parentNode
+      ?.closest?.(".component")
+      ?.childNodes[0]?.classList.contains("grid")
   }
 
   const createIntersectionCallback = idx => entries => {