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

49
src/managers/AllDayManager.ts
View file

@ -30,13 +30,27 @@ export class AllDayManager {
private setupEventListeners(): void {
eventBus.on('drag:convert-to-allday', (event) => {
const { targetDate, originalElement } = (event as CustomEvent).detail;
console.log('🔄 AllDayManager: Received drag:convert-to-allday', {
targetDate,
originalElementId: originalElement?.dataset?.eventId,
originalElementTag: originalElement?.tagName
});
this.handleConvertToAllDay(targetDate, originalElement);
});
eventBus.on('drag:convert-from-allday', (event) => {
const { draggedEventId } = (event as CustomEvent).detail;
console.log('🔄 AllDayManager: Received drag:convert-from-allday', {
draggedEventId
});
this.handleConvertFromAllDay(draggedEventId);
});
// Listen for requests to ensure all-day container exists
eventBus.on('allday:ensure-container', () => {
console.log('🏗️ AllDayManager: Received request to ensure all-day container exists');
this.ensureAllDayContainer();
});
}
/**
@ -325,6 +339,41 @@ export class AllDayManager {
this.checkAndAnimateAllDayHeight();
}
/**
* Ensure all-day container exists, create if needed
*/
public ensureAllDayContainer(): HTMLElement | null {
console.log('🔍 AllDayManager: Checking if all-day container exists...');
// Try to get existing container first
let container = this.getAllDayContainer();
if (!container) {
console.log('🏗️ AllDayManager: Container not found, creating via AllDayEventRenderer...');
// Use the renderer to create container (which will call getContainer internally)
this.allDayEventRenderer.clearCache(); // Clear cache to force re-check
// The renderer's getContainer method will create the container if it doesn't exist
// We can trigger this by trying to get the container
const header = this.getCalendarHeader();
if (header) {
container = document.createElement('swp-allday-container');
header.appendChild(container);
console.log('✅ AllDayManager: Created all-day container');
// Update our cache
this.cachedAllDayContainer = container;
} else {
console.log('❌ AllDayManager: No calendar header found, cannot create container');
}
} else {
console.log('✅ AllDayManager: All-day container already exists');
}
return container;
}
/**
* Clean up cached elements and resources
*/

18
src/managers/DragDropManager.ts
View file

@ -96,18 +96,36 @@ export class DragDropManager {
this.eventBus.on('header:mouseover', (event) => {
const { targetDate, headerRenderer } = (event as CustomEvent).detail;
console.log('🎯 DragDropManager: Received header:mouseover', {
targetDate,
draggedEventId: this.draggedEventId,
isDragging: !!this.draggedEventId
});
if (this.draggedEventId && targetDate) {
// Find dragget element dynamisk
const draggedElement = document.querySelector(`swp-event[data-event-id="${this.draggedEventId}"]`);
console.log('🔍 DragDropManager: Looking for dragged element', {
eventId: this.draggedEventId,
found: !!draggedElement,
tagName: draggedElement?.tagName
});
if (draggedElement) {
console.log('✅ DragDropManager: Converting to all-day for date:', targetDate);
// Element findes stadig som day-event, så konverter
this.eventBus.emit('drag:convert-to-allday', {
targetDate,
originalElement: draggedElement,
headerRenderer
});
} else {
console.log('❌ DragDropManager: Dragged element not found');
}
} else {
console.log('⏭️ DragDropManager: Skipping conversion - no drag or no target date');
}
});

124
src/managers/HeaderManager.ts
View file

@ -41,70 +41,137 @@ export class HeaderManager {
}
/**
* Setup header drag event listeners
* Setup header drag event listeners - REFACTORED to use mouseenter
*/
public setupHeaderDragListeners(): void {
const calendarHeader = this.getCalendarHeader();
if (!calendarHeader) return;
// Throttle for better performance
let lastEmitTime = 0;
const throttleDelay = 16; // ~60fps
console.log('🎯 HeaderManager: Setting up drag listeners with mouseenter');
// Track last processed date to avoid duplicates
let lastProcessedDate: string | null = null;
let lastProcessedTime = 0;
// Use mouseenter instead of mouseover to avoid continuous firing
this.headerEventListener = (event: Event) => {
const now = Date.now();
if (now - lastEmitTime < throttleDelay) {
return; // Throttle events for better performance
}
lastEmitTime = now;
const target = event.target as HTMLElement;
// Optimized element detection - handle day headers and all-day columns
const dayHeader = target.closest('swp-day-header');
const allDayColumn = target.closest('swp-allday-column');
console.log('🖱️ HeaderManager: mouseenter detected on:', target.tagName, target.className);
if (dayHeader || allDayColumn) {
const hoveredElement = (dayHeader || allDayColumn) as HTMLElement;
const targetDate = hoveredElement.dataset.date;
// Check if we're entering the all-day container OR the header area where container should be
let allDayContainer = target.closest('swp-allday-container');
// If no container exists, check if we're in the header and should create one via AllDayManager
if (!allDayContainer && target.closest('swp-calendar-header')) {
console.log('📍 HeaderManager: In header area but no all-day container exists, requesting creation...');
// Get header renderer for coordination
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
// Emit event to AllDayManager to create container
eventBus.emit('allday:ensure-container');
eventBus.emit('header:mouseover', {
element: hoveredElement,
targetDate,
headerRenderer
});
// Try to find it again after creation
allDayContainer = target.closest('swp-calendar-header')?.querySelector('swp-allday-container') as HTMLElement;
}
if (allDayContainer) {
// SMART CHECK: Only calculate target date if there's an active drag operation
const isDragActive = document.querySelector('.dragging') !== null;
if (!isDragActive) {
console.log('⏭️ HeaderManager: No active drag operation, skipping target date calculation');
return;
}
console.log('📍 HeaderManager: Active drag detected, calculating target date...');
// Calculate target date from mouse X coordinate
const targetDate = this.calculateTargetDateFromMouseX(event as MouseEvent);
console.log('🎯 HeaderManager: Calculated target date:', targetDate);
if (targetDate) {
const calendarType = calendarConfig.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
console.log('✅ HeaderManager: Emitting header:mouseover with targetDate:', targetDate);
eventBus.emit('header:mouseover', {
element: allDayContainer,
targetDate,
headerRenderer
});
} else {
console.log('❌ HeaderManager: Could not calculate target date from mouse position');
}
}
};
// Header mouseleave listener
this.headerMouseLeaveListener = (event: Event) => {
console.log('🚪 HeaderManager: mouseleave detected');
eventBus.emit('header:mouseleave', {
element: event.target as HTMLElement
});
};
// Add event listeners
calendarHeader.addEventListener('mouseover', this.headerEventListener);
// Use mouseenter with capture to catch events early
calendarHeader.addEventListener('mouseenter', this.headerEventListener, true);
calendarHeader.addEventListener('mouseleave', this.headerMouseLeaveListener);
console.log('✅ HeaderManager: Event listeners attached (mouseenter + mouseleave)');
}
/**
* Remove event listeners from header
* Calculate target date from mouse X coordinate
*/
private calculateTargetDateFromMouseX(event: MouseEvent): string | null {
const dayHeaders = document.querySelectorAll('swp-day-header');
const mouseX = event.clientX;
console.log('🧮 HeaderManager: Calculating target date from mouseX:', mouseX);
console.log('📊 HeaderManager: Found', dayHeaders.length, 'day headers');
for (const header of dayHeaders) {
const headerElement = header as HTMLElement;
const rect = headerElement.getBoundingClientRect();
const headerDate = headerElement.dataset.date;
console.log('📏 HeaderManager: Checking header', headerDate, 'bounds:', {
left: rect.left,
right: rect.right,
mouseX: mouseX,
isWithin: mouseX >= rect.left && mouseX <= rect.right
});
// Check if mouse X is within this header's bounds
if (mouseX >= rect.left && mouseX <= rect.right) {
console.log('🎯 HeaderManager: Found matching header for date:', headerDate);
return headerDate || null;
}
}
console.log('❌ HeaderManager: No matching header found for mouseX:', mouseX);
return null;
}
/**
* Remove event listeners from header - UPDATED for mouseenter
*/
private removeEventListeners(): void {
const calendarHeader = this.getCalendarHeader();
if (!calendarHeader) return;
console.log('🧹 HeaderManager: Removing event listeners');
if (this.headerEventListener) {
calendarHeader.removeEventListener('mouseover', this.headerEventListener);
// Remove mouseenter listener with capture flag
calendarHeader.removeEventListener('mouseenter', this.headerEventListener, true);
console.log('✅ HeaderManager: Removed mouseenter listener');
}
if (this.headerMouseLeaveListener) {
calendarHeader.removeEventListener('mouseleave', this.headerMouseLeaveListener);
console.log('✅ HeaderManager: Removed mouseleave listener');
}
}
@ -186,6 +253,7 @@ export class HeaderManager {
return calendarHeader;
}
/**
* Clear cached header reference
*/

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