Calendar/wwwroot/js/managers/DragDropManager.js

/**
 * DragDropManager - Advanced drag-and-drop system with smooth animations and event type conversion
 *
 * ARCHITECTURE OVERVIEW:
 * =====================
 * DragDropManager provides a sophisticated drag-and-drop system for calendar events that supports:
 * - Smooth animated dragging with requestAnimationFrame
 * - Automatic event type conversion (timed events ↔ all-day events)
 * - Scroll compensation during edge scrolling
 * - Grid snapping for precise event placement
 * - Column detection and change tracking
 *
 * KEY FEATURES:
 * =============
 * 1. DRAG DETECTION
 *    - Movement threshold (5px) to distinguish clicks from drags
 *    - Immediate visual feedback with cloned element
 *    - Mouse offset tracking for natural drag feel
 *
 * 2. SMOOTH ANIMATION
 *    - Uses requestAnimationFrame for 60fps animations
 *    - Interpolated movement (30% per frame) for smooth transitions
 *    - Continuous drag:move events for real-time updates
 *
 * 3. EVENT TYPE CONVERSION
 *    - Timed → All-day: When dragging into calendar header
 *    - All-day → Timed: When dragging into day columns
 *    - Automatic clone replacement with appropriate element type
 *
 * 4. SCROLL COMPENSATION
 *    - Tracks scroll delta during edge-scrolling
 *    - Compensates dragged element position during scroll
 *    - Prevents visual "jumping" when scrolling while dragging
 *
 * 5. GRID SNAPPING
 *    - Snaps to time grid on mouse up
 *    - Uses PositionUtils for consistent positioning
 *    - Accounts for mouse offset within event
 *
 * STATE MANAGEMENT:
 * =================
 * Mouse Tracking:
 *   - mouseDownPosition: Initial click position
 *   - currentMousePosition: Latest mouse position
 *   - mouseOffset: Click offset within event (for natural dragging)
 *
 * Drag State:
 *   - originalElement: Source event being dragged
 *   - draggedClone: Animated clone following mouse
 *   - currentColumn: Column mouse is currently over
 *   - previousColumn: Last column (for detecting changes)
 *   - isDragStarted: Whether drag threshold exceeded
 *
 * Scroll State:
 *   - scrollDeltaY: Accumulated scroll offset during drag
 *   - lastScrollTop: Previous scroll position
 *   - isScrollCompensating: Whether edge-scroll is active
 *
 * Animation State:
 *   - dragAnimationId: requestAnimationFrame ID
 *   - targetY: Desired position for smooth interpolation
 *   - currentY: Current interpolated position
 *
 * EVENT FLOW:
 * ===========
 * 1. Mouse Down (handleMouseDown)
 *    ├─ Store originalElement and mouse offset
 *    └─ Wait for movement
 *
 * 2. Mouse Move (handleMouseMove)
 *    ├─ Check movement threshold
 *    ├─ Initialize drag if threshold exceeded (initializeDrag)
 *    │  ├─ Create clone
 *    │  ├─ Emit drag:start
 *    │  └─ Start animation loop
 *    ├─ Continue drag (continueDrag)
 *    │  ├─ Calculate target position with scroll compensation
 *    │  └─ Update animation target
 *    └─ Detect column changes (detectColumnChange)
 *       └─ Emit drag:column-change
 *
 * 3. Animation Loop (animateDrag)
 *    ├─ Interpolate currentY toward targetY
 *    ├─ Emit drag:move on each frame
 *    └─ Schedule next frame until target reached
 *
 * 4. Event Type Conversion
 *    ├─ Entering header (handleHeaderMouseEnter)
 *    │  ├─ Emit drag:mouseenter-header
 *    │  └─ AllDayManager creates all-day clone
 *    └─ Entering column (handleColumnMouseEnter)
 *       ├─ Emit drag:mouseenter-column
 *       └─ EventRenderingService creates timed clone
 *
 * 5. Mouse Up (handleMouseUp)
 *    ├─ Stop animation
 *    ├─ Snap to grid
 *    ├─ Detect drop target (header or column)
 *    ├─ Emit drag:end with final position
 *    └─ Cleanup drag state
 *
 * SCROLL COMPENSATION SYSTEM:
 * ===========================
 * Problem: When EdgeScrollManager scrolls the grid during drag, the dragged element
 *          can appear to "jump" because the mouse position stays the same but the
 *          coordinate system (scrollable content) has moved.
 *
 * Solution: Track cumulative scroll delta and add it to mouse position calculations
 *
 * Flow:
 * 1. EdgeScrollManager starts scrolling → emit edgescroll:started
 * 2. DragDropManager sets isScrollCompensating = true
 * 3. On each scroll event:
 *    ├─ Calculate scrollDelta = currentScrollTop - lastScrollTop
 *    ├─ Accumulate into scrollDeltaY
 *    └─ Call continueDrag with adjusted position
 * 4. continueDrag adds scrollDeltaY to mouse Y coordinate
 * 5. On event conversion, reset scrollDeltaY (new clone, new coordinate system)
 *
 * PERFORMANCE OPTIMIZATIONS:
 * ==========================
 * - Uses ColumnDetectionUtils cache for fast column lookups
 * - Single requestAnimationFrame loop (not per-mousemove)
 * - Interpolated animation reduces update frequency
 * - Passive scroll listeners
 * - Event delegation for header/column detection
 *
 * USAGE:
 * ======
 * const dragDropManager = new DragDropManager(eventBus, positionUtils);
 * // Automatically attaches event listeners and manages drag lifecycle
 * // Other managers listen to drag:start, drag:move, drag:end, etc.
 */
import { ColumnDetectionUtils } from '../utils/ColumnDetectionUtils';
import { SwpEventElement } from '../elements/SwpEventElement';
import { CoreEvents } from '../constants/CoreEvents';
export class DragDropManager {
    constructor(eventBus, positionUtils) {
        // Mouse tracking with optimized state
        this.mouseDownPosition = { x: 0, y: 0 };
        this.currentMousePosition = { x: 0, y: 0 };
        this.mouseOffset = { x: 0, y: 0 };
        this.currentColumn = null;
        this.previousColumn = null;
        this.originalSourceColumn = null; // Track original start column
        this.isDragStarted = false;
        // Movement threshold to distinguish click from drag
        this.dragThreshold = 5; // pixels
        // Scroll compensation
        this.scrollableContent = null;
        this.scrollDeltaY = 0; // Current scroll delta to apply in continueDrag
        this.lastScrollTop = 0; // Last scroll position for delta calculation
        this.isScrollCompensating = false; // Track if scroll compensation is active
        // Smooth drag animation
        this.dragAnimationId = null;
        this.targetY = 0;
        this.currentY = 0;
        this.targetColumn = null;
        this.eventBus = eventBus;
        this.positionUtils = positionUtils;
        this.init();
    }
    /**
     * Initialize with optimized event listener setup
     */
    init() {
        // Add event listeners
        document.body.addEventListener('mousemove', this.handleMouseMove.bind(this));
        document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
        document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
        const calendarContainer = document.querySelector('swp-calendar-container');
        if (calendarContainer) {
            calendarContainer.addEventListener('mouseleave', () => {
                if (this.originalElement && this.isDragStarted) {
                    this.cancelDrag();
                }
            });
            // Event delegation for header enter/leave
            calendarContainer.addEventListener('mouseenter', (e) => {
                const target = e.target;
                if (target.closest('swp-calendar-header')) {
                    this.handleHeaderMouseEnter(e);
                }
                else if (target.closest('swp-day-column')) {
                    this.handleColumnMouseEnter(e);
                }
            }, true); // Use capture phase
            calendarContainer.addEventListener('mouseleave', (e) => {
                const target = e.target;
                if (target.closest('swp-calendar-header')) {
                    this.handleHeaderMouseLeave(e);
                }
                // Don't handle swp-event mouseleave here - let mousemove handle it
            }, true); // Use capture phase
        }
        // Initialize column bounds cache
        ColumnDetectionUtils.updateColumnBoundsCache();
        // Listen to resize events to update cache
        window.addEventListener('resize', () => {
            ColumnDetectionUtils.updateColumnBoundsCache();
        });
        // Listen to navigation events to update cache
        this.eventBus.on('navigation:completed', () => {
            ColumnDetectionUtils.updateColumnBoundsCache();
        });
        this.eventBus.on(CoreEvents.GRID_RENDERED, (event) => {
            this.handleGridRendered(event);
        });
        // Listen to edge-scroll events to control scroll compensation
        this.eventBus.on('edgescroll:started', () => {
            this.isScrollCompensating = true;
            // Gem nuværende scroll position for delta beregning
            if (this.scrollableContent) {
                this.lastScrollTop = this.scrollableContent.scrollTop;
            }
        });
        this.eventBus.on('edgescroll:stopped', () => {
            this.isScrollCompensating = false;
        });
        // Reset scrollDeltaY when event converts (new clone created)
        this.eventBus.on('drag:mouseenter-header', () => {
            this.scrollDeltaY = 0;
            this.lastScrollTop = 0;
        });
        this.eventBus.on('drag:mouseenter-column', () => {
            this.scrollDeltaY = 0;
            this.lastScrollTop = 0;
        });
    }
    handleGridRendered(event) {
        this.scrollableContent = document.querySelector('swp-scrollable-content');
        this.scrollableContent.addEventListener('scroll', this.handleScroll.bind(this), { passive: true });
    }
    handleMouseDown(event) {
        // Clean up drag state first
        this.cleanupDragState();
        ColumnDetectionUtils.updateColumnBoundsCache();
        //this.lastMousePosition = { x: event.clientX, y: event.clientY };
        //this.initialMousePosition = { x: event.clientX, y: event.clientY };
        // Check if mousedown is on an event
        const target = event.target;
        if (target.closest('swp-resize-handle'))
            return;
        let eventElement = target;
        while (eventElement && eventElement.tagName !== 'SWP-GRID-CONTAINER') {
            if (eventElement.tagName === 'SWP-EVENT' || eventElement.tagName === 'SWP-ALLDAY-EVENT') {
                break;
            }
            eventElement = eventElement.parentElement;
            if (!eventElement)
                return;
        }
        if (eventElement) {
            // Normal drag - prepare for potential dragging
            this.originalElement = eventElement;
            // Calculate mouse offset within event
            const eventRect = eventElement.getBoundingClientRect();
            this.mouseOffset = {
                x: event.clientX - eventRect.left,
                y: event.clientY - eventRect.top
            };
            this.mouseDownPosition = { x: event.clientX, y: event.clientY };
        }
    }
    handleMouseMove(event) {
        if (event.buttons === 1) {
            // Always update mouse position from event
            this.currentMousePosition = { x: event.clientX, y: event.clientY };
            // Try to initialize drag if not started
            if (!this.isDragStarted && this.originalElement) {
                if (!this.initializeDrag(this.currentMousePosition)) {
                    return; // Not enough movement yet
                }
            }
            // Continue drag if started (også under scroll - accumulatedScrollDelta kompenserer)
            if (this.isDragStarted && this.originalElement && this.draggedClone) {
                this.continueDrag(this.currentMousePosition);
                this.detectColumnChange(this.currentMousePosition);
            }
        }
    }
    /**
     * Try to initialize drag based on movement threshold
     * Returns true if drag was initialized, false if not enough movement
     */
    initializeDrag(currentPosition) {
        const deltaX = Math.abs(currentPosition.x - this.mouseDownPosition.x);
        const deltaY = Math.abs(currentPosition.y - this.mouseDownPosition.y);
        const totalMovement = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
        if (totalMovement < this.dragThreshold) {
            return false; // Not enough movement
        }
        // Start drag
        this.isDragStarted = true;
        // Set high z-index on event-group if exists, otherwise on event itself
        const eventGroup = this.originalElement.closest('swp-event-group');
        if (eventGroup) {
            eventGroup.style.zIndex = '9999';
        }
        else {
            this.originalElement.style.zIndex = '9999';
        }
        const originalElement = this.originalElement;
        this.currentColumn = ColumnDetectionUtils.getColumnBounds(currentPosition);
        this.originalSourceColumn = this.currentColumn; // Store original source column at drag start
        this.draggedClone = originalElement.createClone();
        const dragStartPayload = {
            originalElement: this.originalElement,
            draggedClone: this.draggedClone,
            mousePosition: this.mouseDownPosition,
            mouseOffset: this.mouseOffset,
            columnBounds: this.currentColumn
        };
        this.eventBus.emit('drag:start', dragStartPayload);
        return true;
    }
    continueDrag(currentPosition) {
        if (!this.draggedClone.hasAttribute("data-allday")) {
            // Calculate raw position from mouse (no snapping)
            const column = ColumnDetectionUtils.getColumnBounds(currentPosition);
            if (column) {
                // Calculate raw Y position relative to column (accounting for mouse offset)
                const columnRect = column.boundingClientRect;
                // Beregn position fra mus + scroll delta kompensation
                const adjustedMouseY = currentPosition.y + this.scrollDeltaY;
                const eventTopY = adjustedMouseY - columnRect.top - this.mouseOffset.y;
                this.targetY = Math.max(0, eventTopY);
                this.targetColumn = column;
                // Start animation loop if not already running
                if (this.dragAnimationId === null) {
                    this.currentY = parseFloat(this.draggedClone.style.top) || 0;
                    this.animateDrag();
                }
            }
        }
    }
    /**
     * Detect column change and emit event
     */
    detectColumnChange(currentPosition) {
        const newColumn = ColumnDetectionUtils.getColumnBounds(currentPosition);
        if (newColumn == null)
            return;
        if (newColumn.index !== this.currentColumn?.index) {
            this.previousColumn = this.currentColumn;
            this.currentColumn = newColumn;
            const dragColumnChangePayload = {
                originalElement: this.originalElement,
                draggedClone: this.draggedClone,
                previousColumn: this.previousColumn,
                newColumn,
                mousePosition: currentPosition
            };
            this.eventBus.emit('drag:column-change', dragColumnChangePayload);
        }
    }
    /**
     * Optimized mouse up handler with consolidated cleanup
     */
    handleMouseUp(event) {
        this.stopDragAnimation();
        if (this.originalElement) {
            // Only emit drag:end if drag was actually started
            if (this.isDragStarted) {
                const mousePosition = { x: event.clientX, y: event.clientY };
                // Snap to grid on mouse up (like ResizeHandleManager)
                const column = ColumnDetectionUtils.getColumnBounds(mousePosition);
                if (!column)
                    return;
                // Get current position and snap it to grid
                const snappedY = this.calculateSnapPosition(mousePosition.y, column);
                // Update clone to snapped position immediately
                if (this.draggedClone) {
                    this.draggedClone.style.top = `${snappedY}px`;
                }
                // Detect drop target (swp-day-column or swp-day-header)
                const dropTarget = this.detectDropTarget(mousePosition);
                if (!dropTarget)
                    throw "dropTarget is null";
                const dragEndPayload = {
                    originalElement: this.originalElement,
                    draggedClone: this.draggedClone,
                    mousePosition,
                    originalSourceColumn: this.originalSourceColumn,
                    finalPosition: { column, snappedY }, // Where drag ended
                    target: dropTarget
                };
                this.eventBus.emit('drag:end', dragEndPayload);
                this.cleanupDragState();
            }
            else {
                // This was just a click - emit click event instead
                this.eventBus.emit('event:click', {
                    clickedElement: this.originalElement,
                    mousePosition: { x: event.clientX, y: event.clientY }
                });
            }
        }
    }
    // Add a cleanup method that finds and removes ALL clones
    cleanupAllClones() {
        // Remove clones from all possible locations
        const allClones = document.querySelectorAll('[data-event-id^="clone"]');
        if (allClones.length > 0) {
            allClones.forEach(clone => clone.remove());
        }
    }
    /**
     * Cancel drag operation when mouse leaves grid container
     * Animates clone back to original position before cleanup
     */
    cancelDrag() {
        if (!this.originalElement || !this.draggedClone)
            return;
        // Get current clone position
        const cloneRect = this.draggedClone.getBoundingClientRect();
        // Get original element position
        const originalRect = this.originalElement.getBoundingClientRect();
        // Calculate distance to animate
        const deltaX = originalRect.left - cloneRect.left;
        const deltaY = originalRect.top - cloneRect.top;
        // Add transition for smooth animation
        this.draggedClone.style.transition = 'transform 300ms ease-out';
        this.draggedClone.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
        // Wait for animation to complete, then cleanup
        setTimeout(() => {
            this.cleanupAllClones();
            if (this.originalElement) {
                this.originalElement.style.opacity = '';
                this.originalElement.style.cursor = '';
            }
            this.eventBus.emit('drag:cancelled', {
                originalElement: this.originalElement,
                reason: 'mouse-left-grid'
            });
            this.cleanupDragState();
            this.stopDragAnimation();
        }, 300);
    }
    /**
     * Optimized snap position calculation using PositionUtils
     */
    calculateSnapPosition(mouseY, column) {
        // Calculate where the event top would be (accounting for mouse offset)
        const eventTopY = mouseY - this.mouseOffset.y;
        // Snap the event top position, not the mouse position
        const snappedY = this.positionUtils.getPositionFromCoordinate(eventTopY, column);
        return Math.max(0, snappedY);
    }
    /**
     * Smooth drag animation using requestAnimationFrame
     * Emits drag:move events with current draggedClone reference on each frame
     */
    animateDrag() {
        if (!this.isDragStarted || !this.draggedClone || !this.targetColumn) {
            this.dragAnimationId = null;
            return;
        }
        // Smooth interpolation towards target
        const diff = this.targetY - this.currentY;
        const step = diff * 0.3; // 30% of distance per frame
        // Update if difference is significant
        if (Math.abs(diff) > 0.5) {
            this.currentY += step;
            // Emit drag:move event with current draggedClone reference
            const dragMovePayload = {
                originalElement: this.originalElement,
                draggedClone: this.draggedClone, // Always uses current reference
                mousePosition: this.currentMousePosition, // Use current mouse position!
                snappedY: this.currentY,
                columnBounds: this.targetColumn,
                mouseOffset: this.mouseOffset
            };
            this.eventBus.emit('drag:move', dragMovePayload);
            this.dragAnimationId = requestAnimationFrame(() => this.animateDrag());
        }
        else {
            // Close enough - snap to target
            this.currentY = this.targetY;
            // Emit final position
            const dragMovePayload = {
                originalElement: this.originalElement,
                draggedClone: this.draggedClone,
                mousePosition: this.currentMousePosition, // Use current mouse position!
                snappedY: this.currentY,
                columnBounds: this.targetColumn,
                mouseOffset: this.mouseOffset
            };
            this.eventBus.emit('drag:move', dragMovePayload);
            this.dragAnimationId = null;
        }
    }
    /**
     * Handle scroll during drag - update scrollDeltaY and call continueDrag
     */
    handleScroll() {
        if (!this.isDragStarted || !this.draggedClone || !this.scrollableContent || !this.isScrollCompensating)
            return;
        const currentScrollTop = this.scrollableContent.scrollTop;
        const scrollDelta = currentScrollTop - this.lastScrollTop;
        // Gem scroll delta for continueDrag
        this.scrollDeltaY += scrollDelta;
        this.lastScrollTop = currentScrollTop;
        // Kald continueDrag med nuværende mus position
        this.continueDrag(this.currentMousePosition);
    }
    /**
     * Stop drag animation
     */
    stopDragAnimation() {
        if (this.dragAnimationId !== null) {
            cancelAnimationFrame(this.dragAnimationId);
            this.dragAnimationId = null;
        }
    }
    /**
     * Clean up drag state
     */
    cleanupDragState() {
        this.previousColumn = null;
        this.originalElement = null;
        this.draggedClone = null;
        this.currentColumn = null;
        this.originalSourceColumn = null;
        this.isDragStarted = false;
        this.scrollDeltaY = 0;
        this.lastScrollTop = 0;
    }
    /**
     * Detect drop target - whether dropped in swp-day-column or swp-day-header
     */
    detectDropTarget(position) {
        // Traverse up the DOM tree to find the target container
        let currentElement = this.draggedClone;
        while (currentElement && currentElement !== document.body) {
            if (currentElement.tagName === 'SWP-ALLDAY-CONTAINER') {
                return 'swp-day-header';
            }
            if (currentElement.tagName === 'SWP-DAY-COLUMN') {
                return 'swp-day-column';
            }
            currentElement = currentElement.parentElement;
        }
        return null;
    }
    /**
     * Handle mouse enter on calendar header - simplified using native events
     */
    handleHeaderMouseEnter(event) {
        // Only handle if we're dragging a timed event (not all-day)
        if (!this.isDragStarted || !this.draggedClone) {
            return;
        }
        const position = { x: event.clientX, y: event.clientY };
        const targetColumn = ColumnDetectionUtils.getColumnBounds(position);
        if (targetColumn) {
            const calendarEvent = SwpEventElement.extractCalendarEventFromElement(this.draggedClone);
            const dragMouseEnterPayload = {
                targetColumn: targetColumn,
                mousePosition: position,
                originalElement: this.originalElement,
                draggedClone: this.draggedClone,
                calendarEvent: calendarEvent,
                replaceClone: (newClone) => {
                    this.draggedClone = newClone;
                    this.dragAnimationId === null;
                }
            };
            this.eventBus.emit('drag:mouseenter-header', dragMouseEnterPayload);
        }
    }
    /**
     * Handle mouse enter on day column - for converting all-day to timed events
     */
    handleColumnMouseEnter(event) {
        // Only handle if we're dragging an all-day event
        if (!this.isDragStarted || !this.draggedClone || !this.draggedClone.hasAttribute('data-allday')) {
            return;
        }
        const position = { x: event.clientX, y: event.clientY };
        const targetColumn = ColumnDetectionUtils.getColumnBounds(position);
        if (!targetColumn) {
            return;
        }
        // Calculate snapped Y position
        const snappedY = this.calculateSnapPosition(position.y, targetColumn);
        // Extract ICalendarEvent from the dragged clone
        const calendarEvent = SwpEventElement.extractCalendarEventFromElement(this.draggedClone);
        const dragMouseEnterPayload = {
            targetColumn: targetColumn,
            mousePosition: position,
            snappedY: snappedY,
            originalElement: this.originalElement,
            draggedClone: this.draggedClone,
            calendarEvent: calendarEvent,
            replaceClone: (newClone) => {
                this.draggedClone = newClone;
                this.dragAnimationId === null;
                this.stopDragAnimation();
            }
        };
        this.eventBus.emit('drag:mouseenter-column', dragMouseEnterPayload);
    }
    /**
     * Handle mouse leave from calendar header - simplified using native events
     */
    handleHeaderMouseLeave(event) {
        // Only handle if we're dragging an all-day event
        if (!this.isDragStarted || !this.draggedClone || !this.draggedClone.hasAttribute("data-allday")) {
            return;
        }
        const position = { x: event.clientX, y: event.clientY };
        const targetColumn = ColumnDetectionUtils.getColumnBounds(position);
        if (!targetColumn) {
            return;
        }
        const dragMouseLeavePayload = {
            targetDate: targetColumn.date,
            mousePosition: position,
            originalElement: this.originalElement,
            draggedClone: this.draggedClone
        };
        this.eventBus.emit('drag:mouseleave-header', dragMouseLeavePayload);
    }
}
//# sourceMappingURL=DragDropManager.js.map