From 4b4dbdc0d62d4099b41a8d0e87ae4386cee755ea Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Wed, 20 Aug 2025 20:22:51 +0200 Subject: [PATCH] Refactors event system to use CoreEvents Migrates the application to use a new CoreEvents system. This change removes the legacy EventTypes constant file and updates all managers, renderers, and core components to use the CoreEvents constant file for event emission and subscription. This improves code maintainability and promotes a consistent eventing strategy across the application. Adds validation to EventBus emit and extractCategory functions. --- src/constants/EventTypes.ts | 119 -------------------------- src/core/CalendarConfig.ts | 16 ++-- src/core/EventBus.ts | 11 +++ src/managers/CalendarManager.ts | 73 +++++----------- src/managers/EventManager.ts | 10 +-- src/managers/GridManager.ts | 13 ++- src/managers/NavigationManager.ts | 16 ++-- src/managers/ScrollManager.ts | 4 +- src/managers/ViewManager.ts | 16 ++-- src/renderers/EventRendererManager.ts | 22 ++--- src/renderers/NavigationRenderer.ts | 4 +- 11 files changed, 76 insertions(+), 228 deletions(-) delete mode 100644 src/constants/EventTypes.ts diff --git a/src/constants/EventTypes.ts b/src/constants/EventTypes.ts deleted file mode 100644 index d51129d..0000000 --- a/src/constants/EventTypes.ts +++ /dev/null @@ -1,119 +0,0 @@ -// Legacy Calendar event type constants - -/** - * Legacy event type constants for DOM CustomEvents - * - * IMPORTANT: This file contains events for specific UI interactions and config updates. - * For initialization and coordination events, use StateEvents from ../types/CalendarState.ts - * - * This file has been cleaned up to remove redundant/unused events. - */ -export const EventTypes = { - // Configuration events - CONFIG_UPDATE: 'calendar:configupdate', - CALENDAR_TYPE_CHANGED: 'calendar:calendartypechanged', - SELECTED_DATE_CHANGED: 'calendar:selecteddatechanged', - WORKWEEK_CHANGED: 'calendar:workweekchanged', - - // View change events - VIEW_CHANGE: 'calendar:viewchange', - VIEW_CHANGED: 'calendar:viewchanged', - VIEW_CHANGE_REQUESTED: 'calendar:viewchangerequested', - VIEW_RENDERED: 'calendar:viewrendered', - PERIOD_CHANGE: 'calendar:periodchange', - - // Navigation events - WEEK_CHANGED: 'calendar:weekchanged', - WEEK_INFO_UPDATED: 'calendar:weekinfoupdated', - WEEK_CONTENT_RENDERED: 'calendar:weekcontentrendered', - NAVIGATION_ANIMATION_COMPLETE: 'calendar:navigationanimationcomplete', - NAV_PREV: 'calendar:navprev', - NAV_NEXT: 'calendar:navnext', - NAV_TODAY: 'calendar:navtoday', - NAVIGATE_TO_DATE: 'calendar:navigatetodate', - NAVIGATE_TO_TODAY: 'calendar:navigatetotoday', - NAVIGATE_NEXT: 'calendar:navigatenext', - NAVIGATE_PREVIOUS: 'calendar:navigateprevious', - - // Event CRUD (still used for UI layer) - EVENT_CREATE: 'calendar:eventcreate', - EVENT_CREATED: 'calendar:eventcreated', - EVENT_UPDATE: 'calendar:eventupdate', - EVENT_UPDATED: 'calendar:eventupdated', - EVENT_DELETE: 'calendar:eventdelete', - EVENT_DELETED: 'calendar:eventdeleted', - EVENT_RENDERED: 'calendar:eventrendered', - EVENT_SELECTED: 'calendar:eventselected', - EVENTS_LOADED: 'calendar:eventsloaded', - - // User interaction events - GRID_CLICK: 'calendar:gridclick', - GRID_DBLCLICK: 'calendar:griddblclick', - - // Drag and drop events - DRAG_START: 'calendar:dragstart', - DRAG_MOVE: 'calendar:dragmove', - DRAG_END: 'calendar:dragend', - DRAG_CANCEL: 'calendar:dragcancel', - - RESIZE_START: 'calendar:resizestart', - RESIZE_MOVE: 'calendar:resizemove', - RESIZE_END: 'calendar:resizeend', - RESIZE_CANCEL: 'calendar:resizecancel', - - // UI events - POPUP_SHOW: 'calendar:popupshow', - POPUP_HIDE: 'calendar:popuphide', - - SEARCH_START: 'calendar:searchstart', - SEARCH_UPDATE: 'calendar:searchupdate', - SEARCH_CLEAR: 'calendar:searchclear', - - // Data events (legacy - prefer StateEvents) - DATE_CHANGED: 'calendar:datechanged', - DATA_FETCH_START: 'calendar:datafetchstart', - DATA_FETCH_SUCCESS: 'calendar:datafetchsuccess', - DATA_FETCH_ERROR: 'calendar:datafetcherror', - DATA_SYNC_START: 'calendar:datasyncstart', - DATA_SYNC_SUCCESS: 'calendar:datasyncsuccess', - DATA_SYNC_ERROR: 'calendar:datasyncerror', - - // Initialization events (legacy - prefer StateEvents) - CALENDAR_INITIALIZED: 'calendar:initialized', - CALENDAR_DATA_LOADED: 'calendar:calendardataloaded', - GRID_RENDERED: 'calendar:gridrendered', - CONTAINER_READY_FOR_EVENTS: 'calendar:containerreadyforevents', - - // Management events (legacy - prefer StateEvents) - REFRESH_REQUESTED: 'calendar:refreshrequested', - RESET_REQUESTED: 'calendar:resetrequested', - CALENDAR_REFRESH_REQUESTED: 'calendar:calendarrefreshrequested', - CALENDAR_RESET: 'calendar:reset', - - // System events - ERROR: 'calendar:error', - - // Time events - TIME_UPDATE: 'calendar:timeupdate', - - // Loading events - LOADING_START: 'calendar:loadingstart', - LOADING_END: 'calendar:loadingend' -} as const; - -// Type for event bus event type values -export type EventBusType = typeof EventTypes[keyof typeof EventTypes]; - -/** - * REMOVED EVENTS (now handled by StateEvents): - * - CALENDAR_INITIALIZING: Use StateEvents.CALENDAR_STATE_CHANGED - * - CALENDAR_INITIALIZED: Use StateEvents.CALENDAR_STATE_CHANGED - * - CALENDAR_DATA_LOADED: Use StateEvents.DATA_LOADED - * - GRID_RENDERED: Use StateEvents.GRID_RENDERED - * - VIEW_CHANGE_REQUESTED: Use StateEvents.VIEW_CHANGE_REQUESTED - * - VIEW_CHANGED: Use StateEvents.VIEW_CHANGED - * - DATA_FETCH_*: Use StateEvents.DATA_LOADING_STARTED/DATA_LOADED/DATA_FAILED - * - DATA_SYNC_*: Use StateEvents for better coordination - * - CALENDAR_READY: Use StateEvents.CALENDAR_READY - * - RENDERING_*: Use StateEvents.RENDERING_STARTED/RENDERING_COMPLETE - */ \ No newline at end of file diff --git a/src/core/CalendarConfig.ts b/src/core/CalendarConfig.ts index 1231c7a..1eed8a0 100644 --- a/src/core/CalendarConfig.ts +++ b/src/core/CalendarConfig.ts @@ -1,7 +1,7 @@ // Calendar configuration management import { eventBus } from './EventBus'; -import { EventTypes } from '../constants/EventTypes'; +import { CoreEvents } from '../constants/CoreEvents'; import { CalendarConfig as ICalendarConfig, ViewPeriod, CalendarMode, DateViewType, CalendarType } from '../types/CalendarTypes'; /** @@ -215,7 +215,7 @@ export class CalendarConfig { // Update computed values handled in specific update methods // Emit config update event - eventBus.emit(EventTypes.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.CONFIG_UPDATE, { key, value, oldValue @@ -292,7 +292,7 @@ export class CalendarConfig { } // Emit grid settings update event - eventBus.emit(EventTypes.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.CONFIG_UPDATE, { key: 'gridSettings', value: this.gridSettings, oldValue: this.gridSettings @@ -320,7 +320,7 @@ export class CalendarConfig { this.dateViewSettings = { ...this.dateViewSettings, ...updates }; // Emit date view settings update event - eventBus.emit(EventTypes.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.CONFIG_UPDATE, { key: 'dateViewSettings', value: this.dateViewSettings, oldValue: this.dateViewSettings @@ -355,7 +355,7 @@ export class CalendarConfig { this.resourceViewSettings = { ...this.resourceViewSettings, ...updates }; // Emit resource view settings update event - eventBus.emit(EventTypes.CONFIG_UPDATE, { + eventBus.emit(CoreEvents.CONFIG_UPDATE, { key: 'resourceViewSettings', value: this.resourceViewSettings, oldValue: this.resourceViewSettings @@ -409,7 +409,7 @@ export class CalendarConfig { this.calendarMode = mode; // Emit calendar mode change event - eventBus.emit(EventTypes.CALENDAR_TYPE_CHANGED, { + eventBus.emit(CoreEvents.CALENDAR_TYPE_CHANGED, { oldType: oldMode, newType: mode }); @@ -429,7 +429,7 @@ export class CalendarConfig { this.selectedDate = date; // Emit date change event - eventBus.emit(EventTypes.SELECTED_DATE_CHANGED, { + eventBus.emit(CoreEvents.SELECTED_DATE_CHANGED, { date: date }); } @@ -492,7 +492,7 @@ export class CalendarConfig { this.dateViewSettings.weekDays = presets[workWeekId].totalDays; // Emit work week change event - eventBus.emit(EventTypes.WORKWEEK_CHANGED, { + eventBus.emit(CoreEvents.WORKWEEK_CHANGED, { workWeekId: workWeekId, settings: presets[workWeekId] }); diff --git a/src/core/EventBus.ts b/src/core/EventBus.ts index 9991ab4..ba00f4e 100644 --- a/src/core/EventBus.ts +++ b/src/core/EventBus.ts @@ -60,6 +60,12 @@ export class EventBus implements IEventBus { * Emit an event via DOM CustomEvent */ emit(eventType: string, detail: any = {}): boolean { + // Validate eventType + if (!eventType || typeof eventType !== 'string') { + console.error('EventBus.emit: Invalid eventType provided', eventType); + return false; + } + const event = new CustomEvent(eventType, { detail, bubbles: true, @@ -106,6 +112,11 @@ export class EventBus implements IEventBus { * Extract category from event type */ private extractCategory(eventType: string): string { + if (!eventType || typeof eventType !== 'string') { + console.error('EventBus.extractCategory: Invalid eventType', eventType); + return 'unknown'; + } + if (eventType.includes(':')) { return eventType.split(':')[0]; } diff --git a/src/managers/CalendarManager.ts b/src/managers/CalendarManager.ts index 2cf9e20..19fefa8 100644 --- a/src/managers/CalendarManager.ts +++ b/src/managers/CalendarManager.ts @@ -1,5 +1,5 @@ import { EventBus } from '../core/EventBus.js'; -import { EventTypes } from '../constants/EventTypes.js'; +import { CoreEvents } from '../constants/CoreEvents.js'; import { CalendarConfig } from '../core/CalendarConfig.js'; import { CalendarEvent, CalendarView, IEventBus } from '../types/CalendarTypes.js'; import { EventManager } from './EventManager.js'; @@ -87,7 +87,7 @@ export class CalendarManager { console.log('✅ CalendarManager: Simple initialization complete'); // Emit initialization complete event - this.eventBus.emit(EventTypes.CALENDAR_INITIALIZED, { + this.eventBus.emit(CoreEvents.INITIALIZED, { currentDate: this.currentDate, currentView: this.currentView }); @@ -112,7 +112,7 @@ export class CalendarManager { console.log(`Changing view from ${previousView} to ${view}`); // Emit view change event - this.eventBus.emit(EventTypes.VIEW_CHANGED, { + this.eventBus.emit(CoreEvents.VIEW_CHANGED, { previousView, currentView: view, date: this.currentDate @@ -125,13 +125,23 @@ export class CalendarManager { * Sæt aktuel dato */ public setCurrentDate(date: Date): void { + // Validate input date + if (!date || !(date instanceof Date) || isNaN(date.getTime())) { + console.error('CalendarManager.setCurrentDate: Invalid date provided', date); + return; + } + const previousDate = this.currentDate; this.currentDate = new Date(date); - console.log(`Changing date from ${previousDate.toISOString()} to ${date.toISOString()}`); + // Validate that both dates are valid before logging + const prevDateStr = previousDate && !isNaN(previousDate.getTime()) ? previousDate.toISOString() : 'Invalid Date'; + const newDateStr = this.currentDate.toISOString(); + + console.log(`Changing date from ${prevDateStr} to ${newDateStr}`); // Emit date change event - this.eventBus.emit(EventTypes.DATE_CHANGED, { + this.eventBus.emit(CoreEvents.DATE_CHANGED, { previousDate, currentDate: this.currentDate, view: this.currentView @@ -209,7 +219,7 @@ export class CalendarManager { public refresh(): void { console.log('Refreshing calendar...'); - this.eventBus.emit(EventTypes.CALENDAR_REFRESH_REQUESTED, { + this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, { view: this.currentView, date: this.currentDate }); @@ -224,7 +234,7 @@ export class CalendarManager { this.currentView = 'week'; this.currentDate = new Date(); - this.eventBus.emit(EventTypes.CALENDAR_RESET, { + this.eventBus.emit(CoreEvents.REFRESH_REQUESTED, { view: this.currentView, date: this.currentDate }); @@ -234,41 +244,8 @@ export class CalendarManager { * Setup event listeners for at håndtere events fra andre managers */ private setupEventListeners(): void { - // Lyt efter navigation events - this.eventBus.on(EventTypes.NAVIGATE_TO_DATE, (event) => { - const customEvent = event as CustomEvent; - const { date } = customEvent.detail; - this.setCurrentDate(new Date(date)); - }); - - // Lyt efter view change requests - this.eventBus.on(EventTypes.VIEW_CHANGE_REQUESTED, (event) => { - const customEvent = event as CustomEvent; - const { view } = customEvent.detail; - this.setView(view); - }); - - // Lyt efter today navigation - this.eventBus.on(EventTypes.NAVIGATE_TO_TODAY, () => { - this.goToToday(); - }); - - // Lyt efter next/previous navigation - this.eventBus.on(EventTypes.NAVIGATE_NEXT, () => { - this.goToNext(); - }); - - this.eventBus.on(EventTypes.NAVIGATE_PREVIOUS, () => { - this.goToPrevious(); - }); - - // Lyt efter refresh requests - this.eventBus.on(EventTypes.REFRESH_REQUESTED, () => { - this.refresh(); - }); - - // Lyt efter workweek changes - this.eventBus.on(EventTypes.WORKWEEK_CHANGED, (event: Event) => { + // Listen for workweek changes only + this.eventBus.on(CoreEvents.WORKWEEK_CHANGED, (event: Event) => { const customEvent = event as CustomEvent; console.log('CalendarManager: Workweek changed to', customEvent.detail.workWeekId); this.handleWorkweekChange(); @@ -276,16 +253,6 @@ export class CalendarManager { // Also update week info display since workweek affects date range display this.updateWeekInfoForWorkweekChange(); }); - - // Lyt efter reset requests - this.eventBus.on(EventTypes.RESET_REQUESTED, () => { - this.reset(); - }); - - // Update week info when grid is rendered with actual column dates - this.eventBus.on(EventTypes.GRID_RENDERED, () => { - this.updateWeekInfoFromRenderedColumns(); - }); } /** @@ -487,7 +454,7 @@ export class CalendarManager { }); // Emit week info update - this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, { + this.eventBus.emit(CoreEvents.WEEK_CHANGED, { weekNumber, dateRange, weekStart: firstDate, diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index f633802..2f7e79b 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -1,6 +1,6 @@ import { EventBus } from '../core/EventBus'; import { IEventBus, CalendarEvent, ResourceCalendarData } from '../types/CalendarTypes'; -import { EventTypes } from '../constants/EventTypes'; +import { CoreEvents } from '../constants/CoreEvents'; import { calendarConfig } from '../core/CalendarConfig'; /** @@ -21,7 +21,7 @@ export class EventManager { private setupEventListeners(): void { // NOTE: Removed POC event listener to prevent interference with production code // POC sliding animation should not trigger separate event rendering - // this.eventBus.on(EventTypes.WEEK_CONTENT_RENDERED, ...); + // this.eventBus.on(CoreEvents.WEEK_CONTENT_RENDERED, ...); } /** @@ -140,7 +140,7 @@ export class EventManager { this.events.push(newEvent); this.syncEvents(); - this.eventBus.emit(EventTypes.EVENT_CREATED, { + this.eventBus.emit(CoreEvents.EVENT_CREATED, { event: newEvent }); @@ -156,7 +156,7 @@ export class EventManager { this.syncEvents(); - this.eventBus.emit(EventTypes.EVENT_UPDATED, { + this.eventBus.emit(CoreEvents.EVENT_UPDATED, { event: updatedEvent }); @@ -172,7 +172,7 @@ export class EventManager { this.syncEvents(); - this.eventBus.emit(EventTypes.EVENT_DELETED, { + this.eventBus.emit(CoreEvents.EVENT_DELETED, { event: deletedEvent }); diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index d248b34..5bf032c 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -5,7 +5,6 @@ import { eventBus } from '../core/EventBus'; import { calendarConfig } from '../core/CalendarConfig'; -import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents'; import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes'; import { AllDayEvent } from '../types/EventTypes'; @@ -48,7 +47,7 @@ export class GridManager { private subscribeToEvents(): void { // Listen for view changes to switch strategies this.eventCleanup.push( - eventBus.on(EventTypes.VIEW_CHANGED, (e: Event) => { + eventBus.on(CoreEvents.VIEW_CHANGED, (e: Event) => { const detail = (e as CustomEvent).detail; this.switchViewStrategy(detail.currentView); }) @@ -56,7 +55,7 @@ export class GridManager { // Listen for data changes this.eventCleanup.push( - eventBus.on(EventTypes.DATE_CHANGED, (e: Event) => { + eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => { const detail = (e as CustomEvent).detail; this.currentDate = detail.currentDate; this.render(); @@ -64,7 +63,7 @@ export class GridManager { ); this.eventCleanup.push( - eventBus.on(EventTypes.WEEK_CHANGED, (e: Event) => { + eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => { const detail = (e as CustomEvent).detail; this.currentDate = detail.weekStart; this.render(); @@ -72,7 +71,7 @@ export class GridManager { ); this.eventCleanup.push( - eventBus.on(EventTypes.EVENTS_LOADED, (e: Event) => { + eventBus.on(CoreEvents.DATA_LOADED, (e: Event) => { const detail = (e as CustomEvent).detail; this.updateAllDayEvents(detail.events); }) @@ -80,13 +79,13 @@ export class GridManager { // Listen for config changes that affect rendering this.eventCleanup.push( - eventBus.on(EventTypes.CONFIG_UPDATE, (e: Event) => { + eventBus.on(CoreEvents.REFRESH_REQUESTED, (e: Event) => { this.render(); }) ); this.eventCleanup.push( - eventBus.on(EventTypes.WORKWEEK_CHANGED, () => { + eventBus.on(CoreEvents.WORKWEEK_CHANGED, () => { this.render(); }) ); diff --git a/src/managers/NavigationManager.ts b/src/managers/NavigationManager.ts index 4c2d789..a13f4b0 100644 --- a/src/managers/NavigationManager.ts +++ b/src/managers/NavigationManager.ts @@ -1,7 +1,7 @@ import { IEventBus } from '../types/CalendarTypes.js'; import { EventRenderingService } from '../renderers/EventRendererManager.js'; import { DateCalculator } from '../utils/DateCalculator.js'; -import { EventTypes } from '../constants/EventTypes.js'; +import { CoreEvents } from '../constants/CoreEvents.js'; import { NavigationRenderer } from '../renderers/NavigationRenderer.js'; import { calendarConfig } from '../core/CalendarConfig.js'; @@ -35,7 +35,7 @@ export class NavigationManager { private setupEventListeners(): void { // Initial DOM update when calendar is initialized - this.eventBus.on(EventTypes.CALENDAR_INITIALIZED, () => { + this.eventBus.on(CoreEvents.CALENDAR_INITIALIZED, () => { console.log('NavigationManager: Received CALENDAR_INITIALIZED, updating week info'); this.updateWeekInfo(); }); @@ -63,7 +63,7 @@ export class NavigationManager { }); // Listen for external navigation requests - this.eventBus.on(EventTypes.NAVIGATE_TO_DATE, (event: Event) => { + this.eventBus.on(CoreEvents.NAVIGATE_TO_DATE, (event: Event) => { const customEvent = event as CustomEvent; const targetDate = new Date(customEvent.detail.date); this.navigateToDate(targetDate); @@ -189,13 +189,13 @@ export class NavigationManager { // Update week info and notify other managers this.updateWeekInfo(); - this.eventBus.emit(EventTypes.WEEK_CHANGED, { + this.eventBus.emit(CoreEvents.WEEK_CHANGED, { weekStart: this.currentWeek, weekEnd: this.dateCalculator.addDays(this.currentWeek, 6) }); - // Emit animation complete event for ScrollManager - this.eventBus.emit(EventTypes.NAVIGATION_ANIMATION_COMPLETE, { + // Emit period change event for ScrollManager + this.eventBus.emit(CoreEvents.PERIOD_CHANGED, { direction, weekStart: this.currentWeek }); @@ -211,7 +211,7 @@ export class NavigationManager { const dateRange = this.dateCalculator.formatDateRange(this.currentWeek, weekEnd); // Notify other managers about week info update - DOM manipulation should happen via events - this.eventBus.emit(EventTypes.WEEK_INFO_UPDATED, { + this.eventBus.emit(CoreEvents.WEEK_CHANGED, { weekNumber, dateRange, weekStart: this.currentWeek, @@ -248,7 +248,7 @@ export class NavigationManager { this.targetWeek = new Date(weekStart); this.updateWeekInfo(); - this.eventBus.emit(EventTypes.WEEK_CHANGED, { + this.eventBus.emit(CoreEvents.WEEK_CHANGED, { weekStart: this.currentWeek, weekEnd: DateUtils.addDays(this.currentWeek, 6) }); diff --git a/src/managers/ScrollManager.ts b/src/managers/ScrollManager.ts index d01f1a9..ce52226 100644 --- a/src/managers/ScrollManager.ts +++ b/src/managers/ScrollManager.ts @@ -2,7 +2,7 @@ import { eventBus } from '../core/EventBus'; import { calendarConfig } from '../core/CalendarConfig'; -import { EventTypes } from '../constants/EventTypes'; +import { CoreEvents } from '../constants/CoreEvents'; /** * Manages scrolling functionality for the calendar using native scrollbars @@ -31,7 +31,7 @@ export class ScrollManager { private subscribeToEvents(): void { // Handle navigation animation completion - sync time axis position - eventBus.on(EventTypes.NAVIGATION_ANIMATION_COMPLETE, () => { + eventBus.on(CoreEvents.NAVIGATION_ANIMATION_COMPLETE, () => { this.syncTimeAxisPosition(); this.setupScrolling(); }); diff --git a/src/managers/ViewManager.ts b/src/managers/ViewManager.ts index 35ef64c..d1c2818 100644 --- a/src/managers/ViewManager.ts +++ b/src/managers/ViewManager.ts @@ -1,7 +1,7 @@ import { EventBus } from '../core/EventBus'; import { CalendarView, IEventBus } from '../types/CalendarTypes'; import { calendarConfig } from '../core/CalendarConfig'; -import { EventTypes } from '../constants/EventTypes'; +import { CoreEvents } from '../constants/CoreEvents'; /** * ViewManager - Håndterer skift mellem dag/uge/måned visninger @@ -21,13 +21,13 @@ export class ViewManager { private setupEventListeners(): void { // Track event bus listeners for cleanup this.eventCleanup.push( - this.eventBus.on(EventTypes.CALENDAR_INITIALIZED, () => { + this.eventBus.on(CoreEvents.INITIALIZED, () => { this.initializeView(); }) ); this.eventCleanup.push( - this.eventBus.on(EventTypes.VIEW_CHANGE_REQUESTED, (event: Event) => { + this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => { const customEvent = event as CustomEvent; const { currentView } = customEvent.detail; this.changeView(currentView); @@ -35,7 +35,7 @@ export class ViewManager { ); this.eventCleanup.push( - this.eventBus.on(EventTypes.DATE_CHANGED, () => { + this.eventBus.on(CoreEvents.DATE_CHANGED, () => { this.refreshCurrentView(); }) ); @@ -83,7 +83,7 @@ export class ViewManager { this.updateViewButtons(); this.updateWorkweekButtons(); - this.eventBus.emit(EventTypes.VIEW_RENDERED, { + this.eventBus.emit(CoreEvents.VIEW_RENDERED, { view: this.currentView }); } @@ -98,7 +98,7 @@ export class ViewManager { this.updateViewButtons(); - this.eventBus.emit(EventTypes.VIEW_CHANGED, { + this.eventBus.emit(CoreEvents.VIEW_CHANGED, { previousView, currentView: newView }); @@ -114,7 +114,7 @@ export class ViewManager { this.updateWorkweekButtons(); // Trigger a calendar refresh to apply the new workweek - this.eventBus.emit(EventTypes.REFRESH_REQUESTED); + this.eventBus.emit(CoreEvents.REFRESH_REQUESTED); } private updateViewButtons(): void { @@ -144,7 +144,7 @@ export class ViewManager { } private refreshCurrentView(): void { - this.eventBus.emit(EventTypes.VIEW_RENDERED, { + this.eventBus.emit(CoreEvents.VIEW_RENDERED, { view: this.currentView }); } diff --git a/src/renderers/EventRendererManager.ts b/src/renderers/EventRendererManager.ts index 743fca5..38076f6 100644 --- a/src/renderers/EventRendererManager.ts +++ b/src/renderers/EventRendererManager.ts @@ -1,6 +1,5 @@ import { EventBus } from '../core/EventBus'; import { IEventBus, CalendarEvent, RenderContext } from '../types/CalendarTypes'; -import { EventTypes } from '../constants/EventTypes'; import { CoreEvents } from '../constants/CoreEvents'; import { calendarConfig } from '../core/CalendarConfig'; import { CalendarTypeFactory } from '../factories/CalendarTypeFactory'; @@ -33,6 +32,10 @@ export class EventRenderingService { public renderEvents(context: RenderContext): void { console.log(` 📅 Getting events for ${context.startDate.toDateString()} - ${context.endDate.toDateString()}`); + // Clear existing events in the specific container first + this.strategy.clearEvents(context.container); + console.log(` 🧹 Cleared existing events in container`); + // Get events from EventManager for the period const events = this.eventManager.getEventsForPeriod( context.startDate, @@ -54,14 +57,8 @@ export class EventRenderingService { private setupEventListeners(): void { // Event-driven rendering: React to grid and container events - this.eventBus.on(EventTypes.GRID_RENDERED, (event: Event) => { - console.log('EventRenderer: Received GRID_RENDERED event (legacy)'); - this.handleGridRendered(event as CustomEvent); - }); - - // Listen to new CoreEvents system as well this.eventBus.on(CoreEvents.GRID_RENDERED, (event: Event) => { - console.log('EventRenderer: Received GRID_RENDERED event (core)'); + console.log('EventRenderer: Received GRID_RENDERED event'); this.handleGridRendered(event as CustomEvent); }); @@ -71,17 +68,10 @@ export class EventRenderingService { // this.handleContainerReady(event as CustomEvent); // }); - this.eventBus.on(EventTypes.VIEW_CHANGED, (event: Event) => { + this.eventBus.on(CoreEvents.VIEW_CHANGED, (event: Event) => { console.log('EventRenderer: Received VIEW_CHANGED event'); this.handleViewChanged(event as CustomEvent); }); - - // Handle calendar type changes - update cached strategy - this.eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => { - const calendarType = calendarConfig.getCalendarMode(); - this.strategy = CalendarTypeFactory.getEventRenderer(calendarType); - console.log(`EventRenderer: Updated strategy to ${calendarType}`); - }); } diff --git a/src/renderers/NavigationRenderer.ts b/src/renderers/NavigationRenderer.ts index 88cf69d..fecd1ff 100644 --- a/src/renderers/NavigationRenderer.ts +++ b/src/renderers/NavigationRenderer.ts @@ -1,5 +1,5 @@ import { IEventBus } from '../types/CalendarTypes'; -import { EventTypes } from '../constants/EventTypes'; +import { CoreEvents } from '../constants/CoreEvents'; import { CalendarConfig } from '../core/CalendarConfig'; import { DateCalculator } from '../utils/DateCalculator'; import { EventRenderingService } from './EventRendererManager'; @@ -26,7 +26,7 @@ export class NavigationRenderer { * Setup event listeners for DOM updates */ private setupEventListeners(): void { - this.eventBus.on(EventTypes.WEEK_INFO_UPDATED, (event: Event) => { + this.eventBus.on(CoreEvents.WEEK_INFO_UPDATED, (event: Event) => { const customEvent = event as CustomEvent; const { weekNumber, dateRange } = customEvent.detail; this.updateWeekInfoInDOM(weekNumber, dateRange);