Refactors drag and drop manager for efficiency.

Streamlines drag and drop logic by removing unnecessary state variables
and simplifying column change handling, enhancing performance
and code maintainability.
This commit is contained in:
Janus C. H. Knudsen 2025-10-11 09:19:33 +02:00
parent 0764437642
commit 42e28f46bc
3 changed files with 8 additions and 37 deletions

View file

@ -23,19 +23,14 @@ interface CachedElements {
scrollContainer: HTMLElement | null; scrollContainer: HTMLElement | null;
} }
export class DragDropManager { export class DragDropManager {
private eventBus: IEventBus; private eventBus: IEventBus;
// Mouse tracking with optimized state // Mouse tracking with optimized state
private lastMousePosition: MousePosition = { x: 0, y: 0 }; private lastMousePosition: MousePosition = { x: 0, y: 0 };
private lastLoggedPosition: MousePosition = { x: 0, y: 0 };
private currentMouseY = 0; private currentMouseY = 0;
private mouseOffset: MousePosition = { x: 0, y: 0 }; private mouseOffset: MousePosition = { x: 0, y: 0 };
private initialMousePosition: MousePosition = { x: 0, y: 0 }; private initialMousePosition: MousePosition = { x: 0, y: 0 };
private lastColumn: ColumnBounds | null = null;
// Drag state // Drag state
private draggedElement!: HTMLElement | null; private draggedElement!: HTMLElement | null;
@ -52,47 +47,26 @@ export class DragDropManager {
private readonly dragThreshold = 5; // pixels private readonly dragThreshold = 5; // pixels
private scrollContainer!: HTMLElement | null; private scrollContainer!: HTMLElement | null;
// Cached DOM elements for performance
// Auto-scroll properties // Auto-scroll properties
private autoScrollAnimationId: number | null = null; private autoScrollAnimationId: number | null = null;
private readonly scrollSpeed = 10; // pixels per frame private readonly scrollSpeed = 10; // pixels per frame
private readonly scrollThreshold = 30; // pixels from edge private readonly scrollThreshold = 30; // pixels from edge
// Snap configuration
private snapIntervalMinutes = 15; // Default 15 minutes
private hourHeightPx: number; // Will be set from config
// Smooth drag animation // Smooth drag animation
private dragAnimationId: number | null = null; private dragAnimationId: number | null = null;
private targetY = 0; private targetY = 0;
private currentY = 0; private currentY = 0;
private targetColumn: ColumnBounds | null = null; private targetColumn: ColumnBounds | null = null;
private get snapDistancePx(): number {
return (this.snapIntervalMinutes / 60) * this.hourHeightPx;
}
constructor(eventBus: IEventBus) { constructor(eventBus: IEventBus) {
this.eventBus = eventBus; this.eventBus = eventBus;
// Get config values // Get config values
const gridSettings = calendarConfig.getGridSettings(); const gridSettings = calendarConfig.getGridSettings();
this.hourHeightPx = gridSettings.hourHeight;
this.snapIntervalMinutes = gridSettings.snapInterval;
this.init(); this.init();
} }
/**
* Configure snap interval
*/
public setSnapInterval(minutes: number): void {
this.snapIntervalMinutes = minutes;
}
/** /**
* Initialize with optimized event listener setup * Initialize with optimized event listener setup
*/ */
@ -168,7 +142,6 @@ export class DragDropManager {
this.cleanupDragState(); this.cleanupDragState();
ColumnDetectionUtils.updateColumnBoundsCache(); ColumnDetectionUtils.updateColumnBoundsCache();
this.lastMousePosition = { x: event.clientX, y: event.clientY }; this.lastMousePosition = { x: event.clientX, y: event.clientY };
this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
this.initialMousePosition = { x: event.clientX, y: event.clientY }; this.initialMousePosition = { x: event.clientX, y: event.clientY };
// Check if mousedown is on an event // Check if mousedown is on an event
@ -192,7 +165,6 @@ export class DragDropManager {
} }
// Normal drag - prepare for potential dragging // Normal drag - prepare for potential dragging
this.draggedElement = eventElement; this.draggedElement = eventElement;
this.lastColumn = ColumnDetectionUtils.getColumnBounds(this.lastMousePosition)
// Calculate mouse offset within event // Calculate mouse offset within event
const eventRect = eventElement.getBoundingClientRect(); const eventRect = eventElement.getBoundingClientRect();
this.mouseOffset = { this.mouseOffset = {

View file

@ -113,17 +113,16 @@ export class DateEventRenderer implements EventRendererStrategy {
/** /**
* Handle column change during drag * Handle column change during drag
*/ */
public handleColumnChange(dragColumnChangeEvent: DragColumnChangeEventPayload): void { public handleColumnChange(payload: DragColumnChangeEventPayload): void {
if (!this.draggedClone) return;
const eventsLayer = dragColumnChangeEvent.newColumn.element.querySelector('swp-events-layer'); const eventsLayer = payload.newColumn.element.querySelector('swp-events-layer');
if (eventsLayer && this.draggedClone.parentElement !== eventsLayer) { if (eventsLayer && payload.draggedClone.parentElement !== eventsLayer) {
eventsLayer.appendChild(this.draggedClone); eventsLayer.appendChild(payload.draggedClone);
// Recalculate timestamps with new column date // Recalculate timestamps with new column date
const currentTop = parseFloat(this.draggedClone.style.top) || 0; const currentTop = parseFloat(payload.draggedClone.style.top) || 0;
const swpEvent = this.draggedClone as SwpEventElement; const swpEvent = payload.draggedClone as SwpEventElement;
const columnDate = this.dateService.parseISO(dragColumnChangeEvent.newColumn.date); const columnDate = this.dateService.parseISO(payload.newColumn.date);
swpEvent.updatePosition(columnDate, currentTop); swpEvent.updatePosition(columnDate, currentTop);
} }
} }

View file

@ -82,7 +82,7 @@ export interface DragMouseEnterColumnEventPayload {
// Drag column change event payload // Drag column change event payload
export interface DragColumnChangeEventPayload { export interface DragColumnChangeEventPayload {
originalElement: HTMLElement; originalElement: HTMLElement;
draggedClone: HTMLElement | null; draggedClone: HTMLElement;
previousColumn: ColumnBounds | null; previousColumn: ColumnBounds | null;
newColumn: ColumnBounds; newColumn: ColumnBounds;
mousePosition: MousePosition; mousePosition: MousePosition;