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

Refactors event handling and grid rendering

Browse source 
Improves calendar performance and data flow by streamlining event emissions and grid rendering logic.

- Replaces generic CONFIG_UPDATE events with REFRESH_REQUESTED
  for more specific refresh triggers.
- Removes redundant grid re-renders on DATE_CHANGED and
  WEEK_CHANGED events, delegating navigation to NavigationManager.
- Introduces VIEW_CHANGED and DATE_CHANGED events for calendar
  mode and date selection, respectively.
- NavigationManager now handles date validation.
- Moves rendering logic from NavigationManager to NavigationRenderer.
- Syncs scroll position based on PERIOD_CHANGED instead of
  NAVIGATION_ANIMATION_COMPLETE.

This change optimizes the calendar's responsiveness and reduces
unnecessary re-renders, leading to a smoother user experience.
This commit is contained in:
Janus Knudsen 2025-08-20 21:38:54 +02:00
parent 4b4dbdc0d6
commit 83c0ce801c
9 changed files with 59 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/managers/GridManager.ts
View file

@ -54,21 +54,25 @@ export class GridManager {
);
// Listen for data changes
this.eventCleanup.push(
eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail;
this.currentDate = detail.currentDate;
this.render();
})
);
// REMOVED: GridManager should not re-render on DATE_CHANGED
// Date navigation is handled by NavigationManager
// this.eventCleanup.push(
// eventBus.on(CoreEvents.DATE_CHANGED, (e: Event) => {
// const detail = (e as CustomEvent).detail;
// this.currentDate = detail.currentDate;
// this.render();
// })
// );
this.eventCleanup.push(
eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => {
const detail = (e as CustomEvent).detail;
this.currentDate = detail.weekStart;
this.render();
})
);
// REMOVED: GridManager should not re-render on WEEK_CHANGED
// Navigation is handled by NavigationManager + NavigationRenderer
// this.eventCleanup.push(
// eventBus.on(CoreEvents.WEEK_CHANGED, (e: Event) => {
// const detail = (e as CustomEvent).detail;
// this.currentDate = detail.weekStart;
// this.render();
// })
// );
this.eventCleanup.push(
eventBus.on(CoreEvents.DATA_LOADED, (e: Event) => {
@ -136,8 +140,7 @@ export class GridManager {
return;
}
console.group(`🎨 GRID RENDER: ${this.currentDate.toDateString()}`);
console.log(`Using strategy: ${this.currentStrategy.constructor.name}`);
console.log(`🎨 GridManager: Rendering ${this.currentDate.toDateString()} using ${this.currentStrategy.constructor.name}`);
// Create context for strategy
const context: ViewContext = {
@ -153,6 +156,8 @@ export class GridManager {
// Get layout info from strategy
const layoutConfig = this.currentStrategy.getLayoutConfig();
console.log(`GridManager: Emitting GRID_RENDERED for main container`);
// Emit grid rendered event
eventBus.emit(CoreEvents.GRID_RENDERED, {
container: this.container,
@ -161,8 +166,7 @@ export class GridManager {
columnCount: layoutConfig.columnCount
});
console.log(`Grid rendered with ${layoutConfig.columnCount} columns`);
console.groupEnd();
console.log(`✅ Grid rendered with ${layoutConfig.columnCount} columns`);
}
/**