CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-26 18:10:51 +12:00
Code Issues Projects Releases Wiki Activity

Allow normal DND in and out of grid children

Browse source
This commit is contained in:
Andrew Kingston 2022-10-18 18:49:24 +01:00
parent 465d10a8be
commit 4e17942a1d
5 changed files with 20 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/client/manifest.json
View file

@ -4573,7 +4573,9 @@
"hasChildren": true, "hasChildren": true,
"styles": [ "styles": [
"size" "size"
] ],
"illegalChildren": ["grid", "section"],
"allowedDirectChildren": [""]
}, },
"formblock": { "formblock": {
"name": "Form Block", "name": "Form Block",

11
packages/client/src/components/preview/DNDHandler.svelte
View file

@ -23,7 +23,10 @@
$: drop = $dndStore.drop $: drop = $dndStore.drop
const insideGrid = e => { 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 // Util to get the inner DOM node by a component ID
@ -218,7 +221,7 @@
// Callback when on top of a component. // Callback when on top of a component.
const onDragOver = e => { const onDragOver = e => {
if (!source || !target || insideGrid(e)) { if (!source || !target) {
return return
} }
handleEvent(e) handleEvent(e)
@ -226,7 +229,7 @@
// Callback when entering a potential drop target // Callback when entering a potential drop target
const onDragEnter = e => { const onDragEnter = e => {
if (!source || insideGrid(e)) { if (!source) {
return return
} }
@ -249,7 +252,7 @@
// Callback when dropping a drag on top of some component // Callback when dropping a drag on top of some component
const onDrop = e => { const onDrop = e => {
if (!source || !drop?.parent || drop?.index == null || insideGrid(e)) { if (!source || !drop?.parent || drop?.index == null) {
return return
} }

8
packages/client/src/components/preview/GridDNDHandler.svelte
View file

@ -11,7 +11,13 @@
$: applyStyles(dragNode, gridStyles) $: applyStyles(dragNode, gridStyles)
const insideGrid = e => { 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 // Util to get the inner DOM node by a component ID

4
packages/client/src/components/preview/HoverIndicator.svelte
View file

@ -9,21 +9,17 @@
const onMouseOver = e => { const onMouseOver = e => {
// Ignore if dragging // Ignore if dragging
if (e.buttons > 0) { if (e.buttons > 0) {
console.log("ignore")
return return
} }
let newId let newId
if (e.target.classList.contains("anchor")) { if (e.target.classList.contains("anchor")) {
// Handle resize anchors // Handle resize anchors
newId = e.target.dataset.id newId = e.target.dataset.id
console.log("anchor", newId)
} else { } else {
// Handle normal components // Handle normal components
const element = e.target.closest(".interactive.component") const element = e.target.closest(".interactive.component")
newId = element?.dataset?.id newId = element?.dataset?.id
console.log("normal", newId)
} }
if (newId !== componentId) { if (newId !== componentId) {

5
packages/client/src/components/preview/IndicatorSet.svelte
View file

@ -34,8 +34,9 @@
return false return false
} }
// Check if we're a descendent of a grid return component?.parentNode
return domNode?.closest(".grid") != null ?.closest?.(".component")
?.childNodes[0]?.classList.contains("grid")
} }
const createIntersectionCallback = idx => entries => { const createIntersectionCallback = idx => entries => {