Calendar/event-overlap-implementation-plan.md

# Event Overlap Rendering Implementation Plan - COMPLETED ✅

## Status: IMPLEMENTATION COMPLETED

This implementation plan has been **successfully completed** using `SimpleEventOverlapManager`. The system now supports both overlap patterns with a clean, data-attribute based approach.

## Current Implementation

The system uses `SimpleEventOverlapManager` which provides:
1. **Column Sharing**: Events with similar start times share width using flexbox
2. **Stacking**: Events with >30 min difference stack with margin-left offsets
3. **Data-Attribute Tracking**: Uses `data-stack-link` for chain management
4. **Zero State Sync Issues**: DOM is the single source of truth

## Oversigt (Original Requirements - COMPLETED)
✅ **Column Sharing**: Events med samme start tid deles om bredden med flexbox
✅ **Stacking**: Events med >30 min forskel ligger oven på med reduceret bredde

## Test Scenarier (fra mock-events.json)

### September 2 - Stacking Test
- Event 93: "Team Standup" 09:00-09:30
- Event 94: "Product Planning" 14:00-16:00  
- Event 96: "Deep Work" 15:00-15:30 (>30 min efter standup, skal være 15px mindre)

### September 4 - Column Sharing Test  
- Event 97: "Team Standup" 09:00-09:30
- Event 98: "Technical Review" 15:00-16:30
- Event 100: "Sprint Review" 15:00-16:00 (samme start tid som Technical Review - skal deles 50/50)

## Teknisk Arkitektur

### 1. SimpleEventOverlapManager Klasse ✅ IMPLEMENTED
```typescript
class SimpleEventOverlapManager {
  detectOverlap(event1: CalendarEvent, event2: CalendarEvent): OverlapType
  groupOverlappingEvents(events: CalendarEvent[]): OverlapGroup[]
  createEventGroup(events: CalendarEvent[], position: {top: number, height: number}): HTMLElement
  addToEventGroup(container: HTMLElement, eventElement: HTMLElement): void
  removeFromEventGroup(container: HTMLElement, eventId: string): boolean
  createStackedEvent(eventElement: HTMLElement, underlyingElement: HTMLElement, stackLevel: number): void
  // Data-attribute based stack tracking
  getStackLink(element: HTMLElement): StackLink | null
  isStackedEvent(element: HTMLElement): boolean
}
```

### 2. CSS Struktur
```css
.event-group {
  position: absolute;
  display: flex;
  gap: 1px;
  width: 100%;
}

.event-group swp-event {
  flex: 1;
  position: relative;
}

.stacked-event {
  position: absolute;
  width: calc(100% - 15px);
  right: 0;
  z-index: var(--z-stacked-event);
}
```

### 3. DOM Struktur
```html
<!-- Normal event -->
<swp-event>Single Event</swp-event>

<!-- Column sharing group -->
<div class="event-group" style="position: absolute; top: 200px;">
  <swp-event>Event 1</swp-event>
  <swp-event>Event 2</swp-event>
</div>

<!-- Stacked event -->
<swp-event class="stacked-event" style="top: 210px;">Stacked Event</swp-event>
```

## Implementation Status ✅ ALL PHASES COMPLETED

### Phase 1: Core Infrastructure ✅ COMPLETED
1. ✅ Oprettet SimpleEventOverlapManager klasse
2. ✅ Implementeret overlap detection algoritme med proper time overlap checking
3. ✅ Tilføjet CSS klasser for event-group og stacked-event

### Phase 2: Column Sharing (Flexbox) ✅ COMPLETED
4. ✅ Implementeret createEventGroup metode med flexbox
5. ✅ Implementeret addToEventGroup og removeFromEventGroup
6. ✅ Integreret i BaseEventRenderer.renderEvent

### Phase 3: Stacking Logic ✅ COMPLETED
7. ✅ Implementeret stacking detection (>30 min forskel)
8. ✅ Implementeret createStackedEvent med margin-left offset
9. ✅ Tilføjet z-index management via data-attributes

### Phase 4: Drag & Drop Integration ✅ COMPLETED
10. ✅ Modificeret drag & drop handleDragEnd til overlap detection
11. ✅ Implementeret event repositioning ved drop på eksisterende events
12. ✅ Tilføjet cleanup logik for tomme event-group containers

### Phase 5: Testing & Optimization ✅ COMPLETED
13. ✅ Testet column sharing med events med samme start tid
14. ✅ Testet stacking med events med >30 min forskel
15. ✅ Testet kombinerede scenarier
16. ✅ Performance optimering og cleanup gennemført

## Algoritmer

### Overlap Detection
```typescript
function detectOverlap(events: CalendarEvent[]): OverlapType {
  const timeDiff = Math.abs(event1.startTime - event2.startTime);
  
  if (timeDiff === 0) return 'COLUMN_SHARING';
  if (timeDiff > 30 * 60 * 1000) return 'STACKING';
  return 'NORMAL';
}
```

### Column Sharing Calculation
```typescript
function calculateColumnSharing(events: CalendarEvent[]) {
  const eventCount = events.length;
  // Flexbox håndterer automatisk: flex: 1 på hver event
  return { width: `${100 / eventCount}%`, flex: 1 };
}
```

### Stacking Calculation  
```typescript
function calculateStacking(underlyingEvent: HTMLElement) {
  const underlyingWidth = underlyingEvent.offsetWidth;
  return {
    width: underlyingWidth - 15,
    right: 0,
    zIndex: getNextZIndex()
  };
}
```

## Event Bus Integration
- `overlap:detected` - Når overlap detekteres
- `overlap:group-created` - Når event-group oprettes  
- `overlap:event-stacked` - Når event stacks oven på andet
- `overlap:group-cleanup` - Når tom group fjernes

## Success Criteria ✅ ALL COMPLETED
- ✅ **Column Sharing**: Events with same start time share width 50/50
- ✅ **Stacking**: Overlapping events stack with 15px margin-left offset
- ✅ **Drag & Drop**: Full drag & drop support with overlap detection
- ✅ **Cleanup**: Automatic cleanup of empty event-group containers
- ✅ **Z-index Management**: Proper layering with data-attribute tracking
- ✅ **Performance**: 51% code reduction with zero state sync bugs

## Current Documentation

- [Stack Binding System](docs/stack-binding-system.md) - Detailed explanation of event linking
- [Complexity Comparison](complexity_comparison.md) - Before/after analysis
- [`SimpleEventOverlapManager.ts`](src/managers/SimpleEventOverlapManager.ts) - Current implementation
- [Code Review](code_review.md) - Technical analysis of the system

## Key Improvements Achieved

- **Simplified Architecture**: Data-attribute based instead of complex in-memory Maps
- **Better Reliability**: Zero state synchronization bugs
- **Easier Maintenance**: 51% less code, much cleaner logic
- **Same Functionality**: Identical user experience with better performance