Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves drag and drop with edge scrolling

Browse source 
Enhances the drag and drop experience by integrating edge scrolling,
allowing users to scroll the calendar view while dragging events.

Fixes issues with event positioning during scrolling by compensating
for scroll changes during drag operations. Also, adds mock events
to data.
This commit is contained in:
Janus C. H. Knudsen 2025-10-13 17:20:17 +02:00
parent a0344c6143
commit faf8b50593
3 changed files with 244 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/managers/EdgeScrollManager.ts
View file

@ -11,18 +11,15 @@ export class EdgeScrollManager {
private scrollRAF: number | null = null;
private mouseY = 0;
private isDragging = false;
private isScrolling = false; // Track if edge-scroll is active
private lastTs = 0;
private rect: DOMRect | null = null;
private draggedClone: HTMLElement | null = null;
private initialScrollTop = 0;
private initialCloneTop = 0;
private scrollListener: ((e: Event) => void) | null = null;
// Constants - fixed values as per requirements
private readonly OUTER_ZONE = 100; // px from edge (slow zone)
private readonly INNER_ZONE = 50; // px from edge (fast zone)
private readonly SLOW_SPEED_PXS = 800; // px/sec in outer zone
private readonly FAST_SPEED_PXS = 2400; // px/sec in inner zone
private readonly SLOW_SPEED_PXS = 80; // px/sec in outer zone
private readonly FAST_SPEED_PXS = 240; // px/sec in inner zone
constructor(private eventBus: IEventBus) {
this.init();
@ -35,31 +32,26 @@ export class EdgeScrollManager {
if (this.scrollableContent) {
// Disable smooth scroll for instant auto-scroll
this.scrollableContent.style.scrollBehavior = 'auto';
// Add scroll listener
this.scrollListener = this.handleScroll.bind(this);
this.scrollableContent.addEventListener('scroll', this.scrollListener, { passive: true });
}
}, 100);
// Listen to mousemove directly from document to always get mouse coords
document.body.addEventListener('mousemove', (e: MouseEvent) => {
if (this.isDragging) {
this.mouseY = e.clientY;
}
});
this.subscribeToEvents();
}
private subscribeToEvents(): void {
// Listen to drag events from DragDropManager
this.eventBus.on('drag:start', (event: Event) => {
let customEvent = event as CustomEvent<DragStartEventPayload>;
this.draggedClone = customEvent.detail.draggedClone;
this.eventBus.on('drag:start', () => {
this.startDrag();
});
this.eventBus.on('drag:move', (event: Event) => {
let customEvent = event as CustomEvent<DragMoveEventPayload>;
this.draggedClone = customEvent.detail.draggedClone;
this.updateMouseY(customEvent.detail.mousePosition.y);
});
this.eventBus.on('drag:end', () => this.stopDrag());
this.eventBus.on('drag:cancelled', () => this.stopDrag());
}
@ -67,62 +59,25 @@ export class EdgeScrollManager {
private startDrag(): void {
console.log('🎬 EdgeScrollManager: Starting drag');
this.isDragging = true;
this.isScrolling = false; // Reset scroll state
this.lastTs = performance.now();
// Gem initial scroll position OG clone position
this.initialScrollTop = this.scrollableContent?.scrollTop || 0;
this.initialCloneTop = parseFloat(this.draggedClone?.style.top || '0');
console.log('💾 EdgeScrollManager: Saved initial state', {
initialScrollTop: this.initialScrollTop,
initialCloneTop: this.initialCloneTop
});
// Don't save initial positions here - wait until scrolling actually starts!
if (this.scrollRAF === null) {
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
}
}
private updateMouseY(y: number): void {
// console.log('🖱️ EdgeScrollManager: updateMouseY called', { oldMouseY: this.mouseY, newMouseY: y });
this.mouseY = y;
// Ensure RAF loop is running during drag
if (this.isDragging && this.scrollRAF === null) {
this.lastTs = performance.now();
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
}
}
private stopDrag(): void {
this.isDragging = false;
this.isScrolling = false;
if (this.scrollRAF !== null) {
cancelAnimationFrame(this.scrollRAF);
this.scrollRAF = null;
}
this.rect = null;
this.lastTs = 0;
this.draggedClone = null;
this.initialScrollTop = 0;
this.initialCloneTop = 0;
}
private handleScroll(): void {
if (!this.isDragging || !this.draggedClone || !this.scrollableContent) return;
const currentScrollTop = this.scrollableContent.scrollTop;
const totalScrollDelta = currentScrollTop - this.initialScrollTop;
// Beregn ny position baseret på initial position + total scroll delta
const newTop = this.initialCloneTop + totalScrollDelta;
//this.draggedClone.style.top = `${newTop}px`;
console.log('📜 EdgeScrollManager: Scroll event - updated clone', {
initialScrollTop: this.initialScrollTop,
currentScrollTop,
totalScrollDelta,
initialCloneTop: this.initialCloneTop,
newTop
});
}
private scrollTick(ts: number): void {
@ -159,11 +114,27 @@ export class EdgeScrollManager {
}
if (vy !== 0 && this.isDragging) {
// Mark that scrolling is active
if (!this.isScrolling) {
this.isScrolling = true;
console.log('💾 EdgeScrollManager: Edge-scroll started');
// Notify DragDropManager that scroll compensation should start
this.eventBus.emit('edgescroll:started', {});
}
// Time-based scrolling for frame-rate independence
this.scrollableContent.scrollTop += vy * dt;
this.rect = null; // Invalidate cache for next frame
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
} else {
// Mouse moved away from edge - stop scrolling
if (this.isScrolling) {
this.isScrolling = false;
console.log('🛑 EdgeScrollManager: Edge-scroll stopped');
// Notify DragDropManager that scroll compensation should stop
this.eventBus.emit('edgescroll:stopped', {});
}
// Continue RAF loop even if not scrolling, to detect edge entry
if (this.isDragging) {
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));