fix(docs): make splitter demo work in IE (#982)

* improve rxjs drag logic. add `throttleTime(50)` to reduce browser thrashing
* fix conversion of pixel or percentage value to a raw pixel float value.

Author: CaerusKaru

src/apps/demo-app/src/app/github-issues/split/split-handle.directive.ts

@@ -1,7 +1,7 @@
 import {Directive, ElementRef, Inject, Output} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 import {fromEvent, Observable} from 'rxjs';
-import {map, switchMap, takeUntil} from 'rxjs/operators';
+import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators';
 
 @Directive({
   selector: '[ngxSplitHandle]',
@@ -14,11 +14,20 @@ export class SplitHandleDirective {
   @Output() drag: Observable<{ x: number, y: number }>;
 
   constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
-    const getMouseEventPosition = (event: MouseEvent) => ({x: event.movementX, y: event.movementY});
+    let last = {x: 0, y: 0};
+    const scanPositionDelta = (event: MouseEvent) => {
+      const current = {x: event.screenX, y: event.screenY};
+      const delta = {x: current.x - last.x, y: current.y - last.y};
+      last = current;
+      return delta;
+    };
 
-    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(getMouseEventPosition));
-    const mousemove$ = fromEvent(_document, 'mousemove').pipe(map(getMouseEventPosition));
-    const mouseup$ = fromEvent(_document, 'mouseup').pipe(map(getMouseEventPosition));
+    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(scanPositionDelta));
+    const mousemove$ = fromEvent(window, 'mousemove').pipe(
+      throttleTime(50),
+      map(scanPositionDelta)
+    );
+    const mouseup$ = fromEvent(window, 'mouseup');
 
     this.drag = mousedown$.pipe(switchMap(() => mousemove$.pipe(takeUntil(mouseup$))));
   }

src/apps/demo-app/src/app/github-issues/split/split.directive.ts

@@ -22,18 +22,16 @@ import {SplitAreaDirective} from './split-area.directive';
   }
 })
 export class SplitDirective implements AfterContentInit, OnDestroy {
-  watcher: Subscription;
-
-  @Input('ngxSplit')
-  direction = 'row';
-
+  @Input('ngxSplit') direction = 'row';
   @ContentChild(SplitHandleDirective) handle: SplitHandleDirective;
   @ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
 
+  private watcher: Subscription;
+
   constructor(private elementRef: ElementRef) {}
 
   ngAfterContentInit(): void {
-    this.watcher = this.handle.drag.subscribe(pos => this.onDrag(pos));
+    this.watcher = this.handle.drag.subscribe(this.onDrag.bind(this));
   }
 
   ngOnDestroy() {
@@ -62,24 +60,17 @@ export class SplitDirective implements AfterContentInit, OnDestroy {
    * Use the pixel delta change to recalculate the area size (%)
    * Note: flex value may be '', %, px, or '<grow> <shrink> <basis>'
    */
-  calculateSize(value: string|number, delta: number) {
+  calculateSize(value: string, delta: number): number {
     const containerSizePx = this.elementRef.nativeElement.clientWidth;
-    const elementSizePx = Math.round(this.valueToPixel(value, containerSizePx));
+    const elementSizePx = Math.round(valueToPixel(value, containerSizePx));
 
     const elementSize = ((elementSizePx + delta) / containerSizePx) * 100;
     return Math.round(elementSize * 100) / 100;
   }
+}
 
-  /**
-   * Convert the pixel or percentage value to a raw
-   * pixel float value.
-   */
-  valueToPixel(value: string | number, parentWidth: number): number {
-    const isPercent = () => String(value).indexOf('px') < 0;
-    let size = parseFloat(String(value));
-    if (isPercent()) {
-      size = parentWidth * (size / 100);  // Convert percentage to actual pixel float value
-    }
-    return size;
-  }
+/** Convert the pixel or percentage value to a raw pixel float value */
+function valueToPixel(value: string, parentWidth: number): number {
+  const size = parseFloat(value);
+  return !value.includes('px') ? parentWidth * (size / 100) : size;
 }