fix(drag): add throttling to drag event

Author: nivekcode

projects/ng-sortgrid-demo/src/app/introduction/introduction.component.spec.ts

@@ -1,14 +1,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { IntroductionComponent } from './introduction.component';
+import {IntroductionModule} from './introduction.module';
 
 describe('IntroductionComponent', () => {
   let component: IntroductionComponent;
   let fixture: ComponentFixture<IntroductionComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ IntroductionComponent ]
+      imports: [IntroductionModule]
     })
     .compileComponents();
   }));

projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts

@@ -219,33 +219,4 @@ describe('NgsgItemDirective', () => {
     sut.drop();
     expect(consoleWarnSpy).toHaveBeenCalledWith(expectedWarniningMessage);
   });
-
-  describe('Drag', () => {
-
-    it('should not call the scrollHelper if autoScroll is set to false', () => {
-      spyOn(scrollHelperService, 'scrollIfNecessary');
-      sut.drag({});
-      expect(scrollHelperService.scrollIfNecessary).not.toHaveBeenCalled();
-    });
-
-    it('should call the scrollHelper with the event, the scrollpoints and the scrollspeed', () => {
-      spyOn(scrollHelperService, 'scrollIfNecessary');
-      const event = 'A very cool event';
-      const scrollPointTop = 10;
-      const scrollPointBottom = 80;
-      const scrollSpeed = 100;
-
-      sut.scrollPointTop = scrollPointTop;
-      sut.scrollPointBottom = scrollPointBottom;
-      sut.scrollSpeed = scrollSpeed;
-      sut.autoScroll = true;
-
-      sut.drag(event);
-      expect(scrollHelperService.scrollIfNecessary).toHaveBeenCalledWith(event, {
-        top: scrollPointTop,
-        bottom: scrollPointBottom
-      }, scrollSpeed);
-    });
-
-  });
 });

projects/ng-sortgrid/src/lib/ngsg-item.directive.ts

@@ -12,8 +12,8 @@ import {
   SimpleChanges
 } from '@angular/core';
 
-import {Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {fromEvent, Observable, Subject} from 'rxjs';
+import {takeUntil, takeWhile, throttleTime} from 'rxjs/operators';
 import {NgsgSortService} from './sort/sort/ngsg-sort.service';
 import {NgsgSelectionService} from './mutliselect/ngsg-selection.service';
 import {NgsgReflectService} from './sort/reflection/ngsg-reflect.service';
@@ -36,6 +36,7 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
 
   private selected = false;
   private destroy$ = new Subject();
+  private drag$: Observable<Event>;
 
   constructor(
     public el: ElementRef,
@@ -52,6 +53,18 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
     this.ngsgEventService.dropped$.pipe(
       takeUntil(this.destroy$)
     ).subscribe(() => this.selected = false);
+
+    fromEvent<DragEvent>(this.el.nativeElement, 'drag').pipe(
+      throttleTime(20),
+      takeUntil(this.destroy$),
+      takeWhile(() => this.autoScroll)
+    ).subscribe(() => {
+        this.scrollHelperService.scrollIfNecessary(event, {
+          top: this.scrollPointTop,
+          bottom: this.scrollPointBottom
+        }, this.scrollSpeed);
+      }
+    );
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -91,16 +104,6 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe
     this.sortService.sort(this.el.nativeElement);
   }
 
-  @HostListener('drag', ['$event'])
-  drag(event): void {
-    if (this.autoScroll) {
-      this.scrollHelperService.scrollIfNecessary(event, {
-        top: this.scrollPointTop,
-        bottom: this.scrollPointBottom
-      }, this.scrollSpeed);
-    }
-  }
-
   @HostListener('dragover', ['$event'])
   dragOver(event): boolean {
     if (event.preventDefault) {