diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts index 8cb2262..f2d9ac4 100644 --- a/src/managers/AllDayManager.ts +++ b/src/managers/AllDayManager.ts @@ -53,8 +53,7 @@ export class AllDayManager { originalElementTag: payload.originalElement?.tagName }); - this.handleConvertToAllDay(payload); - this.checkAndAnimateAllDayHeight(); + this.handleConvertToAllDay(payload); }); eventBus.on('drag:mouseleave-header', (event) => { @@ -64,7 +63,7 @@ export class AllDayManager { originalElementId: originalElement?.dataset?.eventId }); - this.checkAndAnimateAllDayHeight(); + //this.checkAndAnimateAllDayHeight(); }); // Listen for drag operations on all-day events @@ -117,15 +116,8 @@ export class AllDayManager { reason }); - // Recalculate all-day height since clones may have been removed - this.checkAndAnimateAllDayHeight(); }); - // Listen for height check requests from EventRendererManager - eventBus.on('allday:checkHeight', () => { - console.log('📏 AllDayManager: Received allday:checkHeight request'); - this.checkAndAnimateAllDayHeight(); - }); } private getAllDayContainer(): HTMLElement | null { @@ -212,7 +204,7 @@ export class AllDayManager { } } else { - + // Hide chevron - not needed this.updateChevronButton(false); this.clearOverflowIndicators(); @@ -313,7 +305,19 @@ export class AllDayManager { return layoutEngine.calculateLayout(events); } + public initAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): EventLayout[] { + // Store current state + this.currentAllDayEvents = events; + this.currentWeekDates = weekDates; + + // Initialize layout engine with provided week dates + var layoutEngine = new AllDayLayoutEngine(weekDates); + + // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly + this.currentLayouts = layoutEngine.calculateLayout(events); + return this.currentLayouts; + } /** * Handle conversion of timed event to all-day event - SIMPLIFIED @@ -412,12 +416,8 @@ export class AllDayManager { if (dragEndEvent.draggedClone == null) return; - // 2. Normalize clone ID - const cloneId = dragEndEvent.draggedClone?.dataset.eventId; - if (cloneId?.startsWith('clone-')) { - dragEndEvent.draggedClone.dataset.eventId = cloneId.replace('clone-', ''); - } + dragEndEvent.draggedClone.dataset.eventId = dragEndEvent.draggedClone.dataset.eventId?.replace('clone-', ''); // 3. Create temporary array with existing events + the dropped event let eventId = dragEndEvent.draggedClone.dataset.eventId; @@ -430,7 +430,7 @@ export class AllDayManager { const droppedEvent: CalendarEvent = { id: eventId, - title: dragEndEvent.draggedClone.dataset.title || dragEndEvent.draggedClone.textContent || '', + title: dragEndEvent.draggedClone.dataset.title|| '', start: new Date(eventDate), end: new Date(eventDate), type: eventType, @@ -449,16 +449,14 @@ export class AllDayManager { this.newLayouts.forEach((layout) => { // Find current layout for this event var currentLayout = this.currentLayouts.find(old => old.calenderEvent.id === layout.calenderEvent.id); - var currentGridArea = currentLayout?.gridArea; - var newGridArea = layout.gridArea; - if (currentGridArea !== newGridArea) { + if (currentLayout?.gridArea !== layout.gridArea) { changedCount++; const element = dragEndEvent.draggedClone; if (element) { // Add transition class for smooth animation element.classList.add('transitioning'); - element.style.gridArea = newGridArea; + element.style.gridArea = layout.gridArea; element.style.gridRow = layout.row.toString(); element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`; @@ -529,7 +527,7 @@ export class AllDayManager { private countEventsInColumn(columnBounds: ColumnBounds): number { var columnIndex = columnBounds.index; var count = 0; - + this.currentLayouts.forEach((layout) => { // Check if event spans this column if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) { @@ -546,23 +544,26 @@ export class AllDayManager { const container = this.getAllDayContainer(); if (!container) return; - container.querySelectorAll('swp-event').forEach((element) => { - const event = element as HTMLElement; - const gridRow = parseInt(event.style.gridRow) || 1; + // Create overflow indicators for each column that needs them + var columns = ColumnDetectionUtils.getColumns(); - if (gridRow === 4) { - - // Convert row 4 events to indicators - const overflowCount = this.actualRowCount - 3; // Total overflow rows - event.classList.add('max-event-overflow'); - event.innerHTML = `+${overflowCount} more`; - event.onclick = (e) => { + columns.forEach((columnBounds) => { + var totalEventsInColumn = this.countEventsInColumn(columnBounds); + var overflowCount = Math.max(0, totalEventsInColumn - 3); + + if (overflowCount > 0) { + // Create new overflow indicator element + var overflowElement = document.createElement('swp-event'); + overflowElement.className = 'max-event-overflow'; + overflowElement.style.gridRow = '4'; + overflowElement.style.gridColumn = columnBounds.index.toString(); + overflowElement.innerHTML = `+${overflowCount} more`; + overflowElement.onclick = (e) => { e.stopPropagation(); this.toggleExpanded(); }; - } else if (gridRow > 4) { - // Hide events beyond row 4 - event.style.display = 'none'; + + container.appendChild(overflowElement); } }); } @@ -574,21 +575,12 @@ export class AllDayManager { const container = this.getAllDayContainer(); if (!container) return; - container.querySelectorAll('.max-event-overflow').forEach((event) => { - const htmlEvent = event as HTMLElement; - htmlEvent.classList.remove('max-event-overflow'); - htmlEvent.onclick = null; - - // Restore original title from data-title - if (htmlEvent.dataset.title) { - htmlEvent.innerHTML = htmlEvent.dataset.title; - } + // Remove all overflow indicator elements + container.querySelectorAll('.max-event-overflow').forEach((element) => { + element.remove(); }); - // Show all hidden events - container.querySelectorAll('swp-event[style*="display: none"]').forEach((event) => { - (event as HTMLElement).style.display = ''; - }); + } } \ No newline at end of file diff --git a/src/managers/DragDropManager.ts b/src/managers/DragDropManager.ts index 653be03..52df166 100644 --- a/src/managers/DragDropManager.ts +++ b/src/managers/DragDropManager.ts @@ -243,8 +243,10 @@ export class DragDropManager { // Check for column change using cached data const newColumn = ColumnDetectionUtils.getColumnBounds(currentPosition); + if (newColumn == null) + return; - if (newColumn && newColumn !== this.currentColumnBounds) { + if (newColumn?.index !== this.currentColumnBounds?.index) { const previousColumn = this.currentColumnBounds; this.currentColumnBounds = newColumn; @@ -279,7 +281,7 @@ export class DragDropManager { // Detect drop target (swp-day-column or swp-day-header) const dropTarget = this.detectDropTarget(mousePosition); - if(!dropTarget) + if (!dropTarget) throw "dropTarget is null"; console.log('🎯 DragDropManager: Emitting drag:end', { @@ -298,7 +300,9 @@ export class DragDropManager { target: dropTarget }; this.eventBus.emit('drag:end', dragEndPayload); - + + + this.draggedElement = null; } else { // This was just a click - emit click event instead diff --git a/src/renderers/EventRendererManager.ts b/src/renderers/EventRendererManager.ts index b058d74..5babfcb 100644 --- a/src/renderers/EventRendererManager.ts +++ b/src/renderers/EventRendererManager.ts @@ -371,15 +371,13 @@ export class EventRenderingService { // Pass current events to AllDayManager for state tracking this.allDayManager.setCurrentEvents(allDayEvents, weekDates); - const layouts = this.allDayManager.calculateAllDayEventsLayout(allDayEvents, weekDates); + const layouts = this.allDayManager.initAllDayEventsLayout(allDayEvents, weekDates); // Render each all-day event with pre-calculated layout layouts.forEach(layout => { this.allDayEventRenderer.renderAllDayEventWithLayout(layout.calenderEvent, layout); }); - // Check and adjust all-day container height after rendering - this.eventBus.emit('allday:checkHeight'); } /** diff --git a/src/types/EventPayloadMap.ts b/src/types/EventPayloadMap.ts index d9393ad..e2630d2 100644 --- a/src/types/EventPayloadMap.ts +++ b/src/types/EventPayloadMap.ts @@ -135,7 +135,6 @@ export interface CalendarEventPayloadMap { }; // All-day events - 'allday:checkHeight': undefined; 'allday:convert-to-allday': { eventId: string; element: HTMLElement; diff --git a/src/utils/ColumnDetectionUtils.ts b/src/utils/ColumnDetectionUtils.ts index 28bf816..bf0b4aa 100644 --- a/src/utils/ColumnDetectionUtils.ts +++ b/src/utils/ColumnDetectionUtils.ts @@ -83,17 +83,8 @@ export class ColumnDetectionUtils { return column || null; } - /** - * Clear cache (useful for testing or when DOM structure changes) - */ - public static clearCache(): void { - this.columnBoundsCache = []; - } - - /** - * Get current cache for debugging - */ - public static getCache(): ColumnBounds[] { + + public static getColumns(): ColumnBounds[] { return [...this.columnBoundsCache]; } } \ No newline at end of file