Refactors grid and navigation rendering
Attempt 1
This commit is contained in:
Janus Knudsen
parent
6026d28e6f
commit
32ee35eb02
10 changed files with 436 additions and 811 deletions
|
|
@ -6,9 +6,8 @@ import { EventTypes } from '../constants/EventTypes';
|
|||
import { StateEvents } from '../types/CalendarState';
|
||||
import { DateUtils } from '../utils/DateUtils';
|
||||
import { ResourceCalendarData } from '../types/CalendarTypes';
|
||||
import { CalendarTypeFactory } from '../factories/CalendarTypeFactory';
|
||||
import { HeaderRenderContext } from '../renderers/HeaderRenderer';
|
||||
import { ColumnRenderContext } from '../renderers/ColumnRenderer';
|
||||
import { GridRenderer } from '../renderers/GridRenderer';
|
||||
import { GridStyleManager } from '../renderers/GridStyleManager';
|
||||
|
||||
/**
|
||||
* Grid position interface
|
||||
|
|
@ -28,9 +27,13 @@ export class GridManager {
|
|||
private currentWeek: Date | null = null;
|
||||
private allDayEvents: any[] = []; // Store all-day events for current week
|
||||
private resourceData: ResourceCalendarData | null = null; // Store resource data for resource calendar
|
||||
private gridRenderer: GridRenderer;
|
||||
private styleManager: GridStyleManager;
|
||||
|
||||
constructor() {
|
||||
console.log('🏗️ GridManager: Constructor called');
|
||||
this.gridRenderer = new GridRenderer(calendarConfig);
|
||||
this.styleManager = new GridStyleManager(calendarConfig);
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
|
@ -106,7 +109,7 @@ export class GridManager {
|
|||
if (detail.data && detail.data.calendarMode === 'resource') {
|
||||
// Resource data will be passed in the state event
|
||||
// For now just update grid styles
|
||||
this.updateGridStyles();
|
||||
this.styleManager.updateGridStyles(this.resourceData);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -135,10 +138,10 @@ export class GridManager {
|
|||
}
|
||||
|
||||
console.log('GridManager: Starting render with grid element:', this.grid);
|
||||
this.updateGridStyles();
|
||||
this.renderGrid();
|
||||
this.styleManager.updateGridStyles(this.resourceData);
|
||||
this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents);
|
||||
|
||||
const columnCount = this.getColumnCount();
|
||||
const columnCount = this.styleManager.getColumnCount(this.resourceData);
|
||||
console.log(`GridManager: Render complete - created ${columnCount} columns`);
|
||||
|
||||
// Emit GRID_RENDERED event to trigger event rendering
|
||||
|
|
@ -152,181 +155,9 @@ export class GridManager {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current column count based on calendar mode
|
||||
*/
|
||||
private getColumnCount(): number {
|
||||
const calendarType = calendarConfig.getCalendarMode();
|
||||
|
||||
if (calendarType === 'resource' && this.resourceData) {
|
||||
return this.resourceData.resources.length;
|
||||
} else if (calendarType === 'date') {
|
||||
const dateSettings = calendarConfig.getDateViewSettings();
|
||||
switch (dateSettings.period) {
|
||||
case 'day': return 1;
|
||||
case 'week': return dateSettings.weekDays;
|
||||
case 'month': return 7;
|
||||
default: return dateSettings.weekDays;
|
||||
}
|
||||
}
|
||||
|
||||
return 7; // Default
|
||||
}
|
||||
// Column count calculation moved to GridStyleManager
|
||||
|
||||
/**
|
||||
* Render the complete grid using POC structure
|
||||
*/
|
||||
private renderGrid(): void {
|
||||
console.log('GridManager: renderGrid called', {
|
||||
hasGrid: !!this.grid,
|
||||
hasCurrentWeek: !!this.currentWeek,
|
||||
currentWeek: this.currentWeek
|
||||
});
|
||||
|
||||
if (!this.grid || !this.currentWeek) {
|
||||
console.warn('GridManager: Cannot render - missing grid or currentWeek');
|
||||
return;
|
||||
}
|
||||
|
||||
// Only clear and rebuild if grid is empty (first render)
|
||||
if (this.grid.children.length === 0) {
|
||||
console.log('GridManager: First render - creating grid structure');
|
||||
// Create POC structure: header-spacer + time-axis + grid-container
|
||||
this.createHeaderSpacer();
|
||||
this.createTimeAxis();
|
||||
this.createGridContainer();
|
||||
} else {
|
||||
console.log('GridManager: Re-render - updating existing structure');
|
||||
// Just update the calendar header for all-day events
|
||||
this.updateCalendarHeader();
|
||||
}
|
||||
|
||||
console.log('GridManager: Grid rendered successfully with POC structure');
|
||||
}
|
||||
|
||||
/**
|
||||
* Create header spacer to align time axis with week content
|
||||
*/
|
||||
private createHeaderSpacer(): void {
|
||||
if (!this.grid) return;
|
||||
|
||||
const headerSpacer = document.createElement('swp-header-spacer');
|
||||
this.grid.appendChild(headerSpacer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create time axis (positioned beside grid container) like in POC
|
||||
*/
|
||||
private createTimeAxis(): void {
|
||||
if (!this.grid) return;
|
||||
|
||||
const timeAxis = document.createElement('swp-time-axis');
|
||||
const timeAxisContent = document.createElement('swp-time-axis-content');
|
||||
const gridSettings = calendarConfig.getGridSettings();
|
||||
const startHour = gridSettings.dayStartHour;
|
||||
const endHour = gridSettings.dayEndHour;
|
||||
console.log('GridManager: Creating time axis - startHour:', startHour, 'endHour:', endHour);
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
timeAxis.appendChild(timeAxisContent);
|
||||
this.grid.appendChild(timeAxis);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create grid container with header and scrollable content using Strategy Pattern
|
||||
*/
|
||||
private createGridContainer(): void {
|
||||
if (!this.grid || !this.currentWeek) return;
|
||||
|
||||
const gridContainer = document.createElement('swp-grid-container');
|
||||
|
||||
// Create calendar header using Strategy Pattern
|
||||
const calendarHeader = document.createElement('swp-calendar-header');
|
||||
this.renderCalendarHeader(calendarHeader);
|
||||
gridContainer.appendChild(calendarHeader);
|
||||
|
||||
// Create scrollable content
|
||||
const scrollableContent = document.createElement('swp-scrollable-content');
|
||||
const timeGrid = document.createElement('swp-time-grid');
|
||||
|
||||
// Add grid lines
|
||||
const gridLines = document.createElement('swp-grid-lines');
|
||||
timeGrid.appendChild(gridLines);
|
||||
|
||||
// Create column container using Strategy Pattern
|
||||
const columnContainer = document.createElement('swp-day-columns');
|
||||
this.renderColumnContainer(columnContainer);
|
||||
timeGrid.appendChild(columnContainer);
|
||||
|
||||
scrollableContent.appendChild(timeGrid);
|
||||
gridContainer.appendChild(scrollableContent);
|
||||
|
||||
this.grid.appendChild(gridContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render calendar header using Strategy Pattern
|
||||
*/
|
||||
private renderCalendarHeader(calendarHeader: HTMLElement): void {
|
||||
if (!this.currentWeek) return;
|
||||
|
||||
const calendarType = calendarConfig.getCalendarMode();
|
||||
const headerRenderer = CalendarTypeFactory.getHeaderRenderer(calendarType);
|
||||
|
||||
const context: HeaderRenderContext = {
|
||||
currentWeek: this.currentWeek,
|
||||
config: calendarConfig,
|
||||
allDayEvents: this.allDayEvents,
|
||||
resourceData: this.resourceData
|
||||
};
|
||||
|
||||
headerRenderer.render(calendarHeader, context);
|
||||
|
||||
// Update spacer heights based on all-day events
|
||||
this.updateSpacerHeights();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render column container using Strategy Pattern
|
||||
*/
|
||||
private renderColumnContainer(columnContainer: HTMLElement): void {
|
||||
if (!this.currentWeek) return;
|
||||
|
||||
console.log('GridManager: renderColumnContainer called');
|
||||
const calendarType = calendarConfig.getCalendarMode();
|
||||
const columnRenderer = CalendarTypeFactory.getColumnRenderer(calendarType);
|
||||
|
||||
const context: ColumnRenderContext = {
|
||||
currentWeek: this.currentWeek,
|
||||
config: calendarConfig,
|
||||
resourceData: this.resourceData
|
||||
};
|
||||
|
||||
columnRenderer.render(columnContainer, context);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update only the calendar header (for all-day events) without rebuilding entire grid
|
||||
*/
|
||||
private updateCalendarHeader(): void {
|
||||
if (!this.grid || !this.currentWeek) return;
|
||||
|
||||
const calendarHeader = this.grid.querySelector('swp-calendar-header');
|
||||
if (!calendarHeader) return;
|
||||
|
||||
// Clear existing content
|
||||
calendarHeader.innerHTML = '';
|
||||
|
||||
// Re-render headers using Strategy Pattern
|
||||
this.renderCalendarHeader(calendarHeader as HTMLElement);
|
||||
}
|
||||
// Grid rendering methods moved to GridRenderer
|
||||
|
||||
/**
|
||||
* Update all-day events data and re-render if needed
|
||||
|
|
@ -350,80 +181,11 @@ export class GridManager {
|
|||
|
||||
// Update only the calendar header if grid is already rendered
|
||||
if (this.grid && this.grid.children.length > 0) {
|
||||
this.updateCalendarHeader();
|
||||
this.gridRenderer.renderGrid(this.grid, this.currentWeek!, this.resourceData, this.allDayEvents);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update spacer heights based on all-day events presence
|
||||
*/
|
||||
private updateSpacerHeights(): void {
|
||||
const allDayEventCount = 1;
|
||||
const eventHeight = 26; // Height per all-day event in pixels
|
||||
const padding = 0; // Top/bottom padding
|
||||
const allDayHeight = allDayEventCount > 0 ? (allDayEventCount * eventHeight) + padding : 0;
|
||||
|
||||
// Set CSS variable for dynamic spacer height
|
||||
document.documentElement.style.setProperty('--all-day-row-height', `${allDayHeight}px`);
|
||||
|
||||
console.log('GridManager: Updated --all-day-row-height to', `${allDayHeight}px`, 'for', allDayEventCount, 'events');
|
||||
}
|
||||
|
||||
/**
|
||||
* Update grid CSS variables
|
||||
*/
|
||||
private updateGridStyles(): void {
|
||||
const root = document.documentElement;
|
||||
const gridSettings = calendarConfig.getGridSettings();
|
||||
const calendar = document.querySelector('swp-calendar') as HTMLElement;
|
||||
const calendarType = calendarConfig.getCalendarMode();
|
||||
|
||||
// Set CSS variables
|
||||
root.style.setProperty('--hour-height', `${gridSettings.hourHeight}px`);
|
||||
root.style.setProperty('--minute-height', `${gridSettings.hourHeight / 60}px`);
|
||||
root.style.setProperty('--snap-interval', gridSettings.snapInterval.toString());
|
||||
root.style.setProperty('--day-start-hour', gridSettings.dayStartHour.toString());
|
||||
root.style.setProperty('--day-end-hour', gridSettings.dayEndHour.toString());
|
||||
root.style.setProperty('--work-start-hour', gridSettings.workStartHour.toString());
|
||||
root.style.setProperty('--work-end-hour', gridSettings.workEndHour.toString());
|
||||
|
||||
// Set number of columns based on calendar type
|
||||
let columnCount = 7; // Default for date mode
|
||||
if (calendarType === 'resource' && this.resourceData) {
|
||||
columnCount = this.resourceData.resources.length;
|
||||
} else if (calendarType === 'date') {
|
||||
const dateSettings = calendarConfig.getDateViewSettings();
|
||||
// Calculate columns based on view type - business logic moved from config
|
||||
switch (dateSettings.period) {
|
||||
case 'day':
|
||||
columnCount = 1;
|
||||
break;
|
||||
case 'week':
|
||||
columnCount = dateSettings.weekDays;
|
||||
break;
|
||||
case 'month':
|
||||
columnCount = 7;
|
||||
break;
|
||||
default:
|
||||
columnCount = dateSettings.weekDays;
|
||||
}
|
||||
}
|
||||
root.style.setProperty('--grid-columns', columnCount.toString());
|
||||
|
||||
// Set day column min width based on fitToWidth setting
|
||||
if (gridSettings.fitToWidth) {
|
||||
root.style.setProperty('--day-column-min-width', '50px'); // Small min-width allows columns to fit available space
|
||||
} else {
|
||||
root.style.setProperty('--day-column-min-width', '250px'); // Default min-width for horizontal scroll mode
|
||||
}
|
||||
|
||||
// Set fitToWidth data attribute for CSS targeting
|
||||
if (calendar) {
|
||||
calendar.setAttribute('data-fit-to-width', gridSettings.fitToWidth.toString());
|
||||
}
|
||||
|
||||
console.log('GridManager: Updated grid styles with', columnCount, 'columns for', calendarType, 'calendar');
|
||||
}
|
||||
// CSS management methods moved to GridStyleManager
|
||||
|
||||
/**
|
||||
* Setup grid interaction handlers for POC structure
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue