ScrollService

src/core/body/body.ctrl.d.ts

@@ -1,8 +1,9 @@
 import { Model } from '../infrastructure/model';
 import { Table } from '../dom/table';
+import { ScrollService } from 'ng2-qgrid/core/scroll/scroll.service';
 
 export declare class BodyCtrl {
-	constructor(model: Model, view: any, table: Table, bag: any);
+	constructor(model: Model, view: any, scrollService: ScrollService, table: Table, bag: any);
 
 	onScroll(e: any);
 	onWheel(e: any);

src/core/body/body.ctrl.js

@@ -8,9 +8,10 @@ const VERTICAL_SCROLL_CLASS = `${GRID_PREFIX}-scroll-vertical`;
 const HORIZONTAL_SCROLL_CLASS = `${GRID_PREFIX}-scroll-horizontal`;
 
 export class BodyCtrl {
-	constructor(model, view, table, bag) {
+	constructor(model, view, scrollService, table, bag) {
 		this.model = model;
 		this.view = view;
+		this.scrollService = scrollService;
 		this.bag = bag;
 		this.table = table;
 		this.rangeStartCell = null;
@@ -131,6 +132,7 @@ export class BodyCtrl {
 			if (startCell && endCell) {
 				this.navigate(endCell);
 				this.view.selection.selectRange(startCell, endCell, 'body');
+				this.scrollService.scroll(e);
 			}
 		}
 	}

src/core/scroll/scroll.service.d.ts

@@ -0,0 +1,6 @@
+import { Model } from '../infrastructure/model';
+import { Table } from '../dom/table';
+
+export declare class ScrollService {
+    constructor(model: Model, table: Table);
+}

src/core/scroll/scroll.service.js

@@ -0,0 +1,158 @@
+import { EventListener } from '../infrastructure/event.listener';
+import { EventManager } from '../infrastructure/event.manager';
+import { Disposable } from '../infrastructure/disposable';
+import { AppError } from '../infrastructure/error';
+import { jobLine } from '../services/job.line';
+
+const OFFSET = 50;
+const VELOCITY = 5;
+
+export class ScrollService extends Disposable {
+    constructor(model, table) {
+        super();
+
+        this.model = model;
+        this.table = table;
+        this.interval = null;
+        this.rect = null;
+        this.body = null;
+        this.job = jobLine(0);
+
+        const documentListener = new EventListener(document, new EventManager(this));
+        const windowListener = new EventListener(window, new EventManager(this));
+
+        this.using(documentListener.on('mouseup', () => {
+            if (this.interval) {
+                this.stop();
+            }
+        }));
+
+        this.using(windowListener.on('resize', () => {
+            this.setElementsState();
+        }));
+    }
+
+    canScroll(e) {
+        const table = this.rect;
+
+        return !(e.clientY < (table.bottom - OFFSET) &&
+            e.clientY > (table.top + OFFSET) &&
+            e.clientX > (table.left + OFFSET) &&
+            e.clientX < (table.right - OFFSET))
+    }
+
+    scroll(e) {
+        if (!this.body) {
+            this.setElementsState();
+        }
+
+        if (this.interval) {
+            if (!this.canScroll(e)) {
+                this.stop();
+                return;
+            }
+        }
+
+        const direction = this.onEdgeOf(e);
+        if (direction && !this.interval) {
+            this.job(() => {
+                const interval = this.doScroll(direction);
+                this.interval = interval();
+            })
+        }
+
+    }
+
+    doScroll(direction) {
+        const scrollState = this.model.scroll;
+        const scrolledToEnd = () => this.isScrolledToEnd(direction);
+
+        return () => setInterval(() => {
+            if (!scrolledToEnd()) {
+                switch (direction) {
+                    case 'right':
+                    case 'bottom': {
+                        const course = direction === 'bottom' ? 'top' : 'left';
+                        const origin = scrollState()[course];
+                        scrollState({ [course]: origin + VELOCITY });
+                        break;
+                    }
+                    case 'left':
+                    case 'top': {
+                        const course = direction === 'top' ? 'top' : 'left';
+                        const origin = scrollState()[course];
+                        scrollState({ [course]: origin - VELOCITY });
+                        break;
+                    }
+                    default: {
+                        throw new AppError('scroll.service', `doScroll: Wrong direction`);
+                    }
+                }
+            }
+        }, VELOCITY);
+    }
+
+    isScrolledToEnd(direction) {
+        const body = this.body;
+
+        switch (direction) {
+            case 'top': {
+                return body.scrollTop === 0;
+            }
+            case 'bottom': {
+                return body.clientHeight === body.scrollHeight - body.scrollTop;
+            }
+            case 'left': {
+                return body.scrollLeft === 0;
+            }
+            case 'right': {
+                return body.scrollLeft === body.scrollWidth - body.clientWidth;
+            }
+            default: {
+                throw new AppError('scroll.service', `isScrolledToEnd: Wrong direction`);
+            }
+        }
+    }
+
+    onEdgeOf(e) {
+        const table = this.rect;
+
+        if (e.clientY < (table.top + OFFSET) &&
+            e.clientX > (table.left + OFFSET) &&
+            e.clientX < (table.right - OFFSET)) {
+            return 'top';
+        }
+
+        if (e.clientY > (table.bottom - OFFSET) &&
+            e.clientX > (table.left + OFFSET) &&
+            e.clientX < (table.right - OFFSET)) {
+            return 'bottom';
+        }
+
+        if (e.clientX < (table.left + OFFSET) &&
+            e.clientY > (table.top + OFFSET) &&
+            e.clientY < (table.bottom - OFFSET)) {
+            return 'left';
+        }
+
+        if (e.clientX > (table.right - OFFSET) &&
+            e.clientY > (table.top + OFFSET) &&
+            e.clientY < (table.bottom - OFFSET)) {
+            return 'right';
+        }
+
+        return false;
+    }
+
+    setElementsState() {
+        const view = this.table.view;
+
+        this.body = view.markup.body;
+        this.rect = view.rect(this.body);
+    }
+
+    stop() {
+        clearInterval(this.interval);
+        this.interval = null;
+    }
+}

src/lib/main/core/body/body-core.component.ts

@@ -9,6 +9,7 @@ import { NgComponent } from '../../../infrastructure/component/ng.component';
 import { RootService } from '../../../infrastructure/component/root.service';
 import { ViewCoreService } from '../view/view-core.service';
 import { TableCoreService } from '../table/table-core.service';
+import { ScrollService } from 'ng2-qgrid/core/scroll/scroll.service';
 
 @Component({
 	selector: 'tbody[q-grid-core-body]',
@@ -37,7 +38,8 @@ export class BodyCoreComponent extends NgComponent implements OnInit {
 
 		const { model } = this.root;
 		const table = this.$table;
-		const ctrl = new BodyCtrl(model, view, this.root.table, this.root.bag);
+		const scrollService = new ScrollService(model, this.root.table);
+		const ctrl = new BodyCtrl(model, view, scrollService, this.root.table, this.root.bag);
 		const listener = new EventListener(element, new EventManager(this));
 
 		this.zone.runOutsideAngular(() => {