ngx-virtual-dnd 1.1.1 → 1.1.2

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1,6 +1,8 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, signal, computed, effect, Injectable, inject, NgZone, ElementRef, Injector, viewChild, input, output, afterNextRender, ChangeDetectionStrategy, Component, Directive, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { InjectionToken, signal, computed, effect, Injectable, inject, NgZone, ElementRef, Injector, DestroyRef, viewChild, input, output, afterNextRender, ChangeDetectionStrategy, Component, Directive, untracked, EnvironmentInjector, TemplateRef, ViewContainerRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NgTemplateOutlet } from '@angular/common';
+import { fromEvent } from 'rxjs';
 
 /**
  * Initial state for the drag state service.
@@ -1057,6 +1059,7 @@ class VirtualScrollContainerComponent {
     #autoScrollService = inject(AutoScrollService);
     #ngZone = inject(NgZone);
     #injector = inject(Injector);
+    #destroyRef = inject(DestroyRef);
     /** ResizeObserver for automatic height detection */
     #resizeObserver = null;
     /** Measured height from ResizeObserver (used when containerHeight is not provided) */
@@ -1196,25 +1199,30 @@ class VirtualScrollContainerComponent {
     draggedItemId = computed(() => {
         return this.#dragState.draggedItem()?.draggableId ?? null;
     }, ...(ngDevMode ? [{ debugName: "draggedItemId" }] : []));
+    /** Map of item IDs to their indices - rebuilt only when items() changes (O(n) once, then O(1) lookups) */
+    #itemIndexMap = computed(() => {
+        const items = this.items();
+        const idFn = this.itemIdFn();
+        const map = new Map();
+        for (let i = 0; i < items.length; i++) {
+            map.set(idFn(items[i]), i);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "#itemIndexMap" }] : []));
     /** The index of the currently dragged item in the items array (-1 if not found or not dragging) */
     #draggedItemIndex = computed(() => {
         const draggedId = this.draggedItemId();
         if (!draggedId)
             return -1;
-        const items = this.items();
-        const idFn = this.itemIdFn();
-        for (let i = 0; i < items.length; i++) {
-            if (idFn(items[i]) === draggedId) {
-                return i;
-            }
-        }
-        return -1;
+        return this.#itemIndexMap().get(draggedId) ?? -1;
     }, ...(ngDevMode ? [{ debugName: "#draggedItemIndex" }] : []));
+    /** Memoized Set of sticky IDs - rebuilt only when effectiveStickyIds() changes */
+    #stickyIdsSet = computed(() => new Set(this.effectiveStickyIds()), ...(ngDevMode ? [{ debugName: "#stickyIdsSet" }] : []));
     /** Items to render, including sticky items and auto-placeholder */
     renderedItems = computed(() => {
         const items = this.items();
         const { start, end } = this.#renderRange();
-        const stickyIds = new Set(this.effectiveStickyIds());
+        const stickyIds = this.#stickyIdsSet();
         const idFn = this.itemIdFn();
         const draggedId = this.draggedItemId();
         // Check if we should insert a placeholder
@@ -1389,6 +1397,20 @@ class VirtualScrollContainerComponent {
                 }
             });
             this.#resizeObserver.observe(this.#elementRef.nativeElement);
+            // Set up scroll listener outside Angular zone using RxJS fromEvent
+            // This avoids template event binding which would mark the component dirty 60x/sec
+            fromEvent(this.#elementRef.nativeElement, 'scroll', { passive: true })
+                .pipe(takeUntilDestroyed(this.#destroyRef))
+                .subscribe(() => {
+                const newScrollTop = this.#elementRef.nativeElement.scrollTop;
+                // Only update if the scroll position has changed significantly
+                // (at least 10% of an item height, to reduce updates)
+                const threshold = Math.max(5, this.itemHeight() * 0.1);
+                if (Math.abs(newScrollTop - this.#scrollTop()) >= threshold) {
+                    this.#scrollTop.set(newScrollTop);
+                    this.scrollPositionChange.emit(newScrollTop);
+                }
+            });
         });
     }
     ngOnDestroy() {
@@ -1398,20 +1420,6 @@ class VirtualScrollContainerComponent {
         const id = this.scrollContainerId() ?? this.#generatedScrollId;
         this.#autoScrollService.unregisterContainer(id);
     }
-    /**
-     * Handle scroll events.
-     */
-    onScroll(event) {
-        const target = event.target;
-        const newScrollTop = target.scrollTop;
-        // Only update if the scroll position has changed significantly
-        // (at least 10% of an item height, to reduce updates)
-        const threshold = Math.max(5, this.itemHeight() * 0.1);
-        if (Math.abs(newScrollTop - this.#scrollTop()) >= threshold) {
-            this.#scrollTop.set(newScrollTop);
-            this.scrollPositionChange.emit(newScrollTop);
-        }
-    }
     /**
      * Scroll to a specific position.
      */
@@ -1446,7 +1454,7 @@ class VirtualScrollContainerComponent {
         this.scrollTo(newPosition);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: VirtualScrollContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VirtualScrollContainerComponent, isStandalone: true, selector: "vdnd-virtual-scroll", inputs: { itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, stickyItemIds: { classPropertyName: "stickyItemIds", publicName: "stickyItemIds", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: false, transformFunction: null }, autoPlaceholder: { classPropertyName: "autoPlaceholder", publicName: "autoPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoStickyDraggedItem: { classPropertyName: "autoStickyDraggedItem", publicName: "autoStickyDraggedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleRangeChange: "visibleRangeChange", scrollPositionChange: "scrollPositionChange" }, host: { listeners: { "scroll": "onScroll($event)" }, properties: { "style.height.px": "containerHeight() ?? null", "style.overflow": "\"auto\"", "style.position": "\"relative\"", "attr.data-item-height": "itemHeight()" }, classAttribute: "vdnd-virtual-scroll" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: VirtualScrollContainerComponent, isStandalone: true, selector: "vdnd-virtual-scroll", inputs: { itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: true, transformFunction: null }, scrollContainerId: { classPropertyName: "scrollContainerId", publicName: "scrollContainerId", isSignal: true, isRequired: false, transformFunction: null }, autoScrollEnabled: { classPropertyName: "autoScrollEnabled", publicName: "autoScrollEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoScrollConfig: { classPropertyName: "autoScrollConfig", publicName: "autoScrollConfig", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: true, transformFunction: null }, containerHeight: { classPropertyName: "containerHeight", publicName: "containerHeight", isSignal: true, isRequired: false, transformFunction: null }, overscan: { classPropertyName: "overscan", publicName: "overscan", isSignal: true, isRequired: false, transformFunction: null }, stickyItemIds: { classPropertyName: "stickyItemIds", publicName: "stickyItemIds", isSignal: true, isRequired: false, transformFunction: null }, itemIdFn: { classPropertyName: "itemIdFn", publicName: "itemIdFn", isSignal: true, isRequired: true, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null }, droppableId: { classPropertyName: "droppableId", publicName: "droppableId", isSignal: true, isRequired: false, transformFunction: null }, autoPlaceholder: { classPropertyName: "autoPlaceholder", publicName: "autoPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholderTemplate: { classPropertyName: "placeholderTemplate", publicName: "placeholderTemplate", isSignal: true, isRequired: false, transformFunction: null }, autoStickyDraggedItem: { classPropertyName: "autoStickyDraggedItem", publicName: "autoStickyDraggedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleRangeChange: "visibleRangeChange", scrollPositionChange: "scrollPositionChange" }, host: { properties: { "style.height.px": "containerHeight() ?? null", "style.overflow": "\"auto\"", "style.position": "\"relative\"", "attr.data-item-height": "itemHeight()" }, classAttribute: "vdnd-virtual-scroll" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="vdnd-virtual-scroll-content" #contentContainer>
       <!-- Single spacer maintains scroll height -->
       <div class="vdnd-virtual-scroll-spacer" [style.height.px]="totalHeight()"></div>
@@ -1482,7 +1490,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         '[style.overflow]': '"auto"',
                         '[style.position]': '"relative"',
                         '[attr.data-item-height]': 'itemHeight()',
-                        '(scroll)': 'onScroll($event)',
                     }, template: `
     <div class="vdnd-virtual-scroll-content" #contentContainer>
       <!-- Single spacer maintains scroll height -->
@@ -1878,8 +1885,8 @@ class DroppableDirective {
             const active = this.isActive();
             const placeholder = this.placeholderId();
             const draggedItem = this.#dragState.draggedItem();
-            const cursorPosition = this.#dragState.cursorPosition();
             const isDragging = this.#dragState.isDragging();
+            // NOTE: cursorPosition is read with untracked() below to avoid effect running 60x/sec
             // Cache state while active for use during drop handling
             if (active && isDragging && draggedItem) {
                 this.#cachedDragState = this.#dragState.getStateSnapshot();
@@ -1918,13 +1925,18 @@ class DroppableDirective {
             }
             // Handle over (placeholder changed)
             if (active && placeholder !== this.#previousPlaceholder) {
-                if (draggedItem && cursorPosition) {
-                    this.dragOver.emit({
-                        droppableId: this.vdndDroppable(),
-                        draggedItem,
-                        placeholderId: placeholder,
-                        position: cursorPosition,
-                    });
+                if (draggedItem) {
+                    // Use untracked() to read cursorPosition without tracking it as a dependency
+                    // This prevents the effect from running on every cursor move (60Hz during autoscroll)
+                    const cursorPosition = untracked(() => this.#dragState.cursorPosition());
+                    if (cursorPosition) {
+                        this.dragOver.emit({
+                            droppableId: this.vdndDroppable(),
+                            draggedItem,
+                            placeholderId: placeholder,
+                            position: cursorPosition,
+                        });
+                    }
                 }
             }
             this.#wasActive = active;
@@ -3395,106 +3407,128 @@ class VirtualForDirective {
         });
     }
     /**
-     * Update the rendered views.
+     * Update the rendered views with true view recycling.
+     * Views are kept in the DOM and have their context updated in place when possible.
      */
     #updateViews() {
         const items = this.vdndVirtualForOf();
         const { start, end } = this.#renderRange();
         const trackByFn = this.vdndVirtualForTrackBy();
         const placeholderIndex = this.#placeholderIndex();
-        // Clear view container but keep views in pool
-        this.#activeViews.forEach((view) => {
-            this.#viewPool.push(view);
-        });
-        this.#activeViews.clear();
-        this.#viewContainer.clear();
-        // Clear wrapper content
-        if (this.#wrapper) {
-            this.#wrapper.innerHTML = '';
-        }
-        const viewsToRender = [];
-        // Render items in range with placeholder
+        // 1. Calculate which keys we need and build the ordered list of items to render
+        const itemsToRender = [];
         for (let i = start; i <= end && i < items.length; i++) {
             // Insert placeholder before this item if needed
             if (placeholderIndex !== null && placeholderIndex === i) {
-                const placeholderContext = {
+                itemsToRender.push({
+                    key: '__placeholder__',
+                    context: {
+                        $implicit: { __vdndPlaceholder: true },
+                        index: -1,
+                        first: false,
+                        last: false,
+                        count: items.length,
+                        isPlaceholder: true,
+                    },
+                });
+            }
+            const item = items[i];
+            itemsToRender.push({
+                key: trackByFn(i, item),
+                context: {
+                    $implicit: item,
+                    index: i,
+                    first: i === start,
+                    last: i === end || i === items.length - 1,
+                    count: items.length,
+                    isPlaceholder: false,
+                },
+            });
+        }
+        // Insert placeholder at end if needed
+        if (placeholderIndex !== null && placeholderIndex >= items.length) {
+            itemsToRender.push({
+                key: '__placeholder__',
+                context: {
                     $implicit: { __vdndPlaceholder: true },
                     index: -1,
                     first: false,
-                    last: false,
+                    last: true,
                     count: items.length,
                     isPlaceholder: true,
-                };
-                const placeholderView = this.#getOrCreateView('__placeholder__', placeholderContext);
-                viewsToRender.push(placeholderView);
-            }
-            const item = items[i];
-            const key = trackByFn(i, item);
-            const context = {
-                $implicit: item,
-                index: i,
-                first: i === start,
-                last: i === end || i === items.length - 1,
-                count: items.length,
-                isPlaceholder: false,
-            };
-            const view = this.#getOrCreateView(key, context);
-            viewsToRender.push(view);
+                },
+            });
         }
-        // Insert placeholder at end if needed
-        if (placeholderIndex !== null && placeholderIndex >= items.length) {
-            const placeholderContext = {
-                $implicit: { __vdndPlaceholder: true },
-                index: -1,
-                first: false,
-                last: true,
-                count: items.length,
-                isPlaceholder: true,
-            };
-            const placeholderView = this.#getOrCreateView('__placeholder__', placeholderContext);
-            viewsToRender.push(placeholderView);
+        const neededKeys = new Set(itemsToRender.map((item) => item.key));
+        // 2. Remove views we no longer need (move to pool)
+        for (const [key, view] of this.#activeViews) {
+            if (!neededKeys.has(key)) {
+                const index = this.#viewContainer.indexOf(view);
+                if (index >= 0) {
+                    this.#viewContainer.detach(index);
+                }
+                this.#viewPool.push(view);
+                this.#activeViews.delete(key);
+            }
         }
-        // Insert views into ViewContainerRef (for change detection) and move root nodes to wrapper
-        viewsToRender.forEach((view, index) => {
-            this.#viewContainer.insert(view, index);
-            // Move view's root nodes into the wrapper for transform-based positioning
+        // 3. For each needed item, update existing view context or get/create from pool
+        const viewsInOrder = [];
+        for (const { key, context } of itemsToRender) {
+            let view = this.#activeViews.get(key);
+            if (view) {
+                // View exists - update context in place (no DOM manipulation needed)
+                Object.assign(view.context, context);
+                view.markForCheck();
+            }
+            else {
+                // Need a new view - try pool first, then create
+                view = this.#viewPool.pop();
+                if (view) {
+                    Object.assign(view.context, context);
+                    view.markForCheck();
+                }
+                else {
+                    view = this.#templateRef.createEmbeddedView(context);
+                }
+                this.#activeViews.set(key, view);
+            }
+            viewsInOrder.push(view);
+        }
+        // 4. Ensure views are in correct order in ViewContainerRef and wrapper
+        for (let i = 0; i < viewsInOrder.length; i++) {
+            const view = viewsInOrder[i];
+            const currentIndex = this.#viewContainer.indexOf(view);
+            if (currentIndex !== i) {
+                // View needs to be inserted or moved
+                if (currentIndex >= 0) {
+                    this.#viewContainer.move(view, i);
+                }
+                else {
+                    this.#viewContainer.insert(view, i);
+                }
+            }
+            // Ensure view's root nodes are in the wrapper (for newly inserted views)
             if (this.#wrapper) {
-                view.rootNodes.forEach((node) => {
-                    this.#wrapper.appendChild(node);
-                });
+                const expectedChild = this.#wrapper.children[i];
+                for (const node of view.rootNodes) {
+                    if (node instanceof HTMLElement && node !== expectedChild) {
+                        // Node is not at expected position, insert it
+                        if (expectedChild) {
+                            this.#wrapper.insertBefore(node, expectedChild);
+                        }
+                        else {
+                            this.#wrapper.appendChild(node);
+                        }
+                    }
+                }
             }
-        });
-        // Destroy unused views in pool (keep some for reuse)
+        }
+        // 5. Destroy unused views in pool (keep some for reuse)
         while (this.#viewPool.length > 10) {
             const view = this.#viewPool.pop();
             view?.destroy();
         }
     }
-    /**
-     * Get an existing view from pool or create a new one.
-     */
-    #getOrCreateView(key, context) {
-        // Check if we have this view active already
-        let view = this.#activeViews.get(key);
-        if (view) {
-            // Update context
-            Object.assign(view.context, context);
-            view.markForCheck();
-            return view;
-        }
-        // Try to reuse from pool
-        view = this.#viewPool.pop();
-        if (view) {
-            Object.assign(view.context, context);
-            view.markForCheck();
-        }
-        else {
-            // Create new view
-            view = this.#templateRef.createEmbeddedView(context);
-        }
-        this.#activeViews.set(key, view);
-        return view;
-    }
     /**
      * Static method for Angular's structural directive microsyntax.
      */