Improves edge scrolling boundary detection.

Enhances edge scrolling logic to prevent over-scrolling
by checking boundaries based on dragged element position.
This prevents scrolling past the top or bottom edges
of the time grid during drag operations.
Also adds debugging logs for scroll check.
This commit is contained in:
Janus C. H. Knudsen 2025-10-13 23:57:12 +02:00
parent 82921e0643
commit 5f4a7fa9b1

View file

@ -8,6 +8,8 @@ import { DragMoveEventPayload, DragStartEventPayload } from '../types/EventTypes
export class EdgeScrollManager { export class EdgeScrollManager {
private scrollableContent: HTMLElement | null = null; private scrollableContent: HTMLElement | null = null;
private timeGrid: HTMLElement | null = null;
private draggedClone: HTMLElement | null = null;
private scrollRAF: number | null = null; private scrollRAF: number | null = null;
private mouseY = 0; private mouseY = 0;
private isDragging = false; private isDragging = false;
@ -31,6 +33,8 @@ export class EdgeScrollManager {
// Wait for DOM to be ready // Wait for DOM to be ready
setTimeout(() => { setTimeout(() => {
this.scrollableContent = document.querySelector('swp-scrollable-content'); this.scrollableContent = document.querySelector('swp-scrollable-content');
this.timeGrid = document.querySelector('swp-time-grid');
if (this.scrollableContent) { if (this.scrollableContent) {
// Disable smooth scroll for instant auto-scroll // Disable smooth scroll for instant auto-scroll
this.scrollableContent.style.scrollBehavior = 'auto'; this.scrollableContent.style.scrollBehavior = 'auto';
@ -54,7 +58,9 @@ export class EdgeScrollManager {
private subscribeToEvents(): void { private subscribeToEvents(): void {
// Listen to drag events from DragDropManager // Listen to drag events from DragDropManager
this.eventBus.on('drag:start', () => { this.eventBus.on('drag:start', (event: Event) => {
const payload = (event as CustomEvent).detail;
this.draggedClone = payload.draggedClone;
this.startDrag(); this.startDrag();
}); });
@ -158,12 +164,52 @@ export class EdgeScrollManager {
} }
} }
if (vy !== 0 && this.isDragging) { if (vy !== 0 && this.isDragging && this.timeGrid && this.draggedClone) {
// Time-based scrolling for frame-rate independence // Check if we can scroll in the requested direction
// The scroll listener will detect actual scrolling and emit edgescroll:started const currentScrollTop = this.scrollableContent.scrollTop;
this.scrollableContent.scrollTop += vy * dt; const scrollableHeight = this.scrollableContent.clientHeight;
this.rect = null; // Invalidate cache for next frame const timeGridHeight = this.timeGrid.clientHeight;
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
// Get dragged element position and height
const cloneRect = this.draggedClone.getBoundingClientRect();
const cloneBottom = cloneRect.bottom;
const timeGridRect = this.timeGrid.getBoundingClientRect();
const timeGridBottom = timeGridRect.bottom;
// Check boundaries
const atTop = currentScrollTop <= 0 && vy < 0;
const atBottom = (cloneBottom >= timeGridBottom) && vy > 0;
console.log('📊 Scroll check:', {
currentScrollTop,
scrollableHeight,
timeGridHeight,
cloneBottom,
timeGridBottom,
atTop,
atBottom,
vy
});
if (atTop || atBottom) {
// At boundary - stop scrolling
if (this.isScrolling) {
this.isScrolling = false;
this.initialScrollTop = this.scrollableContent.scrollTop;
console.log('🛑 EdgeScrollManager: Edge-scroll stopped (reached boundary)');
this.eventBus.emit('edgescroll:stopped', {});
}
// Continue RAF loop to detect when mouse moves away from boundary
if (this.isDragging) {
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
}
} else {
// Not at boundary - apply scroll
this.scrollableContent.scrollTop += vy * dt;
this.rect = null; // Invalidate cache for next frame
this.scrollRAF = requestAnimationFrame((ts) => this.scrollTick(ts));
}
} else { } else {
// Mouse moved away from edge - stop scrolling // Mouse moved away from edge - stop scrolling
if (this.isScrolling) { if (this.isScrolling) {