Improves edge scroll and drag handling

Increases edge scrolling speed for improved user experience.

Refactors header drag event handling to use handler methods for better organization.
This commit is contained in:
Janus C. H. Knudsen 2025-10-14 17:47:12 +02:00
parent 5f4a7fa9b1
commit 5b0ae0ca5c
2 changed files with 42 additions and 40 deletions

View file

@ -22,8 +22,8 @@ export class EdgeScrollManager {
// Constants - fixed values as per requirements // Constants - fixed values as per requirements
private readonly OUTER_ZONE = 100; // px from edge (slow zone) private readonly OUTER_ZONE = 100; // px from edge (slow zone)
private readonly INNER_ZONE = 50; // px from edge (fast zone) private readonly INNER_ZONE = 50; // px from edge (fast zone)
private readonly SLOW_SPEED_PXS = 80; // px/sec in outer zone private readonly SLOW_SPEED_PXS = 140; // px/sec in outer zone
private readonly FAST_SPEED_PXS = 240; // px/sec in inner zone private readonly FAST_SPEED_PXS = 640; // px/sec in inner zone
constructor(private eventBus: IEventBus) { constructor(private eventBus: IEventBus) {
this.init(); this.init();

View file

@ -13,13 +13,10 @@ import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
*/ */
export class HeaderManager { export class HeaderManager {
// Event listeners for drag events
private dragMouseEnterHeaderListener: ((event: Event) => void) | null = null;
private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
constructor() { constructor() {
// Bind methods for event listeners // Bind handler methods for event listeners
this.setupHeaderDragListeners = this.setupHeaderDragListeners.bind(this); this.handleDragMouseEnterHeader = this.handleDragMouseEnterHeader.bind(this);
this.handleDragMouseLeaveHeader = this.handleDragMouseLeaveHeader.bind(this);
// Listen for navigation events to update header // Listen for navigation events to update header
this.setupNavigationListener(); this.setupNavigationListener();
@ -40,14 +37,24 @@ export class HeaderManager {
} }
/** /**
* Setup header drag event listeners - REFACTORED to listen to DragDropManager events * Setup header drag event listeners - Listen to DragDropManager events
*/ */
public setupHeaderDragListeners(): void { public setupHeaderDragListeners(): void {
console.log('🎯 HeaderManager: Setting up drag event listeners'); console.log('🎯 HeaderManager: Setting up drag event listeners');
// Create and store event listeners // Subscribe to drag events from DragDropManager
this.dragMouseEnterHeaderListener = (event: Event) => { eventBus.on('drag:mouseenter-header', this.handleDragMouseEnterHeader);
const { targetColumn: targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail; eventBus.on('drag:mouseleave-header', this.handleDragMouseLeaveHeader);
console.log('✅ HeaderManager: Drag event listeners attached');
}
/**
* Handle drag mouse enter header event
*/
private handleDragMouseEnterHeader(event: Event): void {
const { targetColumn: targetDate, mousePosition, originalElement, draggedClone: cloneElement } =
(event as CustomEvent<DragMouseEnterHeaderEventPayload>).detail;
console.log('🎯 HeaderManager: Received drag:mouseenter-header', { console.log('🎯 HeaderManager: Received drag:mouseenter-header', {
targetDate, targetDate,
@ -58,26 +65,21 @@ export class HeaderManager {
if (targetDate) { if (targetDate) {
const calendarType = calendarConfig.getCalendarMode(); const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType); const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
} }
}; }
this.dragMouseLeaveHeaderListener = (event: Event) => { /**
const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } = (event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail; * Handle drag mouse leave header event
*/
private handleDragMouseLeaveHeader(event: Event): void {
const { targetDate, mousePosition, originalElement, draggedClone: cloneElement } =
(event as CustomEvent<DragMouseLeaveHeaderEventPayload>).detail;
console.log('🚪 HeaderManager: Received drag:mouseleave-header', { console.log('🚪 HeaderManager: Received drag:mouseleave-header', {
targetDate, targetDate,
originalElement: !!originalElement, originalElement: !!originalElement,
cloneElement: !!cloneElement cloneElement: !!cloneElement
}); });
};
// Listen for drag events from DragDropManager
eventBus.on('drag:mouseenter-header', this.dragMouseEnterHeaderListener);
eventBus.on('drag:mouseleave-header', this.dragMouseLeaveHeaderListener);
console.log('✅ HeaderManager: Drag event listeners attached');
} }
/** /**