Migrate SliderInput to Pointer Events (#350)

* Migrate SliderInput to Pointer Events * Revert case change * Move handlers * Remove newline * Revert some more changes * Check pointer is mouse * Handle pointercancel * Remove pointercancel handling
playcanvas · Apr 29, 2024 · acb6830 · acb6830
1 parent 9116f06
commit acb6830
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 78 deletions.
diff --git a/src/components/SliderInput/index.ts b/src/components/SliderInput/index.ts
@@ -72,7 +72,7 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
 
     protected _cursorHandleOffset = 0;
 
-    protected _touchId: number = null;
+    protected _pointerId: number = null;
 
     /**
      * Creates a new SliderInput.
@@ -132,8 +132,7 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
         this._domHandle.classList.add(CLASS_SLIDER_HANDLE);
         this._domBar.appendChild(this._domHandle);
 
-        this._domSlider.addEventListener('mousedown', this._onMouseDown);
-        this._domSlider.addEventListener('touchstart', this._onTouchStart, { passive: true });
+        this._domSlider.addEventListener('pointerdown', this._onPointerDown);
         this._domHandle.addEventListener('keydown', this._onKeyDown);
 
         if (args.value !== undefined) {
@@ -153,81 +152,33 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
     destroy() {
         if (this._destroyed) return;
 
-        this._domSlider.removeEventListener('mousedown', this._onMouseDown);
-        this._domSlider.removeEventListener('touchstart', this._onTouchStart);
-
+        this._domSlider.removeEventListener('pointerdown', this._onPointerDown);
         this._domHandle.removeEventListener('keydown', this._onKeyDown);
 
-        this.dom.removeEventListener('mouseup', this._onMouseUp);
-        this.dom.removeEventListener('mousemove', this._onMouseMove);
-        this.dom.removeEventListener('touchmove', this._onTouchMove);
-        this.dom.removeEventListener('touchend', this._onTouchEnd);
-
         super.destroy();
     }
 
-    protected _onMouseDown = (evt: MouseEvent) => {
-        if (evt.button !== 0 || !this.enabled || this.readOnly) return;
+    protected _onPointerDown = (evt: PointerEvent) => {
+        if ((evt.pointerType === 'mouse' && evt.button !== 0) || !this.enabled || this.readOnly || this._pointerId !== null) return;
+        evt.stopPropagation();
+        this._domSlider.setPointerCapture(evt.pointerId);
+        this._pointerId = evt.pointerId;
         this._onSlideStart(evt.pageX);
     };
 
-    protected _onMouseMove = (evt: MouseEvent) => {
+    protected _onPointerMove = (evt: PointerEvent) => {
+        if (evt.pointerId !== this._pointerId) return;
         evt.stopPropagation();
         evt.preventDefault();
         this._onSlideMove(evt.pageX);
     };
 
-    protected _onMouseUp = (evt: MouseEvent) => {
+    protected _onPointerUp = (evt: PointerEvent) => {
+        if (evt.pointerId !== this._pointerId || this._pointerId === null) return;
         evt.stopPropagation();
-        evt.preventDefault();
+        this._domSlider.releasePointerCapture(evt.pointerId);
         this._onSlideEnd(evt.pageX);
-    };
-
-    protected _onTouchStart = (evt: TouchEvent) => {
-        if (!this.enabled || this.readOnly) return;
-
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-            const node = touch.target as Node;
-
-            if (!node.ui || node.ui !== this)
-                continue;
-
-            this._touchId = touch.identifier;
-            this._onSlideStart(touch.pageX);
-            break;
-        }
-    };
-
-    protected _onTouchMove = (evt: TouchEvent) => {
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-
-            if (touch.identifier !== this._touchId)
-                continue;
-
-            evt.stopPropagation();
-            evt.preventDefault();
-
-            this._onSlideMove(touch.pageX);
-            break;
-        }
-    };
-
-    protected _onTouchEnd = (evt: TouchEvent) => {
-        for (let i = 0; i < evt.changedTouches.length; i++) {
-            const touch = evt.changedTouches[i];
-
-            if (touch.identifier !== this._touchId)
-                continue;
-
-            evt.stopPropagation();
-            evt.preventDefault();
-
-            this._onSlideEnd(touch.pageX);
-            this._touchId = null;
-            break;
-        }
+        this._pointerId = null;
     };
 
     protected _onKeyDown = (evt: KeyboardEvent) => {
@@ -289,13 +240,8 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
 
     protected _onSlideStart(pageX: number) {
         this._domHandle.focus();
-        if (this._touchId === null) {
-            window.addEventListener('mousemove', this._onMouseMove);
-            window.addEventListener('mouseup', this._onMouseUp);
-        } else {
-            window.addEventListener('touchmove', this._onTouchMove);
-            window.addEventListener('touchend', this._onTouchEnd);
-        }
+        window.addEventListener('pointermove', this._onPointerMove);
+        window.addEventListener('pointerup', this._onPointerUp);
 
         this.class.add(CLASS_SLIDER_ACTIVE);
 
@@ -337,13 +283,8 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
 
         this.class.remove(CLASS_SLIDER_ACTIVE);
 
-        if (this._touchId === null) {
-            window.removeEventListener('mousemove', this._onMouseMove);
-            window.removeEventListener('mouseup', this._onMouseUp);
-        } else {
-            window.removeEventListener('touchmove', this._onTouchMove);
-            window.removeEventListener('touchend', this._onTouchEnd);
-        }
+        window.removeEventListener('pointermove', this._onPointerMove);
+        window.removeEventListener('pointerup', this._onPointerUp);
 
         if (this.binding) {
             this.binding.historyCombine = this._historyCombine;
@@ -352,7 +293,6 @@ class SliderInput extends Element implements IBindable, IFocusable, IPlaceholder
             this._historyCombine = false;
             this._historyPostfix = null;
         }
-
     }
 
     focus() {

diff --git a/src/components/SliderInput/style.scss b/src/components/SliderInput/style.scss
@@ -5,6 +5,7 @@
     height: 24px;
     margin: $element-margin;
     align-items: center;
+    touch-action: none; // Prevents gestures and touch event interference.
 
     > .pcui-numeric-input {
         flex: 1;