Improves all-day event drag and drop

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

View file

@ -0,0 +1,94 @@
/**
* ColumnDetectionUtils - Shared utility for column detection and caching
* Used by both DragDropManager and AllDayManager for consistent column detection
*/
export interface ColumnBounds {
date: string;
left: number;
right: number;
}
export class ColumnDetectionUtils {
private static columnBoundsCache: ColumnBounds[] = [];
/**
* Update column bounds cache for coordinate-based column detection
*/
public static 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
*/
public static 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;
}
/**
* Get column index (1-based) from date
*/
public static getColumnIndexFromDate(date: string): number {
// Opdater cache hvis tom
if (this.columnBoundsCache.length === 0) {
this.updateColumnBoundsCache();
}
const columnIndex = this.columnBoundsCache.findIndex(col => col.date === date);
return columnIndex >= 0 ? columnIndex + 1 : 1; // 1-based index
}
/**
* Get column index from X coordinate
*/
public static getColumnIndexFromX(x: number): number {
const date = this.getColumnDateFromX(x);
return date ? this.getColumnIndexFromDate(date) : 1;
}
/**
* Clear cache (useful for testing or when DOM structure changes)
*/
public static clearCache(): void {
this.columnBoundsCache = [];
}
/**
* Get current cache for debugging
*/
public static getCache(): ColumnBounds[] {
return [...this.columnBoundsCache];
}
}