Adds edge scroll functionality for drag interactions

Implements EdgeScrollManager to enable automatic scrolling during drag operations

Introduces new scroll management system that:
- Detects mouse proximity to container edges
- Provides variable scroll speed based on mouse position
- Compensates dragged elements during scrolling

Enhances drag-and-drop user experience with smooth scrolling
This commit is contained in:
Janus C. H. Knudsen 2025-12-10 19:12:38 +01:00
parent 8b95f2735f
commit 10d8a444d8
5 changed files with 219 additions and 2 deletions

View file

@ -46,7 +46,22 @@ export class DragDropManager {
constructor(
private eventBus: IEventBus,
private gridConfig: IGridConfig
) {}
) {
this.setupScrollListener();
}
private setupScrollListener(): void {
this.eventBus.on(CoreEvents.EDGE_SCROLL_TICK, (e) => {
if (!this.dragState) return;
const { scrollDelta } = (e as CustomEvent<{ scrollDelta: number }>).detail;
// Element skal flytte med scroll for at forblive under musen
// (elementets top er relativ til kolonnen, som scroller med viewport)
this.dragState.targetY += scrollDelta;
this.dragState.currentY += scrollDelta;
this.dragState.element.style.top = `${this.dragState.currentY}px`;
});
}
/**
* Initialize drag-drop on a container element
@ -165,6 +180,9 @@ export class DragDropManager {
const columnRect = columnElement.getBoundingClientRect();
const targetY = e.clientY - columnRect.top - mouseOffset.y;
// Reset scroll compensation
this.scrollDeltaY = 0;
// Initialize drag state
this.dragState = {
eventId,