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

Improves all-day event drag and drop

Browse source 
Refactors all-day event drag and drop handling for improved accuracy and performance.

Introduces a shared `ColumnDetectionUtils` for consistent column detection.

Simplifies all-day conversion during drag, placing events in row 1 and calculating the column from the target date.

Implements differential updates during drag end, updating only changed events for smoother transitions.
This commit is contained in:
Janus C. H. Knudsen 2025-09-26 22:11:57 +02:00
parent 41d078e2e8
commit 0553089085
6 changed files with 307 additions and 185 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/managers/DragDropManager.ts
View file

@ -6,12 +6,14 @@
import { IEventBus } from '../types/CalendarTypes';
import { calendarConfig } from '../core/CalendarConfig';
import { PositionUtils } from '../utils/PositionUtils';
import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
import {
DragStartEventPayload,
DragMoveEventPayload,
DragEndEventPayload,
DragMouseEnterHeaderEventPayload,
DragMouseLeaveHeaderEventPayload
DragMouseLeaveHeaderEventPayload,
DragColumnChangeEventPayload
} from '../types/EventTypes';
interface CachedElements {
@ -25,11 +27,6 @@ interface Position {
y: number;
}
interface ColumnBounds {
date: string;
left: number;
right: number;
}
export class DragDropManager {
private eventBus: IEventBus;
@ -59,8 +56,6 @@ export class DragDropManager {
lastColumnDate: null
};
// Column bounds cache for coordinate-based column detection
private columnBoundsCache: ColumnBounds[] = [];
// Auto-scroll properties
@ -120,16 +115,16 @@ export class DragDropManager {
}
// Initialize column bounds cache
this.updateColumnBoundsCache();
ColumnDetectionUtils.updateColumnBoundsCache();
// Listen to resize events to update cache
window.addEventListener('resize', () => {
this.updateColumnBoundsCache();
ColumnDetectionUtils.updateColumnBoundsCache();
});
// Listen to navigation events to update cache
this.eventBus.on('navigation:completed', () => {
this.updateColumnBoundsCache();
ColumnDetectionUtils.updateColumnBoundsCache();
});
}
@ -247,12 +242,13 @@ export class DragDropManager {
const previousColumn = this.currentColumn;
this.currentColumn = newColumn;
this.eventBus.emit('drag:column-change', {
const dragColumnChangePayload: DragColumnChangeEventPayload = {
draggedElement: this.draggedElement,
previousColumn,
newColumn,
mousePosition: currentPosition
});
};
this.eventBus.emit('drag:column-change', dragColumnChangePayload);
}
}
}
@ -377,58 +373,13 @@ export class DragDropManager {
return Math.max(0, snappedY);
}
/**
* Update column bounds cache for coordinate-based column detection
*/
private updateColumnBoundsCache(): void {
// Reset cache
this.columnBoundsCache = [];
// Find alle kolonner
const columns = document.querySelectorAll('swp-day-column');
// Cache hver kolonnes x-grænser
columns.forEach(column => {
const rect = column.getBoundingClientRect();
const date = (column as HTMLElement).dataset.date;
if (date) {
this.columnBoundsCache.push({
date,
left: rect.left,
right: rect.right
});
}
});
// Sorter efter x-position (fra venstre til højre)
this.columnBoundsCache.sort((a, b) => a.left - b.left);
}
/**
* Get column date from X coordinate using cached bounds
*/
private getColumnDateFromX(x: number): string | null {
// Opdater cache hvis tom
if (this.columnBoundsCache.length === 0) {
this.updateColumnBoundsCache();
}
// Find den kolonne hvor x-koordinaten er indenfor grænserne
const column = this.columnBoundsCache.find(col =>
x >= col.left && x <= col.right
);
return column ? column.date : null;
}
/**
* Coordinate-based column detection (replaces DOM traversal)
*/
private detectColumn(mouseX: number, mouseY: number): string | null {
// Brug den koordinatbaserede metode direkte
const columnDate = this.getColumnDateFromX(mouseX);
const columnDate = ColumnDetectionUtils.getColumnDateFromX(mouseX);
// Opdater stadig den eksisterende cache hvis vi finder en kolonne
if (columnDate && columnDate !== this.cachedElements.lastColumnDate) {
@ -610,7 +561,7 @@ export class DragDropManager {
this.isInHeader = true;
// Calculate target date using existing method
const targetDate = this.getColumnDateFromX(event.clientX);
const targetDate = ColumnDetectionUtils.getColumnDateFromX(event.clientX);
if (targetDate) {
console.log('🎯 DragDropManager: Emitting drag:mouseenter-header', { targetDate });
@ -636,7 +587,7 @@ export class DragDropManager {
console.log('🚪 DragDropManager: Emitting drag:mouseleave-header');
// Calculate target date using existing method
const targetDate = this.getColumnDateFromX(event.clientX);
const targetDate = ColumnDetectionUtils.getColumnDateFromX(event.clientX);
// Find clone element (if it exists)
const eventId = this.draggedElement?.dataset.eventId;