Class

Rect (utils/dom)

@ckeditor/ckeditor5-utils/src/dom/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.

Filtering

Properties

  • bottom : Number

    readonly

    The "bottom" value of the rect.

  • height : Number

    readonly

    The "height" value of the rect.

  • left : Number

    readonly

    The "left" value of the rect.

  • right : Number

    readonly

    The "right" value of the rect.

  • top : Number

    readonly

    The "top" value of the rect.

  • width : Number

    readonly

    The "width" value of the rect.

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

    protected readonly

    The object this rect is for.

Methods

  • constructor( 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 | Rect | Object

    A source object to create the rect.

  • clone() → Rect

    Returns a clone of the rect.

    Returns

    Rect

    A cloned rect.

  • contains( anotherRect ) → Boolean

    Checks whether a rect fully contains another rect instance.

    Parameters

    anotherRect : Rect

    Returns

    Boolean

    true if contains, false otherwise.

  • excludeScrollbarsAndBorders() → Rect

    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

    Returns the area of the rect.

    Returns

    Number
  • getIntersection( anotherRect ) → Rect

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

    Parameters

    anotherRect : Rect

    Returns

    Rect
  • getIntersectionArea( anotherRect ) → Number

    Returns the area of intersection with another rect.

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

    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.

    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.

    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.

    Parameters

    x : Number

    Desired horizontal location.

    y : Number

    Desired vertical location.

    Returns

    Rect

    A rect which has been moved.

Static methods

  • getDomRangeRects( range ) → Array.<Rect>

    static

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

    Parameters

    range : Range

    A native DOM range.

    Returns

    Array.<Rect>

    DOM Range rects.