c7dcfbbaed
Introduces dedicated TypeScript interfaces for all drag-and-drop event payloads, enhancing type safety and developer experience. Centralizes drag event detection and emission within `DragDropManager`. Refactors `AllDayManager`, `HeaderManager`, and `EventRendererManager` to subscribe to these typed events, improving decoupling and clarifying responsibilities. Resolves known inconsistencies in drag event payloads, especially for all-day event conversions. Adds a comprehensive analysis document (`docs/EventSystem-Analysis.md`) detailing the event system and planned improvements.
161 lines
No EOL
5 KiB
Markdown
161 lines
No EOL
5 KiB
Markdown
# Calendar Event System Analysis
|
|
|
|
## Overview
|
|
Analysis of all events used in the Calendar Plantempus system, categorized by type and usage.
|
|
|
|
## Core Events (25 events)
|
|
*Defined in `src/constants/CoreEvents.ts`*
|
|
|
|
### Lifecycle Events (3)
|
|
- `core:initialized` - Calendar initialization complete
|
|
- `core:ready` - Calendar ready for use
|
|
- `core:destroyed` - Calendar cleanup complete
|
|
|
|
### View Events (3)
|
|
- `view:changed` - Calendar view changed (day/week/month)
|
|
- `view:rendered` - View rendering complete
|
|
- `workweek:changed` - Work week configuration changed
|
|
|
|
### Navigation Events (4)
|
|
- `nav:date-changed` - Current date changed
|
|
- `nav:navigation-completed` - Navigation animation/transition complete
|
|
- `nav:period-info-update` - Week/period information updated
|
|
- `nav:navigate-to-event` - Request to navigate to specific event
|
|
|
|
### Data Events (4)
|
|
- `data:loading` - Data fetch started
|
|
- `data:loaded` - Data fetch completed
|
|
- `data:error` - Data fetch error
|
|
- `data:events-filtered` - Events filtered
|
|
|
|
### Grid Events (3)
|
|
- `grid:rendered` - Grid rendering complete
|
|
- `grid:clicked` - Grid cell clicked
|
|
- `grid:cell-selected` - Grid cell selected
|
|
|
|
### Event Management (4)
|
|
- `event:created` - New event created
|
|
- `event:updated` - Event updated
|
|
- `event:deleted` - Event deleted
|
|
- `event:selected` - Event selected
|
|
|
|
### System Events (2)
|
|
- `system:error` - System error occurred
|
|
- `system:refresh` - Refresh requested
|
|
|
|
### Filter Events (1)
|
|
- `filter:changed` - Event filter changed
|
|
|
|
### Rendering Events (1)
|
|
- `events:rendered` - Events rendering complete
|
|
|
|
## Custom Events (22 events)
|
|
*Used throughout the system for specific functionality*
|
|
|
|
### Drag & Drop Events (12)
|
|
- `drag:start` - Drag operation started
|
|
- `drag:move` - Drag operation in progress
|
|
- `drag:end` - Drag operation ended
|
|
- `drag:auto-scroll` - Auto-scroll during drag
|
|
- `drag:column-change` - Dragged to different column
|
|
- `drag:mouseenter-header` - Mouse entered header during drag
|
|
- `drag:mouseleave-header` - Mouse left header during drag
|
|
- `drag:convert-to-time_event` - Convert all-day to timed event
|
|
|
|
### Event Interaction (2)
|
|
- `event:click` - Event clicked (no drag)
|
|
- `event:clicked` - Event clicked (legacy)
|
|
|
|
### Header Events (3)
|
|
- `header:mouseleave` - Mouse left header area
|
|
- `header:height-changed` - Header height changed
|
|
- `header:rebuilt` - Header DOM rebuilt
|
|
|
|
### All-Day Events (1)
|
|
- `allday:ensure-container` - Ensure all-day container exists
|
|
|
|
### Column Events (1)
|
|
- `column:mouseover` - Mouse over column
|
|
|
|
### Scroll Events (1)
|
|
- `scroll:to-event-time` - Scroll to specific event time
|
|
|
|
### Workweek Events (1)
|
|
- `workweek:header-update` - Update header after workweek change
|
|
|
|
### Navigation Events (1)
|
|
- `navigation:completed` - Navigation completed (different from core event)
|
|
|
|
## Event Payload Analysis
|
|
|
|
### Type Safety Issues Found
|
|
|
|
#### 1. AllDayManager Event Mismatch
|
|
**File:** `src/managers/AllDayManager.ts:33-34`
|
|
```typescript
|
|
// Expected payload:
|
|
const { targetDate, originalElement } = (event as CustomEvent).detail;
|
|
|
|
// Actual payload from DragDropManager:
|
|
{
|
|
targetDate: string,
|
|
mousePosition: { x: number, y: number },
|
|
originalElement: HTMLElement,
|
|
cloneElement: HTMLElement | null
|
|
}
|
|
```
|
|
|
|
#### 2. Inconsistent Event Signatures
|
|
Multiple events have different payload structures across different emitters/listeners.
|
|
|
|
#### 3. No Type Safety
|
|
All events use `(event as CustomEvent).detail` without proper TypeScript interfaces.
|
|
|
|
## Event Usage Statistics
|
|
|
|
### Most Used Events
|
|
1. **Drag Events** - 12 different types, used heavily in drag-drop system
|
|
2. **Core Navigation** - 4 types, used across all managers
|
|
3. **Grid Events** - 3 types, fundamental to calendar rendering
|
|
4. **Header Events** - 3 types, critical for all-day functionality
|
|
|
|
### Critical Events (High Impact)
|
|
- `drag:mouseenter-header` / `drag:mouseleave-header` - Core drag functionality
|
|
- `nav:navigation-completed` - Synchronizes multiple managers
|
|
- `grid:rendered` - Triggers event rendering
|
|
- `events:rendered` - Triggers filtering system
|
|
|
|
### Simple Events (Low Impact)
|
|
- `header:height-changed` - Simple notification
|
|
- `allday:ensure-container` - Simple request
|
|
- `system:refresh` - Simple trigger
|
|
|
|
## Recommendations
|
|
|
|
### Priority 1: Fix Critical Issues
|
|
1. Fix AllDayManager event signature mismatch
|
|
2. Standardize drag event payloads
|
|
3. Document current event contracts
|
|
|
|
### Priority 2: Type Safety Implementation
|
|
1. Create TypeScript interfaces for all event payloads
|
|
2. Implement type-safe EventBus
|
|
3. Migrate drag events first (highest complexity)
|
|
|
|
### Priority 3: System Cleanup
|
|
1. Consolidate duplicate events (`event:click` vs `event:clicked`)
|
|
2. Standardize event naming conventions
|
|
3. Remove unused events
|
|
|
|
## Total Event Count
|
|
- **Core Events:** 25
|
|
- **Custom Events:** 22
|
|
- **Total:** 47 unique event types
|
|
|
|
## Files Analyzed
|
|
- `src/constants/CoreEvents.ts`
|
|
- `src/managers/*.ts` (8 files)
|
|
- `src/renderers/*.ts` (4 files)
|
|
- `src/core/CalendarConfig.ts`
|
|
|
|
*Analysis completed: 2025-09-20* |