diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts index 8b698d2..d4c4011 100644 --- a/src/managers/AllDayManager.ts +++ b/src/managers/AllDayManager.ts @@ -65,7 +65,7 @@ export class AllDayManager { // Listen for drag operations on all-day events eventBus.on('drag:start', (event) => { - const { draggedElement, mouseOffset } = (event as CustomEvent).detail; + const { draggedElement, draggedClone, mouseOffset } = (event as CustomEvent).detail; // Check if this is an all-day event by checking if it's in all-day container const isAllDayEvent = draggedElement.closest('swp-allday-container'); @@ -77,26 +77,22 @@ export class AllDayManager { }); eventBus.on('drag:column-change', (event) => { - const { draggedElement, mousePosition } = (event as CustomEvent).detail; + const { draggedElement, draggedClone, mousePosition } = (event as CustomEvent).detail; + if(draggedClone == null) + return; - // Check if there's an all-day clone for this event - const eventId = draggedElement.dataset.eventId; - const dragClone = document.querySelector(`swp-allday-container swp-event[data-event-id="clone-${eventId}"]`) as HTMLElement; + // Filter: Only handle events where clone IS an all-day event + if (!draggedClone.hasAttribute('data-allday')) { + return; // This is not an all-day event, let EventRendererManager handle it + } + + console.log('🔄 AllDayManager: Handling drag:column-change for all-day event', { + eventId : draggedElement.dataset.eventId, + cloneId: draggedClone.dataset.eventId + }); - if (!dragClone.hasAttribute('data-allday')) { - return; - } - - - // If we find an all-day clone, handle the drag move - if (dragClone) { - console.log('🔄 AllDayManager: Found all-day clone, handling drag:column-change', { - eventId, - cloneId: dragClone.dataset.eventId - }); - this.handleColumnChange(dragClone, mousePosition); - } + this.handleColumnChange(draggedClone, mousePosition); }); eventBus.on('drag:end', (event) => { diff --git a/src/managers/DragDropManager.ts b/src/managers/DragDropManager.ts index 54844bf..b6b2933 100644 --- a/src/managers/DragDropManager.ts +++ b/src/managers/DragDropManager.ts @@ -7,6 +7,7 @@ import { IEventBus } from '../types/CalendarTypes'; import { calendarConfig } from '../core/CalendarConfig'; import { PositionUtils } from '../utils/PositionUtils'; import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils'; +import { SwpEventElement } from '../elements/SwpEventElement'; import { DragStartEventPayload, DragMoveEventPayload, @@ -40,6 +41,7 @@ export class DragDropManager { // Drag state private draggedElement!: HTMLElement | null; + private draggedClone!: HTMLElement | null; private currentColumn: string | null = null; private isDragStarted = false; @@ -198,8 +200,17 @@ export class DragDropManager { // Start drag - emit drag:start event this.isDragStarted = true; + // Create SwpEventElement from existing DOM element and clone it + const originalSwpEvent = SwpEventElement.fromExistingElement(this.draggedElement); + const clonedSwpEvent = originalSwpEvent.createClone(); + + // Get the cloned DOM element + this.draggedClone = clonedSwpEvent.getElement(); + + const dragStartPayload: DragStartEventPayload = { draggedElement: this.draggedElement, + draggedClone: this.draggedClone, mousePosition: this.initialMousePosition, mouseOffset: this.mouseOffset, column: this.currentColumn @@ -244,6 +255,7 @@ export class DragDropManager { const dragColumnChangePayload: DragColumnChangeEventPayload = { draggedElement: this.draggedElement, + draggedClone: this.draggedClone, previousColumn, newColumn, mousePosition: currentPosition @@ -514,6 +526,7 @@ export class DragDropManager { */ private cleanupDragState(): void { this.draggedElement = null; + this.draggedClone = null; this.currentColumn = null; this.isDragStarted = false; this.isInHeader = false; diff --git a/src/renderers/EventRenderer.ts b/src/renderers/EventRenderer.ts index 5d69d94..70581f2 100644 --- a/src/renderers/EventRenderer.ts +++ b/src/renderers/EventRenderer.ts @@ -16,7 +16,7 @@ import { DragOffset, StackLinkData } from '../types/DragDropTypes'; export interface EventRendererStrategy { renderEvents(events: CalendarEvent[], container: HTMLElement): void; clearEvents(container?: HTMLElement): void; - handleDragStart?(originalElement: HTMLElement, eventId: string, mouseOffset: DragOffset, column: string): void; + handleDragStart?(payload: import('../types/EventTypes').DragStartEventPayload): void; handleDragMove?(eventId: string, snappedY: number, column: string, mouseOffset: DragOffset): void; handleDragAutoScroll?(eventId: string, snappedY: number): void; handleDragEnd?(eventId: string, originalElement: HTMLElement, draggedClone: HTMLElement, finalColumn: string, finalY: number): void; @@ -160,30 +160,31 @@ export abstract class BaseEventRenderer implements EventRendererStrategy { /** * Handle drag start event */ - public handleDragStart(originalElement: HTMLElement, eventId: string, mouseOffset: DragOffset, column: string): void { + public handleDragStart(payload: import('../types/EventTypes').DragStartEventPayload): void { + const originalElement = payload.draggedElement; + const eventId = originalElement.dataset.eventId || ''; + const mouseOffset = payload.mouseOffset; + const column = payload.column || ''; + this.originalEvent = originalElement; - // Remove stacking styling during drag will be handled by new system + // Use the clone from the payload instead of creating a new one + this.draggedClone = payload.draggedClone; - // Create SwpEventElement from existing DOM element and clone it - const originalSwpEvent = SwpEventElement.fromExistingElement(originalElement); - const clonedSwpEvent = originalSwpEvent.createClone(); + if (this.draggedClone) { + // Apply drag styling + this.applyDragStyling(this.draggedClone); - // Get the cloned DOM element - this.draggedClone = clonedSwpEvent.getElement(); - - // Apply drag styling - this.applyDragStyling(this.draggedClone); - - // Add to current column's events layer (not directly to column) - const columnElement = document.querySelector(`swp-day-column[data-date="${column}"]`); - if (columnElement) { - const eventsLayer = columnElement.querySelector('swp-events-layer'); - if (eventsLayer) { - eventsLayer.appendChild(this.draggedClone); - } else { - // Fallback to column if events layer not found - columnElement.appendChild(this.draggedClone); + // Add to current column's events layer (not directly to column) + const columnElement = document.querySelector(`swp-day-column[data-date="${column}"]`); + if (columnElement) { + const eventsLayer = columnElement.querySelector('swp-events-layer'); + if (eventsLayer) { + eventsLayer.appendChild(this.draggedClone); + } else { + // Fallback to column if events layer not found + columnElement.appendChild(this.draggedClone); + } } } diff --git a/src/renderers/EventRendererManager.ts b/src/renderers/EventRendererManager.ts index 86a8c4d..53e9b02 100644 --- a/src/renderers/EventRendererManager.ts +++ b/src/renderers/EventRendererManager.ts @@ -179,11 +179,10 @@ export class EventRenderingService { private setupDragEventListeners(): void { // Handle drag start this.eventBus.on('drag:start', (event: Event) => { - const { draggedElement, mouseOffset, column } = (event as CustomEvent).detail; + const dragStartPayload = (event as CustomEvent).detail; // Use the draggedElement directly - no need for DOM query - if (draggedElement && this.strategy.handleDragStart && column) { - const eventId = draggedElement.dataset.eventId || ''; - this.strategy.handleDragStart(draggedElement, eventId, mouseOffset, column); + if (dragStartPayload.draggedElement && this.strategy.handleDragStart && dragStartPayload.column) { + this.strategy.handleDragStart(dragStartPayload); } }); @@ -246,10 +245,16 @@ export class EventRenderingService { // Handle column change this.eventBus.on('drag:column-change', (event: Event) => { - const { draggedElement, newColumn } = (event as CustomEvent).detail; + const { draggedElement, draggedClone, newColumn } = (event as CustomEvent).detail; + + // Filter: Only handle events where clone is NOT an all-day event (normal timed events) + if (draggedClone && draggedClone.hasAttribute('data-allday')) { + return; // This is an all-day event, let AllDayManager handle it + } + if (this.strategy.handleColumnChange) { const eventId = draggedElement.dataset.eventId || ''; - this.strategy.handleColumnChange(eventId, newColumn); + this.strategy.handleColumnChange(eventId, newColumn); //TODO: Should be refactored to use payload, no need to lookup clone again inside } }); diff --git a/src/types/EventTypes.ts b/src/types/EventTypes.ts index 56bbb46..d9ff01a 100644 --- a/src/types/EventTypes.ts +++ b/src/types/EventTypes.ts @@ -46,6 +46,7 @@ export interface MousePosition { // Drag start event payload export interface DragStartEventPayload { draggedElement: HTMLElement; + draggedClone: HTMLElement | null; mousePosition: MousePosition; mouseOffset: MousePosition; column: string | null; @@ -90,6 +91,7 @@ export interface DragMouseLeaveHeaderEventPayload { // Drag column change event payload export interface DragColumnChangeEventPayload { draggedElement: HTMLElement; + draggedClone: HTMLElement | null; previousColumn: string | null; newColumn: string; mousePosition: MousePosition;