Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Calendar/docs/EventSystem-Analysis.md
Janus C. H. Knudsen c7dcfbbaed 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.
2025-09-21 15:48:13 +02:00

5 KiB
Raw Blame History

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

// 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