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

Improves event hover highlighting

Browse source 
Uses CSS classes for event hover highlighting,
instead of directly manipulating the background color.
This allows for more flexible and maintainable styling.

Re-enables resize handle manager.
Removes console logs.
This commit is contained in:
Janus C. H. Knudsen 2025-10-08 18:15:00 +02:00
parent 8b8a1e3127
commit 3145752591
4 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/factories/ManagerFactory.ts
View file

@ -73,10 +73,9 @@ export class ManagerFactory {
try {
await managers.calendarManager.initialize?.();
// ResizeHandleManager temporarily disabled for testing
// if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) {
// managers.resizeHandleManager.initialize();
// }
if (managers.resizeHandleManager && managers.resizeHandleManager.initialize) {
managers.resizeHandleManager.initialize();
}
} catch (error) {
throw error;
}

20
src/managers/DragDropManager.ts
View file

@ -119,13 +119,12 @@ export class DragDropManager {
if (eventElement && !this.isDragStarted && mouseEvent.buttons === 0) {
// Clear any previous hover first
if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) {
this.currentHoveredEvent.style.backgroundColor = '';
this.currentHoveredEvent.classList.remove('hover');
}
this.isHoverTrackingActive = true;
this.currentHoveredEvent = eventElement;
eventElement.style.backgroundColor = 'red';
console.log('🎨 Mouse entered event:', eventElement.dataset.eventId, 'buttons:', mouseEvent.buttons, 'isDragStarted:', this.isDragStarted);
eventElement.classList.add('hover');
}
}
}, true); // Use capture phase
@ -208,15 +207,6 @@ export class DragDropManager {
this.currentMouseY = event.clientY;
this.lastMousePosition = { x: event.clientX, y: event.clientY };
// Log which element we're over during drag
if (this.isDragStarted) {
const elementAtPoint = document.elementFromPoint(event.clientX, event.clientY);
const eventElement = elementAtPoint?.closest('swp-event');
if (eventElement) {
console.log('🖱️ Dragging over event:', (eventElement as HTMLElement).dataset.eventId);
}
}
// Check for event hover (coordinate-based) - only when mouse button is up
if (this.isHoverTrackingActive && event.buttons === 0) {
this.checkEventHover(event);
@ -238,10 +228,8 @@ export class DragDropManager {
// Set high z-index on event-group if exists, otherwise on event itself
const eventGroup = this.draggedElement.closest<HTMLElement>('swp-event-group');
if (eventGroup) {
console.log('🔝 Setting z-index 9999 on event-group', eventGroup);
eventGroup.style.zIndex = '9999';
} else {
console.log('🔝 Setting z-index 9999 on event', this.draggedElement.dataset.eventId);
this.draggedElement.style.zIndex = '9999';
}
@ -615,7 +603,6 @@ export class DragDropManager {
if (!isStillInside) {
// Only disable tracking and clear if mouse is NOT pressed (allow resize to work)
if (event.buttons === 0) {
console.log('🚪 Mouse left event:', this.currentHoveredEvent.dataset.eventId, 'clearing hover');
this.isHoverTrackingActive = false;
this.clearEventHover();
}
@ -624,9 +611,8 @@ export class DragDropManager {
private clearEventHover(): void {
if (this.currentHoveredEvent) {
this.currentHoveredEvent.style.backgroundColor = '';
this.currentHoveredEvent.classList.remove('hover');
this.currentHoveredEvent = null;
}
}
}