Rect (utils/dom)
@ckeditor/ckeditor5-utils/src/dom/rect
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
-
The "bottom" value of the rect.
-
The "height" value of the rect.
-
The "left" value of the rect.
-
The "right" value of the rect.
-
The "top" value of the rect.
-
The "width" value of the rect.
-
protected readonly
_source : HTMLElement | Range | Window | ClientRect | DOMRect | Rect | Object
module:utils/dom/rect~Rect#_source
The object this rect is for.
Methods
-
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 ) );
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. UseexcludeScrollbarsAndBorders
to get the inner part of the rect.Parameters
source : HTMLElement | Range | Window | ClientRect | DOMRect | Rect | Object
A source object to create the rect.
-
-
contains( anotherRect ) → Boolean
module:utils/dom/rect~Rect#contains
Checks whether a rect fully contains another rect instance.
Parameters
anotherRect : Rect
Returns
Boolean
true
if contains,false
otherwise.
-
excludeScrollbarsAndBorders() → Rect
module:utils/dom/rect~Rect#excludeScrollbarsAndBorders
-
getArea() → Number
module:utils/dom/rect~Rect#getArea
-
getIntersection( anotherRect ) → Rect
module:utils/dom/rect~Rect#getIntersection
Returns a new rect a a result of intersection with another rect.
Parameters
anotherRect : Rect
Returns
-
getIntersectionArea( anotherRect ) → Number
module:utils/dom/rect~Rect#getIntersectionArea
Returns the area of intersection with another rect.
Parameters
anotherRect : Rect
[description]
Returns
Number
Area of intersection.
-
getVisible() → Rect | null
module:utils/dom/rect~Rect#getVisible
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
module:utils/dom/rect~Rect#isEqual
-
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.
-
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
-
Returns an array of rects of the given native DOM Range.
Parameters
range : Range
A native DOM range.
Returns
Array.<Rect>
DOM Range rects.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.