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

Renders all-day events based on header data

Browse source 
Refactors all-day event rendering to use header column data.
This ensures events are rendered based on the actual visible
dates in the header, improving accuracy and responsiveness to view changes.

Removes direct dependency on week dates in `AllDayManager` and
`EventRenderingService`, instead, the all-day manager is instantiated
with event manager.

Updates `HeaderManager` to emit header bounds.
This commit is contained in:
Janus C. H. Knudsen 2025-10-01 21:27:13 +02:00
parent ae3aab5dd0
commit d7867d4a9f
7 changed files with 108 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/renderers/AllDayEventRenderer.ts
View file

@ -1,7 +1,8 @@
import { CalendarEvent } from '../types/CalendarTypes';
import { SwpAllDayEventElement } from '../elements/SwpEventElement';
import { EventLayout } from '../utils/AllDayLayoutEngine';
import { ColumnBounds } from '../utils/ColumnDetectionUtils';
import { EventManager } from '../managers/EventManager';
/**
* AllDayEventRenderer - Simple rendering of all-day events
* Handles adding and removing all-day events from the header container
@ -38,7 +39,7 @@ export class AllDayEventRenderer {
/**
* Render an all-day event with pre-calculated layout
*/
public renderAllDayEventWithLayout(
private renderAllDayEventWithLayout(
event: CalendarEvent,
layout: EventLayout
) {
@ -71,4 +72,41 @@ export class AllDayEventRenderer {
public clearCache(): void {
this.container = null;
}
/**
* Render all-day events for specific period using AllDayEventRenderer
*/
public renderAllDayEventsForPeriod(eventLayouts: EventLayout[]): void {
// Get events from EventManager for the period
// const events = this.eventManager.getEventsForPeriod(startDate, endDate);
// Clear existing all-day events first
this.clearAllDayEvents();
// Get actual visible dates from DOM headers instead of generating them
// const layouts = this.allDayManager.initAllDayEventsLayout(allDayEvents, weekDates);
// Render each all-day event with pre-calculated layout
eventLayouts.forEach(layout => {
this.renderAllDayEventWithLayout(layout.calenderEvent, layout);
});
}
/**
* Clear only all-day events
*/
private clearAllDayEvents(): void {
const allDayContainer = document.querySelector('swp-allday-container');
if (allDayContainer) {
allDayContainer.querySelectorAll('swp-event').forEach(event => event.remove());
}
}
public handleViewChanged(event: CustomEvent): void {
this.clearAllDayEvents();
}
}

115
src/renderers/EventRendererManager.ts
View file

@ -4,10 +4,8 @@ import { CoreEvents } from '../constants/CoreEvents';
import { calendarConfig } from '../core/CalendarConfig';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { EventManager } from '../managers/EventManager';
import { AllDayManager } from '../managers/AllDayManager';
import { EventRendererStrategy } from './EventRenderer';
import { SwpEventElement } from '../elements/SwpEventElement';
import { AllDayEventRenderer } from './AllDayEventRenderer';
import { DragStartEventPayload, DragMoveEventPayload, DragEndEventPayload, DragMouseEnterHeaderEventPayload, DragMouseLeaveHeaderEventPayload, DragColumnChangeEventPayload, HeaderReadyEventPayload } from '../types/EventTypes';
/**
* EventRenderingService - Render events i DOM med positionering using Strategy Pattern
@ -17,8 +15,6 @@ export class EventRenderingService {
private eventBus: IEventBus;
private eventManager: EventManager;
private strategy: EventRendererStrategy;
private allDayEventRenderer: AllDayEventRenderer;
private allDayManager: AllDayManager;
private dragMouseLeaveHeaderListener: ((event: Event) => void) | null = null;
@ -30,10 +26,6 @@ export class EventRenderingService {
const calendarType = calendarConfig.getCalendarMode();
this.strategy = CalendarTypeFactory.getEventRenderer(calendarType);
// Initialize all-day event renderer and manager
this.allDayEventRenderer = new AllDayEventRenderer();
this.allDayManager = new AllDayManager();
this.setupEventListeners();
}
@ -85,17 +77,6 @@ export class EventRenderingService {
this.handleViewChanged(event as CustomEvent);
});
// Listen for header ready - when dates are populated with period data
this.eventBus.on('header:ready', (event: Event) => {
const { startDate, endDate } = (event as CustomEvent<HeaderReadyEventPayload>).detail;
console.log('🎯 EventRendererManager: Header ready with period data', {
startDate: startDate.toISOString(),
endDate: endDate.toISOString()
});
// Render all-day events using period from header
this.renderAllDayEventsForPeriod(startDate, endDate);
});
// Handle all drag events and delegate to appropriate renderer
this.setupDragEventListeners();
@ -145,22 +126,6 @@ export class EventRenderingService {
});
}
/**
* Handle CONTAINER_READY_FOR_EVENTS event - render events in pre-rendered container
*/
private handleContainerReady(event: CustomEvent): void {
const { container, startDate, endDate } = event.detail;
if (!container || !startDate || !endDate) {
return;
}
this.renderEvents({
container: container,
startDate: new Date(startDate),
endDate: new Date(endDate)
});
}
/**
* Handle VIEW_CHANGED event - clear and re-render for new view
@ -248,12 +213,12 @@ export class EventRenderingService {
// Filter: Only handle events where clone is NOT an all-day event (normal timed events)
if (columnChangeEvent.draggedClone && columnChangeEvent.draggedClone.hasAttribute('data-allday')) {
return;
return;
}
if (this.strategy.handleColumnChange) {
const eventId = columnChangeEvent.originalElement.dataset.eventId || '';
this.strategy.handleColumnChange(columnChangeEvent);
this.strategy.handleColumnChange(columnChangeEvent);
}
});
@ -338,90 +303,14 @@ export class EventRenderingService {
});
}
/**
* Render all-day events for specific period using AllDayEventRenderer
*/
private renderAllDayEventsForPeriod(startDate: Date, endDate: Date): void {
// Get events from EventManager for the period
const events = this.eventManager.getEventsForPeriod(startDate, endDate);
// Filter for all-day events
const allDayEvents = events.filter(event => event.allDay);
console.log('🏗️ EventRenderingService: Rendering all-day events', {
period: {
start: startDate.toISOString(),
end: endDate.toISOString()
},
count: allDayEvents.length,
events: allDayEvents.map(e => ({ id: e.id, title: e.title }))
});
// Clear existing all-day events first
this.clearAllDayEvents();
// Get actual visible dates from DOM headers instead of generating them
const weekDates = this.getVisibleDatesFromDOM();
console.log('🔍 EventRenderingService: Using visible dates from DOM', {
weekDates,
count: weekDates.length
});
// Pass current events to AllDayManager for state tracking
this.allDayManager.setCurrentEvents(allDayEvents, weekDates);
const layouts = this.allDayManager.initAllDayEventsLayout(allDayEvents, weekDates);
// Render each all-day event with pre-calculated layout
layouts.forEach(layout => {
this.allDayEventRenderer.renderAllDayEventWithLayout(layout.calenderEvent, layout);
});
}
/**
* Clear only all-day events
*/
private clearAllDayEvents(): void {
const allDayContainer = document.querySelector('swp-allday-container');
if (allDayContainer) {
allDayContainer.querySelectorAll('swp-event').forEach(event => event.remove());
}
}
private clearEvents(container?: HTMLElement): void {
this.strategy.clearEvents(container);
// Also clear all-day events
this.clearAllDayEvents();
}
public refresh(container?: HTMLElement): void {
// Clear events in specific container or globally
this.clearEvents(container);
}
/**
* Get visible dates from DOM headers - only the dates that are actually displayed
*/
private getVisibleDatesFromDOM(): string[] {
const dayHeaders = document.querySelectorAll('swp-calendar-header swp-day-header');
const weekDates: string[] = [];
dayHeaders.forEach(header => {
const dateAttr = header.getAttribute('data-date');
if (dateAttr) {
weekDates.push(dateAttr);
}
});
return weekDates;
}
public destroy(): void {
this.clearEvents();
}