wip, resize, debugging

src/managers/DragDropManager.ts

@@ -42,6 +42,10 @@ export class DragDropManager {
   private currentColumnBounds: ColumnBounds | null = null;
   private isDragStarted = false;
 
+  // Hover state
+  private isHoverTrackingActive = false;
+  private currentHoveredEvent: HTMLElement | null = null;
+
   // Movement threshold to distinguish click from drag
   private readonly dragThreshold = 5; // pixels
 
@@ -106,6 +110,23 @@ export class DragDropManager {
         const target = e.target as HTMLElement;
         if (target.closest('swp-calendar-header')) {
           this.handleHeaderMouseEnter(e as MouseEvent);
+        } else if (target.closest('swp-event')) {
+          // Entered an event - activate hover tracking and set color
+          const eventElement = target.closest<HTMLElement>('swp-event');
+          const mouseEvent = e as MouseEvent;
+
+          // Only handle hover if mouse button is up
+          if (eventElement && !this.isDragStarted && mouseEvent.buttons === 0) {
+            // Clear any previous hover first
+            if (this.currentHoveredEvent && this.currentHoveredEvent !== eventElement) {
+              this.currentHoveredEvent.style.backgroundColor = '';
+            }
+
+            this.isHoverTrackingActive = true;
+            this.currentHoveredEvent = eventElement;
+            eventElement.style.backgroundColor = 'red';
+            console.log('🎨 Mouse entered event:', eventElement.dataset.eventId, 'buttons:', mouseEvent.buttons, 'isDragStarted:', this.isDragStarted);
+          }
         }
       }, true); // Use capture phase
 
@@ -114,6 +135,7 @@ export class DragDropManager {
         if (target.closest('swp-calendar-header')) {
           this.handleHeaderMouseLeave(e as MouseEvent);
         }
+        // Don't handle swp-event mouseleave here - let mousemove handle it
       }, true); // Use capture phase
     }
 
@@ -154,8 +176,20 @@ export class DragDropManager {
     }
 
 
-    // Found an event - prepare for potential dragging
+    // Found an event - check if in resize zone first
     if (eventElement) {
+      // Check if click is in bottom resize zone
+      const rect = eventElement.getBoundingClientRect();
+      const mouseY = event.clientY;
+      const distanceFromBottom = rect.bottom - mouseY;
+      const resizeZoneHeight = 15; // Match ResizeHandleManager
+
+      // If in resize zone, don't handle this - let ResizeHandleManager take over
+      if (distanceFromBottom >= 0 && distanceFromBottom <= resizeZoneHeight) {
+        return; // Exit early - this is a resize operation
+      }
+
+      // Normal drag - prepare for potential dragging
       this.draggedElement = eventElement;
       this.lastColumn = ColumnDetectionUtils.getColumnBounds(this.lastMousePosition)
       // Calculate mouse offset within event
@@ -174,7 +208,19 @@ export class DragDropManager {
     this.currentMouseY = event.clientY;
     this.lastMousePosition = { x: event.clientX, y: event.clientY };
 
+    // Log which element we're over during drag
+    if (this.isDragStarted) {
+      const elementAtPoint = document.elementFromPoint(event.clientX, event.clientY);
+      const eventElement = elementAtPoint?.closest('swp-event');
+      if (eventElement) {
+        console.log('🖱️ Dragging over event:', (eventElement as HTMLElement).dataset.eventId);
+      }
+    }
 
+    // Check for event hover (coordinate-based) - only when mouse button is up
+    if (this.isHoverTrackingActive && event.buttons === 0) {
+      this.checkEventHover(event);
+    }
 
     if (event.buttons === 1) {
       const currentPosition: MousePosition = { x: event.clientX, y: event.clientY };
@@ -189,6 +235,16 @@ export class DragDropManager {
           // Start drag - emit drag:start event
           this.isDragStarted = true;
 
+          // Set high z-index on event-group if exists, otherwise on event itself
+          const eventGroup = this.draggedElement.closest<HTMLElement>('swp-event-group');
+          if (eventGroup) {
+            console.log('🔝 Setting z-index 9999 on event-group', eventGroup);
+            eventGroup.style.zIndex = '9999';
+          } else {
+            console.log('🔝 Setting z-index 9999 on event', this.draggedElement.dataset.eventId);
+            this.draggedElement.style.zIndex = '9999';
+          }
+
           // Detect current column
           this.currentColumnBounds = ColumnDetectionUtils.getColumnBounds(currentPosition);
 
@@ -542,4 +598,35 @@ export class DragDropManager {
     };
     this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
   }
+
+  private checkEventHover(event: MouseEvent): void {
+    // Use currentHoveredEvent to check if mouse is still within bounds
+    if (!this.currentHoveredEvent) return;
+
+    const rect = this.currentHoveredEvent.getBoundingClientRect();
+    const mouseX = event.clientX;
+    const mouseY = event.clientY;
+
+    // Check if mouse is still within the current hovered event
+    const isStillInside = mouseX >= rect.left && mouseX <= rect.right &&
+                          mouseY >= rect.top && mouseY <= rect.bottom;
+
+    // If mouse left the event
+    if (!isStillInside) {
+      // Only disable tracking and clear if mouse is NOT pressed (allow resize to work)
+      if (event.buttons === 0) {
+        console.log('🚪 Mouse left event:', this.currentHoveredEvent.dataset.eventId, 'clearing hover');
+        this.isHoverTrackingActive = false;
+        this.clearEventHover();
+      }
+    }
+  }
+
+  private clearEventHover(): void {
+    if (this.currentHoveredEvent) {
+      this.currentHoveredEvent.style.backgroundColor = '';
+      this.currentHoveredEvent = null;
+    }
+  }
+ 
 }