From 53b0660a0d7cdd22d67610dce88c785c195f902d Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 29 Dec 2023 08:25:09 +0100 Subject: [PATCH] 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 5849a7477d3e696d237b9e8f0b125d9ff3e25b7e) --- src/cdk/drag-drop/directives/drag.spec.ts | 6 +- src/cdk/drag-drop/directives/drag.ts | 2 +- .../dom/{client-rect.ts => dom-rect.ts} | 58 +++++++++---------- .../drag-drop/dom/parent-position-tracker.ts | 6 +- src/cdk/drag-drop/drag-ref.ts | 38 ++++++------ src/cdk/drag-drop/drop-list-ref.ts | 40 ++++++------- .../sorting/single-axis-sort-strategy.ts | 12 ++-- ...exible-connected-position-strategy.spec.ts | 16 ++--- .../flexible-connected-position-strategy.ts | 12 ++-- src/cdk/overlay/position/scroll-clip.ts | 4 +- src/cdk/scrolling/viewport-ruler.ts | 2 +- src/cdk/scrolling/virtual-scrollable.ts | 2 +- src/dev-app/drag-drop/drag-drop-demo.ts | 7 +-- src/material/core/ripple/ripple-renderer.ts | 4 +- src/material/tabs/ink-bar.ts | 10 ++-- tools/public_api_guard/cdk/drag-drop.md | 4 +- 16 files changed, 108 insertions(+), 115 deletions(-) rename src/cdk/drag-drop/dom/{client-rect.ts => dom-rect.ts} (52%) diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index 3398aed91e2e..c816ad9ff7ba 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/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; diff --git a/src/cdk/drag-drop/directives/drag.ts b/src/cdk/drag-drop/directives/drag.ts index b85eb2c96613..72f94741eba3 100644 --- a/src/cdk/drag-drop/directives/drag.ts +++ b/src/cdk/drag-drop/directives/drag.ts @@ -143,7 +143,7 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { @Input('cdkDragConstrainPosition') constrainPosition?: ( userPointerPosition: Point, dragRef: DragRef, - dimensions: ClientRect, + dimensions: DOMRect, pickupPositionInElement: Point, ) => Point; diff --git a/src/cdk/drag-drop/dom/client-rect.ts b/src/cdk/drag-drop/dom/dom-rect.ts similarity index 52% rename from src/cdk/drag-drop/dom/client-rect.ts rename to src/cdk/drag-drop/dom/dom-rect.ts index ea3b94e33192..ee36901d1af5 100644 --- a/src/cdk/drag-drop/dom/client-rect.ts +++ b/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, diff --git a/src/cdk/drag-drop/dom/parent-position-tracker.ts b/src/cdk/drag-drop/dom/parent-position-tracker.ts index 0ab73d8f37cc..3cbdefd794c3 100644 --- a/src/cdk/drag-drop/dom/parent-position-tracker.ts +++ b/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); } }); diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts index 89192775e5e6..b88b25c70d14 100644 --- a/src/cdk/drag-drop/drag-ref.ts +++ b/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 { 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 { constrainPosition?: ( userPointerPosition: Point, dragRef: DragRef, - dimensions: ClientRect, + dimensions: DOMRect, pickupPositionInElement: Point, ) => Point; @@ -696,7 +696,7 @@ export class DragRef { } 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 { // 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 { 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 { this._destroyPreview(); this._destroyPlaceholder(); - this._initialClientRect = + this._initialDomRect = this._boundaryRect = this._previewRect = this._initialTransform = @@ -1043,7 +1043,7 @@ export class DragRef { 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 { } } 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 { * @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 { 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 { if (scrollDifference) { const target = _getEventTarget(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 { } /** 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, _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); diff --git a/src/cdk/drag-drop/drop-list-ref.ts b/src/cdk/drag-drop/drop-list-ref.ts index e03a07af0186..f4cc9a9e1a5f 100644 --- a/src/cdk/drag-drop/drop-list-ref.ts +++ b/src/cdk/drag-drop/drop-list-ref.ts @@ -15,7 +15,7 @@ import {Subject, Subscription, interval, animationFrameScheduler} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; import {DragDropRegistry} from './drag-drop-registry'; import type {DragRef, Point} from './drag-ref'; -import {isPointerNearClientRect, isInsideClientRect} from './dom/client-rect'; +import {isPointerNearDomRect, isInsideClientRect} from './dom/dom-rect'; import {ParentPositionTracker} from './dom/parent-position-tracker'; import {DragCSSStyleDeclaration} from './dom/styling'; import {DropListSortStrategy} from './sorting/drop-list-sort-strategy'; @@ -148,8 +148,8 @@ export class DropListRef { /** Strategy being used to sort items within the list. */ private _sortStrategy: DropListSortStrategy; - /** Cached `ClientRect` of the drop list. */ - private _clientRect: ClientRect | undefined; + /** Cached `DOMRect` of the drop list. */ + private _domRect: DOMRect | undefined; /** Draggable items in the container. */ private _draggables: readonly DragRef[] = []; @@ -410,8 +410,8 @@ export class DropListRef { // Don't sort the item if sorting is disabled or it's out of range. if ( this.sortingDisabled || - !this._clientRect || - !isPointerNearClientRect(this._clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY) + !this._domRect || + !isPointerNearDomRect(this._domRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY) ) { return; } @@ -451,9 +451,7 @@ export class DropListRef { return; } - if ( - isPointerNearClientRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY) - ) { + if (isPointerNearDomRect(position.clientRect, DROP_PROXIMITY_THRESHOLD, pointerX, pointerY)) { [verticalScrollDirection, horizontalScrollDirection] = getElementScrollDirections( element as HTMLElement, position.clientRect, @@ -470,16 +468,16 @@ export class DropListRef { // Otherwise check if we can start scrolling the viewport. if (!verticalScrollDirection && !horizontalScrollDirection) { const {width, height} = this._viewportRuler.getViewportSize(); - const clientRect = { + const domRect = { width, height, top: 0, right: width, bottom: height, left: 0, - } as ClientRect; - verticalScrollDirection = getVerticalScrollDirection(clientRect, pointerY); - horizontalScrollDirection = getHorizontalScrollDirection(clientRect, pointerX); + } as DOMRect; + verticalScrollDirection = getVerticalScrollDirection(domRect, pointerY); + horizontalScrollDirection = getHorizontalScrollDirection(domRect, pointerX); scrollNode = window; } @@ -529,8 +527,8 @@ export class DropListRef { this._parentPositions.cache(this._scrollableElements); // The list element is always in the `scrollableElements` - // so we can take advantage of the cached `ClientRect`. - this._clientRect = this._parentPositions.positions.get(element)!.clientRect!; + // so we can take advantage of the cached `DOMRect`. + this._domRect = this._parentPositions.positions.get(element)!.clientRect!; } /** Resets the container to its initial state. */ @@ -577,7 +575,7 @@ export class DropListRef { * @param y Pointer position along the Y axis. */ _isOverContainer(x: number, y: number): boolean { - return this._clientRect != null && isInsideClientRect(this._clientRect, x, y); + return this._domRect != null && isInsideClientRect(this._domRect, x, y); } /** @@ -599,8 +597,8 @@ export class DropListRef { */ _canReceive(item: DragRef, x: number, y: number): boolean { if ( - !this._clientRect || - !isInsideClientRect(this._clientRect, x, y) || + !this._domRect || + !isInsideClientRect(this._domRect, x, y) || !this.enterPredicate(item, this) ) { return false; @@ -616,7 +614,7 @@ export class DropListRef { const nativeElement = coerceElement(this.element); - // The `ClientRect`, that we're using to find the container over which the user is + // The `DOMRect`, that we're using to find the container over which the user is // hovering, doesn't give us any information on whether the element has been scrolled // out of the view or whether it's overlapping with other containers. This means that // we could end up transferring the item into a container that's invisible or is positioned @@ -712,7 +710,7 @@ export class DropListRef { * @param clientRect Dimensions of the node. * @param pointerY Position of the user's pointer along the y axis. */ -function getVerticalScrollDirection(clientRect: ClientRect, pointerY: number) { +function getVerticalScrollDirection(clientRect: DOMRect, pointerY: number) { const {top, bottom, height} = clientRect; const yThreshold = height * SCROLL_PROXIMITY_THRESHOLD; @@ -730,7 +728,7 @@ function getVerticalScrollDirection(clientRect: ClientRect, pointerY: number) { * @param clientRect Dimensions of the node. * @param pointerX Position of the user's pointer along the x axis. */ -function getHorizontalScrollDirection(clientRect: ClientRect, pointerX: number) { +function getHorizontalScrollDirection(clientRect: DOMRect, pointerX: number) { const {left, right, width} = clientRect; const xThreshold = width * SCROLL_PROXIMITY_THRESHOLD; @@ -753,7 +751,7 @@ function getHorizontalScrollDirection(clientRect: ClientRect, pointerX: number) */ function getElementScrollDirections( element: HTMLElement, - clientRect: ClientRect, + clientRect: DOMRect, pointerX: number, pointerY: number, ): [AutoScrollVerticalDirection, AutoScrollHorizontalDirection] { diff --git a/src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts b/src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts index 6f3e35c9c031..f7177bbf5052 100644 --- a/src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts +++ b/src/cdk/drag-drop/sorting/single-axis-sort-strategy.ts @@ -12,7 +12,7 @@ import {coerceElement} from '@angular/cdk/coercion'; import {DragDropRegistry} from '../drag-drop-registry'; import {moveItemInArray} from '../drag-utils'; import {combineTransforms} from '../dom/styling'; -import {adjustClientRect, getMutableClientRect, isInsideClientRect} from '../dom/client-rect'; +import {adjustDomRect, getMutableClientRect, isInsideClientRect} from '../dom/dom-rect'; import { DropListSortStrategy, DropListSortStrategyItem, @@ -27,7 +27,7 @@ interface CachedItemPosition { /** Instance of the drag item. */ drag: T; /** Dimensions of the item. */ - clientRect: ClientRect; + clientRect: DOMRect; /** Amount by which the item has been moved since dragging started. */ offset: number; /** Inline transform that the drag item had when dragging started. */ @@ -146,13 +146,13 @@ export class SingleAxisSortStrategy `translate3d(${Math.round(sibling.offset)}px, 0, 0)`, sibling.initialTransform, ); - adjustClientRect(sibling.clientRect, 0, offset); + adjustDomRect(sibling.clientRect, 0, offset); } else { elementToOffset.style.transform = combineTransforms( `translate3d(0, ${Math.round(sibling.offset)}px, 0)`, sibling.initialTransform, ); - adjustClientRect(sibling.clientRect, offset, 0); + adjustDomRect(sibling.clientRect, offset, 0); } }); @@ -286,7 +286,7 @@ export class SingleAxisSortStrategy // we can avoid inconsistent behavior where we might be measuring the element before // its position has changed. this._itemPositions.forEach(({clientRect}) => { - adjustClientRect(clientRect, topDifference, leftDifference); + adjustDomRect(clientRect, topDifference, leftDifference); }); // We need two loops for this, because we want all of the cached @@ -327,7 +327,7 @@ export class SingleAxisSortStrategy * @param newPosition Position of the item where the current item should be moved. * @param delta Direction in which the user is moving. */ - private _getItemOffsetPx(currentPosition: ClientRect, newPosition: ClientRect, delta: 1 | -1) { + private _getItemOffsetPx(currentPosition: DOMRect, newPosition: DOMRect, delta: 1 | -1) { const isHorizontal = this.orientation === 'horizontal'; let itemOffset = isHorizontal ? newPosition.left - currentPosition.left diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts index d9014316a338..6d55d962a905 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts @@ -2417,20 +2417,20 @@ describe('FlexibleConnectedPositionStrategy', () => { const originalGetBoundingClientRect = overlayRef.overlayElement.getBoundingClientRect; - // The browser may return a `ClientRect` with sub-pixel deviations if the screen is zoomed in. + // The browser may return a `DOMRect` with sub-pixel deviations if the screen is zoomed in. // Since there's no way for us to zoom in the screen programmatically, we simulate the effect // by patching `getBoundingClientRect` to return a slightly different value. overlayRef.overlayElement.getBoundingClientRect = function () { - const clientRect = originalGetBoundingClientRect.apply(this); + const domRect = originalGetBoundingClientRect.apply(this); const zoomOffset = 0.1; return { - top: clientRect.top, - right: clientRect.right + zoomOffset, - bottom: clientRect.bottom + zoomOffset, - left: clientRect.left, - width: clientRect.width + zoomOffset, - height: clientRect.height + zoomOffset, + top: domRect.top, + right: domRect.right + zoomOffset, + bottom: domRect.bottom + zoomOffset, + left: domRect.left, + width: domRect.width + zoomOffset, + height: domRect.height + zoomOffset, } as any; }; diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts index 435c0c04c870..61d909881fe8 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts @@ -41,8 +41,8 @@ export type FlexibleConnectedPositionStrategyOrigin = height?: number; }); -/** Equivalent of `ClientRect` without some of the properties we don't care about. */ -type Dimensions = Omit; +/** Equivalent of `DOMRect` without some of the properties we don't care about. */ +type Dimensions = Omit; /** * A strategy for positioning overlays. Using this strategy, an overlay is given an @@ -768,7 +768,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { } else if (position.overlayY === 'bottom') { // Overlay is opening "upward" and thus is bound by the top viewport edge. We need to add // the viewport margin back in, because the viewport rect is narrowed down to remove the - // margin, whereas the `origin` position is calculated based on its `ClientRect`. + // margin, whereas the `origin` position is calculated based on its `DOMRect`. bottom = viewport.height - origin.y + this._viewportMargin * 2; height = viewport.height - bottom + this._viewportMargin; } else { @@ -1155,7 +1155,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { } } - /** Returns the ClientRect of the current origin. */ + /** Returns the DOMRect of the current origin. */ private _getOriginRect(): Dimensions { const origin = this._origin; @@ -1273,9 +1273,9 @@ function getPixelValue(input: number | string | null | undefined): number | null } /** - * Gets a version of an element's bounding `ClientRect` where all the values are rounded down to + * Gets a version of an element's bounding `DOMRect` where all the values are rounded down to * the nearest pixel. This allows us to account for the cases where there may be sub-pixel - * deviations in the `ClientRect` returned by the browser (e.g. when zoomed in with a percentage + * deviations in the `DOMRect` returned by the browser (e.g. when zoomed in with a percentage * size, see #21350). */ function getRoundedBoundingClientRect(clientRect: Dimensions): Dimensions { diff --git a/src/cdk/overlay/position/scroll-clip.ts b/src/cdk/overlay/position/scroll-clip.ts index e28c7dacef03..4ff66def615b 100644 --- a/src/cdk/overlay/position/scroll-clip.ts +++ b/src/cdk/overlay/position/scroll-clip.ts @@ -9,8 +9,8 @@ // TODO(jelbourn): move this to live with the rest of the scrolling code // TODO(jelbourn): someday replace this with IntersectionObservers -/** Equivalent of `ClientRect` without some of the properties we don't care about. */ -type Dimensions = Omit; +/** Equivalent of `DOMRect` without some of the properties we don't care about. */ +type Dimensions = Omit; /** * Gets whether an element is scrolled outside of view by any of its parent scrolling containers. diff --git a/src/cdk/scrolling/viewport-ruler.ts b/src/cdk/scrolling/viewport-ruler.ts index aaf8630473bb..f3b6728be067 100644 --- a/src/cdk/scrolling/viewport-ruler.ts +++ b/src/cdk/scrolling/viewport-ruler.ts @@ -90,7 +90,7 @@ export class ViewportRuler implements OnDestroy { return output; } - /** Gets a ClientRect for the viewport's bounds. */ + /** Gets a DOMRect for the viewport's bounds. */ getViewportRect() { // Use the document element's bounding rect rather than the window scroll properties // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll diff --git a/src/cdk/scrolling/virtual-scrollable.ts b/src/cdk/scrolling/virtual-scrollable.ts index 4ded6984948c..12c3b44323ab 100644 --- a/src/cdk/scrolling/virtual-scrollable.ts +++ b/src/cdk/scrolling/virtual-scrollable.ts @@ -38,7 +38,7 @@ export abstract class CdkVirtualScrollable extends CdkScrollable { } /** - * Measure the bounding ClientRect size including the scroll offset. + * Measure the bounding DOMRect size including the scroll offset. * * @param from The edge to measure from. */ diff --git a/src/dev-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts index 771efb8affae..955647e0542b 100644 --- a/src/dev-app/drag-drop/drag-drop-demo.ts +++ b/src/dev-app/drag-drop/drag-drop-demo.ts @@ -77,12 +77,7 @@ export class DragAndDropDemo { } } - constrainPosition( - {x, y}: Point, - _dragRef: DragRef, - _dimensions: ClientRect, - pickup: Point, - ): Point { + constrainPosition({x, y}: Point, _dragRef: DragRef, _dimensions: DOMRect, pickup: Point): Point { // Just returning the original top left corner to not modify position x -= pickup.x; y -= pickup.y; diff --git a/src/material/core/ripple/ripple-renderer.ts b/src/material/core/ripple/ripple-renderer.ts index f3434e0ea4b5..87c1520c2e8c 100644 --- a/src/material/core/ripple/ripple-renderer.ts +++ b/src/material/core/ripple/ripple-renderer.ts @@ -95,7 +95,7 @@ export class RippleRenderer implements EventListenerObject { * Cached dimensions of the ripple container. Set when the first * ripple is shown and cleared once no more ripples are visible. */ - private _containerRect: ClientRect | null; + private _containerRect: DOMRect | null; private static _eventManager = new RippleEventManager(); @@ -441,7 +441,7 @@ export class RippleRenderer implements EventListenerObject { /** * Returns the distance from the point (x, y) to the furthest corner of a rectangle. */ -function distanceToFurthestCorner(x: number, y: number, rect: ClientRect) { +function distanceToFurthestCorner(x: number, y: number, rect: DOMRect) { const distX = Math.max(Math.abs(x - rect.left), Math.abs(x - rect.right)); const distY = Math.max(Math.abs(y - rect.top), Math.abs(y - rect.bottom)); return Math.sqrt(distX * distX + distY * distY); diff --git a/src/material/tabs/ink-bar.ts b/src/material/tabs/ink-bar.ts index 6309ae647afd..f41102c734b2 100644 --- a/src/material/tabs/ink-bar.ts +++ b/src/material/tabs/ink-bar.ts @@ -15,7 +15,7 @@ import {ElementRef, InjectionToken, OnDestroy, OnInit, QueryList} from '@angular */ export interface MatInkBarItem extends OnInit, OnDestroy { elementRef: ElementRef; - activateInkBar(previousIndicatorClientRect?: ClientRect): void; + activateInkBar(previousIndicatorClientRect?: DOMRect): void; deactivateInkBar(): void; fitInkBarToContent: boolean; } @@ -53,10 +53,10 @@ export class MatInkBar { currentItem?.deactivateInkBar(); if (correspondingItem) { - const clientRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.(); + const domRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.(); - // The ink bar won't animate unless we give it the `ClientRect` of the previous item. - correspondingItem.activateInkBar(clientRect); + // The ink bar won't animate unless we give it the `DOMRect` of the previous item. + correspondingItem.activateInkBar(domRect); this._currentItem = correspondingItem; } } @@ -97,7 +97,7 @@ export function mixinInkBarItem< } /** Aligns the ink bar to the current item. */ - activateInkBar(previousIndicatorClientRect?: ClientRect) { + activateInkBar(previousIndicatorClientRect?: DOMRect) { const element = this.elementRef.nativeElement; // Early exit if no indicator is present to handle cases where an indicator diff --git a/tools/public_api_guard/cdk/drag-drop.md b/tools/public_api_guard/cdk/drag-drop.md index ec1680edc5cd..f9d894ee8526 100644 --- a/tools/public_api_guard/cdk/drag-drop.md +++ b/tools/public_api_guard/cdk/drag-drop.md @@ -54,7 +54,7 @@ export class CdkDrag implements AfterViewInit, OnChanges, OnDestroy { dropContainer: CdkDropList, _document: any, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, config: DragDropConfig, _dir: Directionality, dragDrop: DragDrop, _changeDetectorRef: ChangeDetectorRef, _selfHandle?: CdkDragHandle | undefined, _parentDrag?: CdkDrag | undefined); boundaryElement: string | ElementRef | HTMLElement; - constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point; + constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point; data: T; get disabled(): boolean; set disabled(value: boolean); @@ -366,7 +366,7 @@ export class DragDropRegistry { constructor(element: ElementRef | HTMLElement, _config: DragRefConfig, _document: Document, _ngZone: NgZone, _viewportRuler: ViewportRuler, _dragDropRegistry: DragDropRegistry); readonly beforeStarted: Subject; - constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: ClientRect, pickupPositionInElement: Point) => Point; + constrainPosition?: (userPointerPosition: Point, dragRef: DragRef, dimensions: DOMRect, pickupPositionInElement: Point) => Point; data: T; get disabled(): boolean; set disabled(value: boolean);