More tidy up

This commit is contained in:
Andrew Kingston 2025-02-05 16:31:38 +00:00
parent e71e8ff6b6
commit 0471e113e3
No known key found for this signature in database
2 changed files with 5 additions and 14 deletions

View File

@ -223,13 +223,11 @@
}) })
const onDragStart = (e, component) => { const onDragStart = (e, component) => {
console.log("DRAG START")
e.dataTransfer.setDragImage(ghost, 0, 0) e.dataTransfer.setDragImage(ghost, 0, 0)
previewStore.startDrag(component) previewStore.startDrag(component)
} }
const onDragEnd = () => { const onDragEnd = () => {
console.log("DRAG END")
previewStore.stopDrag() previewStore.stopDrag()
} }
</script> </script>

View File

@ -123,12 +123,10 @@
processEvent(e.clientX, e.clientY) processEvent(e.clientX, e.clientY)
} }
// Callback when dragging a new component over the preview iframe in a valid
// position for the first time
const startDraggingPlaceholder = () => { const startDraggingPlaceholder = () => {
const mode = GridDragModes.Move const domComponent = document.getElementsByClassName(DNDPlaceholderID)[0]
const id = DNDPlaceholderID
// Find grid parent and read from DOM
const domComponent = document.getElementsByClassName(id)[0]
const domGrid = domComponent?.closest(".grid") const domGrid = domComponent?.closest(".grid")
if (!domGrid) { if (!domGrid) {
return return
@ -139,15 +137,14 @@
// Show as active // Show as active
domComponent.classList.add("dragging") domComponent.classList.add("dragging")
domGrid.classList.add("highlight") domGrid.classList.add("highlight")
builderStore.actions.selectComponent(id)
// Update state // Update state
dragInfo = { dragInfo = {
domComponent, domComponent,
domGrid, domGrid,
id, id: DNDPlaceholderID,
gridId: domGrid.parentNode.dataset.id, gridId: domGrid.parentNode.dataset.id,
mode, mode: GridDragModes.Move,
grid: { grid: {
startX: bounds.left + bounds.width / 2, startX: bounds.left + bounds.width / 2,
startY: bounds.top + bounds.height / 2, startY: bounds.top + bounds.height / 2,
@ -157,9 +154,6 @@
colEnd: parseInt(styles["grid-column-end"]), colEnd: parseInt(styles["grid-column-end"]),
}, },
} }
// Add event handler to clear all drag state when dragging ends
document.addEventListener("mouseup", stopDragging)
} }
// Callback when initially starting a drag on a draggable component // Callback when initially starting a drag on a draggable component
@ -266,6 +260,5 @@
onDestroy(() => { onDestroy(() => {
document.removeEventListener("dragstart", onDragStart, false) document.removeEventListener("dragstart", onDragStart, false)
document.removeEventListener("dragover", onDragOver, false) document.removeEventListener("dragover", onDragOver, false)
document.removeEventListener("mouseup", stopDragging, false)
}) })
</script> </script>