From 40b19a092c25d6019954cfec4c8cbb85b8fd2b58 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Sat, 11 Oct 2025 09:54:20 +0200 Subject: [PATCH] Removes auto-scroll functionality. Removes the auto-scroll feature from the drag and drop manager. This simplifies the drag and drop interactions by removing the need to automatically scroll the content area during drag operations. The scroll container, related properties, and auto-scroll logic have been removed. Also, the mouse enter logic was moved to handleEventMouseEnter function. --- src/managers/DragDropManager.ts | 134 ++++++-------------------------- 1 file changed, 22 insertions(+), 112 deletions(-) diff --git a/src/managers/DragDropManager.ts b/src/managers/DragDropManager.ts index cfdac0f..178ef5c 100644 --- a/src/managers/DragDropManager.ts +++ b/src/managers/DragDropManager.ts @@ -19,10 +19,6 @@ import { } from '../types/EventTypes'; import { MousePosition } from '../types/DragDropTypes'; -interface CachedElements { - scrollContainer: HTMLElement | null; -} - export class DragDropManager { private eventBus: IEventBus; @@ -46,12 +42,6 @@ export class DragDropManager { // Movement threshold to distinguish click from drag private readonly dragThreshold = 5; // pixels - private scrollContainer!: HTMLElement | null; - - // Auto-scroll properties - private autoScrollAnimationId: number | null = null; - private readonly scrollSpeed = 10; // pixels per frame - private readonly scrollThreshold = 30; // pixels from edge // Smooth drag animation private dragAnimationId: number | null = null; @@ -76,7 +66,6 @@ export class DragDropManager { document.body.addEventListener('mousedown', this.handleMouseDown.bind(this)); document.body.addEventListener('mouseup', this.handleMouseUp.bind(this)); - this.scrollContainer = document.querySelector('swp-scrollable-content') as HTMLElement; const calendarContainer = document.querySelector('swp-calendar-container'); if (calendarContainer) { @@ -94,21 +83,7 @@ export class DragDropManager { } else if (target.closest('swp-day-column')) { this.handleColumnMouseEnter(e as MouseEvent); } else if (target.closest('swp-event')) { - // Entered an event - activate hover tracking and set color - const eventElement = target.closest('swp-event'); - const mouseEvent = e as MouseEvent; - - // Only handle hover if mouse button is up - if (eventElement && !this.isDragStarted && mouseEvent.buttons === 0) { - // Clear any previous hover first - if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) { - this.currentHoveredEvent.classList.remove('hover'); - } - - this.isHoverTrackingActive = true; - this.currentHoveredEvent = eventElement; - eventElement.classList.add('hover'); - } + this.handleEventMouseEnter(e as MouseEvent); } }, true); // Use capture phase @@ -249,14 +224,11 @@ export class DragDropManager { return true; } - /** - * Continue drag movement - update position and auto-scroll - */ + private continueDrag(currentPosition: MousePosition): void { if (!this.draggedClone!.hasAttribute("data-allday")) { // Calculate raw position from mouse (no snapping) const column = ColumnDetectionUtils.getColumnBounds(currentPosition); - console.log("continueDrag"); if (column) { // Calculate raw Y position relative to column (accounting for mouse offset) @@ -272,11 +244,7 @@ export class DragDropManager { } } - // Check for auto-scroll - this.checkAutoScroll(currentPosition); } - else - console.log("hasAttribute(data-allday)"); } /** @@ -305,7 +273,6 @@ export class DragDropManager { * Optimized mouse up handler with consolidated cleanup */ private handleMouseUp(event: MouseEvent): void { - this.stopAutoScroll(); this.stopDragAnimation(); if (this.draggedElement) { @@ -404,7 +371,6 @@ export class DragDropManager { // 4. Clean up state this.cleanupDragState(); - this.stopAutoScroll(); this.stopDragAnimation(); } @@ -485,82 +451,6 @@ export class DragDropManager { } - /** - * Optimized auto-scroll check with cached container - */ - private checkAutoScroll(mousePosition: MousePosition): void { - - if (this.scrollContainer == null) - return; - - const containerRect = this.scrollContainer.getBoundingClientRect(); - const mouseY = mousePosition.clientY; - - // Calculate distances from edges - const distanceFromTop = mousePosition.y - containerRect.top; - const distanceFromBottom = containerRect.bottom - mousePosition.y; - - // Check if we need to scroll - if (distanceFromTop <= this.scrollThreshold && distanceFromTop > 0) { - this.startAutoScroll('up', mousePosition); - } else if (distanceFromBottom <= this.scrollThreshold && distanceFromBottom > 0) { - this.startAutoScroll('down', mousePosition); - } else { - this.stopAutoScroll(); - } - } - - /** - * Optimized auto-scroll with cached container reference - */ - private startAutoScroll(direction: 'up' | 'down', event: MousePosition): void { - if (this.autoScrollAnimationId !== null) return; - - const scroll = () => { - if (!this.scrollContainer || !this.draggedElement) { - this.stopAutoScroll(); - return; - } - - const scrollAmount = direction === 'up' ? -this.scrollSpeed : this.scrollSpeed; - this.scrollContainer.scrollTop += scrollAmount; - - // Emit updated position during scroll - adjust for scroll movement - if (this.draggedElement) { - // During autoscroll, we need to calculate position relative to the scrolled content - // The mouse hasn't moved, but the content has scrolled - const columnElement = ColumnDetectionUtils.getColumnBounds(event); - - if (columnElement) { - const columnRect = columnElement.boundingClientRect; - // Calculate free position relative to column, accounting for scroll movement (no snapping during scroll) - const relativeY = this.currentMouseY - columnRect.top - this.mouseOffset.y; - const freeY = Math.max(0, relativeY); - - this.eventBus.emit('drag:auto-scroll', { - draggedElement: this.draggedElement, - snappedY: freeY, // Actually free position during scroll - scrollTop: this.scrollContainer.scrollTop - }); - } - } - - this.autoScrollAnimationId = requestAnimationFrame(scroll); - }; - - this.autoScrollAnimationId = requestAnimationFrame(scroll); - } - - /** - * Stop auto-scroll animation - */ - private stopAutoScroll(): void { - if (this.autoScrollAnimationId !== null) { - cancelAnimationFrame(this.autoScrollAnimationId); - this.autoScrollAnimationId = null; - } - } - /** * Stop drag animation */ @@ -600,6 +490,26 @@ export class DragDropManager { return null; } + /** + * Handle mouse enter on swp-event - activate hover tracking + */ + private handleEventMouseEnter(event: MouseEvent): void { + const target = event.target as HTMLElement; + const eventElement = target.closest('swp-event'); + + // Only handle hover if mouse button is up + if (eventElement && !this.isDragStarted && event.buttons === 0) { + // Clear any previous hover first + if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) { + this.currentHoveredEvent.classList.remove('hover'); + } + + this.isHoverTrackingActive = true; + this.currentHoveredEvent = eventElement; + eventElement.classList.add('hover'); + } + } + /** * Handle mouse enter on calendar header - simplified using native events */