Rect

• bottom : number

  readonly

  module:utils/dom/rect~Rect#bottom

  The "bottom" value of the rect.

  See source (with github icon)

• height : number

  readonly

  module:utils/dom/rect~Rect#height

  The "height" value of the rect.

  See source (with github icon)

• left : number

  readonly

  module:utils/dom/rect~Rect#left

  The "left" value of the rect.

  See source (with github icon)

• right : number

  readonly

  module:utils/dom/rect~Rect#right

  The "right" value of the rect.

  See source (with github icon)

• top : number

  readonly

  module:utils/dom/rect~Rect#top

  The "top" value of the rect.

  See source (with github icon)

• width : number

  readonly

  module:utils/dom/rect~Rect#width

  The "width" value of the rect.

  See source (with github icon)

• _source : RectSource

  privatereadonly

  module:utils/dom/rect~Rect#_source

  The object this rect is for.

  See source (with github icon)

• constructor( source )

  module:utils/dom/rect~Rect#constructor

  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 ) );
  

  Copy code

  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.

  See source (with github icon)

  Parameters

  source : RectSource

  A source object to create the rect.

• clone() → Rect

  module:utils/dom/rect~Rect#clone

  Returns a clone of the rect.

  See source (with github icon)

  Returns

  Rect

  A cloned rect.

• contains( anotherRect ) → boolean

  module:utils/dom/rect~Rect#contains

  Checks whether a rect fully contains another rect instance.

  See source (with github icon)

  Parameters

  anotherRect : Rect

  Returns

  boolean

  true if contains, false otherwise.

• excludeScrollbarsAndBorders() → this

  module:utils/dom/rect~Rect#excludeScrollbarsAndBorders

  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.

  See source (with github icon)

  Returns

  this

  A rect which has been updated.

• getArea() → number

  module:utils/dom/rect~Rect#getArea

  Returns the area of the rect.

  See source (with github icon)

  Returns

  number

• getIntersection( anotherRect ) → null | Rect

  module:utils/dom/rect~Rect#getIntersection

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

  See source (with github icon)

  Parameters

  anotherRect : Rect

  Returns

  null | Rect

• getIntersectionArea( anotherRect ) → number

  module:utils/dom/rect~Rect#getIntersectionArea

  Returns the area of intersection with another rect.

  See source (with github icon)

  Parameters

  anotherRect : Rect

  Returns

  number

  Area of intersection.

• getVisible() → null | Rect

  module:utils/dom/rect~Rect#getVisible

  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() );
  

  Copy code

  See source (with github icon)

  Returns

  null | Rect

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

• isEqual( anotherRect ) → boolean

  module:utils/dom/rect~Rect#isEqual

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

  See source (with github icon)

  Parameters

  anotherRect : Rect

  A rect instance to compare with.

  Returns

  boolean

  true when Rects are equal. false otherwise.

• moveBy( x, y ) → this

  module:utils/dom/rect~Rect#moveBy

  Moves the rect in–place by a dedicated offset.

  See source (with github icon)

  Parameters

  x : number

  A horizontal offset.

  y : number

  A vertical offset

  Returns

  this

  A rect which has been moved.

• moveTo( x, y ) → this

  module:utils/dom/rect~Rect#moveTo

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

  See source (with github icon)

  Parameters

  x : number

  Desired horizontal location.

  y : number

  Desired vertical location.

  Returns

  this

  A rect which has been moved.

• toAbsoluteRect() → Rect

  module:utils/dom/rect~Rect#toAbsoluteRect

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

  See source (with github icon)

  Returns

  Rect

Static methods

• getBoundingRect( rects ) → null | Rect

  static

  module:utils/dom/rect~Rect.getBoundingRect

  Returns a bounding rectangle that contains all the given rects.

  See source (with github icon)

  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.

• getDomRangeRects( range ) → Array<Rect>

  static

  module:utils/dom/rect~Rect.getDomRangeRects

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

  See source (with github icon)

  Parameters

  range : Range

  A native DOM range.

  Returns

  Array<Rect>

  DOM Range rects.