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.
This commit is contained in:
Janus C. H. Knudsen 2025-10-11 09:54:20 +02:00
parent 42e28f46bc
commit 40b19a092c

View file

@ -19,10 +19,6 @@ import {
} from '../types/EventTypes'; } from '../types/EventTypes';
import { MousePosition } from '../types/DragDropTypes'; import { MousePosition } from '../types/DragDropTypes';
interface CachedElements {
scrollContainer: HTMLElement | null;
}
export class DragDropManager { export class DragDropManager {
private eventBus: IEventBus; private eventBus: IEventBus;
@ -46,12 +42,6 @@ export class DragDropManager {
// Movement threshold to distinguish click from drag // Movement threshold to distinguish click from drag
private readonly dragThreshold = 5; // pixels 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 // Smooth drag animation
private dragAnimationId: number | null = null; private dragAnimationId: number | null = null;
@ -76,7 +66,6 @@ export class DragDropManager {
document.body.addEventListener('mousedown', this.handleMouseDown.bind(this)); document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
document.body.addEventListener('mouseup', this.handleMouseUp.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'); const calendarContainer = document.querySelector('swp-calendar-container');
if (calendarContainer) { if (calendarContainer) {
@ -94,21 +83,7 @@ export class DragDropManager {
} else if (target.closest('swp-day-column')) { } else if (target.closest('swp-day-column')) {
this.handleColumnMouseEnter(e as MouseEvent); this.handleColumnMouseEnter(e as MouseEvent);
} else if (target.closest('swp-event')) { } else if (target.closest('swp-event')) {
// Entered an event - activate hover tracking and set color this.handleEventMouseEnter(e as MouseEvent);
const eventElement = target.closest<HTMLElement>('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');
}
} }
}, true); // Use capture phase }, true); // Use capture phase
@ -249,14 +224,11 @@ export class DragDropManager {
return true; return true;
} }
/**
* Continue drag movement - update position and auto-scroll
*/
private continueDrag(currentPosition: MousePosition): void { private continueDrag(currentPosition: MousePosition): void {
if (!this.draggedClone!.hasAttribute("data-allday")) { if (!this.draggedClone!.hasAttribute("data-allday")) {
// Calculate raw position from mouse (no snapping) // Calculate raw position from mouse (no snapping)
const column = ColumnDetectionUtils.getColumnBounds(currentPosition); const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
console.log("continueDrag");
if (column) { if (column) {
// Calculate raw Y position relative to column (accounting for mouse offset) // 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 * Optimized mouse up handler with consolidated cleanup
*/ */
private handleMouseUp(event: MouseEvent): void { private handleMouseUp(event: MouseEvent): void {
this.stopAutoScroll();
this.stopDragAnimation(); this.stopDragAnimation();
if (this.draggedElement) { if (this.draggedElement) {
@ -404,7 +371,6 @@ export class DragDropManager {
// 4. Clean up state // 4. Clean up state
this.cleanupDragState(); this.cleanupDragState();
this.stopAutoScroll();
this.stopDragAnimation(); 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 * Stop drag animation
*/ */
@ -600,6 +490,26 @@ export class DragDropManager {
return null; 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<HTMLElement>('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 * Handle mouse enter on calendar header - simplified using native events
*/ */