Improves drag-drop event system with type safety

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.
This commit is contained in:
Janus C. H. Knudsen 2025-09-21 15:48:13 +02:00
parent b4f5b29da3
commit c7dcfbbaed
7 changed files with 583 additions and 410 deletions

View file

@ -0,0 +1,161 @@
# 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*