Refactor resize and event rendering with performance improvements

Optimizes event resize and rendering logic by:
- Simplifying resize handle management
- Improving single column event rendering
- Reducing unnecessary DOM operations
- Removing redundant event caching and subscriptions

Improves performance and reduces complexity in event interaction flow

src/managers/ResizeHandleManager.ts

@@ -1,5 +1,4 @@
 import { eventBus } from '../core/EventBus';
-import { CoreEvents } from '../constants/CoreEvents';
 import { Configuration } from '../configurations/CalendarConfig';
 import { IResizeEndEventPayload } from '../types/EventTypes';
 import { PositionUtils } from '../utils/PositionUtils';
@@ -7,13 +6,11 @@ import { PositionUtils } from '../utils/PositionUtils';
 type SwpEventEl = HTMLElement & { updateHeight?: (h: number) => void };
 
 export class ResizeHandleManager {
-  private cachedEvents: SwpEventEl[] = [];
   private isResizing = false;
   private targetEl: SwpEventEl | null = null;
   
   private startY = 0;
   private startDurationMin = 0;
-  private direction: 'grow' | 'shrink' = 'grow';
   
   private snapMin: number;
   private minDurationMin: number;
@@ -21,7 +18,6 @@ export class ResizeHandleManager {
   private currentHeight = 0;
   private targetHeight = 0;
   
-  private unsubscribers: Array<() => void> = [];
   private pointerCaptured = false;
   private prevZ?: string;
   
@@ -40,39 +36,24 @@ export class ResizeHandleManager {
   }
 
   public initialize(): void {
-    this.refreshEventCache();
-    this.attachHandles();
     this.attachGlobalListeners();
-    this.subscribeToEventBus();
   }
 
   public destroy(): void {
     this.removeEventListeners();
-    this.unsubscribers.forEach(unsubscribe => unsubscribe());
-    this.unsubscribers = [];
   }
 
   private removeEventListeners(): void {
+    const calendarContainer = document.querySelector('swp-calendar-container');
+    if (calendarContainer) {
+      calendarContainer.removeEventListener('mouseover', this.onMouseOver, true);
+    }
+    
     document.removeEventListener('pointerdown', this.onPointerDown, true);
     document.removeEventListener('pointermove', this.onPointerMove, true);
     document.removeEventListener('pointerup', this.onPointerUp, true);
   }
 
-  private refreshEventCache(): void {
-    this.cachedEvents = Array.from(
-      document.querySelectorAll<SwpEventEl>('swp-day-columns swp-event')
-    );
-  }
-
-  private attachHandles(): void {
-    this.cachedEvents.forEach(element => {
-      if (!element.querySelector(':scope > swp-resize-handle')) {
-        const handle = this.createResizeHandle();
-        element.appendChild(handle);
-      }
-    });
-  }
-
   private createResizeHandle(): HTMLElement {
     const handle = document.createElement('swp-resize-handle');
     handle.setAttribute('aria-label', 'Resize event');
@@ -84,7 +65,7 @@ export class ResizeHandleManager {
     const calendarContainer = document.querySelector('swp-calendar-container');
     
     if (calendarContainer) {
-      calendarContainer.addEventListener('mouseenter', this.onMouseEnter, true);
+      calendarContainer.addEventListener('mouseover', this.onMouseOver, true);
     }
 
     document.addEventListener('pointerdown', this.onPointerDown, true);
@@ -92,38 +73,19 @@ export class ResizeHandleManager {
     document.addEventListener('pointerup', this.onPointerUp, true);
   }
 
-  private onMouseEnter = (e: Event): void => {
+  private onMouseOver = (e: Event): void => {
     const target = e.target as HTMLElement;
     const eventElement = target.closest<SwpEventEl>('swp-event');
     
-    if (eventElement) {
-      const handle = eventElement.querySelector('swp-resize-handle');
-      if (handle) {
-        console.log('Resize handle visible on event:', eventElement.dataset.eventId);
+    if (eventElement && !this.isResizing) {
+      // Check if handle already exists
+      if (!eventElement.querySelector(':scope > swp-resize-handle')) {
+        const handle = this.createResizeHandle();
+        eventElement.appendChild(handle);
       }
     }
   };
 
-  private subscribeToEventBus(): void {
-    const eventsToRefresh = [
-      CoreEvents.GRID_RENDERED, 
-      CoreEvents.EVENTS_RENDERED,
-      CoreEvents.EVENT_CREATED, 
-      CoreEvents.EVENT_UPDATED,
-      CoreEvents.EVENT_DELETED
-    ];
-
-    const refresh = () => {
-      this.refreshEventCache();
-      this.attachHandles();
-    };
-
-    eventsToRefresh.forEach(event => {
-      eventBus.on(event, refresh);
-      this.unsubscribers.push(() => eventBus.off(event, refresh));
-    });
-  }
-
   private onPointerDown = (e: PointerEvent): void => {
     const handle = (e.target as HTMLElement).closest('swp-resize-handle');
     if (!handle) return;
@@ -172,7 +134,6 @@ export class ResizeHandleManager {
 
   private updateResizeHeight(currentY: number): void {
     const deltaY = currentY - this.startY;
-    this.direction = deltaY >= 0 ? 'grow' : 'shrink';
 
     const startHeight = this.positionUtils.minutesToPixels(this.startDurationMin);
     const rawHeight = startHeight + deltaY;
@@ -260,7 +221,6 @@ export class ResizeHandleManager {
     this.targetEl = null;
     
     document.documentElement.classList.remove('swp--resizing');
-    this.refreshEventCache(); // TODO: Optimize to avoid full cache refresh
   }
 
   private restoreZIndex(): void {

src/renderers/EventRendererManager.ts

@@ -1,4 +1,3 @@
-import { EventBus } from '../core/EventBus';
 import { IEventBus, ICalendarEvent, IRenderContext } from '../types/CalendarTypes';
 import { CoreEvents } from '../constants/CoreEvents';
 import { EventManager } from '../managers/EventManager';
@@ -262,19 +261,10 @@ export class EventRenderingService {
                 newEnd
             });
 
-            // Find the column for this event
-            const columnElement = element.closest('swp-day-column') as HTMLElement;
-            if (columnElement) {
-                const columnDate = columnElement.dataset.date;
-                if (columnDate) {
-                    // Get column bounds and re-render the column to recalculate stacking/grouping
-                    const columnDateObj = this.dateService.parseISO(`${columnDate}T00:00:00`);
-                    const columnBounds = ColumnDetectionUtils.getColumnBoundsByDate(columnDateObj);
-                    if (columnBounds) {
-                        await this.renderSingleColumn(columnBounds);
-                    }
-                }
-            }
+            let columnBounds = ColumnDetectionUtils.getColumnBoundsByDate(newStart);
+            if (columnBounds)
+                await this.renderSingleColumn(columnBounds);
+
         });
     }