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:
parent
b4f5b29da3
commit
c7dcfbbaed
7 changed files with 583 additions and 410 deletions
161
docs/EventSystem-Analysis.md
Normal file
161
docs/EventSystem-Analysis.md
Normal 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*
|
||||
Loading…
Add table
Add a link
Reference in a new issue