refactor(multiple): remove references to deprecated ClientRect (#28325)

The `ClientRect` type is deprecated in favor of `DOMRect`. These changes replace all the references.

(cherry picked from commit 5849a74)

src/cdk/drag-drop/directives/drag.spec.ts

@@ -567,7 +567,7 @@ describe('CdkDrag', () => {
       fixture.componentInstance.dragInstance.constrainPosition = (
         {x, y}: Point,
         _dragRef: DragRef,
-        _dimensions: ClientRect,
+        _dimensions: DOMRect,
         pickup: Point,
       ) => {
         x -= pickup.x;
@@ -610,7 +610,7 @@ describe('CdkDrag', () => {
       fixture.componentInstance.dragInstance.constrainPosition = (
         {x, y}: Point,
         _dragRef: DragRef,
-        _dimensions: ClientRect,
+        _dimensions: DOMRect,
         pickup: Point,
       ) => {
         x -= pickup.x;
@@ -1007,7 +1007,7 @@ describe('CdkDrag', () => {
       fixture.componentInstance.dragInstance.constrainPosition = (
         {x, y}: Point,
         _dragRef: DragRef,
-        _dimensions: ClientRect,
+        _dimensions: DOMRect,
         pickup: Point,
       ) => {
         x -= pickup.x;

src/cdk/drag-drop/directives/drag.ts

@@ -143,7 +143,7 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
   @Input('cdkDragConstrainPosition') constrainPosition?: (
     userPointerPosition: Point,
     dragRef: DragRef,
-    dimensions: ClientRect,
+    dimensions: DOMRect,
     pickupPositionInElement: Point,
   ) => Point;
 

src/cdk/drag-drop/dom/client-rect.ts → src/cdk/drag-drop/dom/dom-rect.ts

@@ -6,45 +6,45 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-/** Gets a mutable version of an element's bounding `ClientRect`. */
-export function getMutableClientRect(element: Element): ClientRect {
-  const clientRect = element.getBoundingClientRect();
+/** Gets a mutable version of an element's bounding `DOMRect`. */
+export function getMutableClientRect(element: Element): DOMRect {
+  const rect = element.getBoundingClientRect();
 
   // We need to clone the `clientRect` here, because all the values on it are readonly
   // and we need to be able to update them. Also we can't use a spread here, because
-  // the values on a `ClientRect` aren't own properties. See:
+  // the values on a `DOMRect` aren't own properties. See:
   // https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect#Notes
   return {
-    top: clientRect.top,
-    right: clientRect.right,
-    bottom: clientRect.bottom,
-    left: clientRect.left,
-    width: clientRect.width,
-    height: clientRect.height,
-    x: clientRect.x,
-    y: clientRect.y,
-  } as ClientRect;
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    x: rect.x,
+    y: rect.y,
+  } as DOMRect;
 }
 
 /**
- * Checks whether some coordinates are within a `ClientRect`.
- * @param clientRect ClientRect that is being checked.
+ * Checks whether some coordinates are within a `DOMRect`.
+ * @param clientRect DOMRect that is being checked.
  * @param x Coordinates along the X axis.
  * @param y Coordinates along the Y axis.
  */
-export function isInsideClientRect(clientRect: ClientRect, x: number, y: number) {
+export function isInsideClientRect(clientRect: DOMRect, x: number, y: number) {
   const {top, bottom, left, right} = clientRect;
   return y >= top && y <= bottom && x >= left && x <= right;
 }
 
 /**
- * Updates the top/left positions of a `ClientRect`, as well as their bottom/right counterparts.
- * @param clientRect `ClientRect` that should be updated.
+ * Updates the top/left positions of a `DOMRect`, as well as their bottom/right counterparts.
+ * @param domRect `DOMRect` that should be updated.
  * @param top Amount to add to the `top` position.
  * @param left Amount to add to the `left` position.
  */
-export function adjustClientRect(
-  clientRect: {
+export function adjustDomRect(
+  domRect: {
     top: number;
     bottom: number;
     left: number;
@@ -55,22 +55,22 @@ export function adjustClientRect(
   top: number,
   left: number,
 ) {
-  clientRect.top += top;
-  clientRect.bottom = clientRect.top + clientRect.height;
+  domRect.top += top;
+  domRect.bottom = domRect.top + domRect.height;
 
-  clientRect.left += left;
-  clientRect.right = clientRect.left + clientRect.width;
+  domRect.left += left;
+  domRect.right = domRect.left + domRect.width;
 }
 
 /**
- * Checks whether the pointer coordinates are close to a ClientRect.
- * @param rect ClientRect to check against.
- * @param threshold Threshold around the ClientRect.
+ * Checks whether the pointer coordinates are close to a DOMRect.
+ * @param rect DOMRect to check against.
+ * @param threshold Threshold around the DOMRect.
  * @param pointerX Coordinates along the X axis.
  * @param pointerY Coordinates along the Y axis.
  */
-export function isPointerNearClientRect(
-  rect: ClientRect,
+export function isPointerNearDomRect(
+  rect: DOMRect,
   threshold: number,
   pointerX: number,
   pointerY: number,

src/cdk/drag-drop/dom/parent-position-tracker.ts

@@ -7,7 +7,7 @@
  */
 
 import {_getEventTarget} from '@angular/cdk/platform';
-import {getMutableClientRect, adjustClientRect} from './client-rect';
+import {getMutableClientRect, adjustDomRect} from './dom-rect';
 
 /** Object holding the scroll position of something. */
 interface ScrollPosition {
@@ -22,7 +22,7 @@ export class ParentPositionTracker {
     Document | HTMLElement,
     {
       scrollPosition: ScrollPosition;
-      clientRect?: ClientRect;
+      clientRect?: DOMRect;
     }
   >();
 
@@ -77,7 +77,7 @@ export class ParentPositionTracker {
     // parents that are inside the element that was scrolled.
     this.positions.forEach((position, node) => {
       if (position.clientRect && target !== node && target.contains(node)) {
-        adjustClientRect(position.clientRect, topDifference, leftDifference);
+        adjustDomRect(position.clientRect, topDifference, leftDifference);
       }
     });
 

src/cdk/drag-drop/drag-ref.ts

@@ -27,7 +27,7 @@ import {
   toggleVisibility,
 } from './dom/styling';
 import {getTransformTransitionDurationInMs} from './dom/transition-duration';
-import {getMutableClientRect, adjustClientRect} from './dom/client-rect';
+import {getMutableClientRect, adjustDomRect} from './dom/dom-rect';
 import {ParentPositionTracker} from './dom/parent-position-tracker';
 import {deepCloneNode} from './dom/clone-node';
 
@@ -234,13 +234,13 @@ export class DragRef<T = any> {
   private _nativeInteractionsEnabled = true;
 
   /** Client rect of the root element when the dragging sequence has started. */
-  private _initialClientRect?: ClientRect;
+  private _initialDomRect?: DOMRect;
 
   /** Cached dimensions of the preview element. Should be read via `_getPreviewRect`. */
-  private _previewRect?: ClientRect;
+  private _previewRect?: DOMRect;
 
   /** Cached dimensions of the boundary element. */
-  private _boundaryRect?: ClientRect;
+  private _boundaryRect?: DOMRect;
 
   /** Element that will be used as a template to create the draggable item's preview. */
   private _previewTemplate?: DragPreviewTemplate | null;
@@ -355,7 +355,7 @@ export class DragRef<T = any> {
   constrainPosition?: (
     userPointerPosition: Point,
     dragRef: DragRef,
-    dimensions: ClientRect,
+    dimensions: DOMRect,
     pickupPositionInElement: Point,
   ) => Point;
 
@@ -696,7 +696,7 @@ export class DragRef<T = any> {
     } else {
       // If there's a position constraint function, we want the element's top/left to be at the
       // specific position on the page. Use the initial position as a reference if that's the case.
-      const offset = this.constrainPosition ? this._initialClientRect! : this._pickupPositionOnPage;
+      const offset = this.constrainPosition ? this._initialDomRect! : this._pickupPositionOnPage;
       const activeTransform = this._activeTransform;
       activeTransform.x = constrainedPointerPosition.x - offset.x + this._passiveTransform.x;
       activeTransform.y = constrainedPointerPosition.y - offset.y + this._passiveTransform.y;
@@ -885,7 +885,7 @@ export class DragRef<T = any> {
     // Avoid multiple subscriptions and memory leaks when multi touch
     // (isDragging check above isn't enough because of possible temporal and/or dimensional delays)
     this._removeSubscriptions();
-    this._initialClientRect = this._rootElement.getBoundingClientRect();
+    this._initialDomRect = this._rootElement.getBoundingClientRect();
     this._pointerMoveSubscription = this._dragDropRegistry.pointerMove.subscribe(this._pointerMove);
     this._pointerUpSubscription = this._dragDropRegistry.pointerUp.subscribe(this._pointerUp);
     this._scrollSubscription = this._dragDropRegistry
@@ -903,7 +903,7 @@ export class DragRef<T = any> {
     this._pickupPositionInElement =
       previewTemplate && previewTemplate.template && !previewTemplate.matchSize
         ? {x: 0, y: 0}
-        : this._getPointerPositionInElement(this._initialClientRect, referenceElement, event);
+        : this._getPointerPositionInElement(this._initialDomRect, referenceElement, event);
     const pointerPosition =
       (this._pickupPositionOnPage =
       this._lastKnownPointerPosition =
@@ -925,7 +925,7 @@ export class DragRef<T = any> {
 
     this._destroyPreview();
     this._destroyPlaceholder();
-    this._initialClientRect =
+    this._initialDomRect =
       this._boundaryRect =
       this._previewRect =
       this._initialTransform =
@@ -1043,7 +1043,7 @@ export class DragRef<T = any> {
     if (previewTemplate && previewConfig) {
       // Measure the element before we've inserted the preview
       // since the insertion could throw off the measurement.
-      const rootRect = previewConfig.matchSize ? this._initialClientRect : null;
+      const rootRect = previewConfig.matchSize ? this._initialDomRect : null;
       const viewRef = previewConfig.viewContainer.createEmbeddedView(
         previewTemplate,
         previewConfig.context,
@@ -1061,7 +1061,7 @@ export class DragRef<T = any> {
       }
     } else {
       preview = deepCloneNode(this._rootElement);
-      matchElementSize(preview, this._initialClientRect!);
+      matchElementSize(preview, this._initialDomRect!);
 
       if (this._initialTransform) {
         preview.style.transform = this._initialTransform;
@@ -1179,7 +1179,7 @@ export class DragRef<T = any> {
    * @param event Event that initiated the dragging.
    */
   private _getPointerPositionInElement(
-    elementRect: ClientRect,
+    elementRect: DOMRect,
     referenceElement: HTMLElement,
     event: MouseEvent | TouchEvent,
   ): Point {
@@ -1232,7 +1232,7 @@ export class DragRef<T = any> {
   private _getConstrainedPointerPosition(point: Point): Point {
     const dropContainerLock = this._dropContainer ? this._dropContainer.lockAxis : null;
     let {x, y} = this.constrainPosition
-      ? this.constrainPosition(point, this, this._initialClientRect!, this._pickupPositionInElement)
+      ? this.constrainPosition(point, this, this._initialDomRect!, this._pickupPositionInElement)
       : point;
 
     if (this.lockAxis === 'x' || dropContainerLock === 'x') {
@@ -1452,14 +1452,14 @@ export class DragRef<T = any> {
     if (scrollDifference) {
       const target = _getEventTarget<HTMLElement | Document>(event)!;
 
-      // ClientRect dimensions are based on the scroll position of the page and its parent
-      // node so we have to update the cached boundary ClientRect if the user has scrolled.
+      // DOMRect dimensions are based on the scroll position of the page and its parent
+      // node so we have to update the cached boundary DOMRect if the user has scrolled.
       if (
         this._boundaryRect &&
         target !== this._boundaryElement &&
         target.contains(this._boundaryElement)
       ) {
-        adjustClientRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
+        adjustDomRect(this._boundaryRect, scrollDifference.top, scrollDifference.left);
       }
 
       this._pickupPositionOnPage.x += scrollDifference.left;
@@ -1528,13 +1528,13 @@ export class DragRef<T = any> {
   }
 
   /** Lazily resolves and returns the dimensions of the preview. */
-  private _getPreviewRect(): ClientRect {
+  private _getPreviewRect(): DOMRect {
     // Cache the preview element rect if we haven't cached it already or if
     // we cached it too early before the element dimensions were computed.
     if (!this._previewRect || (!this._previewRect.width && !this._previewRect.height)) {
       this._previewRect = this._preview
         ? this._preview.getBoundingClientRect()
-        : this._initialClientRect!;
+        : this._initialDomRect!;
     }
 
     return this._previewRect;
@@ -1608,7 +1608,7 @@ function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLEl
  * @param target Element that needs to be resized.
  * @param sourceRect Dimensions of the source element.
  */
-function matchElementSize(target: HTMLElement, sourceRect: ClientRect): void {
+function matchElementSize(target: HTMLElement, sourceRect: DOMRect): void {
   target.style.width = `${sourceRect.width}px`;
   target.style.height = `${sourceRect.height}px`;
   target.style.transform = getTransform(sourceRect.left, sourceRect.top);