angular-layout-virtual 0.0.4 → 0.0.5

package/dist/AngularRenderer.d.ts

@@ -3,8 +3,8 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import { ScrollableContainer } from 'layout-virtual';
-import type { IItem, IItemStore, IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';
+import { BaseRenderer } from 'layout-virtual';
+import type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';
 export interface ListItemProps<T = unknown> {
     data: T;
     index: number;
@@ -17,25 +17,22 @@ export type AngularListItem<T = unknown> = {
     data: T;
     render?: unknown;
 };
-export default class AngularRenderer<T> implements IRangeRenderer<T> {
+export default class AngularRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType> {
     private _store;
-    private _scrollableContainer;
-    private _renderedIndexRegistry;
-    private _renderedItemsRegistry;
     private _itemsSetter;
     private _itemsFlusher;
     private _listItems;
-    private _getRenderedBoundaryIndex;
-    constructor(opts: AngularRendererOptions<T>);
-    render(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    constructor(opts: AngularRendererOptions<DataType>);
     renderRange(startIndex: number, endIndex: number, direction: ScrollDirection): void;
-    removeRange(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection): {
+        itemsToRemove: Element[];
+        removedHeight: number;
+    };
     clear(): void;
-    getIndex(item: Element): number | undefined;
-    getItem(index: number): Element | undefined;
-    get scrollableContainer(): ScrollableContainer;
-    attach(store: IItemStore<IItem<T>>): void;
+    setData(store: DataType[]): void;
+    setRenderItem(): void;
     flush(): Promise<void>;
     commit(renderedRefs: Map<number, Element>): void;
+    get dataSize(): number;
 }
 export {};

package/dist/index.js

@@ -1 +1 @@
-import{CommonModule as t}from"@angular/common";import{Input as e,ContentChild as i,TemplateRef as r,ViewChild as n,Component as s,inject as o,ChangeDetectorRef as a}from"@angular/core";import l,{ScrollableContainer as c,ArrayItemStore as h,DynamicListLayout as d}from"layout-virtual";class m{t=null;i;o=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;m;p=[];v(t){const e="first"===t?this.i.getFirstItem():"last"===t?this.i.getLastItem():null;if(e)return this.getIndex(e)}constructor(t){this.i=new c({...t}),this.h=t.itemsSetter,this.m=t.itemsFlusher}render(t,e,i){const r=this.v("first"),n=this.v("last");let s=t,o=e,a=r,l=n,c=0;return"down"===i?void 0!==a&&void 0!==n&&(l=Math.min(s-1,n),s=Math.max(n+1,s),a<=l&&(c=this.removeRange(a,l,i))):"up"===i&&void 0!==l&&void 0!==r&&(a=Math.max(o+1,r),o=Math.min(r-1,o),a<=l&&(c=this.removeRange(a,l,i))),s<o&&this.renderRange(s,o,i),c}renderRange(t,e,i){const r=this.t,n=this.p,s=[];if(r){for(let i=t;i<=e;i++){const t=r.getByIndex(i);t&&s.push({data:t.data,index:i})}this.p="down"===i?n.concat(s):"up"===i?s.concat(n):this.p}}removeRange(t,e,i){const r=this.o,n=this.l;let s=0,o=1/0,a=0;for(let l=t;l<=e;l++){const t=n.get(l);if(t){const{offsetTop:e,offsetHeight:i}=t,c=getComputedStyle(t),h=parseFloat(c.marginTop),d=parseFloat(c.marginBottom);o=Math.min(o,e-h),a=Math.max(a,e+i+d),n.delete(l),r.delete(t),s++}}return s&&(this.p="down"===i?this.p.slice(s):"up"===i?this.p.slice(0,-s):this.p),a>o?a-o:0}clear(){this.o.clear(),this.l.clear(),this.p=[],this.h(this.p)}getIndex(t){return this.o.get(t)}getItem(t){return this.l.get(t)}get scrollableContainer(){return this.i}attach(t){this.t=t}flush(){return this.h(this.p),this.m(),Promise.resolve()}commit(t){console.log("commit",t);const e=this.o,i=this.l;for(const[r,n]of t.entries())e.set(n,r),i.set(r,n);t.clear()}}var p=Object.defineProperty,v=Object.getOwnPropertyDescriptor,f=(t,e,i,r)=>{for(var n,s=r>1?void 0:r?v(e,i):e,o=t.length-1;o>=0;o--)(n=t[o])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&p(e,i,s),s};let u=class{data=[];overscanHeight=200;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=o(a);ngAfterViewInit(){this.renderer=new m({container:this.containerRef.nativeElement,scrollHeightFiller:this.scrollHeightFillerRef.nativeElement,viewportContainer:this.viewportContainerRef.nativeElement,scrollCanvas:this.scrollCanvasRef.nativeElement,topSpacer:this.topSpacerRef.nativeElement,contentLayer:this.contentLayerRef.nativeElement,bottomSpacer:this.bottomSpacerRef.nativeElement,itemsSetter:this.setVisibleItems,itemsFlusher:this.flushVisibleItems});const t=new h,e=new d({overscanHeight:this.overscanHeight,renderer:this.renderer}),i=new l({store:t,layout:e});for(let r=0;r<this.data.length;r++)i.insert({data:this.data[r],render:this.renderItemTemplate},r)}trackByIndex(t,e){return e.index}getItemContext(t){return{$implicit:t.data,data:t.data,index:t.index}}setVisibleItems=t=>{this.visibleItems=t};flushVisibleItems=()=>{this.changeDetectorRef.detectChanges(),this.commit()};commit(){const t=/* @__PURE__ */new Map;Array.from(this.contentLayerRef.nativeElement.children).forEach((e,i)=>{const r=this.visibleItems[i];r&&t.set(r.index,e)}),this.renderer?.commit(t)}};f([e({required:!0})],u.prototype,"data",2),f([e()],u.prototype,"overscanHeight",2),f([i("renderItem",{read:r})],u.prototype,"renderItemTemplate",2),f([n("container",{static:!0})],u.prototype,"containerRef",2),f([n("scrollHeightFiller",{static:!0})],u.prototype,"scrollHeightFillerRef",2),f([n("viewportContainer",{static:!0})],u.prototype,"viewportContainerRef",2),f([n("scrollCanvas",{static:!0})],u.prototype,"scrollCanvasRef",2),f([n("topSpacer",{static:!0})],u.prototype,"topSpacerRef",2),f([n("contentLayer",{static:!0})],u.prototype,"contentLayerRef",2),f([n("bottomSpacer",{static:!0})],u.prototype,"bottomSpacerRef",2),u=f([s({selector:"angular-layout-virtual",standalone:!0,imports:[t],host:{style:"display: contents;"},template:'\n    <div #container>\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer>\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer>\n            <ng-container\n              *ngFor="let item of visibleItems; trackBy: trackByIndex"\n            >\n              <ng-container\n                *ngTemplateOutlet="\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                "\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  '})],u);export{u as default};
+import{CommonModule as t}from"@angular/common";import{Input as e,ContentChild as i,TemplateRef as r,ViewChild as n,Component as s,inject as o,ChangeDetectorRef as a}from"@angular/core";import{BaseRenderer as c,DynamicListLayout as l,LayoutVirtual as h}from"layout-virtual";class m extends c{t=[];i;o;l=[];constructor(t){super(t),this.i=t.itemsSetter,this.o=t.itemsFlusher}renderRange(t,e,i){const r=this.t,n=this.l,s=[];for(let o=t;o<=e;o++){const t=r[o];t&&s.push({data:t,index:o})}this.l="down"===i?n.concat(s):"up"===i?s.concat(n):this.l}removeRange(t,e,i){const r=super.removeRange(t,e),n=r.itemsToRemove.length;return n&&(this.l="down"===i?this.l.slice(n):"up"===i?this.l.slice(0,-n):this.l),r}clear(){super.clear(),this.l=[],this.i(this.l)}setData(t){this.t=t}setRenderItem(){}flush(){return this.i(this.l),this.o(),Promise.resolve()}commit(t){for(const[e,i]of t.entries())this.registerElement(e,i);t.clear()}get dataSize(){return this.t.length}}var d=Object.defineProperty,p=Object.getOwnPropertyDescriptor,v=(t,e,i,r)=>{for(var n,s=r>1?void 0:r?p(e,i):e,o=t.length-1;o>=0;o--)(n=t[o])&&(s=(r?n(e,i,s):n(s))||s);return r&&s&&d(e,i,s),s};let f=class{data=[];overscanHeight=200;renderItemTemplate;containerRef;scrollHeightFillerRef;viewportContainerRef;scrollCanvasRef;topSpacerRef;contentLayerRef;bottomSpacerRef;visibleItems=[];renderer;changeDetectorRef=o(a);ngAfterViewInit(){this.renderer=new m({container:this.containerRef.nativeElement,scrollHeightFiller:this.scrollHeightFillerRef.nativeElement,viewportContainer:this.viewportContainerRef.nativeElement,scrollCanvas:this.scrollCanvasRef.nativeElement,topSpacer:this.topSpacerRef.nativeElement,contentLayer:this.contentLayerRef.nativeElement,bottomSpacer:this.bottomSpacerRef.nativeElement,itemsSetter:this.setVisibleItems,itemsFlusher:this.flushVisibleItems});const t=new l({overscanHeight:this.overscanHeight,renderer:this.renderer});new h({layout:t}).setData(this.data)}trackByIndex(t,e){return e.index}getItemContext(t){return{$implicit:t.data,data:t.data,index:t.index}}setVisibleItems=t=>{this.visibleItems=t};flushVisibleItems=()=>{this.changeDetectorRef.detectChanges(),this.commit()};commit(){const t=/* @__PURE__ */new Map;Array.from(this.contentLayerRef.nativeElement.children).forEach((e,i)=>{const r=this.visibleItems[i];r&&t.set(r.index,e)}),this.renderer?.commit(t)}};v([e({required:!0})],f.prototype,"data",2),v([e()],f.prototype,"overscanHeight",2),v([i("renderItem",{read:r})],f.prototype,"renderItemTemplate",2),v([n("container",{static:!0})],f.prototype,"containerRef",2),v([n("scrollHeightFiller",{static:!0})],f.prototype,"scrollHeightFillerRef",2),v([n("viewportContainer",{static:!0})],f.prototype,"viewportContainerRef",2),v([n("scrollCanvas",{static:!0})],f.prototype,"scrollCanvasRef",2),v([n("topSpacer",{static:!0})],f.prototype,"topSpacerRef",2),v([n("contentLayer",{static:!0})],f.prototype,"contentLayerRef",2),v([n("bottomSpacer",{static:!0})],f.prototype,"bottomSpacerRef",2),f=v([s({selector:"angular-layout-virtual",standalone:!0,imports:[t],host:{style:"display: contents;"},template:'\n    <div #container>\n      <div #scrollHeightFiller></div>\n      <div #viewportContainer>\n        <div #scrollCanvas>\n          <div #topSpacer></div>\n          <div #contentLayer>\n            <ng-container\n              *ngFor="let item of visibleItems; trackBy: trackByIndex"\n            >\n              <ng-container\n                *ngTemplateOutlet="\n                  renderItemTemplate;\n                  context: getItemContext(item)\n                "\n              ></ng-container>\n            </ng-container>\n          </div>\n          <div #bottomSpacer></div>\n        </div>\n      </div>\n    </div>\n  '})],f);export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-layout-virtual",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Angular virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -43,7 +43,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.0.3"
+    "layout-virtual": "^0.1.0"
   },
   "peerDependencies": {
     "@angular/common": "^21.0.0",