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.

  • protected readonly

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

    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 : HTMLElement | Range | Window | ClientRect | DOMRect | Rect | Object

    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() → Rect

    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

    Rect

    A rect which has been updated.

  • getArea() → Number

    See source

    Returns the area of the rect.

    Returns

    Number

  • getIntersection( anotherRect ) → Rect

    See source

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

    Parameters

    anotherRect : Rect

    Returns

    Rect

  • getIntersectionArea( anotherRect ) → Number

    See source

    Returns the area of intersection with another rect.

    Parameters

    anotherRect : Rect

    [description]

    Returns

    Number

    Area of intersection.

  • getVisible() → Rect | null

    See source

    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".

    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

    See source

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

    Parameters

    rect : Rect

    A rect instance to compare with.

    Returns

    Boolean

    true when Rects are equal. false otherwise.

  • moveBy( x, y ) → Rect

    See source

    Moves the rect in–place by a dedicated offset.

    Parameters

    x : Number

    A horizontal offset.

    y : Number

    A vertical offset

    Returns

    Rect

    A rect which has been moved.

  • moveTo( x, y ) → Rect

    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

    Rect

    A rect which has been moved.

Static methods

  • static

    getBoundingRect( rects ) → Rect | null

    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

    Rect | null

    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.