diff --git a/src/managers/EventRenderer.ts b/src/managers/EventRenderer.ts index 0cf477a..e3ed664 100644 --- a/src/managers/EventRenderer.ts +++ b/src/managers/EventRenderer.ts @@ -50,24 +50,6 @@ export class EventRenderer { // 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`); } diff --git a/src/managers/ScrollManager.ts b/src/managers/ScrollManager.ts index f960a6a..8d807af 100644 --- a/src/managers/ScrollManager.ts +++ b/src/managers/ScrollManager.ts @@ -33,20 +33,14 @@ export class ScrollManager { } private subscribeToEvents(): void { - // State events removed - initialize() is now called directly after grid render + // Handle new period shown + //we need to subscribe to appropriate event and then call setupScrolling() again + // Handle window resize window.addEventListener('resize', () => { this.updateScrollableHeight(); }); - - // Handle config updates for scrollbar styling - eventBus.on(EventTypes.CONFIG_UPDATE, (event: Event) => { - const { key } = (event as CustomEvent).detail; - if (key.startsWith('scrollbar')) { - this.applyScrollbarStyling(); - } - }); } /** @@ -59,7 +53,6 @@ export class ScrollManager { this.setupResizeObserver(); this.updateScrollableHeight(); this.setupScrollSynchronization(); - this.applyScrollbarStyling(); } // Setup horizontal scrolling synchronization @@ -68,45 +61,6 @@ export class ScrollManager { } } - /** - * Apply scrollbar styling from configuration - */ - private applyScrollbarStyling(): void { - if (!this.scrollableContent) return; - - // Get scrollbar configuration - const scrollbarWidth = calendarConfig.get('scrollbarWidth'); - const scrollbarColor = calendarConfig.get('scrollbarColor'); - const scrollbarTrackColor = calendarConfig.get('scrollbarTrackColor'); - const scrollbarHoverColor = calendarConfig.get('scrollbarHoverColor'); - const scrollbarBorderRadius = calendarConfig.get('scrollbarBorderRadius'); - - // Apply CSS custom properties to both the element and document root - const root = document.documentElement; - - // Set on scrollable content - this.scrollableContent.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`); - this.scrollableContent.style.setProperty('--scrollbar-color', scrollbarColor); - this.scrollableContent.style.setProperty('--scrollbar-track-color', scrollbarTrackColor); - this.scrollableContent.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor); - this.scrollableContent.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`); - - // Also set on root for global access - root.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`); - root.style.setProperty('--scrollbar-color', scrollbarColor); - root.style.setProperty('--scrollbar-track-color', scrollbarTrackColor); - root.style.setProperty('--scrollbar-hover-color', scrollbarHoverColor); - root.style.setProperty('--scrollbar-border-radius', `${scrollbarBorderRadius}px`); - - console.log('ScrollManager: Applied scrollbar styling', { - width: `${scrollbarWidth}px`, - color: scrollbarColor, - trackColor: scrollbarTrackColor, - hoverColor: scrollbarHoverColor, - borderRadius: `${scrollbarBorderRadius}px` - }); - } - /** * Find DOM elements needed for scrolling */ @@ -115,13 +69,7 @@ export class ScrollManager { this.calendarContainer = document.querySelector('swp-calendar-container'); this.timeAxis = document.querySelector('swp-time-axis'); this.calendarHeader = document.querySelector('swp-calendar-header'); - - console.log('ScrollManager: Found elements:', { - scrollableContent: !!this.scrollableContent, - calendarContainer: !!this.calendarContainer, - timeAxis: !!this.timeAxis, - calendarHeader: !!this.calendarHeader - }); + } /** diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts index b4ba7de..f66532b 100644 --- a/src/renderers/EventRenderer.ts +++ b/src/renderers/EventRenderer.ts @@ -30,28 +30,35 @@ export abstract class BaseEventRenderer implements EventRendererStrategy { // Events should already be filtered by DataManager - no need to filter here console.log('BaseEventRenderer: Rendering', events.length, 'pre-filtered events'); - // Render each event in the correct column - events.forEach(event => { - const column = this.findColumn(event); + // OPTIMIZATION: Column-first rendering instead of event-first + // This is much more efficient when there are many events + const columns = this.getColumns(); + console.log(`BaseEventRenderer: Found ${columns.length} columns to render events in`); + + columns.forEach(column => { + const columnEvents = this.getEventsForColumn(column, events); + console.log(`BaseEventRenderer: Rendering ${columnEvents.length} events in column`); - if (column) { - const eventsLayer = column.querySelector('swp-events-layer'); - if (eventsLayer) { + const eventsLayer = column.querySelector('swp-events-layer'); + if (eventsLayer) { + columnEvents.forEach(event => { console.log(`BaseEventRenderer: Rendering event "${event.title}" in events layer`); this.renderEvent(event, eventsLayer, config); - - // Debug: Verify event was actually added - const renderedEvents = eventsLayer.querySelectorAll('swp-event'); - console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`); - } else { - console.warn('BaseEventRenderer: No events layer found in column for event', event.title, 'Column:', column); - } + }); + + // Debug: Verify events were actually added + const renderedEvents = eventsLayer.querySelectorAll('swp-event'); + console.log(`BaseEventRenderer: Events layer now has ${renderedEvents.length} events`); } else { - console.warn('BaseEventRenderer: No column found for event', event.title); + console.warn('BaseEventRenderer: No events layer found in column'); } }); } + // Abstract methods that subclasses must implement for column-first rendering + protected abstract getColumns(): HTMLElement[]; + protected abstract getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[]; + protected renderEvent(event: CalendarEvent, container: Element, config: CalendarConfig): void { const eventElement = document.createElement('swp-event'); eventElement.dataset.eventId = event.id; @@ -160,6 +167,26 @@ export class DateEventRenderer extends BaseEventRenderer { return dayColumn; } + + protected getColumns(): HTMLElement[] { + const columns = document.querySelectorAll('swp-day-column'); + console.log('DateEventRenderer: Found', columns.length, 'day columns in DOM'); + return Array.from(columns) as HTMLElement[]; + } + + protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] { + const columnDate = column.dataset.date; + if (!columnDate) return []; + + const columnEvents = events.filter(event => { + const eventDate = new Date(event.start); + const eventDateStr = DateUtils.formatDate(eventDate); + return eventDateStr === columnDate; + }); + + console.log(`DateEventRenderer: Column ${columnDate} has ${columnEvents.length} events`); + return columnEvents; + } } /** @@ -177,4 +204,22 @@ export class ResourceEventRenderer extends BaseEventRenderer { console.log('ResourceEventRenderer: Looking for resource column with name', resourceName, 'found:', !!resourceColumn); return resourceColumn; } + + protected getColumns(): HTMLElement[] { + const columns = document.querySelectorAll('swp-resource-column'); + console.log('ResourceEventRenderer: Found', columns.length, 'resource columns in DOM'); + return Array.from(columns) as HTMLElement[]; + } + + protected getEventsForColumn(column: HTMLElement, events: CalendarEvent[]): CalendarEvent[] { + const resourceName = column.dataset.resource; + if (!resourceName) return []; + + const columnEvents = events.filter(event => { + return event.resource?.name === resourceName; + }); + + console.log(`ResourceEventRenderer: Resource ${resourceName} has ${columnEvents.length} events`); + return columnEvents; + } } \ No newline at end of file