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

Refactors calendar managers and renderers

Browse source 
Improves calendar rendering performance by centralizing DOM manipulation in a dedicated `GridRenderer` class. This reduces redundant DOM queries and improves overall efficiency.

Introduces `EventManager` for optimized event lifecycle management with caching and optimized data processing.

The `ViewManager` is refactored for optimized view switching and event handling, further streamlining the application's architecture.

This change moves from a strategy-based `GridManager` to a simpler approach leveraging the `GridRenderer` directly for DOM updates. This eliminates unnecessary abstractions and improves code maintainability.

The changes include removing the old `GridManager`, `EventManager` and introducing new versions.
This commit is contained in:
Janus Knudsen 2025-09-03 18:51:19 +02:00
parent b8b44ddae8
commit 05bb074e9a
4 changed files with 566 additions and 271 deletions
Download patch file Download diff file Expand all files Collapse all files

208
src/renderers/GridRenderer.ts
View file

@ -1,94 +1,124 @@
import { CalendarConfig } from '../core/CalendarConfig';
import { ResourceCalendarData } from '../types/CalendarTypes';
import { ResourceCalendarData, CalendarView } from '../types/CalendarTypes';
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
import { HeaderRenderContext } from './HeaderRenderer';
import { ColumnRenderContext } from './ColumnRenderer';
import { eventBus } from '../core/EventBus';
import { DateCalculator } from '../utils/DateCalculator';
/**
* GridRenderer - Handles DOM rendering for the calendar grid
* Separated from GridManager to follow Single Responsibility Principle
* GridRenderer - Centralized DOM rendering for calendar grid
* Optimized to reduce redundant DOM operations and improve performance
*/
export class GridRenderer {
private config: CalendarConfig;
private headerEventListener: ((event: Event) => void) | null = null;
private cachedGridContainer: HTMLElement | null = null;
private cachedCalendarHeader: HTMLElement | null = null;
private cachedTimeAxis: HTMLElement | null = null;
constructor(config: CalendarConfig) {
this.config = config;
}
/**
* Render the complete grid structure
* Render the complete grid structure with view-aware optimization
*/
public renderGrid(
grid: HTMLElement,
currentWeek: Date,
resourceData: ResourceCalendarData | null
grid: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView = 'week'
): void {
if (!grid || !currentWeek) {
if (!grid || !currentDate) {
return;
}
// Cache grid reference for performance
this.cachedGridContainer = grid;
// Only clear and rebuild if grid is empty (first render)
if (grid.children.length === 0) {
// Create POC structure: header-spacer + time-axis + grid-container
this.createHeaderSpacer(grid);
this.createTimeAxis(grid);
this.createGridContainer(grid, currentWeek, resourceData);
this.createCompleteGridStructure(grid, currentDate, resourceData, view);
} else {
// Just update the calendar header for all-day events
this.updateCalendarHeader(grid, currentWeek, resourceData);
// Optimized update - only refresh dynamic content
this.updateGridContent(grid, currentDate, resourceData, view);
}
}
/**
* Create complete grid structure in one operation
*/
private createCompleteGridStructure(
grid: HTMLElement,
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
// Create all elements in memory first for better performance
const fragment = document.createDocumentFragment();
}
/**
* Create header spacer to align time axis with week content
*/
private createHeaderSpacer(grid: HTMLElement): void {
// Create header spacer
const headerSpacer = document.createElement('swp-header-spacer');
grid.appendChild(headerSpacer);
fragment.appendChild(headerSpacer);
// Create time axis with caching
const timeAxis = this.createOptimizedTimeAxis();
this.cachedTimeAxis = timeAxis;
fragment.appendChild(timeAxis);
// Create grid container with caching
const gridContainer = this.createOptimizedGridContainer(currentDate, resourceData, view);
this.cachedGridContainer = gridContainer;
fragment.appendChild(gridContainer);
// Append all at once to minimize reflows
grid.appendChild(fragment);
}
/**
* Create time axis (positioned beside grid container)
* Create optimized time axis with caching
*/
private createTimeAxis(grid: HTMLElement): void {
private createOptimizedTimeAxis(): HTMLElement {
const timeAxis = document.createElement('swp-time-axis');
const timeAxisContent = document.createElement('swp-time-axis-content');
const gridSettings = this.config.getGridSettings();
const startHour = gridSettings.dayStartHour;
const endHour = gridSettings.dayEndHour;
// Create all hour markers in memory first
const fragment = document.createDocumentFragment();
for (let hour = startHour; hour < endHour; hour++) {
const marker = document.createElement('swp-hour-marker');
const period = hour >= 12 ? 'PM' : 'AM';
const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
marker.textContent = `${displayHour} ${period}`;
timeAxisContent.appendChild(marker);
fragment.appendChild(marker);
}
timeAxisContent.appendChild(fragment);
timeAxis.appendChild(timeAxisContent);
grid.appendChild(timeAxis);
return timeAxis;
}
/**
* Create grid container with header and scrollable content
* Create optimized grid container with header and scrollable content
*/
private createGridContainer(
grid: HTMLElement,
currentWeek: Date,
resourceData: ResourceCalendarData | null
): void {
private createOptimizedGridContainer(
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): HTMLElement {
const gridContainer = document.createElement('swp-grid-container');
// Create calendar header using Strategy Pattern
// Create calendar header with caching
const calendarHeader = document.createElement('swp-calendar-header');
this.renderCalendarHeader(calendarHeader, currentWeek, resourceData);
this.renderCalendarHeader(calendarHeader, currentDate, resourceData, view);
this.cachedCalendarHeader = calendarHeader;
gridContainer.appendChild(calendarHeader);
// Create scrollable content
// Create scrollable content structure
const scrollableContent = document.createElement('swp-scrollable-content');
const timeGrid = document.createElement('swp-time-grid');
@ -96,30 +126,31 @@ export class GridRenderer {
const gridLines = document.createElement('swp-grid-lines');
timeGrid.appendChild(gridLines);
// Create column container using Strategy Pattern
// Create column container
const columnContainer = document.createElement('swp-day-columns');
this.renderColumnContainer(columnContainer, currentWeek, resourceData);
this.renderColumnContainer(columnContainer, currentDate, resourceData, view);
timeGrid.appendChild(columnContainer);
scrollableContent.appendChild(timeGrid);
gridContainer.appendChild(scrollableContent);
grid.appendChild(gridContainer);
return gridContainer;
}
/**
* Render calendar header using Strategy Pattern
* Render calendar header with view awareness
*/
private renderCalendarHeader(
calendarHeader: HTMLElement,
currentWeek: Date,
resourceData: ResourceCalendarData | null
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
const calendarType = this.config.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
const context: HeaderRenderContext = {
currentWeek: currentWeek,
currentWeek: currentDate, // HeaderRenderer expects currentWeek property
config: this.config,
resourceData: resourceData
};
@ -129,23 +160,24 @@ export class GridRenderer {
// Always ensure all-day containers exist for all days
headerRenderer.ensureAllDayContainers(calendarHeader);
// Setup event listener for mouseover detection
this.setupHeaderEventListener(calendarHeader);
// Setup optimized event listener
this.setupOptimizedHeaderEventListener(calendarHeader);
}
/**
* Render column container using Strategy Pattern
* Render column container with view awareness
*/
private renderColumnContainer(
columnContainer: HTMLElement,
currentWeek: Date,
resourceData: ResourceCalendarData | null
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
const calendarType = this.config.getCalendarMode();
const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
const context: ColumnRenderContext = {
currentWeek: currentWeek,
currentWeek: currentDate, // ColumnRenderer expects currentWeek property
config: this.config,
resourceData: resourceData
};
@ -154,37 +186,53 @@ export class GridRenderer {
}
/**
* Update only the calendar header without rebuilding entire grid
* Optimized update of grid content without full rebuild
*/
private updateCalendarHeader(
private updateGridContent(
grid: HTMLElement,
currentWeek: Date,
resourceData: ResourceCalendarData | null
currentDate: Date,
resourceData: ResourceCalendarData | null,
view: CalendarView
): void {
const calendarHeader = grid.querySelector('swp-calendar-header');
if (!calendarHeader) return;
// Use cached elements if available
const calendarHeader = this.cachedCalendarHeader || grid.querySelector('swp-calendar-header');
if (calendarHeader) {
// Clear and re-render header content
calendarHeader.innerHTML = '';
this.renderCalendarHeader(calendarHeader as HTMLElement, currentDate, resourceData, view);
}
// Clear existing content
calendarHeader.innerHTML = '';
// Re-render headers using Strategy Pattern - this will also re-attach the event listener
this.renderCalendarHeader(calendarHeader as HTMLElement, currentWeek, resourceData);
// Update column container if needed
const columnContainer = grid.querySelector('swp-day-columns');
if (columnContainer) {
columnContainer.innerHTML = '';
this.renderColumnContainer(columnContainer as HTMLElement, currentDate, resourceData, view);
}
}
/**
* Setup or re-setup event delegation listener on calendar header
* Setup optimized event delegation listener with better performance
*/
private setupHeaderEventListener(calendarHeader: HTMLElement): void {
// Remove existing listener if any (stored reference approach)
private setupOptimizedHeaderEventListener(calendarHeader: HTMLElement): void {
// Remove existing listener if any
if (this.headerEventListener) {
calendarHeader.removeEventListener('mouseover', this.headerEventListener);
}
// Create new listener function
// Create optimized listener with throttling
let lastEmitTime = 0;
const throttleDelay = 16; // ~60fps
this.headerEventListener = (event) => {
const now = Date.now();
if (now - lastEmitTime < throttleDelay) {
return; // Throttle events for better performance
}
lastEmitTime = now;
const target = event.target as HTMLElement;
// Check what was hovered - could be day-header OR all-day-container
// Optimized element detection
const dayHeader = target.closest('swp-day-header');
const allDayContainer = target.closest('swp-allday-container');
@ -196,36 +244,50 @@ export class GridRenderer {
hoveredElement = dayHeader as HTMLElement;
targetDate = hoveredElement.dataset.date;
} else if (allDayContainer) {
// For all-day areas, we need to determine which day column we're over
hoveredElement = allDayContainer as HTMLElement;
// Calculate which day we're hovering over based on mouse position
// Optimized day calculation using cached header rect
const headerRect = calendarHeader.getBoundingClientRect();
const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
const mouseX = (event as MouseEvent).clientX - headerRect.left;
const dayWidth = headerRect.width / dayHeaders.length;
const dayIndex = Math.floor(mouseX / dayWidth);
const dayIndex = Math.max(0, Math.min(dayHeaders.length - 1, Math.floor(mouseX / dayWidth)));
const targetDayHeader = dayHeaders[dayIndex] as HTMLElement;
targetDate = targetDayHeader?.dataset.date;
} else {
return; // No valid element found
return;
}
// Get the header renderer for addToAllDay functionality
// Get header renderer once and cache
const calendarType = this.config.getCalendarMode();
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
eventBus.emit('header:mouseover', {
eventBus.emit('header:mouseover', {
element: hoveredElement,
targetDate,
headerRenderer
headerRenderer
});
}
};
// Add the new listener
// Add the optimized listener
calendarHeader.addEventListener('mouseover', this.headerEventListener);
}
/**
* Clean up cached elements and event listeners
*/
public destroy(): void {
// Clean up event listeners
if (this.headerEventListener && this.cachedCalendarHeader) {
this.cachedCalendarHeader.removeEventListener('mouseover', this.headerEventListener);
}
// Clear cached references
this.cachedGridContainer = null;
this.cachedCalendarHeader = null;
this.cachedTimeAxis = null;
this.headerEventListener = null;
}
}