virutalize data rows

.gitignore

@@ -105,4 +105,6 @@ dist
 
 dist/
 demo/
-example/main.bundle.js
+example/main.bundle.js
+
+.idea/

example/src/components/demo-home/demo-home.ts

@@ -3,7 +3,7 @@ import { IGridColumn } from '../../../../src/interface';
 import { GridConfig, GridEvents } from '../../../../src/model';
 
 class DemoHome {
-    usersList: any;
+    usersList: any[] = [];
 
     constructor() {
         const gsGridRef = gsGrid;
@@ -54,8 +54,14 @@ class DemoHome {
     async setupGridAndApplyData() {
         const gridConfig = new GridConfig();
         gridConfig.columnDefs = this.buildGridColumns();
+        gridConfig.rowHeight = 31;
+
+        const usersList = await this.getUsers();
+
+        for (let i = 0; i<=10; i ++) {
+            this.usersList = this.usersList.concat([... usersList]);
+        }
 
-        this.usersList = await this.getUsers();
         gridConfig.data = this.usersList;
         const gridEl = document.querySelector('gs-grid');
         if (gridEl) {

package.json

@@ -1,9 +1,9 @@
 {
-    "name": "@gs-grid/gs-grid",
-    "version": "0.0.1-alpha.2",
+    "name": "@flatui/grid",
+    "version": "0.0.1-alpha.3",
     "description": "A new grid for evolving web",
     "main": "index.ts",
-    "repository": "https://github.com/ganesh-vellanki/gs-grid",
+    "repository": "https://github.com/flatui/grid",
     "author": "[email protected]",
     "license": "MIT",
     "private": false,

src/core/scroll.utilities.ts

@@ -1,3 +1,7 @@
+import { BehaviorSubject } from "rxjs";
+import { IGridScrollPosition } from "../interface";
+import { GridScrollPosition } from "../model/grid-scroll-position";
+
 /**
  * Scroll utilities.
  */
@@ -42,12 +46,18 @@ export class ScrollUtilities {
      */
     private dragCallback = (event: MouseEvent) => {this.drag(event)};
 
+    /**
+     * Scroll move complete publisher.
+     */
+    public scrollMoveComplete$: BehaviorSubject<IGridScrollPosition>;
+
     /**
      * Creates an instance of scroll utilities.
      */
     constructor(shadowRoot: ShadowRoot) {
         this.shadowRoot = shadowRoot;
         this.setScrollBounds();
+        this.scrollMoveComplete$ = new BehaviorSubject<IGridScrollPosition>(new GridScrollPosition(0, 0, 100));
     }
 
     /**
@@ -121,6 +131,8 @@ export class ScrollUtilities {
     dragEnd(event: MouseEvent): void {
         this.isScrollBarActivated = false;
         this.resetScrollVisibility();
+        const scrollBar = this.getGridScrollBar();
+        this.scrollMoveComplete$.next(new GridScrollPosition(this.yMin, scrollBar.getBoundingClientRect().y, this.yMax));
     }
 
     /**
@@ -165,6 +177,7 @@ export class ScrollUtilities {
 
         if (this.isPositionInBounds(nextPosition)) {
             scrollBar.style.top = nextPosition - this.yMin + 'px';
+            this.scrollMoveComplete$.next(new GridScrollPosition(this.yMin, nextPosition, this.yMax));
         }
     }
 

src/core/virtualize.ts

@@ -1,6 +1,66 @@
+import { IGridConfig, IGridScrollPosition } from "../interface";
+
 /**
  * Virtualize core.
  */
 export class Virtualize {
-
+
+    /**
+     * Available grid height of virtualize.
+     */
+    private availableGridHeight: number;
+
+    /**
+     * Data set of virtualize.
+     */
+    private dataSet: any[];
+
+    /**
+     * Gets rows per index.
+     */
+    private get rowsPerIndex(): number {
+        return this.availableGridHeight / this.gridConfig.rowHeight;
+    }
+
+    /**
+     * Creates an instance of virtualize.
+     * @param gridConfig grid configuration.
+     * @param shadowRoot shadow root.
+     */
+    constructor(private gridConfig: IGridConfig, private shadowRoot: ShadowRoot) {
+        this.availableGridHeight = 200;
+        this.dataSet = [...this.gridConfig.data];
+        this.setGridHeight();
+    }
+
+    /**
+     * Callback on grid scroll position change.
+     * @param scrollYPos scroll position.
+     */
+    public OnGridScrollPositionChange(scrollYPos: IGridScrollPosition) {
+    }
+
+    /**
+     * Gets data set for index.
+     */
+    private getDataSetForIndex(scrollIndex: number) {
+        const index = scrollIndex * this.rowsPerIndex;
+        return this.dataSet.slice(index, index + this.rowsPerIndex);
+    }
+
+    /**
+     * Sets grid height using shadow root.
+     */
+    private setGridHeight() {
+        const viewport = this.getViewport();
+        viewport.style.height = `${this.availableGridHeight}px`;
+    }
+
+    /**
+     * Gets viewport element.
+     * @returns viewport element.
+     */
+    private getViewport(): HTMLElement {
+        return this.shadowRoot.querySelector('.data-viewport');
+    }
 }

src/gs-grid.ts

@@ -1,5 +1,5 @@
-import { CellUtilities } from "./core";
-import { IGridConfig, IGridRenderer } from "./interface";
+import { CellUtilities, Virtualize } from "./core";
+import { IGridConfig, IGridRenderer, IGridScrollPosition } from "./interface";
 import { GridColumn } from "./model";
 import { FlexHeaderRenderer, FlexDataRowRenderer, ScrollRenderer } from "./renderers";
 import { ScrollUtilities } from './core';
@@ -48,13 +48,19 @@ export class GsGrid extends HTMLElement {
      */
     private cellUtils: CellUtilities;
 
+    /**
+     * Virtualization core of gs grid.
+     */
+    private virtualizationCore: Virtualize;
+
     /**
      * Creates an instance of gs-grid.
      */
     constructor() {
         super();
         this.instanceId = this.generateInstanceId();
         this.registerGridEventCallback();
+        this._currentScrollIndex = 0;
     }
 
     /**
@@ -129,26 +135,37 @@ export class GsGrid extends HTMLElement {
         this.initializeScrollBar();
 
         // Init smart scroll.
+        // TODO: move smart scroll reg to new method.
+        // TODO: Use Rxjs & remove timeout.
         var smartScroll = new ScrollUtilities(this.shadowRoot);
         setTimeout(() => {
             smartScroll.registerSmartScrollEvents();
         }, 2000);
+
+        // Init virtualization core.
+        // TODO: Use Rxjs & remove timeout.
+        setTimeout(() => {
+            this.initializeVirtualization();
+            smartScroll.scrollMoveComplete$.subscribe((scrollPosition: IGridScrollPosition) => {
+                this.virtualizationCore.OnGridScrollPositionChange(scrollPosition);
+            });
+        }, 500);
     }
 
     /**
      * Registers renderers of header & column of grid.
-     * @param gridConfig 
+     * @param gridConfig grid configuration.
      */
     registerRenderers(gridConfig: IGridConfig) {
         const rendererDataSet = gridConfig.columnDefs.map(x => {
             return { displayName: x.headerName, field: x.field, width: x.width, minWidth: x.minWidth }
         });
 
         // Register header renderer.
-        this.headerRenderer = new FlexHeaderRenderer(rendererDataSet, this.cellUtils);
+        this.headerRenderer = new FlexHeaderRenderer(rendererDataSet, this.cellUtils, this.gridConfig);
 
         // Register data row renderer.
-        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils);
+        this.dataRowRenderer = new FlexDataRowRenderer(rendererDataSet, this.cellUtils, this.gridConfig, this.shadowRoot);
 
         // Register viewport scroll renderer.
         this.scrollRenderer = new ScrollRenderer();
@@ -165,7 +182,7 @@ export class GsGrid extends HTMLElement {
      * Initializes viewport.
      */
     private initializeViewport() {
-        this.shadowRoot.append(this.dataRowRenderer.render({ data: this.gridConfig.data }));
+        this.dataRowRenderer.renderIntoViewport({data: this.gridConfig.data});
     }
 
     /**
@@ -174,7 +191,7 @@ export class GsGrid extends HTMLElement {
     private initializeScrollBar() {
         const viewport = this.shadowRoot.querySelector('.data-viewport');
         if (viewport) {
-            viewport.append(this.scrollRenderer.render());
+            viewport.prepend(this.scrollRenderer.render());
         }
     }
 
@@ -188,6 +205,13 @@ export class GsGrid extends HTMLElement {
         this.shadowRoot.appendChild(styleRoot);
     }
 
+    /**
+     * Initializes virtualization.
+     */
+    private initializeVirtualization() {
+        this.virtualizationCore = new Virtualize(this.gridConfig, this.shadowRoot);
+    }
+
     /**
      * Gets available width for grid.
      * @returns available width for grid, either itself or parent.

src/interface/grid-config.ts

@@ -11,10 +11,15 @@ export interface IGridConfig {
     columnDefs: IGridColumn[];
 
     /**
-     * Instance  of grid config
+     * Instance of grid config
      */
     instance: IGridInstance;
 
+    /**
+     * Row height of grid config.
+     */
+    rowHeight: number;
+
     /**
      * Determines whether instance ready is
      * @returns true if instance ready 

src/interface/igrid-renderer.ts

@@ -12,4 +12,9 @@ export interface IGridRenderer {
      * @returns boolean promise, true once complete.
      */
     queueRender(): Promise<HTMLElement>;
+
+    /**
+     * Render and insert into viewport.
+     */
+    renderIntoViewport(data?: any): void;
 }

src/interface/igrid-scroll-position.ts

@@ -0,0 +1,25 @@
+/**
+ * grid scroll position interface.
+ */
+export interface IGridScrollPosition {
+    /**
+     * y minimum.
+     */
+    yMin: number;
+
+    /**
+     * y maximum.
+     */
+    yMax: number;
+
+    /**
+     * y position.
+     */
+    y: number;
+
+    /**
+     * get percentage of y position.
+     * @returns y percent.
+     */
+    getYPercent(): number;
+}

src/interface/index.ts

@@ -5,3 +5,4 @@ export { IGridRenderer } from './igrid-renderer'
 export { IGridRenderColumn } from './igrid-renderer-column';
 export { ICellConfig } from './icell-config';
 export { IGridEvents } from './grid-events';
+export { IGridScrollPosition } from './igrid-scroll-position';

src/model/grid-config.ts

@@ -4,7 +4,7 @@ import {Observable, Subject, BehaviorSubject} from 'rxjs';
 /**
  * Grid configuration class.
  */
-export class GridConfig implements IGridConfig {
+export class GridConfig<T> implements IGridConfig {
     /**
      * Is grid instance ready.
      */
@@ -20,6 +20,11 @@ export class GridConfig implements IGridConfig {
      */
     columnDefs: IGridColumn[];
 
+    /**
+     * Row height of grid config.
+     */
+    rowHeight: number;
+
     /**
      * Instance  of grid config
      */
@@ -28,13 +33,14 @@ export class GridConfig implements IGridConfig {
     /**
      * Data of grid config
      */
-    data?: any[];
+    data?: T[];
 
     /**
      * Creates an instance of grid config.
      */
     constructor(){
         this.renderCompleteSubscription = new BehaviorSubject(false);
+        this.rowHeight = 40;
     }
 
     /**

src/model/grid-scroll-position.ts

@@ -0,0 +1,39 @@
+import { IGridScrollPosition } from "../interface";
+
+/**
+ * Grid scroll position.
+ */
+export class GridScrollPosition implements IGridScrollPosition {
+
+    /**
+     * Creates an instance of grid scroll position.
+     * @param args init args.
+     */
+    constructor(yMin: number, y:number, yMax: number) {
+        this.yMin = yMin;
+        this.y = y;
+        this.yMax = yMax;
+    }
+
+    /**
+     * Y min of grid scroll position.
+     */
+    yMin: number;
+    /**
+     * Y max of grid scroll position.
+     */
+    yMax: number;
+
+    /**
+     * Y of grid scroll position.
+     */
+    y: number;
+
+    /**
+     * Gets y percent.
+     * @returns y percent.
+     */
+    getYPercent(): number {
+        return ((this.y - this.yMin) / (this.yMax - this.yMin)) * 100;
+    }
+}