# Rect

class

A helper class representing a `ClientRect` object, e.g. value returned by the native `object.getBoundingClientRect()` method. Provides a set of methods to manipulate the rect and compare it against other rect instances.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L28)

<a id="properties">

## Properties

<a id="member-bottom">

### `bottom: number` _(readonly)_

The "bottom" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L48)

<a id="member-height">

### `height: number` _(readonly)_

The "height" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L69)

<a id="member-left">

### `left: number` _(readonly)_

The "left" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L55)

<a id="member-right">

### `right: number` _(readonly)_

The "right" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L41)

<a id="member-top">

### `top: number` _(readonly)_

The "top" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L34)

<a id="member-width">

### `width: number` _(readonly)_

The "width" value of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L62)

<a id="member-_source">

### `_source: RectSource` _(private)_

The object this rect is for.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L76)

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( source )`

Creates an instance of rect.

```typescript
// Rect of an HTMLElement.
const rectA = new Rect( document.body );

// Rect of a DOM Range.
const rectB = new Rect( document.getSelection().getRangeAt( 0 ) );

// Rect of a window (web browser viewport).
const rectC = new Rect( window );

// Rect out of an object.
const rectD = new Rect( { top: 0, right: 10, bottom: 10, left: 0, width: 10, height: 10 } );

// Rect out of another Rect instance.
const rectE = new Rect( rectD );

// Rect out of a ClientRect.
const rectF = new Rect( document.body.getClientRects().item( 0 ) );
```

**Note**: By default a rect of an HTML element includes its CSS borders and scrollbars (if any) ant the rect of a `window` includes scrollbars too. Use [`excludeScrollbarsAndBorders`](#function-excludeScrollbarsAndBorders) to get the inner part of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L107)

#### Parameters

* `source: RectSource`

  A source object to create the rect.

<a id="function-clone">

### `clone() → Rect`

Returns a clone of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L157)

#### Returns

* `Rect`

  A cloned rect.

<a id="function-contains">

### `contains( anotherRect ) → boolean`

Checks whether a rect fully contains another rect instance.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L355)

#### Parameters

* `anotherRect: Rect`

#### Returns

* `boolean`

  `true` if contains, `false` otherwise.

<a id="function-excludeScrollbarsAndBorders">

### `excludeScrollbarsAndBorders() → this`

Excludes scrollbars and CSS borders from the rect.

* Borders are removed when [`_source`](#member-_source) is an HTML element.
* Scrollbars are excluded from HTML elements and the `window`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L387)

#### Returns

* `this`

  A rect which has been updated.

<a id="function-getArea">

### `getArea() → number`

Returns the area of the rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L238)

#### Returns

* `number`

<a id="function-getIntersection">

### `getIntersection( anotherRect ) → Rect | null`

Returns a new rect a a result of intersection with another rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L196)

#### Parameters

* `anotherRect: Rect`

#### Returns

* `Rect | null`

<a id="function-getIntersectionArea">

### `getIntersectionArea( anotherRect ) → number`

Returns the area of intersection with another rect.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L225)

#### Parameters

* `anotherRect: Rect`

#### Returns

* `number`

  Area of intersection.

<a id="function-getVisible">

### `getVisible() → Rect | null`

Returns a new rect, a part of the original rect, which is actually visible to the user and is relative to the,`body`, e.g. an original rect cropped by parent element rects which have `overflow` set in CSS other than `"visible"`.

If there's no such visible rect, which is when the rect is limited by one or many of the ancestors, `null` is returned.

**Note**: This method does not consider the boundaries of the viewport (window). To get a rect cropped by all ancestors and the viewport, use an intersection such as:

```typescript
const visibleInViewportRect = new Rect( window ).getIntersection( new Rect( source ).getVisible() );
```

**Note**: The ancestor walk crosses shadow DOM boundaries, continuing from the host element of a shadow root instead of stopping at it, so a rect inside a shadow tree is still cropped by the ancestors in the surrounding document. Works for open and closed shadow roots alike.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L263)

#### Returns

* `Rect | null`

  A visible rect instance or `null`, if there's none.

<a id="function-isEqual">

### `isEqual( anotherRect ) → boolean`

Checks if all property values ([`top`](#member-top), [`left`](#member-left), [`right`](#member-right), [`bottom`](#member-bottom), [`width`](#member-width) and [`height`](#member-height)) are the equal in both rect instances.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L339)

#### Parameters

* `anotherRect: Rect`

  A rect instance to compare with.

#### Returns

* `boolean`

  `true` when Rects are equal. `false` otherwise.

<a id="function-moveBy">

### `moveBy( x, y ) → this`

Moves the rect in–place by a dedicated offset.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L184)

#### Parameters

* `x: number`

  A horizontal offset.

* `y: number`

  A vertical offset

#### Returns

* `this`

  A rect which has been moved.

<a id="function-moveTo">

### `moveTo( x, y ) → this`

Moves the rect so that its upper–left corner lands in desired `[ x, y ]` location.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L168)

#### Parameters

* `x: number`

  Desired horizontal location.

* `y: number`

  Desired vertical location.

#### Returns

* `this`

  A rect which has been moved.

<a id="function-toAbsoluteRect">

### `toAbsoluteRect() → Rect`

Recalculates screen coordinates to coordinates relative to the positioned ancestor offset.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L364)

#### Returns

* `Rect`

#### Static methods

<a id="static-function-getBoundingRect">

### `getBoundingRect( rects ) → Rect | null` _(static)_

Returns a bounding rectangle that contains all the given `rects`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L491)

#### Parameters

* `rects: Iterable<Rect>`

  A list of rectangles that should be contained in the result rectangle.

#### Returns

* `Rect | null`

  Bounding rectangle or `null` if no `rects` were given.

<a id="static-function-getDomElementRects">

### `getDomElementRects( element ) → Array<Rect>` _(static)_

Returns an array of Rects of the given DOM Element based on its native `getClientRects()` method.

Also see [`getDomRangeRects`](#static-function-getDomRangeRects).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L473)

#### Parameters

* `element: HTMLElement`

#### Returns

* `Array<Rect>`

<a id="static-function-getDomRangeRects">

### `getDomRangeRects( range ) → Array<Rect>` _(static)_

Returns an array of rects of the given native DOM Range.

Also see [`getDomElementRects`](#static-function-getDomElementRects).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-utils/src/dom/rect.ts#L432)

#### Parameters

* `range: Range`

  A native DOM range.

#### Returns

* `Array<Rect>`

  DOM Range rects.

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)