ngx-virtual-dnd 3.2.0-alpha.0 → 3.2.0-alpha.1

package/fesm2022/ngx-virtual-dnd.mjs

@@ -1882,6 +1882,8 @@ class KeyboardDragService {
     #dragState = inject(DragStateService);
     /** Total item count for the current droppable (set by droppable on keyboard drag start) */
     #totalItemCount = signal(0, ...(ngDevMode ? [{ debugName: "#totalItemCount" }] : []));
+    /** Per-droppable callbacks that scroll the placeholder into view (see `registerRevealer`) */
+    #revealers = new Map();
     /** Whether a keyboard drag is currently active */
     isActive = computed(() => this.#dragState.isKeyboardDrag() && this.#dragState.isDragging(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
     /** Current target index during keyboard navigation */
@@ -1917,9 +1919,10 @@ class KeyboardDragService {
         if (!this.isActive()) {
             return targetIndex;
         }
-        const totalItems = this.#totalItemCount();
-        const clampedIndex = Math.max(0, Math.min(targetIndex, totalItems));
+        const maxIndex = this.#maxTargetIndex(this.activeDroppableId());
+        const clampedIndex = Math.max(0, Math.min(targetIndex, maxIndex));
         this.#dragState.setKeyboardTargetIndex(clampedIndex);
+        this.#revealActivePlaceholder();
         return clampedIndex;
     }
     /**
@@ -1947,8 +1950,26 @@ class KeyboardDragService {
             return;
         }
         this.#totalItemCount.set(totalItemCount);
-        const clampedIndex = Math.max(0, Math.min(targetIndex, totalItemCount));
+        const clampedIndex = Math.max(0, Math.min(targetIndex, this.#maxTargetIndex(droppableId)));
         this.#dragState.setKeyboardActiveDroppable(droppableId, clampedIndex);
+        this.#revealActivePlaceholder();
+    }
+    /**
+     * Register the callback that scrolls a droppable's placeholder into view. It runs
+     * synchronously on every keyboard move into or within that droppable, so a drop that
+     * follows before the next render still lands inside the rendered range.
+     */
+    registerRevealer(droppableId, reveal) {
+        this.#revealers.set(droppableId, reveal);
+    }
+    /**
+     * Unregister a droppable's reveal callback. Ignored if another callback has since been
+     * registered under the same ID.
+     */
+    unregisterRevealer(droppableId, reveal) {
+        if (this.#revealers.get(droppableId) === reveal) {
+            this.#revealers.delete(droppableId);
+        }
     }
     /**
      * Complete the keyboard drag (Space or Enter to drop).
@@ -1974,6 +1995,22 @@ class KeyboardDragService {
     setTotalItemCount(count) {
         this.#totalItemCount.set(count);
     }
+    #revealActivePlaceholder() {
+        const droppableId = this.activeDroppableId();
+        if (droppableId !== null) {
+            this.#revealers.get(droppableId)?.();
+        }
+    }
+    /**
+     * Last valid target index in the given droppable. Targets use the drop convention (the item's
+     * final index after it leaves its source), so the source list ends at `totalItemCount - 1`,
+     * while any other list can be appended to at `totalItemCount`.
+     */
+    #maxTargetIndex(droppableId) {
+        const totalItems = this.#totalItemCount();
+        const isSourceList = droppableId !== null && droppableId === this.#dragState.sourceDroppableId();
+        return isSourceList ? Math.max(0, totalItems - 1) : totalItems;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardDragService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: KeyboardDragService, providedIn: 'root' });
 }
@@ -2662,6 +2699,7 @@ class VirtualScrollContainerComponent {
     #elementRef = inject((ElementRef));
     #autoScrollService = inject(AutoScrollService);
     #dragIndexCalculator = inject(DragIndexCalculatorService);
+    #keyboardDrag = inject(KeyboardDragService);
     #ngZone = inject(NgZone);
     #injector = inject(Injector);
     /** Cleanup function for scroll listener */
@@ -2979,43 +3017,19 @@ class VirtualScrollContainerComponent {
                 untracked(() => animator.beforeUpdate(isDragging, placeholderIndex));
             });
         }
-        // Keyboard drag autoscroll: scroll to keep target index visible
-        effect(() => {
-            // Only apply when this droppable is active during keyboard drag
-            if (!this.#dragState.isKeyboardDrag())
-                return;
-            const activeDroppable = this.#dragState.activeDroppableId();
-            if (activeDroppable !== this.droppableId())
-                return;
-            const targetIndex = this.#dragState.keyboardTargetIndex();
-            if (targetIndex === null)
-                return;
-            const strategy = this.#strategy();
-            strategy.version();
-            const height = this.effectiveHeight();
-            if (height <= 0)
+        // Keyboard drag autoscroll: keep the placeholder visible. Arrow keys call
+        // #revealPlaceholder synchronously (through KeyboardDragService) so a drop right after a
+        // move never lands outside the rendered range; this effect re-runs it when item
+        // measurements or the viewport height change during the drag.
+        effect((onCleanup) => {
+            const droppableId = this.droppableId();
+            if (!droppableId)
                 return;
-            const element = this.#elementRef.nativeElement;
-            const currentScrollTop = element.scrollTop;
-            // Calculate target item position using strategy
-            const targetTop = strategy.getOffsetForIndex(targetIndex);
-            const targetBottom = targetTop + strategy.getItemHeight(targetIndex);
-            // Calculate visible range
-            const viewportTop = currentScrollTop;
-            const viewportBottom = currentScrollTop + height;
-            // Check if target is fully visible
-            if (targetTop < viewportTop) {
-                // Target is above viewport - scroll up
-                element.scrollTop = targetTop;
-                this.#scrollTop.set(targetTop);
-            }
-            else if (targetBottom > viewportBottom) {
-                // Target is below viewport - scroll down
-                const newScrollTop = targetBottom - height;
-                element.scrollTop = newScrollTop;
-                this.#scrollTop.set(newScrollTop);
-            }
+            const reveal = () => untracked(() => this.#revealPlaceholder());
+            this.#keyboardDrag.registerRevealer(droppableId, reveal);
+            onCleanup(() => this.#keyboardDrag.unregisterRevealer(droppableId, reveal));
         });
+        effect(() => this.#revealPlaceholder());
         // Preserve scroll position when drag ends at bottom of list.
         // Safety net: totalHeight no longer shrinks during drag (getTotalHeight
         // ignores exclusion), but this logic remains as harmless protection
@@ -3096,6 +3110,50 @@ class VirtualScrollContainerComponent {
             this.#observeRenderedItems();
         }
     }
+    /**
+     * Scroll so the placeholder is fully visible during a keyboard drag into this list.
+     * Reads only signals and strategy offsets, so it works before the placeholder renders.
+     */
+    #revealPlaceholder() {
+        // Only apply when this droppable is active during keyboard drag
+        if (!this.#dragState.isKeyboardDrag())
+            return;
+        const activeDroppable = this.#dragState.activeDroppableId();
+        if (activeDroppable !== this.droppableId())
+            return;
+        // The placeholder renders before the item at placeholderIndex. Below the source in the
+        // same list that is keyboardTargetIndex + 1: the dragged item's slot is excluded.
+        if (this.#dragState.keyboardTargetIndex() === null)
+            return;
+        const placeholderIndex = this.placeholderIndex();
+        if (placeholderIndex < 0)
+            return;
+        const strategy = this.#strategy();
+        strategy.version();
+        const height = this.effectiveHeight();
+        if (height <= 0)
+            return;
+        const element = this.#elementRef.nativeElement;
+        const currentScrollTop = element.scrollTop;
+        // Calculate placeholder position using strategy
+        const targetTop = strategy.getOffsetForIndex(placeholderIndex);
+        const targetBottom = targetTop + this.placeholderHeight();
+        // Calculate visible range
+        const viewportTop = currentScrollTop;
+        const viewportBottom = currentScrollTop + height;
+        // Check if target is fully visible
+        if (targetTop < viewportTop) {
+            // Target is above viewport - scroll up
+            element.scrollTop = targetTop;
+            this.#scrollTop.set(targetTop);
+        }
+        else if (targetBottom > viewportBottom) {
+            // Target is below viewport - scroll down
+            const newScrollTop = targetBottom - height;
+            element.scrollTop = newScrollTop;
+            this.#scrollTop.set(newScrollTop);
+        }
+    }
     ngOnDestroy() {
         this.#scrollCleanup?.();
         this.#resizeCleanup?.();
@@ -4754,9 +4812,13 @@ class KeyboardDragHandler {
             sourceIndex,
             destinationIndex,
         });
+        // The item stays in its source list when there is no valid target
+        const fallbackDroppableId = hasValidTarget
+            ? activeDroppableId
+            : this.#deps.dragState.sourceDroppableId();
         this.#deps.keyboardDrag.completeKeyboardDrag();
         // Restore focus to the moved element after state updates
-        this.#restoreFocus(ctx.draggableId);
+        this.#restoreFocus(ctx.draggableId, fallbackDroppableId);
     }
     /**
      * Cancel a keyboard drag operation.
@@ -4764,6 +4826,8 @@ class KeyboardDragHandler {
     cancel() {
         const ctx = this.#deps.getContext();
         const sourceIndex = this.#deps.dragState.sourceIndex() ?? 0;
+        // A cancelled item goes back to its source list
+        const sourceDroppableId = this.#deps.dragState.sourceDroppableId();
         // Remove document listener
         this.#cleanupDocumentListener();
         // Clear droppable metadata cache from this drag session
@@ -4779,7 +4843,7 @@ class KeyboardDragHandler {
         });
         this.#deps.keyboardDrag.cancelKeyboardDrag();
         // Restore focus to the original element after state updates
-        this.#restoreFocus(ctx.draggableId);
+        this.#restoreFocus(ctx.draggableId, sourceDroppableId);
     }
     /**
      * Teardown — remove any active document listener.
@@ -4794,20 +4858,21 @@ class KeyboardDragHandler {
      *
      * Uses EnvironmentInjector to ensure callback runs even if the directive
      * is destroyed during cross-list moves.
+     *
+     * `fallbackDroppableId` is the list whose first draggable gets focus when the element is not
+     * rendered (for example scrolled out of a virtual list). Callers read it before ending the
+     * drag, which clears the drag state.
      */
-    #restoreFocus(draggableId) {
-        // Capture the destination droppable BEFORE scheduling afterNextRender
-        // (the directive may be destroyed during cross-list moves)
-        const destinationDroppableId = this.#deps.dragState.activeDroppableId();
+    #restoreFocus(draggableId, fallbackDroppableId) {
         afterNextRender(() => {
             const element = queryByAttribute(document, 'data-draggable-id', draggableId);
             if (element) {
                 element.focus();
             }
-            else if (destinationDroppableId) {
-                // Fallback: focus the first draggable in the destination container
-                const destination = queryByAttribute(document, 'data-droppable-id', destinationDroppableId);
-                const firstDraggable = destination?.querySelector('[data-draggable-id]');
+            else if (fallbackDroppableId) {
+                // Fallback: focus the first draggable in the list the item ended up in
+                const container = queryByAttribute(document, 'data-droppable-id', fallbackDroppableId);
+                const firstDraggable = container?.querySelector('[data-draggable-id]');
                 firstDraggable?.focus();
             }
         }, { injector: this.#deps.envInjector });