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

Refactors header drag interaction to eliminate ghost columns

Browse source 
Updates the `HeaderManager` to utilize `mouseenter` and `mouseleave` events on the calendar header for improved performance and accuracy.
Calculates the target date based on the mouse's X-coordinate within the header.

Removes the need for 'ghost columns' by simplifying the logic. This significantly reduces complexity.
The `AllDayEventRenderer` is modified to reflect this change, omitting ghost column creation.

Updates `DragDropManager` to accommodate the new interaction model.
Various console logs are added for debugging purposes.
This commit is contained in:
Janus Knudsen 2025-09-18 17:55:52 +02:00
parent 18e80bbce2
commit fb40279009
5 changed files with 353 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/renderers/AllDayEventRenderer.ts
View file

@ -13,7 +13,7 @@ export class AllDayEventRenderer {
}
/**
* Get or cache all-day container, create if it doesn't exist
* Get or cache all-day container, create if it doesn't exist - SIMPLIFIED (no ghost columns)
*/
private getContainer(): HTMLElement | null {
if (!this.container) {
@ -27,38 +27,17 @@ export class AllDayEventRenderer {
this.container = document.createElement('swp-allday-container');
header.appendChild(this.container);
// Create ghost columns for mouseenter events
this.createGhostColumns();
console.log('🏗️ AllDayEventRenderer: Created all-day container (NO ghost columns)');
// NO MORE GHOST COLUMNS! 🎉
// Mouse detection handled by HeaderManager coordinate calculation
}
}
}
return this.container;
}
/**
* Create ghost columns for mouseenter events
*/
private createGhostColumns(): void {
if (!this.container) return;
// Get all day headers to create matching ghost columns
const dayHeaders = document.querySelectorAll('swp-day-header');
dayHeaders.forEach((header, index) => {
const ghostColumn = document.createElement('swp-allday-column');
const headerElement = header as HTMLElement;
// Copy date from corresponding day header
if (headerElement.dataset.date) {
ghostColumn.dataset.date = headerElement.dataset.date;
}
// Set grid column position (1-indexed)
ghostColumn.style.gridColumn = (index + 1).toString();
ghostColumn.style.gridRow = '1 / -1'; // Span all rows
this.container!.appendChild(ghostColumn);
});
}
// REMOVED: createGhostColumns() method - no longer needed!
/**
* Render an all-day event using factory pattern