MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Support scrolling while dragging components

This commit is contained in:
Andrew Kingston 2025-02-06 16:36:39 +00:00
parent 5ac5f90775
commit 585c9a8f62
No known key found for this signature in database
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -53,6 +53,7 @@
ghost.src = ghost.src =
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
let scrollElement: HTMLElement
let dragInfo: GridDragInfo | undefined let dragInfo: GridDragInfo | undefined
let styles = memo<Record<string, number> | undefined>() let styles = memo<Record<string, number> | undefined>()
@ -75,6 +76,8 @@
// Reset when not dragging new components // Reset when not dragging new components
$: !$dndIsDragging && stopDragging() $: !$dndIsDragging && stopDragging()
const scrollOffset = () => scrollElement?.scrollTop || 0
const applyStyles = async ( const applyStyles = async (
instance: any, instance: any,
styles: Record<string, number> | undefined styles: Record<string, number> | undefined
@ -113,7 +116,7 @@
} }
const diffX = mouseX - startX const diffX = mouseX - startX
let deltaX = Math.round(diffX / colSize) let deltaX = Math.round(diffX / colSize)
const diffY = mouseY - startY const diffY = mouseY - startY + scrollOffset()
let deltaY = Math.round(diffY / GridRowHeight) let deltaY = Math.round(diffY / GridRowHeight)
if (mode === GridDragMode.Move) { if (mode === GridDragMode.Move) {
deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd) deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
@ -186,7 +189,7 @@
mode: GridDragMode.Move, mode: GridDragMode.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 + scrollOffset(),
rowStart: parseInt(styles.gridRowStart), rowStart: parseInt(styles.gridRowStart),
rowEnd: parseInt(styles.gridRowEnd), rowEnd: parseInt(styles.gridRowEnd),
colStart: parseInt(styles.gridColumnStart), colStart: parseInt(styles.gridColumnStart),
@ -249,7 +252,7 @@
side, side,
grid: { grid: {
startX: e.clientX, startX: e.clientX,
startY: e.clientY, startY: e.clientY + scrollOffset(),
rowStart: parseInt(styles.gridRowStart), rowStart: parseInt(styles.gridRowStart),
rowEnd: parseInt(styles.gridRowEnd), rowEnd: parseInt(styles.gridRowEnd),
colStart: parseInt(styles.gridColumnStart), colStart: parseInt(styles.gridColumnStart),
@ -295,12 +298,17 @@
} }
onMount(() => { onMount(() => {
scrollElement = document.getElementsByClassName(
"screen-wrapper"
)[0] as HTMLElement
document.addEventListener("dragstart", onDragStart, false) document.addEventListener("dragstart", onDragStart, false)
document.addEventListener("dragover", onDragOver, false) document.addEventListener("dragover", onDragOver, false)
document.addEventListener("scroll", processEvent)
}) })
onDestroy(() => { onDestroy(() => {
document.removeEventListener("dragstart", onDragStart, false) document.removeEventListener("dragstart", onDragStart, false)
document.removeEventListener("dragover", onDragOver, false) document.removeEventListener("dragover", onDragOver, false)
document.removeEventListener("scroll", processEvent)
}) })
</script> </script>