CKEditor Ecosystem Documentation
Search
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

  • readonly

    bottom : number

    See source

    The "bottom" value of the rect.

  • readonly

    height : number

    See source

    The "height" value of the rect.

  • readonly

    left : number

    See source

    The "left" value of the rect.

  • readonly

    right : number

    See source

    The "right" value of the rect.

  • readonly

    top : number

    See source

    The "top" value of the rect.

  • readonly

    width : number

    See source

    The "width" value of the rect.

  • private readonly

    _source : RectSource

    See source

    The object this rect is for.

Methods

  • constructor( source )

    See source

    Creates an instance of rect.

    // 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 : RectSource

    A source object to create the rect.

  • clone() → Rect

    See source

    Returns a clone of the rect.

    Returns

    Rect

    A cloned rect.

  • contains( anotherRect ) → boolean

    See source

    Checks whether a rect fully contains another rect instance.

    Parameters

    anotherRect : Rect

    Returns

    boolean

    true if contains, false otherwise.

  • excludeScrollbarsAndBorders() → this

    See source

    Excludes scrollbars and CSS borders from the rect.

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

    Returns

    this

    A rect which has been updated.

  • getArea() → number

    See source

    Returns the area of the rect.

    Returns

    number

  • getIntersection( anotherRect ) → null | Rect

    See source

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

    Parameters

    anotherRect : Rect

    Returns

    null | Rect

  • getIntersectionArea( anotherRect ) → number

    See source

    Returns the area of intersection with another rect.

    Parameters

    anotherRect : Rect

    Returns

    number

    Area of intersection.

  • getVisible() → null | Rect

    See source

    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:

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

    Returns

    null | Rect

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

  • isEqual( anotherRect ) → boolean

    See source

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

    Parameters

    anotherRect : Rect

    A rect instance to compare with.

    Returns

    boolean

    true when Rects are equal. false otherwise.

  • moveBy( x, y ) → this

    See source

    Moves the rect in–place by a dedicated offset.

    Parameters

    x : number

    A horizontal offset.

    y : number

    A vertical offset

    Returns

    this

    A rect which has been moved.

  • moveTo( x, y ) → this

    See source

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

    Parameters

    x : number

    Desired horizontal location.

    y : number

    Desired vertical location.

    Returns

    this

    A rect which has been moved.

  • toAbsoluteRect() → Rect

    See source

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

    Returns

    Rect

Static methods

  • static

    getBoundingRect( rects ) → null | Rect

    See source

    Returns a bounding rectangle that contains all the given rects.

    Parameters

    rects : Iterable<Rect>

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

    Returns

    null | Rect

    Bounding rectangle or null if no rects were given.

  • static

    getDomRangeRects( range ) → Array<Rect>

    See source

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

    Parameters

    range : Range

    A native DOM range.

    Returns

    Array<Rect>

    DOM Range rects.