ngx-virtual-dnd 3.0.0 → 3.0.1

package/fesm2022/ngx-virtual-dnd.mjs

@@ -710,6 +710,8 @@ class PositionCalculatorService {
     #DRAGGABLE_ID_ATTR = 'data-draggable-id';
     /** Maximum DOM levels to traverse when looking for parent elements */
     #MAX_PARENT_TRAVERSAL = 15;
+    /** Reusable result object for getNearEdge (avoids per-frame allocation) */
+    #nearEdgeResult = { top: false, bottom: false, left: false, right: false };
     /**
      * Find the droppable element at a given point.
      *
@@ -723,9 +725,14 @@ class PositionCalculatorService {
      * @returns The droppable element, or null if none found
      */
     findDroppableAtPoint(x, y, draggedElement, groupName) {
-        // Temporarily hide the dragged element to "see through" it
-        const originalPointerEvents = draggedElement.style.pointerEvents;
-        draggedElement.style.pointerEvents = 'none';
+        // Skip pointerEvents toggle when element is already hidden (display: none during active drag).
+        // offsetParent is null for hidden elements — toggling style would force a style recalculation.
+        const isHidden = draggedElement.offsetParent === null;
+        let originalPointerEvents;
+        if (!isHidden) {
+            originalPointerEvents = draggedElement.style.pointerEvents;
+            draggedElement.style.pointerEvents = 'none';
+        }
         try {
             const elementAtPoint = document.elementFromPoint(x, y);
             if (!elementAtPoint) {
@@ -734,8 +741,9 @@ class PositionCalculatorService {
             return this.getDroppableParent(elementAtPoint, groupName);
         }
         finally {
-            // Always restore pointer events
-            draggedElement.style.pointerEvents = originalPointerEvents;
+            if (!isHidden) {
+                draggedElement.style.pointerEvents = originalPointerEvents;
+            }
         }
     }
     /**
@@ -747,9 +755,12 @@ class PositionCalculatorService {
      * @returns The draggable element, or null if none found
      */
     findDraggableAtPoint(x, y, draggedElement) {
-        // Temporarily hide the dragged element
-        const originalPointerEvents = draggedElement.style.pointerEvents;
-        draggedElement.style.pointerEvents = 'none';
+        const isHidden = draggedElement.offsetParent === null;
+        let originalPointerEvents;
+        if (!isHidden) {
+            originalPointerEvents = draggedElement.style.pointerEvents;
+            draggedElement.style.pointerEvents = 'none';
+        }
         try {
             const elementAtPoint = document.elementFromPoint(x, y);
             if (!elementAtPoint) {
@@ -758,7 +769,9 @@ class PositionCalculatorService {
             return this.getDraggableParent(elementAtPoint);
         }
         finally {
-            draggedElement.style.pointerEvents = originalPointerEvents;
+            if (!isHidden) {
+                draggedElement.style.pointerEvents = originalPointerEvents;
+            }
         }
     }
     /**
@@ -842,12 +855,11 @@ class PositionCalculatorService {
      * @returns Object indicating which edges are near
      */
     getNearEdge(position, containerRect, threshold) {
-        return {
-            top: position.y - containerRect.top <= threshold,
-            bottom: containerRect.bottom - position.y <= threshold,
-            left: position.x - containerRect.left <= threshold,
-            right: containerRect.right - position.x <= threshold,
-        };
+        this.#nearEdgeResult.top = position.y - containerRect.top <= threshold;
+        this.#nearEdgeResult.bottom = containerRect.bottom - position.y <= threshold;
+        this.#nearEdgeResult.left = position.x - containerRect.left <= threshold;
+        this.#nearEdgeResult.right = containerRect.right - position.x <= threshold;
+        return this.#nearEdgeResult;
     }
     /**
      * Determine if the cursor is inside a container.
@@ -967,6 +979,11 @@ class AutoScrollService {
     #onScrollCallback = null;
     /** Optional cursor position override for edge detection (bypasses DragState read) */
     #cursorOverride = null;
+    /** Last tick cursor position for stationary detection */
+    #lastTickCursorX = NaN;
+    #lastTickCursorY = NaN;
+    /** Reusable direction object for tick loop (avoids per-frame allocation) */
+    #tickDirection = { x: 0, y: 0 };
     /** Current scroll state */
     #scrollState = {
         containerId: null,
@@ -1013,11 +1030,12 @@ class AutoScrollService {
         }
         this.#onScrollCallback = null;
         this.#cursorOverride = null;
-        this.#scrollState = {
-            containerId: null,
-            direction: { x: 0, y: 0 },
-            speed: 0,
-        };
+        this.#lastTickCursorX = NaN;
+        this.#lastTickCursorY = NaN;
+        this.#scrollState.containerId = null;
+        this.#scrollState.direction.x = 0;
+        this.#scrollState.direction.y = 0;
+        this.#scrollState.speed = 0;
     }
     /**
      * Override the cursor position used for edge detection.
@@ -1044,6 +1062,15 @@ class AutoScrollService {
             this.#animationFrameId = requestAnimationFrame(() => this.#tick());
             return;
         }
+        // Skip container iteration when cursor hasn't moved and no scrolling is active
+        if (cursor.x === this.#lastTickCursorX &&
+            cursor.y === this.#lastTickCursorY &&
+            !this.isScrolling()) {
+            this.#animationFrameId = requestAnimationFrame(() => this.#tick());
+            return;
+        }
+        this.#lastTickCursorX = cursor.x;
+        this.#lastTickCursorY = cursor.y;
         let scrollPerformed = false;
         // Check each container
         for (const [id, { element, config }] of this.#scrollableContainers) {
@@ -1055,8 +1082,10 @@ class AutoScrollService {
             }
             // Check edges
             const nearEdge = this.#positionCalculator.getNearEdge(cursor, rect, config.threshold);
-            // Calculate scroll direction and speed
-            const direction = { x: 0, y: 0 };
+            // Calculate scroll direction and speed (reuse object to avoid per-frame allocation)
+            const direction = this.#tickDirection;
+            direction.x = 0;
+            direction.y = 0;
             let maxDistance = 0;
             if (nearEdge.top) {
                 direction.y = -1;
@@ -1082,7 +1111,10 @@ class AutoScrollService {
                     const distanceRatio = maxDistance / config.threshold;
                     speed = Math.min(config.maxSpeed, Math.max(1, config.maxSpeed * distanceRatio));
                 }
-                this.#scrollState = { containerId: id, direction, speed };
+                this.#scrollState.containerId = id;
+                this.#scrollState.direction.x = direction.x;
+                this.#scrollState.direction.y = direction.y;
+                this.#scrollState.speed = speed;
                 this.#performScroll(element, direction, speed);
                 scrollPerformed = true;
                 break;
@@ -1090,11 +1122,10 @@ class AutoScrollService {
         }
         // Reset scroll state if no scrolling was performed
         if (!scrollPerformed) {
-            this.#scrollState = {
-                containerId: null,
-                direction: { x: 0, y: 0 },
-                speed: 0,
-            };
+            this.#scrollState.containerId = null;
+            this.#scrollState.direction.x = 0;
+            this.#scrollState.direction.y = 0;
+            this.#scrollState.speed = 0;
         }
         this.#animationFrameId = requestAnimationFrame(() => this.#tick());
     }
@@ -1510,6 +1541,8 @@ class DragIndexCalculatorService {
     #positionCalculator = inject(PositionCalculatorService);
     /** Registered strategies by droppable ID */
     #strategies = new Map();
+    /** Cached droppable metadata to avoid repeated DOM queries during drag */
+    #droppableCache = new Map();
     /**
      * Register a virtual scroll strategy for a droppable.
      * Used by virtual scroll components to provide dynamic height lookups.
@@ -1530,60 +1563,83 @@ class DragIndexCalculatorService {
     getStrategyForDroppable(droppableId) {
         return this.#strategies.get(droppableId);
     }
+    clearCache() {
+        this.#droppableCache.clear();
+    }
+    #resolveDroppable(droppableElement, draggedItemHeight) {
+        const cached = this.#droppableCache.get(droppableElement);
+        if (cached)
+            return cached;
+        const virtualScrollElement = droppableElement.querySelector('vdnd-virtual-scroll');
+        const virtualContentElement = (droppableElement.matches('vdnd-virtual-content')
+            ? droppableElement
+            : droppableElement.closest('vdnd-virtual-content'));
+        let containerType;
+        let scrollContainer;
+        let scrollableParent = null;
+        if (virtualScrollElement) {
+            containerType = 'virtualScroll';
+            scrollContainer = virtualScrollElement;
+        }
+        else if (virtualContentElement) {
+            containerType = 'virtualContent';
+            scrollableParent = virtualContentElement.closest('.vdnd-scrollable');
+            scrollContainer = scrollableParent ?? virtualContentElement;
+        }
+        else {
+            containerType = 'fallback';
+            scrollContainer = droppableElement;
+        }
+        const droppableId = this.#positionCalculator.getDroppableId(droppableElement);
+        const strategy = (droppableId ? this.#strategies.get(droppableId) : null) ?? null;
+        const configuredHeight = virtualScrollElement?.getAttribute('data-item-height') ??
+            virtualContentElement?.getAttribute('data-item-height');
+        const parsedHeight = configuredHeight ? parseFloat(configuredHeight) : Number.NaN;
+        const itemHeight = Number.isFinite(parsedHeight)
+            ? parsedHeight
+            : this.#getDraggedItemHeightFallback(draggedItemHeight, 50);
+        const isConstrainedToContainer = droppableElement.hasAttribute('data-constrain-to-container');
+        const entry = {
+            droppableId,
+            containerType,
+            scrollContainer,
+            virtualScrollElement,
+            virtualContentElement,
+            scrollableParent,
+            itemHeight,
+            isConstrainedToContainer,
+            strategy,
+        };
+        this.#droppableCache.set(droppableElement, entry);
+        return entry;
+    }
     getTotalItemCount(args) {
         return this.#getTotalItemCount(args.droppableElement, args.isSameList, args.draggedItemHeight);
     }
     calculatePlaceholderIndex(args) {
         const { droppableElement, position, grabOffset, draggedItemHeight, sourceDroppableId, sourceIndex, } = args;
-        // Get container and measurements - handle both embedded virtual-scroll and page-level scroll
-        const virtualScroll = droppableElement.querySelector('vdnd-virtual-scroll');
-        const virtualContent = droppableElement.matches('vdnd-virtual-content')
-            ? droppableElement
-            : droppableElement.closest('vdnd-virtual-content');
-        let container;
+        // Resolve cached metadata (DOM queries run once per droppable per drag session)
+        const cache = this.#resolveDroppable(droppableElement, draggedItemHeight);
+        // Live reads: getBoundingClientRect() and scrollTop change during scroll
         let currentScrollTop;
         let rect;
-        if (virtualScroll) {
-            // Standard virtual scroll component - scroll container is the virtual scroll element
-            container = virtualScroll;
-            rect = container.getBoundingClientRect();
-            currentScrollTop = container.scrollTop;
+        if (cache.containerType === 'virtualScroll') {
+            rect = cache.scrollContainer.getBoundingClientRect();
+            currentScrollTop = cache.scrollContainer.scrollTop;
         }
-        else if (virtualContent) {
-            // Page-level scroll: find scrollable parent and get adjusted scroll
-            const scrollableParent = virtualContent.closest('.vdnd-scrollable');
-            if (scrollableParent) {
-                container = scrollableParent;
-                // Use scroll container rect + content offset to avoid stale virtualContent rects.
-                rect = container.getBoundingClientRect();
-                const contentOffsetAttr = virtualContent.getAttribute('data-content-offset');
-                const contentOffset = contentOffsetAttr ? parseFloat(contentOffsetAttr) : 0;
-                const offsetValue = Number.isFinite(contentOffset) ? contentOffset : 0;
-                currentScrollTop = container.scrollTop - offsetValue;
-            }
-            else {
-                container = virtualContent;
-                rect = container.getBoundingClientRect();
-                currentScrollTop = 0;
-            }
+        else if (cache.containerType === 'virtualContent' && cache.scrollableParent) {
+            rect = cache.scrollContainer.getBoundingClientRect();
+            const contentOffsetAttr = cache.virtualContentElement.getAttribute('data-content-offset');
+            const contentOffset = contentOffsetAttr ? parseFloat(contentOffsetAttr) : 0;
+            const offsetValue = Number.isFinite(contentOffset) ? contentOffset : 0;
+            currentScrollTop = cache.scrollContainer.scrollTop - offsetValue;
         }
         else {
-            // Fallback: use droppable element directly
-            container = droppableElement;
-            rect = container.getBoundingClientRect();
-            currentScrollTop = container.scrollTop;
-        }
-        // Check if a registered strategy exists for this droppable
-        const currentDroppableId = this.#positionCalculator.getDroppableId(droppableElement);
-        const strategy = (currentDroppableId ? this.#strategies.get(currentDroppableId) : null) ?? null;
-        // Prefer configured item height from virtual scroll/content over actual element height.
-        // This prevents drift when actual element height differs from grid spacing.
-        const configuredHeight = virtualScroll?.getAttribute('data-item-height') ??
-            virtualContent?.getAttribute('data-item-height');
-        const parsedHeight = configuredHeight ? parseFloat(configuredHeight) : Number.NaN;
-        const itemHeight = Number.isFinite(parsedHeight)
-            ? parsedHeight
-            : this.#getDraggedItemHeightFallback(draggedItemHeight, 50);
+            rect = cache.scrollContainer.getBoundingClientRect();
+            currentScrollTop =
+                cache.containerType === 'virtualContent' ? 0 : cache.scrollContainer.scrollTop;
+        }
+        const { strategy, itemHeight, droppableId: currentDroppableId, isConstrainedToContainer, } = cache;
         // Calculate preview center position mathematically
         // The preview is positioned at: cursorPosition - grabOffset (see drag-preview.component.ts)
         // So preview center = cursorPosition.y - grabOffset.y + previewHeight/2
@@ -1593,7 +1649,6 @@ class DragIndexCalculatorService {
         const previewTopY = position.y - (grabOffset?.y ?? 0);
         const previewBottomY = previewTopY + previewHeight;
         const previewCenterY = previewTopY + previewHeight / 2;
-        const isConstrainedToContainer = droppableElement.hasAttribute('data-constrain-to-container');
         // Capped center probe: use preview center but limit how deep the probe reaches.
         // The cap prevents a tall preview (e.g. 120px among 60px items) from overshooting
         // multiple positions — the center would land 2+ items away, but the cap keeps it
@@ -1634,8 +1689,15 @@ class DragIndexCalculatorService {
                 placeholderIndex = visualIndex + 1;
             }
         }
-        // Get total items for clamping
-        const totalItems = this.#getTotalItemCount(droppableElement, isSameList, draggedItemHeight);
+        // Get total items using cached strategy to avoid duplicate DOM queries
+        let totalItems;
+        const cachedItemCount = strategy?.getItemCount();
+        if (cachedItemCount !== undefined && Number.isFinite(cachedItemCount)) {
+            totalItems = Math.max(0, cachedItemCount);
+        }
+        else {
+            totalItems = this.#getTotalItemCount(droppableElement, isSameList, draggedItemHeight);
+        }
         // Edge detection: allow dropping at the END of the list when cursor is near bottom edge.
         // Due to max scroll limits, the math alone can't reach totalItems when the list is longer
         // than the viewport. If cursor is in the bottom portion of the container and we're at
@@ -3800,6 +3862,8 @@ class KeyboardDragHandler {
         const destinationIndex = this.#deps.dragState.placeholderIndex();
         // Remove document listener
         this.#cleanupDocumentListener();
+        // Clear droppable metadata cache from this drag session
+        this.#deps.dragIndexCalculator.clearCache();
         // Emit drag end event
         this.#deps.callbacks.onDragEnd({
             draggableId: ctx.draggableId,
@@ -3821,6 +3885,8 @@ class KeyboardDragHandler {
         const sourceIndex = this.#deps.dragState.sourceIndex() ?? 0;
         // Remove document listener
         this.#cleanupDocumentListener();
+        // Clear droppable metadata cache from this drag session
+        this.#deps.dragIndexCalculator.clearCache();
         // Emit drag end event
         this.#deps.callbacks.onDragEnd({
             draggableId: ctx.draggableId,
@@ -4604,6 +4670,8 @@ class DraggableDirective {
         // No ngZone.run() needed - signals work outside zone and effects react automatically
         // Stop auto-scroll monitoring
         this.#autoScroll.stopMonitoring();
+        // Clear droppable metadata cache from this drag session
+        this.#dragIndexCalculator.clearCache();
         // Reset cached constraint state
         this.#constrainToContainer = false;
         this.#constraintElement = null;