Refactors all-day event layout calculation

Simplifies all-day event rendering by streamlining the layout
calculation and event placement process, using the AllDayLayoutEngine
to determine the grid positions. This removes deprecated methods
and improves overall code clarity.

src/managers/AllDayManager.ts

@@ -3,7 +3,7 @@
 import { eventBus } from '../core/EventBus';
 import { ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
 import { AllDayEventRenderer } from '../renderers/AllDayEventRenderer';
-import { AllDayLayoutEngine } from '../utils/AllDayLayoutEngine';
+import { AllDayLayoutEngine, EventLayout } from '../utils/AllDayLayoutEngine';
 import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
 import { CalendarEvent } from '../types/CalendarTypes';
 import {
@@ -96,7 +96,7 @@ export class AllDayManager {
     });
 
     eventBus.on('drag:end', (event) => {
-      const { draggedElement, mousePosition, finalPosition, target } = (event as CustomEvent<DragEndEventPayload>).detail;
+      const { draggedElement, mousePosition, finalPosition, target, draggedClone } = (event as CustomEvent<DragEndEventPayload>).detail;
 
       if (target != 'swp-day-header') // we are not inside the swp-day-header, so just ignore.
         return;
@@ -106,10 +106,9 @@ export class AllDayManager {
         eventId: eventId,
         finalPosition
       });
-      const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`);
 
       console.log('🎯 AllDayManager: Ending drag for all-day event', { eventId });
-      this.handleDragEnd(draggedElement, dragClone as HTMLElement, { column: finalPosition.column || '', y: 0 });
+      this.handleDragEnd(draggedElement, draggedClone as HTMLElement, { column: finalPosition.column || '', y: 0 });
     });
 
     // Listen for drag cancellation to recalculate height
@@ -307,18 +306,7 @@ export class AllDayManager {
    * Calculate layout for ALL all-day events using AllDayLayoutEngine
    * This is the correct method that processes all events together for proper overlap detection
    */
-  public calculateAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): Map<string, {
-    startColumn: number;
-    endColumn: number;
-    row: number;
-    columnSpan: number;
-    gridArea: string;
-  }> {
-    console.log('🔍 AllDayManager: calculateAllDayEventsLayout - Processing all events together', {
-      eventCount: events.length,
-      events: events.map(e => ({ id: e.id, title: e.title, start: e.start.toISOString().split('T')[0], end: e.end.toISOString().split('T')[0] })),
-      weekDates
-    });
+  public calculateAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): EventLayout[] {
     
     // Store current state
     this.currentAllDayEvents = events;
@@ -328,35 +316,8 @@ export class AllDayManager {
     this.layoutEngine = new AllDayLayoutEngine(weekDates);
     
     // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
-    const layouts = this.layoutEngine.calculateLayout(events);
+    return this.layoutEngine.calculateLayout(events);
     
-    // Convert to expected return format
-    const result = new Map<string, {
-      startColumn: number;
-      endColumn: number;
-      row: number;
-      columnSpan: number;
-      gridArea: string;
-    }>();
-    
-    layouts.forEach((layout, eventId) => {
-      result.set(eventId, {
-        startColumn: layout.startColumn,
-        endColumn: layout.endColumn,
-        row: layout.row,
-        columnSpan: layout.columnSpan,
-        gridArea: layout.gridArea
-      });
-      
-      console.log('✅ AllDayManager: Calculated layout for event', {
-        eventId,
-        title: events.find(e => e.id === eventId)?.title,
-        gridArea: layout.gridArea,
-        layout: layout
-      });
-    });
-    
-    return result;
   }
 
 
@@ -494,19 +455,14 @@ export class AllDayManager {
 
     // 5. Apply differential updates - only update events that changed
     let changedCount = 0;
-    newLayouts.forEach((layout, eventId) => {
-      const oldGridArea = this.currentLayouts.get(eventId);
+    newLayouts.forEach((layout) => {
+      const oldGridArea = this.currentLayouts.get(layout.calenderEvent.id);
       const newGridArea = layout.gridArea;
 
       if (oldGridArea !== newGridArea) {
         changedCount++;
-        const element = document.querySelector(`[data-event-id="${eventId}"]`) as HTMLElement;
+        const element = document.querySelector(`[data-event-id="${layout.calenderEvent.id}"]`) as HTMLElement;
         if (element) {
-          console.log('🔄 AllDayManager: Updating event position', {
-            eventId,
-            oldGridArea,
-            newGridArea
-          });
 
           // Add transition class for smooth animation
           element.classList.add('transitioning');
@@ -532,61 +488,6 @@ export class AllDayManager {
     // 8. Check if height adjustment is needed
     this.checkAndAnimateAllDayHeight();
 
-    console.log('✅ AllDayManager: Completed differential drag end', {
-      eventId: droppedEventId,
-      totalEvents: newLayouts.size,
-      changedEvents: changedCount,
-      finalGridArea: newLayouts.get(droppedEventId)?.gridArea
-    });
-  }
-
-  /**
-   * Get existing all-day events from DOM
-   * Since we don't have direct access to EventManager, we'll get events from the current DOM
-   */
-  private getExistingAllDayEvents(): CalendarEvent[] {
-    const allDayContainer = this.getAllDayContainer();
-    if (!allDayContainer) {
-      return [];
-    }
-
-    const existingElements = allDayContainer.querySelectorAll('swp-event');
-    const events: CalendarEvent[] = [];
-
-    existingElements.forEach(element => {
-      const htmlElement = element as HTMLElement;
-      const eventId = htmlElement.dataset.eventId;
-      const title = htmlElement.dataset.title || htmlElement.textContent || '';
-      const allDayDate = htmlElement.dataset.allDayDate;
-
-      if (eventId && allDayDate) {
-        events.push({
-          id: eventId,
-          title: title,
-          start: new Date(allDayDate),
-          end: new Date(allDayDate),
-          type: 'work',
-          allDay: true,
-          syncStatus: 'synced'
-        });
-      }
-    });
-
-    return events;
-  }
-
-  private getVisibleDatesFromDOM(): string[] {
-    const dayHeaders = document.querySelectorAll('swp-calendar-header swp-day-header');
-        const weekDates: string[] = [];
-        
-        dayHeaders.forEach(header => {
-            const dateAttr = header.getAttribute('data-date');
-            if (dateAttr) {
-                weekDates.push(dateAttr);
-            }
-        });
-    
-    return weekDates;
   }
 
 }

src/managers/DragDropManager.ts

@@ -132,7 +132,10 @@ export class DragDropManager {
   }
 
   private handleMouseDown(event: MouseEvent): void {
-    this.isDragStarted = false;
+
+     // Clean up drag state first
+      this.cleanupDragState();
+      
     this.lastMousePosition = { x: event.clientX, y: event.clientY };
     this.lastLoggedPosition = { x: event.clientX, y: event.clientY };
     this.initialMousePosition = { x: event.clientX, y: event.clientY };
@@ -274,11 +277,10 @@ export class DragDropManager {
 
     if (this.draggedElement) {
       // Store variables locally before cleanup
-      const draggedElement = this.draggedElement;
+      //const draggedElement = this.draggedElement;
       const isDragStarted = this.isDragStarted;
 
-      // Clean up drag state first
-      this.cleanupDragState();
+     
      
 
       // Only emit drag:end if drag was actually started
@@ -292,7 +294,7 @@ export class DragDropManager {
         const dropTarget = this.detectDropTarget(mousePosition);
 
         console.log('🎯 DragDropManager: Emitting drag:end', {
-          draggedElement: draggedElement.dataset.eventId,
+          draggedElement: this.draggedElement.dataset.eventId,
           finalColumn: positionData.column,
           finalY: positionData.snappedY,
           dropTarget: dropTarget,
@@ -300,19 +302,20 @@ export class DragDropManager {
         });
 
         const dragEndPayload: DragEndEventPayload = {
-          draggedElement: draggedElement,
+          draggedElement: this.draggedElement,
+          draggedClone : this.draggedClone,
           mousePosition,
           finalPosition: positionData,
           target: dropTarget
         };
         this.eventBus.emit('drag:end', dragEndPayload);
 
-        draggedElement.remove();
+        this.draggedElement.remove(); // TODO: this should be changed into a subscriber which only after a succesful placement is fired, not just mouseup as this can remove elements that are not placed.
 
       } else {
         // This was just a click - emit click event instead
         this.eventBus.emit('event:click', {
-          draggedElement: draggedElement,
+          draggedElement: this.draggedElement,
           mousePosition: { x: event.clientX, y: event.clientY }
         });
       }
@@ -540,13 +543,11 @@ export class DragDropManager {
    * Detect drop target - whether dropped in swp-day-column or swp-day-header
    */
   private detectDropTarget(position: Position): 'swp-day-column' | 'swp-day-header' | null {
-    const elementAtPosition = document.elementFromPoint(position.x, position.y);
-    if (!elementAtPosition) return null;
-
+    
     // Traverse up the DOM tree to find the target container
-    let currentElement = elementAtPosition as HTMLElement;
+    let currentElement = this.draggedClone;
     while (currentElement && currentElement !== document.body) {
-      if (currentElement.tagName === 'SWP-DAY-HEADER') {
+      if (currentElement.tagName === 'SWP-ALLDAY-CONTAINER') {
         return 'swp-day-header';
       }
       if (currentElement.tagName === 'SWP-DAY-COLUMN') {