Fix delete & add scrollToBottomForce method & add new addMethod

Author: artomenwork

README.md

@@ -47,15 +47,6 @@ Try the live demo here: [StackBlitz Demo](https://stackblitz.com/edit/stackblitz
 - Simpler integration, less boilerplate
 - Designed for chat, feeds, and any list with variable content
 
-## 🌐 Browser Support
-
-- Chrome (latest 2 versions)
-- Firefox (latest 2 versions)
-- Edge (latest 2 versions)
-- Safari (latest 2 versions)
-- Opera (latest 2 versions)
-- Mobile browsers (iOS Safari, Chrome for Android)
-
 ## Quick Start
 
 ### 1) Template
@@ -157,53 +148,113 @@ export class AppComponent {
   - `get(id: ItemId, count: number): Observable<T[]>` — load items relative to a specific id.  
   - `settings.bufferSize` — page size.  
   - `settings.heightToLoadMore` — distance (in px) from the edge to trigger loading.
-- `datasource.adapter` — get the Adapter instance for programmatic list control.
+  - `settings.addMethod` — defines how items are added to the view. Defaults to `fallback`.
+- `datasource.adapter` — provides methods for programmatic list control:
+  - `addItem(item: T): boolean` — Adds an item to the list. If the scroll is at the bottom, the item is immediately visible. Otherwise, it will appear when the user scrolls to the bottom.
+  - `updateItem(id: string, changes: Partial<T>): boolean` — Updates an item by its ID with the provided changes.
+  - `deleteItem(id: string): boolean` — Deletes an item by its ID.
+  - `scrollToId(id: string): boolean` — Scrolls to the item with the specified ID.
+  - `scrollToBottomForce(): boolean` — Forces the scroll to the bottom of the list.
 
-### Adapter API
+## 📖 Adapter API
 
 You can access the adapter via `datasource.adapter`. The adapter provides convenient methods to manage the list items programmatically. Each method returns a boolean indicating whether the operation was successful.
 
-#### Methods
-
-- `addItem(item: T): boolean`  
-  Adds an item to the end of the list. If the scroll is at the very bottom, the new item will appear immediately in the view. If the scroll is not at the bottom, the item will be shown only when the user scrolls to the bottom.
-  - **Parameters:**
-    - `item: T` — the item to add (must have a unique `id`)
-  - **Returns:** `boolean` — `true` if the item was added, `false` otherwise
-
-- `addFirstItem(item: T): boolean`  
-  Adds an item to the beginning of the list.
-  - **Parameters:**
-    - `item: T` — the item to add (must have a unique `id`)
-  - **Returns:** `boolean` — `true` if the item was added, `false` otherwise
-
-- `update(id: ItemId, data: T): boolean`  
-  Updates an existing item by its `id`.
-  - **Parameters:**
-    - `id: ItemId` — the id of the item to update
-    - `data: T` — the new data for the item
-  - **Returns:** `boolean` — `true` if the item was found and updated, `false` otherwise
-
-- `findAndUpdate(findOptions: { find: (item: T) => boolean; data: T }): boolean`  
-  Finds an item by a custom predicate and updates it.
-  - **Parameters:**
-    - `find: (item: T) => boolean` — function to find the item
-    - `data: T` — the new data for the item
-  - **Returns:** `boolean` — `true` if an item was found and updated, `false` otherwise
-
-- `delete(id: ItemId): boolean`  
-  Deletes an item by its `id`.
-  - **Parameters:**
-    - `id: ItemId` — the id of the item to delete
-  - **Returns:** `boolean` — `true` if the item was found and deleted, `false` otherwise
-
-- `scrollToId(id: ItemId): boolean`  
-  Scrolls the container to the item with the given `id`.
-  - **Parameters:**
-    - `id: ItemId` — the id of the item to scroll to
-  - **Returns:** `boolean` — `true` if the item was found and scrolled to, `false` otherwise
-
-> **Note:** All adapter methods return `true` if the operation was successful, or `false` if the item was not found or could not be added/updated/deleted.
+### Methods
+
+- **addItem(item: T): boolean**
+  - Adds an item to the end of the list. If the scroll is at the very bottom, the new item will appear immediately in the view. If the scroll is not at the bottom, the item will be shown only when the user scrolls to the bottom.
+  
+  **Parameters:**
+  - `item: T` — the item to add (must have a unique id)
+  
+  **Returns:**
+  - `boolean` — true if the item was added, false otherwise
+
+- **addFirstItem(item: T): boolean**
+  - Adds an item to the beginning of the list.
+  
+  **Parameters:**
+  - `item: T` — the item to add (must have a unique id)
+  
+  **Returns:**
+  - `boolean` — true if the item was added, false otherwise
+
+- **update(id: ItemId, data: T): boolean**
+  - Updates an existing item by its id.
+  
+  **Parameters:**
+  - `id: ItemId` — the id of the item to update
+  - `data: T` — the new data for the item
+  
+  **Returns:**
+  - `boolean` — true if the item was found and updated, false otherwise
+
+- **findAndUpdate(findOptions: { find: (item: T) => boolean; data: T }): boolean**
+  - Finds an item by a custom predicate and updates it.
+  
+  **Parameters:**
+  - `find: (item: T) => boolean` — function to find the item
+  - `data: T` — the new data for the item
+  
+  **Returns:**
+  - `boolean` — true if an item was found and updated, false otherwise
+
+- **delete(id: ItemId): boolean**
+  - Deletes an item by its id.
+  
+  **Parameters:**
+  - `id: ItemId` — the id of the item to delete
+  
+  **Returns:**
+  - `boolean` — true if the item was found and deleted, false otherwise
+
+- **scrollToId(id: ItemId): boolean**
+  - Scrolls the container to the item with the given id.
+  
+  **Parameters:**
+  - `id: ItemId` — the id of the item to scroll to
+  
+  **Returns:**
+  - `boolean` — true if the item was found and scrolled to, false otherwise
+
+- **scrollToBottomForce(): boolean**
+  - Forces the scroll to the bottom of the list.
+  
+  **Returns:**
+  - `boolean` — true if the operation was successful, false otherwise
+
+- **scroll$: Observable<ScrollInfo>**
+  - Emits scroll events with detailed information about the current scroll state.
+  
+  **Returns:**
+  - `Observable<ScrollInfo>` — an observable stream of scroll events.
+
+## ⚙️ New Property: `addMethod`
+
+The `addMethod` property controls how items are added to the view. It has two modes:
+
+- **`onlyVisible` (legacy behavior):**
+  - Items are added only if they are immediately visible to the user after rendering.
+  - If the scroll is not at the bottom, the item will not appear until the user scrolls to the bottom.
+
+- **`fallback` (default):**
+  - Items are added regardless of visibility if there is no space to load more items below.
+  - If there is space, the `onlyVisible` logic is applied.
+
+### Default Values
+
+If not explicitly set, the following default values are used:
+
+- `bufferSize`: 50
+- `heightToLoadMore`: 300
+- `addMethod`: `fallback`
+
+These defaults ensure smooth scrolling and efficient rendering.
+
+> **Important:**
+> - Avoid animations or dynamic resizing of elements, as they can disrupt virtual scroll calculations.
+> - Ensure item heights remain stable after initial rendering.
 
 ## Recommendations
 

package.json

@@ -2,7 +2,7 @@
   "name": "ar-virtual-scroll",
   "description": "Virtual scroll for Angular with auto size detection",
   "author": "Artem Osipenko",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "license": "MIT",
   "repository": {

src/lib/adapter.ts

@@ -52,8 +52,8 @@ export class Adapter<T extends ObjectId> {
       return false;
     }
 
-    this.datasource.storage.items.splice(itemIndex, 1);
-    this.datasource.virtualScrollAdapter.deleteItem({ id });
+    const deletedItem = this.datasource.storage.items.splice(itemIndex, 1);
+    this.datasource.virtualScrollAdapter.deleteItem({ ...deletedItem[0], deletedIndex: itemIndex });
     return true;
   }
 
@@ -64,4 +64,12 @@ export class Adapter<T extends ObjectId> {
     this.datasource.virtualScrollAdapter.scrollToId(id);
     return true;
   }
+
+  scrollToBottomForce() {
+    this.datasource.virtualScrollAdapter.scrollToBottomForce();
+  }
+
+  get scroll$() {
+    return this.datasource.virtualScrollAdapter.currentScroll$;
+  }
 }

src/lib/datasource.ts

@@ -11,6 +11,7 @@ export interface DatasourceSettings<T extends ObjectId> {
   settings?: {
     bufferSize?: number;
     heightToLoadMore?: number;
+    addMethod?: 'fallback' | 'onlyVisible';
   }
 }
 
@@ -30,6 +31,10 @@ export class Datasource<T extends ObjectId> {
       settings.settings = { ...settings.settings, heightToLoadMore: 300 };
     }
 
+    if (settings.settings?.addMethod === undefined) {
+      settings.settings = { ...settings.settings, addMethod: 'fallback' };
+    }
+
     this.#settings = settings;
     this.#virtualViewAdapter.initial();
   }

src/lib/scroll-storage.ts

@@ -99,4 +99,8 @@ export class ScrollStorage<T extends ObjectId> {
     if (startIndex === -1 || endIndex === -1 || startIndex > endIndex) return [];
     return this.items.slice(startIndex, endIndex + 1);
   }
+
+  getLastItems(count: number) {
+    return this.items.slice(0, count);
+  }
 }

src/lib/virtual-scroll-adapter.ts

@@ -2,11 +2,11 @@ import { Datasource } from './datasource';
 import { ScrollStorage } from './scroll-storage';
 import { Adapter } from './adapter';
 import { Observable, Subject } from 'rxjs';
-import { ItemId, ItemWithHeight, ObjectId, VirtualScrollItem } from './types';
+import { ItemId, ItemWithHeight, ObjectId, ScrollInfo, VirtualScrollItem } from './types';
 
 export type AddItemEvent<T> = { item: T; isFirst?: boolean };
 export type UpdateEvent<T> = { id: ItemId; data: T };
-export type DeleteEvent<T> = { id: ItemId };
+export type DeleteEvent<T> = ItemWithHeight<T> & { deletedIndex: number };
 
 export class VirtualScrollAdapter<T extends ObjectId> {
   constructor(
@@ -15,10 +15,12 @@ export class VirtualScrollAdapter<T extends ObjectId> {
     private storage: ScrollStorage<T>
   ) {}
 
-  #addItem = new Subject<AddItemEvent<T>>();
-  #updateItem = new Subject<UpdateEvent<T>>();
-  #deleteItem = new Subject<DeleteEvent<T>>();
-  #scrollToId = new Subject<ItemId>();
+  #addItem$ = new Subject<AddItemEvent<T>>();
+  #updateItem$ = new Subject<UpdateEvent<T>>();
+  #deleteItem$ = new Subject<DeleteEvent<T>>();
+  #scrollToId$ = new Subject<ItemId>();
+  #scrollToBottomForce$ = new Subject<void>();
+  #currentScroll$ = new Subject<ScrollInfo>();
 
   getData(
     id: ItemId,
@@ -56,35 +58,64 @@ export class VirtualScrollAdapter<T extends ObjectId> {
     });
   }
 
+  getLastItems(count: number) {
+    return this.storage.getLastItems(count);
+  }
+
   updateItem(event: UpdateEvent<T>) {
-    this.#updateItem.next(event);
+    this.#updateItem$.next(event);
   }
 
   addItem(event: AddItemEvent<T>) {
-    this.#addItem.next(event);
+    this.#addItem$.next(event);
   }
 
   deleteItem(event: DeleteEvent<T>) {
-    this.#deleteItem.next(event);
+    this.#deleteItem$.next(event);
   }
 
   scrollToId(id: ItemId) {
-    this.#scrollToId.next(id);
+    this.#scrollToId$.next(id);
+  }
+
+  scrollToBottomForce() {
+    this.#scrollToBottomForce$.next();
+  }
+
+  sendScrollInfo(info: ScrollInfo) {
+    this.#currentScroll$.next(info);
   }
 
   get addItem$() {
-    return this.#addItem.asObservable();
+    return this.#addItem$.asObservable();
   }
 
   get updateItem$() {
-    return this.#updateItem.asObservable();
+    return this.#updateItem$.asObservable();
   }
 
   get deleteItem$() {
-    return this.#deleteItem.asObservable();
+    return this.#deleteItem$.asObservable();
   }
 
   get scrollToId$() {
-    return this.#scrollToId.asObservable();
+    return this.#scrollToId$.asObservable();
+  }
+
+  get scrollToBottomForce$() {
+    return this.#scrollToBottomForce$.asObservable();
+  }
+
+  get currentScroll$() {
+    return this.#currentScroll$.asObservable();
+  }
+
+  destroy() {
+    this.#addItem$.complete();
+    this.#updateItem$.complete();
+    this.#deleteItem$.complete();
+    this.#scrollToId$.complete();
+    this.#scrollToBottomForce$.complete();
+    this.#currentScroll$.complete();
   }
 }

src/lib/virtual-scroll-container.ts

@@ -4,7 +4,7 @@ import {
   Directive,
   ElementRef,
   HostListener,
-  inject,
+  inject, OnDestroy,
   Renderer2,
 } from '@angular/core';
 import { Subject } from 'rxjs';
@@ -13,8 +13,7 @@ import { ScrollInfo } from './types';
 @Directive({
   selector: '[arVirtualScrollContainer]'
 })
-export class VirtualScrollContainer implements AfterViewInit {
-
+export class VirtualScrollContainer implements AfterViewInit, OnDestroy {
   #elementRef = inject(ElementRef<any>);
   #renderer2 = inject(Renderer2);
   #lastScroll = 0;
@@ -28,6 +27,8 @@ export class VirtualScrollContainer implements AfterViewInit {
   topHeight = 0;
   bottomHeight = 0;
 
+  #viewportHeight = 0;
+
   constructor() { }
 
   @HostListener('scroll', ['$event'] )
@@ -59,13 +60,22 @@ export class VirtualScrollContainer implements AfterViewInit {
     this.#lastScroll = element.scrollTop;
   }
 
+  #resizeObserver = new ResizeObserver(() => {
+    const difference = this.#viewportHeight - this.getViewportHeight();
+    this.setScrollPosition(this.#lastScroll + (difference > 0 ? difference : difference + 1));
+    this.#viewportHeight = this.getViewportHeight();
+  });
+
   ngAfterViewInit() {
     const topScroller = this.#renderer2.createElement('div');
     this.#renderer2.insertBefore(this.#elementRef.nativeElement, topScroller, this.#elementRef.nativeElement.firstChild);
     const bottomScroller = this.#renderer2.createElement('div');
     this.#renderer2.appendChild(this.#elementRef.nativeElement, bottomScroller);
     this.topScroller = topScroller;
     this.bottomScroller = bottomScroller;
+
+    this.#viewportHeight = this.getViewportHeight();
+    this.#resizeObserver.observe(this.#elementRef.nativeElement);
   }
 
   get scroll$() {
@@ -135,4 +145,9 @@ export class VirtualScrollContainer implements AfterViewInit {
     const clamped = Math.max(0, Math.min(target, maxScroll));
     this.setScrollPosition(clamped);
   }
+
+  ngOnDestroy() {
+    this.#resizeObserver.disconnect();
+    this.#scroll$.complete();
+  }
 }