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

wip

Browse source
This commit is contained in:
Janus Knudsen 2025-08-09 01:16:04 +02:00
parent 59b3c64c55
commit b111f121ba
9 changed files with 200 additions and 694 deletions
Download patch file Download diff file Expand all files Collapse all files

143
src/managers/EventRenderer.ts
View file

@ -11,99 +11,31 @@ import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
*/
export class EventRenderer {
private eventBus: IEventBus;
private pendingEvents: CalendarEvent[] = [];
private dataReady: boolean = false;
private gridReady: boolean = false;
constructor(eventBus: IEventBus) {
this.eventBus = eventBus;
this.setupEventListeners();
}
private setupEventListeners(): void {
// Listen for state-driven data loaded event
this.eventBus.on(StateEvents.DATA_LOADED, (event: Event) => {
const customEvent = event as CustomEvent;
// Events are in customEvent.detail (direct from StateEvent payload)
const eventCount = customEvent.detail.data?.eventCount || 0;
const events = customEvent.detail.data?.events || [];
console.log('EventRenderer: Received DATA_LOADED with', eventCount, 'events');
this.pendingEvents = events; // Store the actual events
this.dataReady = true;
this.tryRenderEvents();
});
// Listen for state-driven grid rendered event
this.eventBus.on(StateEvents.GRID_RENDERED, (event: Event) => {
const customEvent = event as CustomEvent;
console.log('EventRenderer: Received GRID_RENDERED');
this.gridReady = true;
this.tryRenderEvents();
});
this.eventBus.on(EventTypes.VIEW_RENDERED, () => {
// Clear existing events when view changes
this.clearEvents();
});
// Handle calendar type changes
this.eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
// Re-render events with new strategy
this.tryRenderEvents();
});
}
private tryRenderEvents(): void {
// Only render if we have both data and grid ready
console.log('EventRenderer: tryRenderEvents called', {
dataReady: this.dataReady,
gridReady: this.gridReady,
pendingEvents: this.pendingEvents.length
});
/**
* Public method to render events - called directly by CalendarManager
*/
public async renderEvents(events: CalendarEvent[]): Promise<void> {
console.log('EventRenderer: Direct renderEvents called with', events.length, 'events');
if (!this.dataReady || !this.gridReady) {
console.log('EventRenderer: Waiting - data ready:', this.dataReady, 'grid ready:', this.gridReady);
// Debug: Check if we have any events
if (events.length === 0) {
console.warn('EventRenderer: No events to render');
return;
}
if (this.pendingEvents.length > 0) {
const calendarType = calendarConfig.getCalendarMode();
let columnsSelector = calendarType === 'resource' ? 'swp-resource-column' : 'swp-day-column';
const columns = document.querySelectorAll(columnsSelector);
console.log(`EventRenderer: Found ${columns.length} ${columnsSelector} elements for ${calendarType} calendar`);
if (columns.length > 0) {
console.log('🎨 EventRenderer: Both data and grid ready, rendering events!');
const eventCount = this.pendingEvents.length;
this.renderEvents(this.pendingEvents);
this.pendingEvents = []; // Clear pending events after rendering
// Emit events rendered event
this.eventBus.emit(StateEvents.EVENTS_RENDERED, {
type: StateEvents.EVENTS_RENDERED,
component: 'EventRenderer',
timestamp: Date.now(),
data: {
eventCount,
calendarMode: calendarType,
renderMethod: 'state-driven'
},
metadata: {
phase: 'event-rendering'
}
});
} else {
console.log('EventRenderer: Grid not ready yet, columns not found');
}
} else {
console.log('EventRenderer: No pending events to render');
}
}
private renderEvents(events: CalendarEvent[]): void {
console.log('EventRenderer: renderEvents called with', events.length, 'events');
// Debug: Log first event details
console.log('EventRenderer: First event details:', {
title: events[0].title,
start: events[0].start,
end: events[0].end,
allDay: events[0].allDay
});
// Get the appropriate event renderer strategy
const calendarType = calendarConfig.getCalendarMode();
@ -111,27 +43,62 @@ export class EventRenderer {
console.log(`EventRenderer: Using ${calendarType} event renderer strategy`);
// Debug: Check if columns exist
const columns = document.querySelectorAll('swp-day-column');
console.log(`EventRenderer: Found ${columns.length} day columns in DOM`);
// Use strategy to render events
eventRenderer.renderEvents(events, calendarConfig);
// Debug: Check if events are actually in DOM after rendering
setTimeout(() => {
const allRenderedEvents = document.querySelectorAll('swp-event');
console.log(`EventRenderer: DOM check - ${allRenderedEvents.length} swp-event elements found in DOM`);
if (allRenderedEvents.length > 0) {
const firstEvent = allRenderedEvents[0] as HTMLElement;
console.log('EventRenderer: First event DOM details:', {
visible: firstEvent.offsetWidth > 0 && firstEvent.offsetHeight > 0,
offsetParent: !!firstEvent.offsetParent,
computedDisplay: window.getComputedStyle(firstEvent).display,
computedVisibility: window.getComputedStyle(firstEvent).visibility,
computedOpacity: window.getComputedStyle(firstEvent).opacity,
parentElement: firstEvent.parentElement?.tagName
});
}
}, 100);
console.log(`EventRenderer: Successfully rendered ${events.length} events`);
}
// Emit event rendered
this.eventBus.emit(EventTypes.EVENT_RENDERED, {
count: events.filter(e => !e.allDay).length
private setupEventListeners(): void {
// Keep only UI-related event listeners
this.eventBus.on(EventTypes.VIEW_RENDERED, () => {
// Clear existing events when view changes
this.clearEvents();
});
// Handle calendar type changes
this.eventBus.on(EventTypes.CALENDAR_TYPE_CHANGED, () => {
// Re-render would need to be triggered by CalendarManager now
this.clearEvents();
});
}
private clearEvents(): void {
console.warn(`🗑️ EventRenderer: clearEvents() called from EventRenderer manager`);
const calendarType = calendarConfig.getCalendarMode();
const eventRenderer = CalendarTypeFactory.getEventRenderer(calendarType);
eventRenderer.clearEvents();
}
public refresh(): void {
this.tryRenderEvents();
// Refresh would need to be coordinated by CalendarManager now
this.clearEvents();
}
public destroy(): void {
this.pendingEvents = [];
this.clearEvents();
}
}