From 04b6847f55cf5d54e51ffea4e2139891840ad241 Mon Sep 17 00:00:00 2001 From: "Janus C. H. Knudsen" Date: Thu, 6 Nov 2025 21:11:45 +0100 Subject: [PATCH] Remove DragHoverManager and update hover styles Replaces custom hover tracking with native CSS :hover pseudo-class Simplifies event hover handling by removing dedicated manager Reduces complexity of hover interactions --- src/index.ts | 3 - src/managers/DragHoverManager.ts | 116 ---------------------------- wwwroot/css/calendar-events-css.css | 12 +-- 3 files changed, 6 insertions(+), 125 deletions(-) delete mode 100644 src/managers/DragHoverManager.ts diff --git a/src/index.ts b/src/index.ts index 8d309bf..2eca151 100644 --- a/src/index.ts +++ b/src/index.ts @@ -18,7 +18,6 @@ import { DragDropManager } from './managers/DragDropManager'; import { AllDayManager } from './managers/AllDayManager'; import { ResizeHandleManager } from './managers/ResizeHandleManager'; import { EdgeScrollManager } from './managers/EdgeScrollManager'; -import { DragHoverManager } from './managers/DragHoverManager'; import { HeaderManager } from './managers/HeaderManager'; // Import repositories and storage @@ -129,7 +128,6 @@ async function initializeCalendar(): Promise { builder.registerType(AllDayManager).as(); builder.registerType(ResizeHandleManager).as(); builder.registerType(EdgeScrollManager).as(); - builder.registerType(DragHoverManager).as(); builder.registerType(HeaderManager).as(); builder.registerType(CalendarManager).as(); @@ -148,7 +146,6 @@ async function initializeCalendar(): Promise { const viewManager = app.resolveType(); const navigationManager = app.resolveType(); const edgeScrollManager = app.resolveType(); - const dragHoverManager = app.resolveType(); const allDayManager = app.resolveType(); const urlManager = app.resolveType(); diff --git a/src/managers/DragHoverManager.ts b/src/managers/DragHoverManager.ts deleted file mode 100644 index 65263f5..0000000 --- a/src/managers/DragHoverManager.ts +++ /dev/null @@ -1,116 +0,0 @@ -/** - * DragHoverManager - Handles event hover tracking - * Fully autonomous - listens to mouse events and manages hover state independently - */ - -import { IEventBus } from '../types/CalendarTypes'; - -export class DragHoverManager { - private isHoverTrackingActive = false; - private currentHoveredEvent: HTMLElement | null = null; - private calendarContainer: HTMLElement | null = null; - - constructor(private eventBus: IEventBus) { - this.init(); - } - - private init(): void { - // Wait for DOM to be ready - setTimeout(() => { - this.calendarContainer = document.querySelector('swp-calendar-container'); - if (this.calendarContainer) { - this.setupEventListeners(); - } - }, 100); - - // Listen to drag start to deactivate hover tracking - this.eventBus.on('drag:start', () => { - this.deactivateTracking(); - }); - } - - private setupEventListeners(): void { - if (!this.calendarContainer) return; - - // Listen to mouseenter on events (using event delegation) - this.calendarContainer.addEventListener('mouseenter', (e) => { - const target = e.target as HTMLElement; - const eventElement = target.closest('swp-event'); - - if (eventElement) { - this.handleEventMouseEnter(e as MouseEvent, eventElement); - } - }, true); // Use capture phase - - // Listen to mousemove globally to track when mouse leaves event bounds - document.body.addEventListener('mousemove', (e: MouseEvent) => { - if (this.isHoverTrackingActive && e.buttons === 0) { - this.checkEventHover(e); - } - }); - } - - /** - * Handle mouse enter on swp-event - activate hover tracking - */ - private handleEventMouseEnter(event: MouseEvent, eventElement: HTMLElement): void { - // Only handle hover if mouse button is up - if (event.buttons === 0) { - // Clear any previous hover first - if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) { - this.currentHoveredEvent.classList.remove('hover'); - } - - this.isHoverTrackingActive = true; - this.currentHoveredEvent = eventElement; - eventElement.classList.add('hover'); - - this.eventBus.emit('event:hover:start', { element: eventElement }); - } - } - - /** - * Check if mouse is still over the currently hovered event - */ - private checkEventHover(event: MouseEvent): void { - // Only track hover when active and mouse button is up - if (!this.isHoverTrackingActive || !this.currentHoveredEvent) return; - - const rect = this.currentHoveredEvent.getBoundingClientRect(); - const mouseX = event.clientX; - const mouseY = event.clientY; - - // Check if mouse is still within the current hovered event - const isStillInside = mouseX >= rect.left && mouseX <= rect.right && - mouseY >= rect.top && mouseY <= rect.bottom; - - // If mouse left the event - if (!isStillInside) { - // Only disable tracking and clear if mouse is NOT pressed (allow resize to work) - if (event.buttons === 0) { - this.isHoverTrackingActive = false; - this.clearEventHover(); - } - } - } - - /** - * Clear hover state - */ - private clearEventHover(): void { - if (this.currentHoveredEvent) { - this.currentHoveredEvent.classList.remove('hover'); - this.eventBus.emit('event:hover:end', { element: this.currentHoveredEvent }); - this.currentHoveredEvent = null; - } - } - - /** - * Deactivate hover tracking and clear any current hover - * Called via event bus when drag starts - */ - private deactivateTracking(): void { - this.isHoverTrackingActive = false; - this.clearEventHover(); - } -} diff --git a/wwwroot/css/calendar-events-css.css b/wwwroot/css/calendar-events-css.css index 021965a..4c80594 100644 --- a/wwwroot/css/calendar-events-css.css +++ b/wwwroot/css/calendar-events-css.css @@ -62,27 +62,27 @@ swp-day-columns swp-event { } /* Hover state - highlight colors */ - &.hover[data-type="meeting"] { + &:hover[data-type="meeting"] { background: var(--color-event-meeting-hl); } - &.hover[data-type="meal"] { + &:hover[data-type="meal"] { background: var(--color-event-meal-hl); } - &.hover[data-type="work"] { + &:hover[data-type="work"] { background: var(--color-event-work-hl); } - &.hover[data-type="milestone"] { + &:hover[data-type="milestone"] { background: var(--color-event-milestone-hl); } - &.hover[data-type="personal"] { + &:hover[data-type="personal"] { background: var(--color-event-personal-hl); } - &.hover[data-type="deadline"] { + &:hover[data-type="deadline"] { background: var(--color-event-milestone-hl); }