perf(aria/grid): avoid excessive change detections (#32705)

Fixes that the grid was running change detection on `pointermove` events even when the user isn't dragging to select cells.

Fixes #32700.

Author: crisbeto

goldens/aria/grid/index.api.md

@@ -67,8 +67,8 @@ export class GridCellWidget {
     readonly focusTarget: _angular_core.InputSignal<ElementRef<any> | HTMLElement | undefined>;
     readonly id: _angular_core.InputSignal<string>;
     get isActivated(): Signal<boolean>;
-    readonly onActivate: _angular_core.OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>;
-    readonly onDeactivate: _angular_core.OutputEmitterRef<KeyboardEvent | FocusEvent | undefined>;
+    readonly onActivate: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
+    readonly onDeactivate: _angular_core.OutputEmitterRef<FocusEvent | KeyboardEvent | undefined>;
     readonly _pattern: GridCellWidgetPattern;
     protected readonly _tabIndex: Signal<number>;
     readonly tabindex: _angular_core.InputSignal<number | undefined>;

goldens/aria/private/index.api.md

@@ -407,6 +407,7 @@ export interface GridInputs extends Omit<GridInputs$1<GridCellPattern>, 'cells'>
 // @public
 export class GridPattern {
     constructor(inputs: GridInputs);
+    readonly acceptsPointerMove: SignalLike<boolean>;
     readonly activeCell: SignalLike<GridCellPattern | undefined>;
     readonly activeDescendant: SignalLike<string | undefined>;
     readonly anchorCell: SignalLike<GridCellPattern | undefined>;

src/aria/grid/grid.ts

@@ -15,6 +15,7 @@ import {
   ElementRef,
   inject,
   input,
+  NgZone,
   Signal,
 } from '@angular/core';
 import {Directionality} from '@angular/cdk/bidi';
@@ -54,7 +55,6 @@ import {GRID_ROW} from './grid-tokens';
     '[attr.aria-activedescendant]': '_pattern.activeDescendant()',
     '(keydown)': '_pattern.onKeydown($event)',
     '(pointerdown)': '_pattern.onPointerdown($event)',
-    '(pointermove)': '_pattern.onPointermove($event)',
     '(pointerup)': '_pattern.onPointerup($event)',
     '(focusin)': '_pattern.onFocusIn($event)',
     '(focusout)': '_pattern.onFocusOut($event)',
@@ -133,6 +133,22 @@ export class Grid {
   });
 
   constructor() {
+    const ngZone = inject(NgZone);
+
+    // Since `pointermove` fires on each pixel, we need to
+    // be careful not to hit the zone unless it's necessary.
+    ngZone.runOutsideAngular(() => {
+      this.element.addEventListener(
+        'pointermove',
+        event => {
+          if (this._pattern.acceptsPointerMove()) {
+            ngZone.run(() => this._pattern.onPointermove(event));
+          }
+        },
+        {passive: true},
+      );
+    });
+
     afterRenderEffect(() => this._pattern.setDefaultStateEffect());
     afterRenderEffect(() => this._pattern.resetStateEffect());
     afterRenderEffect(() => this._pattern.resetFocusEffect());

src/aria/private/grid/grid.ts

@@ -93,6 +93,16 @@ export class GridPattern {
     this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight',
   );
 
+  /** Whether the grid pattern is currently accepting `pointermove` events. */
+  readonly acceptsPointerMove = computed(() => {
+    return (
+      !this.disabled() &&
+      this.inputs.enableSelection() &&
+      this.inputs.enableRangeSelection() &&
+      this.dragging()
+    );
+  });
+
   /** The keydown event manager for the grid. */
   readonly keydown = computed(() => {
     const manager = new KeyboardEventManager();
@@ -252,20 +262,13 @@ export class GridPattern {
 
   /** Handles pointermove events on the grid. */
   onPointermove(event: PointerEvent) {
-    if (
-      this.disabled() ||
-      !this.inputs.enableSelection() ||
-      !this.inputs.enableRangeSelection() ||
-      !this.dragging()
-    ) {
-      return;
-    }
+    if (this.acceptsPointerMove()) {
+      const cell = this.inputs.getCell(event.target as Element);
 
-    const cell = this.inputs.getCell(event.target as Element);
-
-    // Dragging anchor.
-    if (cell !== undefined) {
-      this.gridBehavior.gotoCell(cell, {anchor: true});
+      // Dragging anchor.
+      if (cell !== undefined) {
+        this.gridBehavior.gotoCell(cell, {anchor: true});
+      }
     }
   }