igniteui-angular 22.1.0-beta.0 → 22.1.0-beta.1

package/fesm2022/igniteui-angular-core.mjs

@@ -1021,8 +1021,10 @@ const EDITOR_PROVIDER = new InjectionToken('EditorProvider');
  *
  * Consolidates the pan/swipe/tap recognition logic shared across components
  * (carousel, navigation drawer, list item, time picker) on top of native
- * Pointer Events. It does not depend on `NgZone`; consumers update their own
- * state inside the provided callbacks.
+ * Pointer Events. It does not require `NgZone`; consumers update their own
+ * state inside the provided callbacks. An `NgZone` can optionally be supplied so
+ * that the listeners are attached outside of Angular and only the discrete
+ * callbacks re-enter it, keeping continuous dragging free of change detection.
  *
  * Outside of a browser environment (e.g. during server-side rendering) it is a
  * noop: no listeners are attached and no callbacks are invoked, so consumers can
@@ -1054,7 +1056,7 @@ class IgxTouchManager {
         this._pointerId = null;
         this._startTarget = null;
         this._onPointerDown = (event) => {
-            if (this._tracking || !this._accepts(event.pointerType)) {
+            if (this._tracking || !this._accepts(event.pointerType) || this._canStart?.(event) === false) {
                 return;
             }
             this._startX = event.clientX;
@@ -1073,7 +1075,17 @@ class IgxTouchManager {
                     // (e.g. for synthetic events). Capturing is a best-effort enhancement, so ignore it.
                 }
             }
-            this.callbacks.pointerDown?.(this._createEvent(event));
+            // Let the consumer veto the gesture (e.g. the touch did not start in an active
+            // zone). Returning `false` stops tracking immediately so the `touchmove` listener
+            // does not block normal scrolling and other gestures are not interfered with.
+            if (this.callbacks.pointerDown) {
+                const gesture = this._createEvent(event);
+                this._runInAngular(() => {
+                    if (this.callbacks.pointerDown?.(gesture) === false) {
+                        this._stopTracking(event.pointerId);
+                    }
+                });
+            }
         };
         this._onPointerMove = (event) => {
             if (!this._tracking || event.pointerId !== this._pointerId || !this._accepts(event.pointerType)) {
@@ -1084,8 +1096,13 @@ class IgxTouchManager {
             // A press with no movement (a tap) therefore never raises `panStart`.
             if (!this._panStarted) {
                 this._panStarted = true;
-                this.callbacks.panStart?.(gesture);
+                if (this.callbacks.panStart) {
+                    this._runInAngular(() => this.callbacks.panStart(gesture));
+                }
             }
+            // `panMove` is intentionally invoked outside of the Angular zone (when one is provided)
+            // as it fires for every pointer move and running change detection for each of them
+            // makes continuous dragging lag behind the pointer.
             this.callbacks.panMove?.(gesture);
         };
         this._onPointerUp = (event) => {
@@ -1095,16 +1112,18 @@ class IgxTouchManager {
             this._tracking = false;
             this._pointerId = null;
             const gesture = this._createEvent(event);
-            if (this.callbacks.tap && gesture.distance < this._tapThreshold) {
-                this.callbacks.tap(gesture);
-                return;
-            }
-            if (this.callbacks.swipe &&
-                gesture.velocity > this._swipeVelocityThreshold &&
-                Math.abs(gesture.deltaX) > Math.abs(gesture.deltaY)) {
-                this.callbacks.swipe(gesture);
-            }
-            this.callbacks.panEnd?.(gesture);
+            this._runInAngular(() => {
+                if (this.callbacks.tap && gesture.distance < this._tapThreshold) {
+                    this.callbacks.tap(gesture);
+                    return;
+                }
+                if (this.callbacks.swipe &&
+                    gesture.velocity > this._swipeVelocityThreshold &&
+                    Math.abs(gesture.deltaX) > Math.abs(gesture.deltaY)) {
+                    this.callbacks.swipe(gesture);
+                }
+                this.callbacks.panEnd?.(gesture);
+            });
         };
         this._onPointerCancel = (event) => {
             if (!this._tracking || event.pointerId !== this._pointerId) {
@@ -1112,7 +1131,10 @@ class IgxTouchManager {
             }
             this._tracking = false;
             this._pointerId = null;
-            this.callbacks.panCancel?.(this._createEvent(event));
+            if (this.callbacks.panCancel) {
+                const gesture = this._createEvent(event);
+                this._runInAngular(() => this.callbacks.panCancel(gesture));
+            }
         };
         this._onTouchMove = (event) => {
             // Prevent scrolling only while a gesture is actively tracked.
@@ -1124,6 +1146,8 @@ class IgxTouchManager {
         this._setPointerCapture = options.setPointerCapture ?? true;
         this._tapThreshold = options.tapThreshold ?? 0;
         this._swipeVelocityThreshold = options.swipeVelocityThreshold ?? 0.3;
+        this._canStart = options.canStart ?? null;
+        this._ngZone = options.ngZone ?? null;
         // Behave as a noop outside of a browser (e.g. during server-side rendering),
         // mirroring the previous Hammer.js-based manager. Angular's platform-server
         // does not define a global `window`, so pointer events can never occur there
@@ -1134,14 +1158,16 @@ class IgxTouchManager {
         if (!this._supported) {
             return;
         }
-        this.target.addEventListener('pointerdown', this._onPointerDown);
-        this.target.addEventListener('pointermove', this._onPointerMove);
-        this.target.addEventListener('pointerup', this._onPointerUp);
-        this.target.addEventListener('pointercancel', this._onPointerCancel);
-        // prevents the default scrolling behavior on touch devices while a gesture is tracked
-        // necessary on edge pans detected on the body as the browsers cancel the pointer events
-        // and trigger a scroll / rubber band effect instead of the pan
-        this.target.addEventListener('touchmove', this._onTouchMove, { passive: false });
+        this._runOutsideAngular(() => {
+            this.target.addEventListener('pointerdown', this._onPointerDown);
+            this.target.addEventListener('pointermove', this._onPointerMove);
+            this.target.addEventListener('pointerup', this._onPointerUp);
+            this.target.addEventListener('pointercancel', this._onPointerCancel);
+            // prevents the default scrolling behavior on touch devices while a gesture is tracked
+            // necessary on edge pans detected on the body as the browsers cancel the pointer events
+            // and trigger a scroll / rubber band effect instead of the pan
+            this.target.addEventListener('touchmove', this._onTouchMove, { passive: false });
+        });
     }
     /** Detaches all listeners and stops tracking. */
     destroy() {
@@ -1158,6 +1184,23 @@ class IgxTouchManager {
     _accepts(pointerType) {
         return this._pointerTypes.includes(pointerType);
     }
+    _runOutsideAngular(fn) {
+        if (this._ngZone) {
+            this._ngZone.runOutsideAngular(fn);
+        }
+        else {
+            fn();
+        }
+    }
+    /** Invokes a discrete (low frequency) callback back inside the Angular zone, when one is provided. */
+    _runInAngular(fn) {
+        if (this._ngZone) {
+            this._ngZone.run(fn);
+        }
+        else {
+            fn();
+        }
+    }
     _createEvent(event) {
         const deltaX = event.clientX - this._startX;
         const deltaY = event.clientY - this._startY;
@@ -1184,6 +1227,22 @@ class IgxTouchManager {
             }
         };
     }
+    /** Stops tracking the current gesture and best-effort releases the pointer capture. */
+    _stopTracking(pointerId) {
+        this._tracking = false;
+        this._panStarted = false;
+        this._pointerId = null;
+        this._startTarget = null;
+        if (this._setPointerCapture && typeof this.target.releasePointerCapture === 'function') {
+            try {
+                this.target.releasePointerCapture(pointerId);
+            }
+            catch {
+                // `releasePointerCapture` can throw when the pointer is no longer captured.
+                // Releasing is a best-effort cleanup, so ignore it.
+            }
+        }
+    }
 }
 
 /* csSuppress */