import { Configuration } from '../configurations/CalendarConfig'; import { CalendarView, ICalendarEvent } from '../types/CalendarTypes'; import { IColumnRenderer } from './ColumnRenderer'; import { DateService } from '../utils/DateService'; import { WorkHoursManager } from '../managers/WorkHoursManager'; /** * GridRenderer - Centralized DOM rendering for calendar grid structure * * ARCHITECTURE OVERVIEW: * ===================== * GridRenderer is responsible for creating and managing the complete DOM structure * of the calendar grid. It follows the Strategy Pattern by delegating specific * rendering tasks to specialized renderers (DateHeaderRenderer, ColumnRenderer). * * RESPONSIBILITY HIERARCHY: * ======================== * GridRenderer (this file) * ├─ Creates overall grid skeleton * ├─ Manages time axis (hour markers) * └─ Delegates to specialized renderers: * ├─ DateHeaderRenderer → Renders date headers * └─ ColumnRenderer → Renders day columns * * DOM STRUCTURE CREATED: * ===================== * * ← GridRenderer * ← GridRenderer * 00:00 ← GridRenderer (iterates hours) * * ← GridRenderer * ← GridRenderer creates container * ← DateHeaderRenderer (iterates dates) * * ← GridRenderer * ← GridRenderer * ← GridRenderer * ← GridRenderer creates container * ← ColumnRenderer (iterates dates) * * * * * * * RENDERING FLOW: * ============== * 1. renderGrid() - Entry point called by GridManager * ├─ First render: createCompleteGridStructure() * └─ Updates: updateGridContent() * * 2. createCompleteGridStructure() * ├─ Creates header spacer * ├─ Creates time axis (calls createOptimizedTimeAxis) * └─ Creates grid container (calls createOptimizedGridContainer) * * 3. createOptimizedGridContainer() * ├─ Creates calendar header container * ├─ Creates scrollable content structure * └─ Creates column container (calls renderColumnContainer) * * 4. renderColumnContainer() * └─ Delegates to ColumnRenderer.render() * └─ ColumnRenderer iterates dates and creates columns * * OPTIMIZATION STRATEGY: * ===================== * - Caches DOM references (cachedGridContainer, cachedTimeAxis) * - Uses DocumentFragment for batch DOM insertions * - Only updates changed content on re-renders * - Delegates specialized tasks to strategy renderers * * USAGE EXAMPLE: * ============= * const gridRenderer = new GridRenderer(columnRenderer, dateService, config); * gridRenderer.renderGrid(containerElement, new Date(), 'week'); */ export declare class GridRenderer { private cachedGridContainer; private cachedTimeAxis; private dateService; private columnRenderer; private config; private workHoursManager; constructor(columnRenderer: IColumnRenderer, dateService: DateService, config: Configuration, workHoursManager: WorkHoursManager); /** * Main entry point for rendering the complete calendar grid * * This method decides between full render (first time) or optimized update. * It caches the grid reference for performance. * * @param grid - Container element where grid will be rendered * @param currentDate - Base date for the current view (e.g., any date in the week) * @param view - Calendar view type (day/week/month) * @param dates - Array of dates to render as columns * @param events - All events for the period */ renderGrid(grid: HTMLElement, currentDate: Date, view?: CalendarView, dates?: Date[], events?: ICalendarEvent[]): void; /** * Creates the complete grid structure from scratch * * Uses DocumentFragment for optimal performance by minimizing reflows. * Creates all child elements in memory first, then appends everything at once. * * Structure created: * 1. Header spacer (placeholder for alignment) * 2. Time axis (hour markers 00:00-23:00) * 3. Grid container (header + scrollable content) * * @param grid - Parent container * @param currentDate - Current view date * @param view - View type * @param dates - Array of dates to render */ private createCompleteGridStructure; /** * Creates the time axis with hour markers * * Iterates from dayStartHour to dayEndHour (configured in GridSettings). * Each marker shows the hour in the configured time format. * * @returns Time axis element with all hour markers */ private createOptimizedTimeAxis; /** * Creates the main grid container with header and columns * * This is the scrollable area containing: * - Calendar header (dates/resources) - created here, populated by DateHeaderRenderer * - Time grid (grid lines + day columns) - structure created here * - Column container - created here, populated by ColumnRenderer * * @param currentDate - Current view date * @param view - View type * @param dates - Array of dates to render * @returns Complete grid container element */ private createOptimizedGridContainer; /** * Renders columns by iterating through dates * * GridRenderer creates column structure with work hours styling. * Event rendering is handled by EventRenderingService listening to GRID_RENDERED. * * @param columnContainer - Empty container to populate * @param dates - Array of dates to render * @param events - All events for the period (passed through, not used here) */ private renderColumnContainer; /** * Apply work hours styling to a column */ private applyWorkHoursStyling; /** * Optimized update of grid content without full rebuild * * Only updates the column container content, leaving the structure intact. * This is much faster than recreating the entire grid. * * @param grid - Existing grid element * @param currentDate - New view date * @param view - View type * @param dates - Array of dates to render * @param events - All events for the period */ private updateGridContent; /** * Creates a new grid for slide animations during navigation * * Used by NavigationManager for smooth week-to-week transitions. * Creates a complete grid positioned absolutely for animation. * * Note: Positioning is handled by Animation API, not here. * * @param parentContainer - Container for the new grid * @param weekStart - Start date of the new week * @returns New grid element ready for animation */ createNavigationGrid(parentContainer: HTMLElement, weekStart: Date): HTMLElement; }