Merge pull request #1 from dhilt/observable

Workflow + Clipping process refactoring

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-root',
@@ -9,21 +10,21 @@ export class AppComponent {
   private title = 'app works!';
 
   private datasource = {
-      get: (index: number, count: number, success) => {
+      get: (index: number, count: number) => Observable.create(observer => {
         console.log('requested index = ' + index + ', count = ' + count);
         setTimeout(() => {
-          let result = [];
+          let data = [];
           for (let i = index; i <= index + count - 1; i++) {
-            result.push({
+            data.push({
               id: i,
               text: "item #" + i
             });
           }
-          console.log('resolved ' + result.length + ' items');
-          success(result);
+          console.log('resolved ' + data.length + ' items (index = ' + index + ', count = ' + count + ')');
+          observer.next(data);
         }, 50);
-      }
-    };
+      })
+  };
 
   constructor() {
   }

src/app/ui-scroll/data.ts

@@ -12,6 +12,8 @@ class Data {
   static eof = false;
   static position = 0;
 
+  static lastIndex = null;
+
   static setSource(datasource: any) {
     if (!datasource || typeof datasource !== 'object' || typeof datasource.get !== 'function') {
       throw new Error('Invalid datasource!');
@@ -28,6 +30,38 @@ class Data {
     return 'i-' + self.scrollerId + '-' + index.toString();
   }
 
+  static getFirstVisibleItemIndex() {
+    for(let i = 0; i < self.items.length; i++) {
+      if(!self.items[i].invisible) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  static getFirstVisibleItem() {
+    const index = self.getFirstVisibleItemIndex();
+    if(index >= 0) {
+      return self.items[index];
+    }
+  }
+
+  static getLastVisibleItemIndex() {
+    for(let i = self.items.length - 1; i >= 0; i--) {
+      if(!self.items[i].invisible) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  static getLastVisibleItem() {
+    const index = self.getLastVisibleItemIndex();
+    if(index >= 0) {
+      return self.items[index];
+    }
+  }
+
   static initialize(context) {
     self.setSource(context.datasource);
     self.setScrollerId();

src/app/ui-scroll/debouncedRound.ts

@@ -0,0 +1,26 @@
+let timer = null;
+let next = null;
+
+const runTimer = (delay) => {
+    timer = setTimeout(() => {
+    timer = null;
+    if(next) {
+      next();
+      next = null;
+      runTimer(delay);
+    }
+  }, delay)
+};
+
+const debouncedRound = (cb, delay) => {
+  if(!timer) {
+    cb();
+  }
+  else {
+    next = cb;
+    clearTimeout(timer);
+  }
+  runTimer(delay);
+};
+
+export default debouncedRound

src/app/ui-scroll/direction.ts

@@ -26,6 +26,10 @@ class Direction {
     }
     return null;
   }
+
+  static isValid(value) {
+    return value === self.top || value === self.bottom;
+  }
 }
 
 const self = Direction;

src/app/ui-scroll/ui-scroll.component.ts

@@ -1,41 +1,48 @@
-import {Component, OnInit, Input} from '@angular/core';
-import {ContentChild, TemplateRef, ElementRef, Renderer} from '@angular/core';
+import {Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, Input} from '@angular/core';
+import {ContentChild, TemplateRef, ElementRef, Renderer2} from '@angular/core';
 import {HostListener} from '@angular/core';
 
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {AsyncSubject} from 'rxjs/AsyncSubject';
 
-import Process from './processes/index';
+import Workflow from './workflow';
 import Elements from './elements';
 import Data from './data';
 import Direction from './direction';
 
+import debouncedRound from './debouncedRound';
+
 @Component({
   selector: 'ui-scroll',
+  changeDetection: ChangeDetectionStrategy.OnPush,
   templateUrl: './ui-scroll.component.html',
   styleUrls: ['./ui-scroll.component.css']
 })
 
-export class UiScrollComponent implements OnInit {
+export class UiScrollComponent implements OnInit, OnDestroy {
 
   @Input() datasource;
   @ContentChild(TemplateRef) templateVariable: TemplateRef<any>;
 
   onScrollListener: Function;
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer) {
+  constructor(private changeDetector: ChangeDetectorRef, private elementRef: ElementRef, private renderer: Renderer2) {
   }
 
   ngOnInit() {
     Elements.initialize(this.elementRef);
     Data.initialize(this);
-    this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) => {
-      const direction = Direction.byScrollTop();
-      Process.fetch.run(direction);
-    });
-    Process.fetch.run(Direction.bottom);
-    Process.fetch.run(Direction.top);
+    Workflow.initialize(this);
+    this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
+      debouncedRound(() => Workflow.run(event), 25)
+    );
+    Workflow.run(Direction.bottom);
+    Workflow.run(Direction.top);
+  }
+
+  ngOnDestroy() {
+    this.onScrollListener();
   }
 
 }