From a367863d43da6255edc2edf20f65e02aef325dfb 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 => {