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

Refactors drag and drop column detection

Browse source 
Improves drag and drop functionality by refactoring column detection to use column bounds instead of dates.
This change enhances the accuracy and efficiency of determining the target column during drag operations.
It also removes redundant code and simplifies the logic in both the DragDropManager and AllDayManager.
This commit is contained in:
Janus C. H. Knudsen 2025-09-28 13:25:09 +02:00
parent 4141bffca4
commit 6ccc071587
8 changed files with 262 additions and 377 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/utils/ColumnDetectionUtils.ts
View file

@ -3,92 +3,81 @@
* Used by both DragDropManager and AllDayManager for consistent column detection
*/
import { MousePosition } from "../types/DragDropTypes";
export interface ColumnBounds {
date: string;
left: number;
right: number;
date: string;
left: number;
right: number;
boundingClientRect: DOMRect,
element : HTMLElement,
index: number
}
export class ColumnDetectionUtils {
private static columnBoundsCache: ColumnBounds[] = [];
private static columnBoundsCache: ColumnBounds[] = [];
/**
* Update column bounds cache for coordinate-based column detection
*/
public static updateColumnBoundsCache(): void {
// Reset cache
this.columnBoundsCache = [];
/**
* 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');
// Find alle kolonner
const columns = document.querySelectorAll('swp-day-column');
let index = 0;
// Cache hver kolonnes x-grænser
columns.forEach(column => {
const rect = column.getBoundingClientRect();
const date = (column as HTMLElement).dataset.date;
// 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
if (date) {
this.columnBoundsCache.push({
boundingClientRect : rect,
element: column as HTMLElement,
date,
left: rect.left,
right: rect.right,
index: index++
});
}
});
}
});
// 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();
// Sorter efter x-position (fra venstre til højre)
this.columnBoundsCache.sort((a, b) => a.left - b.left);
}
// Find den kolonne hvor x-koordinaten er indenfor grænserne
const column = this.columnBoundsCache.find(col =>
x >= col.left && x <= col.right
);
/**
* Get column date from X coordinate using cached bounds
*/
public static getColumnBounds(position: MousePosition): ColumnBounds | null{
if (this.columnBoundsCache.length === 0) {
this.updateColumnBoundsCache();
}
return column ? column.date : null;
}
// Find den kolonne hvor x-koordinaten er indenfor grænserne
let column = this.columnBoundsCache.find(col =>
position.x >= col.left && position.x <= col.right
);
if (column)
return column;
/**
* Get column index (1-based) from date
*/
public static getColumnIndexFromDate(date: string): number {
// Opdater cache hvis tom
if (this.columnBoundsCache.length === 0) {
this.updateColumnBoundsCache();
return null;
}
const columnIndex = this.columnBoundsCache.findIndex(col => col.date === date);
return columnIndex >= 0 ? columnIndex + 1 : 1; // 1-based index
}
/**
* Clear cache (useful for testing or when DOM structure changes)
*/
public static clearCache(): void {
this.columnBoundsCache = [];
}
/**
* 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];
}
/**
* Get current cache for debugging
*/
public static getCache(): ColumnBounds[] {
return [...this.columnBoundsCache];
}
}