From daa332e8dbe11fe52364b93fe81c9b1170a4fd0c Mon Sep 17 00:00:00 2001
From: Janus Knudsen <janus@sevenweirdpeople.com>
Date: Wed, 27 Aug 2025 23:56:38 +0200
Subject: [PATCH] Improves drag and drop event handling

Refines the drag and drop functionality in the event renderer.

Ensures proper cleanup and normalization of event clones after a drag operation.
Adds logging for debugging purposes.
Initializes drag event listeners within the DateEventRenderer class to ensure listeners are set up.
---
 src/renderers/EventRenderer.ts | 40 +++++++++++++++++++++++++++++-----
 1 file changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts
index fdf9b7b..add09fb 100644
--- a/src/renderers/EventRenderer.ts
+++ b/src/renderers/EventRenderer.ts
@@ -28,13 +28,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
   constructor(config: CalendarConfig) {
     this.config = config;
     this.dateCalculator = new DateCalculator(config);
-    this.setupDragEventListeners();
   }
   
   /**
    * Setup listeners for drag events from DragDropManager
    */
-  private setupDragEventListeners(): void {
+  protected setupDragEventListeners(): void {
     // Handle drag start
     eventBus.on('drag:start', (event) => {
       const { originalElement, eventId, mouseOffset, column } = (event as CustomEvent).detail;
@@ -182,6 +181,13 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
   private handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: any, column: string): void {
     this.originalEvent = originalElement;
     
+    console.log('EventRenderer: Starting drag on element:', {
+      eventId,
+      tagName: originalElement.tagName,
+      currentOpacity: originalElement.style.opacity,
+      hasDataDuration: !!originalElement.querySelector('swp-event-time')?.getAttribute('data-duration')
+    });
+    
     // Create clone
     this.draggedClone = this.createEventClone(originalElement);
     
@@ -195,7 +201,7 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
     originalElement.style.opacity = '0.3';
     originalElement.style.userSelect = 'none';
     
-    console.log('EventRenderer: Drag started, clone created');
+    console.log('EventRenderer: Drag started - original set to opacity 0.3, clone created');
   }
   
   /**
@@ -231,24 +237,40 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
    * Handle drag end event
    */
   private handleDragEnd(eventId: string, originalElement: HTMLElement, finalColumn: string, finalY: number): void {
-    if (!this.draggedClone || !this.originalEvent) return;
+    console.log('EventRenderer: Handling drag end', {
+      hasClone: !!this.draggedClone,
+      hasOriginal: !!this.originalEvent,
+      originalOpacity: this.originalEvent?.style.opacity
+    });
+    
+    if (!this.draggedClone || !this.originalEvent) {
+      console.warn('EventRenderer: Missing clone or original element at drag end');
+      return;
+    }
     
     // Fade out original
+    console.log('EventRenderer: Fading out original element');
     this.fadeOutAndRemove(this.originalEvent);
     
-    // Remove clone prefix and enable pointer events
+    // Remove clone prefix and normalize clone to be a regular event
     const cloneId = this.draggedClone.dataset.eventId;
     if (cloneId && cloneId.startsWith('clone-')) {
       this.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
     }
+    
+    // Fully normalize the clone to be a regular event
     this.draggedClone.style.pointerEvents = '';
     this.draggedClone.style.opacity = '';
+    this.draggedClone.style.userSelect = '';
+    this.draggedClone.style.zIndex = '';
+    
+    console.log('EventRenderer: Clone normalized to regular event with ID:', this.draggedClone.dataset.eventId);
     
     // Clean up
     this.draggedClone = null;
     this.originalEvent = null;
     
-    console.log('EventRenderer: Drag completed');
+    console.log('EventRenderer: Drag completed and cleaned up');
   }
   
   /**
@@ -640,6 +662,12 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
  * Date-based event renderer
  */
 export class DateEventRenderer extends BaseEventRenderer {
+  constructor(config: CalendarConfig) {
+    super(config);
+    this.setupDragEventListeners();
+    console.log('DateEventRenderer: Drag event listeners setup');
+  }
+
   protected getColumns(container: HTMLElement): HTMLElement[] {
     const columns = container.querySelectorAll('swp-day-column');
     console.log('DateEventRenderer: Found', columns.length, 'day columns in container');