fix(slider): add pointer move handling; clear old HammerJS pan event. (#14052)

Author: skrustev

projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss

@@ -175,6 +175,7 @@
         flex-grow: 1;
         align-items: center;
         transition: all .2s $out-quad;
+        touch-action: pan-y pinch-zoom;
 
         &:hover {
             %igx-slider-track-fill {

projects/igniteui-angular/src/lib/slider/slider.component.spec.ts

@@ -9,10 +9,12 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxSliderType, IgxThumbFromTemplateDirective, IgxThumbToTemplateDirective, IRangeSliderValue, TickLabelsOrientation, TicksOrientation } from './slider.common';
 import { IgxSliderComponent } from './slider.component';
 
-declare let Simulator: any;
 const SLIDER_CLASS = '.igx-slider';
+const THUMB_TAG = 'igx-thumb';
 const THUMB_TO_CLASS = '.igx-slider-thumb-to';
+const THUMB_TO_PRESSED_CLASS = '.igx-slider-thumb-to--pressed';
 const THUMB_FROM_CLASS = '.igx-slider-thumb-from';
+const THUMB_LABEL = 'igx-thumb-label';
 const SLIDER_TICKS_ELEMENT = '.igx-slider__ticks';
 const SLIDER_TICKS_TOP_ELEMENT = '.igx-slider__ticks--top';
 const SLIDER_PRIMARY_GROUP_TICKS_CLASS_NAME = 'igx-slider__ticks-group--tall';
@@ -415,46 +417,57 @@ describe('IgxSlider', () => {
             expect(sliderInstance.maxValue).toEqual(expectedMax);
         });
 
-        it('continuous(smooth) sliding should be allowed', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
+        it('continuous(smooth) sliding should be allowed', async() => {
             sliderInstance.continuous = true;
+            sliderInstance.thumbLabelVisibilityDuration = 10;
             fixture.detectChanges();
 
             expect(sliderInstance.continuous).toBe(true);
             expect(sliderInstance.value).toBe(150);
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1, clientX: 200 }));
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activeThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                expect(sliderInstance.value).toBeGreaterThan(150);
-                expect(activeThumb).toBeNull();
-                done();
-            });
+
+            (sliderInstance as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            let activeThumb = fixture.debugElement.query(By.css(THUMB_TO_PRESSED_CLASS));
+            expect(activeThumb).not.toBeNull();
+            expect(sliderInstance.value).toBeGreaterThan(sliderInstance.minValue);
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            await wait();
+
+            expect(sliderInstance.value).toEqual(sliderInstance.minValue);
         });
 
-        it('should not move thumb slider and value should remain the same when slider is disabled', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
+        it('should not move thumb slider and value should remain the same when slider is disabled', async() => {
             sliderInstance.disabled = true;
             fixture.detectChanges();
 
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent( new MouseEvent('mosedown'));
+            const thumbEl = fixture.debugElement.query(By.css(THUMB_TAG)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = thumbEl.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
+
+            thumbEl.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activeThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                expect(activeThumb).toBeDefined();
-                expect(sliderInstance.value).toBe(sliderInstance.minValue);
-                done();
-            });
+
+            (sliderInstance as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+
+            (sliderInstance as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            expect(sliderInstance.value).toBe(sliderInstance.minValue);
          });
     });
 
@@ -474,32 +487,27 @@ describe('IgxSlider', () => {
             expect((slider.value as IRangeSliderValue).upper).toBe(slider.upperBound);
         });
 
-        it('continuous(smooth) sliding should be allowed', (done) => {
-            pending(`panRight trigers pointerdown where we are capturing all pointer events by passing a valid pointerId.
-                Pan guesture does not propagate that option. Respectively (no active pointer...) error is thrown.`);
-            const fromThumb = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+        it('continuous(smooth) sliding should be allowed', async() => {
             slider.continuous = true;
             fixture.detectChanges();
 
-            expect(slider.continuous).toBe(true);
+            const fromThumb = fixture.debugElement.query(By.css(THUMB_FROM_CLASS)).nativeElement;
+            const { x: sliderX, width: sliderWidth } = fromThumb.getBoundingClientRect();
+            const startX = sliderX + sliderWidth / 2;
 
-            const sliderEl = fixture.debugElement.query(By.css(SLIDER_CLASS)).nativeElement;
-            sliderEl.dispatchEvent( new PointerEvent('pointerdown', { pointerId: 1 }));
-            fixture.detectChanges();
             fromThumb.dispatchEvent(new Event('focus'));
             fixture.detectChanges();
 
-            expect(sliderEl).toBeDefined();
-            return panRight(sliderEl, sliderEl.offsetHeight, sliderEl.offsetWidth, 200)
-            .then(() => {
-                fixture.detectChanges();
-                const activetoThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-to--active'));
-                const activefromThumb = fixture.debugElement.query(By.css('.igx-slider-thumb-from--active'));
-                expect(slider.value).toEqual({ lower: 60, upper: 100 });
-                expect(activetoThumb).toBeNull();
-                expect(activefromThumb).toBeNull();
-                done();
-            });
+            (slider as any).onPointerDown(new PointerEvent('pointerdown', { pointerId: 1, clientX: startX }));
+            fixture.detectChanges();
+            await wait();
+
+            (slider as any).onPointerMove(new PointerEvent('pointermove', { pointerId: 1, clientX: startX + 150 }));
+            fixture.detectChanges();
+            await wait();
+
+            expect((slider.value as any).lower).toBeGreaterThan(slider.minValue);
+            expect((slider.value as any).upper).toEqual(slider.maxValue);
         });
 
         // K.D. Removing this functionality because of 0 benefit and lots of issues.
@@ -1750,8 +1758,8 @@ describe('IgxSlider', () => {
             fix.detectChanges();
 
             const inst = fix.componentInstance;
-            const thumbs = fix.debugElement.queryAll(By.css('igx-thumb'));
-            const labels = fix.debugElement.queryAll(By.css('igx-thumb-label'));
+            const thumbs = fix.debugElement.queryAll(By.css(THUMB_TAG));
+            const labels = fix.debugElement.queryAll(By.css(THUMB_LABEL));
 
             expect(inst.dir.rtl).toEqual(true);
 
@@ -1803,21 +1811,6 @@ describe('IgxSlider', () => {
         });
     });
 
-    const panRight = (element, elementHeight, elementWidth, duration) => {
-        const panOptions = {
-            deltaX: elementWidth * 0.6,
-            clientX: elementWidth * 0.6,
-            deltaY: 0,
-            duration,
-            pos: [element.offsetLeft, elementHeight * 0.5]
-        };
-
-        return new Promise<void>(resolve => {
-            Simulator.gestures.pan(element, panOptions, () => {
-                resolve(null);
-            });
-        });
-    };
 
     const verifySecondaryTicsLabelsAreHidden = (ticks, hidden) => {
         const allTicks = Array.from(ticks.nativeElement.querySelectorAll(`${SLIDER_GROUP_TICKS_CLASS}`));

projects/igniteui-angular/src/lib/slider/slider.component.ts

@@ -4,8 +4,8 @@ import {
     HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, TemplateRef, ViewChild, ViewChildren, booleanAttribute
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { merge, noop, Observable, Subject, timer } from 'rxjs';
-import { takeUntil, throttleTime } from 'rxjs/operators';
+import { animationFrameScheduler, fromEvent, interval, merge, noop, Observable, Subject, timer } from 'rxjs';
+import { takeUntil, throttle, throttleTime } from 'rxjs/operators';
 import { EditorProvider } from '../core/edit-provider';
 import { resizeObservable } from '../core/utils';
 import { IgxDirectionality } from '../services/direction/directionality';
@@ -774,6 +774,7 @@ export class IgxSliderComponent implements
     // ticks
     private _primaryTicks = 0;
     private _secondaryTicks = 0;
+    private _sliding = false;
 
     private _labels = new Array<number | string | boolean | null | undefined>();
     private _type: IgxSliderType = IgxSliderType.SLIDER;
@@ -793,41 +794,6 @@ export class IgxSliderComponent implements
         this.stepDistance = this._step;
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('pointerdown', ['$event'])
-    public onPointerDown($event: PointerEvent) {
-        this.findClosestThumb($event);
-
-        if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
-            return;
-        }
-
-        const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
-        activeThumb.nativeElement.setPointerCapture($event.pointerId);
-        this.showSliderIndicators();
-
-        $event.preventDefault();
-    }
-
-
-    /**
-     * @hidden
-     */
-    @HostListener('pointerup', ['$event'])
-    public onPointerUp($event: PointerEvent) {
-        if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
-            return;
-        }
-
-        const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
-        activeThumb.nativeElement.releasePointerCapture($event.pointerId);
-
-        this.hideSliderIndicators();
-        this.dragFinished.emit(this.value);
-    }
-
     /**
      * @hidden
      */
@@ -836,14 +802,6 @@ export class IgxSliderComponent implements
         this.toggleSliderIndicators();
     }
 
-    /**
-     * @hidden
-     */
-    @HostListener('pan', ['$event'])
-    public onPanListener($event) {
-        this.update($event.srcEvent.clientX);
-    }
-
     /**
      * Returns whether the `IgxSliderComponent` type is RANGE.
      * ```typescript
@@ -1054,6 +1012,11 @@ export class IgxSliderComponent implements
                 takeUntil(this._destroyer$)).subscribe(() => this._ngZone.run(() => {
                     this.stepDistance = this.calculateStepDistance();
                 }));
+            fromEvent(this._el.nativeElement, 'pointermove').pipe(
+                throttle(() => interval(0, animationFrameScheduler)),
+                takeUntil(this._destroyer$)).subscribe(($event: PointerEvent) => this._ngZone.run(() => {
+                    this.onPointerMove($event);
+                }));
         });
     }
 
@@ -1195,6 +1158,42 @@ export class IgxSliderComponent implements
         }
     }
 
+    @HostListener('pointerdown', ['$event'])
+    private onPointerDown($event: PointerEvent) {
+        this.findClosestThumb($event);
+
+        if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
+            return;
+        }
+
+        this._sliding = true;
+        const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
+        activeThumb.nativeElement.setPointerCapture($event.pointerId);
+        this.showSliderIndicators();
+
+        $event.preventDefault();
+    }
+
+    private onPointerMove($event: PointerEvent) {
+        if (this._sliding) {
+            this.update($event.clientX);
+        }
+    }
+
+    @HostListener('pointerup', ['$event'])
+    private onPointerUp($event: PointerEvent) {
+        if (!this.thumbTo.isActive && this.thumbFrom === undefined) {
+            return;
+        }
+
+        const activeThumb = this.thumbTo.isActive ? this.thumbTo : this.thumbFrom;
+        activeThumb.nativeElement.releasePointerCapture($event.pointerId);
+
+        this._sliding = false;
+        this.hideSliderIndicators();
+        this.dragFinished.emit(this.value);
+    }
+
     private validateInitialValue(value: IRangeSliderValue) {
         if (value.upper < value.lower) {
             const temp = value.upper;
@@ -1291,21 +1290,21 @@ export class IgxSliderComponent implements
     }
 
     private setTickInterval() {
-        let interval;
+        let tickInterval;
         const trackProgress = 100;
 
         if (this.labelsViewEnabled) {
             // Calc ticks depending on the labels length;
-            interval = ((trackProgress / (this.labels.length - 1) * 10)) / 10;
+            tickInterval = ((trackProgress / (this.labels.length - 1) * 10)) / 10;
         } else {
             const trackRange = this.maxValue - this.minValue;
-            interval = this.step > 1 ?
+            tickInterval = this.step > 1 ?
                 (trackProgress / ((trackRange / this.step)) * 10) / 10
                 : null;
         }
 
-        this.renderer.setStyle(this.ticks.nativeElement, 'stroke-dasharray', `0, ${interval * Math.sqrt(2)}%`);
-        this.renderer.setStyle(this.ticks.nativeElement, 'visibility', this.continuous || interval === null ? 'hidden' : 'visible');
+        this.renderer.setStyle(this.ticks.nativeElement, 'stroke-dasharray', `0, ${tickInterval * Math.sqrt(2)}%`);
+        this.renderer.setStyle(this.ticks.nativeElement, 'visibility', this.continuous || tickInterval === null ? 'hidden' : 'visible');
     }
 
     private showSliderIndicators() {