CKEditor Ecosystem Documentation
Search
⚠️ WarningNightly documentation ahead. Switch to the stable editor documentation.
Home/CKEditor 5/API
Class

Rect (utils/dom)

@ckeditor/ckeditor5-utils/src/dom/rect

class
See source

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.

Filtering

Properties

  • bottom : Number

    readonly

    The "bottom" value of the rect.

    See source

  • height : Number

    readonly

    The "height" value of the rect.

    See source

  • left : Number

    readonly

    The "left" value of the rect.

    See source

  • right : Number

    readonly

    The "right" value of the rect.

    See source

  • top : Number

    readonly

    The "top" value of the rect.

    See source

  • width : Number

    readonly

    The "width" value of the rect.

    See source

  • _source : HTMLElement | Range | Window | ClientRect | DOMRect | Rect | Object

    protected readonly

    The object this rect is for.

    See source

Methods

  • constructor( source )

    Creates an instance of rect.

    See source
    // 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 to get the inner part of the rect.

    Parameters

    source : HTMLElement | Range | Window | ClientRect | DOMRect | Rect | Object

    A source object to create the rect.

  • clone() → Rect

    Returns a clone of the rect.

    See source

    Returns

    Rect

    A cloned rect.

  • contains( anotherRect ) → Boolean

    Checks whether a rect fully contains another rect instance.

    See source

    Parameters

    anotherRect : Rect

    Returns

    Boolean

    true if contains, false otherwise.

  • excludeScrollbarsAndBorders() → Rect

    Excludes scrollbars and CSS borders from the rect.

    See source
    • Borders are removed when _source is an HTML element.
    • Scrollbars are excluded from HTML elements and the window.

    Returns

    Rect

    A rect which has been updated.

  • getArea() → Number

    Returns the area of the rect.

    See source

    Returns

    Number

  • getIntersection( anotherRect ) → Rect

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

    See source

    Parameters

    anotherRect : Rect

    Returns

    Rect

  • getIntersectionArea( anotherRect ) → Number

    Returns the area of intersection with another rect.

    See source

    Parameters

    anotherRect : Rect

    [description]

    Returns

    Number

    Area of intersection.

  • getVisible() → Rect | null

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

    See source

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

    Returns

    Rect | null

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

  • isEqual( rect ) → Boolean

    Checks if all property values (top, left, right, bottom, width and height) are the equal in both rect instances.

    See source

    Parameters

    rect : Rect

    A rect instance to compare with.

    Returns

    Boolean

    true when Rects are equal. false otherwise.

  • moveBy( x, y ) → Rect

    Moves the rect in–place by a dedicated offset.

    See source

    Parameters

    x : Number

    A horizontal offset.

    y : Number

    A vertical offset

    Returns

    Rect

    A rect which has been moved.

  • moveTo( x, y ) → Rect

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

    See source

    Parameters

    x : Number

    Desired horizontal location.

    y : Number

    Desired vertical location.

    Returns

    Rect

    A rect which has been moved.

Static methods

  • getBoundingRect( rects ) → Rect | null

    static

    Returns a bounding rectangle that contains all the given rects.

    See source

    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.

  • getDomRangeRects( range ) → Array.<Rect>

    static

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

    See source

    Parameters

    range : Range

    A native DOM range.

    Returns

    Array.<Rect>

    DOM Range rects.