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

Removes auto-scroll functionality.

Browse source 
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
1 changed files with 22 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

134
src/managers/DragDropManager.ts
View file

@ -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<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');
}
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<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
*/