Class Rect

A rect describes a rectangle in 2D space. It consists of a location (left and top) and dimensions (width and height). Provided values are defined in same units used by the page, point units. Point units are only equal to pixels when zoom value is 1.

It is an Immutable.Record and thus can be updated using set(key, value), for example: rect.set("left", 20).

Class

Example

Create and update a rect.

const rect = new NutrientViewer.Geometry.Rect({
  left: 10,
  top: 20,
  width: 30,
  height: 40
});
rect = rect.set("left", 20);
rect.left; // => 20

Default Value

{ left: 0, top: 0, width: 0, height: 0 }

Hierarchy

ReadonlyInheritableImmutableRecordRect

Constructors

new Rect(options)

Parameters
options{ height?: number; left?: number; top?: number; width?: number }
Optional
Inherited from Readonly<RectData>.constructor

Properties

height

Readonly

number

The height of the rect. This is equivalent to height of a NutrientViewer.Geometry.Size.

Default Value

0

left

Readonly

number

The left distance of the rect. This is equivalent to x of a NutrientViewer.Geometry.Point.

Default Value

0

top

Readonly

number

The top distance of the rect. This is equivalent to y of a NutrientViewer.Geometry.Point.

Default Value

0

width

Readonly

number

The width of the rect. This is equivalent to width of a NutrientViewer.Geometry.Size.

Default Value

0

Accessors

bottom

get bottom(): number
Computes the bottom point in the rect by adding top and height.

Returns
number

right

get right(): number
Computes the right point in the rect by adding left and width.

Returns
number

Methods

apply

apply(matrix: TransformationMatrix): NutrientViewer.Geometry.Rect
Applies a transformation to the rect. We will translate [top, left] like a 2D vector but only apply the scaling to the dimension [width, height]

Parameters
matrixTransformationMatrix
Returns
NutrientViewer.Geometry.Rect

expandToIncludePoints

expandToIncludePoints(
...points: NutrientViewer.Geometry.Point[],
): NutrientViewer.Geometry.Rect
Expand the rect to include the list of points.
Parameters
...pointsNutrientViewer.Geometry.Point[]
Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }) const newRect = rect.expandToIncludePoints(new NutrientViewer.Geometry.Point({ x: 30, y: 30 })); // => Rect {left: 10, top: 10, width: 30, height: 30}

getCenter

getCenter(): NutrientViewer.Geometry.Point
Returns the NutrientViewer.Geometry.Point that is the center of this rect.
Returns
NutrientViewer.Geometry.Point
A point that is on the center of this rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.getCenter(); // => Point {left: 15, top: 15}

getLocation

getLocation(): NutrientViewer.Geometry.Point
Returns the NutrientViewer.Geometry.Point that is the upper-left corner of this rect.
Returns
NutrientViewer.Geometry.Point
A point that is on the upper-left corner of this rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.getLocation(); // => Point {left: 10, top: 10}

getSize

getSize(): NutrientViewer.Geometry.Size
Returns the NutrientViewer.Geometry.Size of the rect.
Returns
NutrientViewer.Geometry.Size
The size of the rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.getSize(); // => Size {width: 10, height: 10}

grow

grow(growth: number): NutrientViewer.Geometry.Rect
Grows the rect by growth on every side but keeps the center of the Rect at the same position.
Parameters
growthnumber
The growth factor. It will be applied on every side, so the new width and height will increase by two times this factor.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.grow(5); // => Rect {left: 5, top: 5, width: 20, height: 20}

isPointInside

isPointInside(point: NutrientViewer.Geometry.Point): boolean
Test if a point is within the rect. This can be used for hit testing.
Parameters
pointNutrientViewer.Geometry.Point
The point that should be tested.

Returns
boolean
true if the point is inside, false otherwise.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.isPointInside(new NutrientViewer.Geometry.Point({ x: 15, y: 15 })); // => true rect.isPointInside(new NutrientViewer.Geometry.Point({ x: 25, y: 25 })); // => false

isRectInside

isRectInside(otherRect: NutrientViewer.Geometry.Rect): boolean

Test if a rect is completely inside this rect.

Parameters

otherRectNutrientViewer.Geometry.Rect

The rect that should be tested.

Returns

boolean

true if the rect is inside, false otherwise.

Example

const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

const insideRect = new NutrientViewer.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
const overlappingRect = new NutrientViewer.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
const outsideRect = new NutrientViewer.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

rect.isRectInside(insideRect); // => true
rect.isRectInside(overlappingRect); // => false
rect.isRectInside(outsideRect); // => false

isRectOverlapping

isRectOverlapping(other: NutrientViewer.Geometry.Rect): boolean

Test if the union area of two rects is greater than zero.

Parameters

otherNutrientViewer.Geometry.Rect

The rect that should be tested.

Returns

boolean

true if the rect is overlapping, false otherwise.

Example

const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 });

const insideRect = new NutrientViewer.Geometry.Rect({ left: 12, top: 12, width: 5, height: 5 });
const overlappingRect = new NutrientViewer.Geometry.Rect({ left: 5, top: 5, width: 10, height: 10 });
const outsideRect = new NutrientViewer.Geometry.Rect({ left: 0, top: 0, width: 5, height: 5 });

rect.isRectOverlapping(insideRect); // => true
rect.isRectOverlapping(overlappingRect); // => true
rect.isRectOverlapping(outsideRect); // => false

normalize

normalize(): NutrientViewer.Geometry.Rect
Normalizes the Rect. In case of either a negative width or a negative height, the position will be updated so that the location is again the top, left point of the rectangle.

Returns
NutrientViewer.Geometry.Rect

round

round(): NutrientViewer.Geometry.Rect
Rounds all coordinates to whole numbers. This implementation uses Math.round for all coordinates. The resulting Rect might no longer overlap the source Rect.
Returns
NutrientViewer.Geometry.Rect
A new rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 }); rect.round(); // => Rect {left: 11, top: 16, width: 21, height: 26}

roundOverlap

roundOverlap(): NutrientViewer.Geometry.Rect
Rounds all coordinates to whole numbers. The resulting Rect will always overlap the source Rect.

The location (left and top) will be rounded to a number which is smaller than or equal to the current value.

The size (width and height) will be rounded to a number which is greater than or equal to the current value.
Returns
NutrientViewer.Geometry.Rect
A new rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10.5, top: 15.5, width: 20.5, height: 25.5 }); rect.roundOverlap(); // => Rect {left: 10, top: 15, width: 21, height: 26}

scale

scale(sx: number, sy?: number): NutrientViewer.Geometry.Rect
Scales all values by the given sx and sy factor. If only sx is set and sy not defined, it will scale the values by sx.
Parameters
sxnumber
Scale value for the left and width value. If sy is not set, this scale will also be applied to top and height.

synumber
Optional
Scale value for the top an height value.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); rect.scale(2); // => Rect {left: 20, top: 20, width: 20, height: 20}

setLocation

setLocation(
location: NutrientViewer.Geometry.Point,
): NutrientViewer.Geometry.Rect
Updates the location of the rect by modifying left and top.
Parameters
locationNutrientViewer.Geometry.Point
The new location for the rect.

Returns
NutrientViewer.Geometry.Rect
A new Rect with left and top updated.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10, width: 10, height: 10 }); var nextLocation = new NutrientViewer.Geometry.Point({ x: 20, y: 30 }); rect.setLocation(nextLocation); // => Rect {left: 20, top: 30, width: 10, height: 10}

translate

translate(point: NutrientViewer.Geometry.Point): NutrientViewer.Geometry.Rect
Translates the location of the rect by a point.
Parameters
pointNutrientViewer.Geometry.Point
A point that describes the translation distance.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10 }); rect.translate(new NutrientViewer.Geometry.Point({ x: 5, y: -5})); // => Rect {left: 15, top: 5, width: 0, height: 0}

translateX

translateX(tx: number): NutrientViewer.Geometry.Rect
Translates the horizontal location of the rect by a number.
Parameters
txnumber
A number to translate the left value.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10 }); rect.translateX(5); // => Rect {left: 15, top: 10, width: 0, height: 0}

translateY

translateY(ty: number): NutrientViewer.Geometry.Rect
Translates the vertical location of the rect by a number.
Parameters
tynumber
A number to translate the top value.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = new NutrientViewer.Geometry.Rect({ left: 10, top: 10 }); point.translateY(5); // => Rect {left: 10, top: 15, width: 0, height: 0}

areRectsCloserThan

Static

areRectsCloserThan(
    a: NutrientViewer.Geometry.Rect,
    b: NutrientViewer.Geometry.Rect,
    distance: number,
): boolean
Parameters
aNutrientViewer.Geometry.Rect
bNutrientViewer.Geometry.Rect
distancenumber
Returns
boolean

areVerticallyAligned

Static

areVerticallyAligned(
    a: NutrientViewer.Geometry.Rect,
    b: NutrientViewer.Geometry.Rect,
    thresholdDistance: number,
): boolean
Parameters
aNutrientViewer.Geometry.Rect
bNutrientViewer.Geometry.Rect
thresholdDistancenumber
Returns
boolean

fromClientRect

Static

fromClientRect(rect: DOMRect): NutrientViewer.Geometry.Rect
Creates a new rect from a DOM rect.
Parameters
rectDOMRect
A DOM rect, such as the result of Element.getBoundingClientRect().

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rect = NutrientViewer.Geometry.Rect.fromClientRect( element.getBoundingClientRect() );

fromInset

Static

fromInset(inset: NutrientViewer.Geometry.Inset): NutrientViewer.Geometry.Rect
Parameters
insetNutrientViewer.Geometry.Inset
Returns
NutrientViewer.Geometry.Rect

fromPoints

Static

fromPoints(
...points: NutrientViewer.Geometry.Point[],
): NutrientViewer.Geometry.Rect

Creates a new rect from four points.

Parameters

...pointsNutrientViewer.Geometry.Point[]

An array of four points.

Returns

NutrientViewer.Geometry.Rect

A new Rect.

Example

const rect = NutrientViewer.Geometry.Rect.fromPoints(
 new NutrientViewer.Geometry.Point({ x: 10, y: 10 }),
 new NutrientViewer.Geometry.Point({ x: 20, y: 10 }),
 new NutrientViewer.Geometry.Point({ x: 20, y: 20 }),
 new NutrientViewer.Geometry.Point({ x: 10, y: 20 })
 );

 @public

getCenteredRect

Static

getCenteredRect(
inner: NutrientViewer.Geometry.Size,
outer: NutrientViewer.Geometry.Size,
): NutrientViewer.Geometry.Rect
Parameters
innerNutrientViewer.Geometry.Size
outerNutrientViewer.Geometry.Size
Returns
NutrientViewer.Geometry.Rect

union

Static

union(
rects: NutrientViewer.Immutable.List<NutrientViewer.Geometry.Rect>,
): NutrientViewer.Geometry.Rect
Creates a rect that surrounds all rects in the supplied NutrientViewer.Immutable.List.

This can be used to calculate the bounding box of a list of rects.
Parameters
rectsNutrientViewer.Immutable.List<NutrientViewer.Geometry.Rect>
An immutable list of rects.

Returns
NutrientViewer.Geometry.Rect
A new Rect.
Example
const rects = NutrientViewer.Immutable.List([ new NutrientViewer.Geometry.Rect({ left: 14, top: 50, width: 50, height: 50 }), new NutrientViewer.Geometry.Rect({ left: 70, top: 20, width: 98, height: 99 }), new NutrientViewer.Geometry.Rect({ left: 14, top: 13, width: 15, height: 16 }) ]); const unionRect = NutrientViewer.Geometry.Rect.union(rects); // => Rect {left: 14, top: 13, width: 154, height: 106}

Immutable Record API

asImmutable

Deprecated

asImmutable(): this
Deprecated
Returns
this
Deprecated
Not part of the collection API the Nutrient Web SDK supports. Build the value once, or use withMutations().
See Also
Map#asImmutable

asMutable

Deprecated

asMutable(): this
Deprecated
Returns
this
Deprecated
Not part of the collection API the Nutrient Web SDK supports. Use withMutations().
See Also
Map#asMutable

clear

clear(): this
Returns a new instance of this Record type with all values set to their default values.

Returns
this

delete

delete<K extends "left" | "top" | "width" | "height">(key: K): this
Returns a new instance of this Record type with the value for the specific key set to its default value.

Type Parameters
Kextends "left" | "top" | "width" | "height"
Parameters
keyK
Returns
this

deleteIn

deleteIn(keyPath: Iterable<unknown>): this
Returns a new instance of this Record type with the value at the given key path removed.

Also available as removeIn.

Parameters
keyPathIterable<unknown>
Returns
this

equals

equals(other: unknown): boolean
Parameters
otherunknown
Returns
boolean

get

get<K extends "left" | "top" | "width" | "height">(
key: K,
): { height: number; left: number; top: number; width: number }[K]
Returns the value associated with the provided key, which may be the default value defined when creating the Record factory function.

If the requested key is not defined by this Record type, then notSetValue will be returned if provided. Note that this scenario would produce an error when using Flow or TypeScript.

Type Parameters
Kextends "left" | "top" | "width" | "height"
Parameters
keyK
Returns
{ height: number; left: number; top: number; width: number }[K]

getIn

getIn(keyPath: Iterable<unknown>, notSetValue?: unknown): unknown
Parameters
keyPathIterable<unknown>
notSetValueunknown
Optional
Returns
unknown

has

has(key: unknown): boolean
Parameters
keyunknown
Returns
boolean

merge

merge(
    ...collections: Partial<
        { height: number; left: number; top: number; width: number },
    >[],
): this
Parameters
...collectionsPartial<{ height: number; left: number; top: number; width: number }>[]
Returns
this

mergeDeep

mergeDeep(
    ...collections: (
        | Iterable<[string, unknown], any, any>
        | Partial<{ height: number; left: number; top: number; width: number }>
    )[],
): this
Parameters
...collections(
| Iterable<[string, unknown], any, any>
| Partial<{ height: number; left: number; top: number; width: number }>
)[]
Returns
this

mergeDeepIn

mergeDeepIn(
    keyPath: Iterable<unknown>,
    ...collections: (
        | Iterable<[string, unknown], any, any>
        | Partial<{ height: number; left: number; top: number; width: number }>
    )[],
): this
Parameters
keyPathIterable<unknown>
...collections(
| Iterable<[string, unknown], any, any>
| Partial<{ height: number; left: number; top: number; width: number }>
)[]
Returns
this

mergeDeepWith

mergeDeepWith(
    merger: (previous?: unknown, next?: unknown, key?: string) => unknown,
    ...collections: (
        | Iterable<[string, unknown], any, any>
        | Partial<{ height: number; left: number; top: number; width: number }>
    )[],
): this
Parameters
merger(previous?: unknown, next?: unknown, key?: string) => unknown
...collections(
| Iterable<[string, unknown], any, any>
| Partial<{ height: number; left: number; top: number; width: number }>
)[]
Returns
this

mergeIn

Deprecated

mergeIn(
    keyPath: Iterable<unknown>,
    ...collections: (
        | Iterable<[string, unknown], any, any>
        | Partial<{ height: number; left: number; top: number; width: number }>
    )[],
): this
Deprecated
Parameters
keyPathIterable<unknown>
...collections(
| Iterable<[string, unknown], any, any>
| Partial<{ height: number; left: number; top: number; width: number }>
)[]
Returns
this
Deprecated
Not part of the collection API the Nutrient Web SDK supports. Use update() followed by merge().

mergeWith

mergeWith(
    merger: (previous?: unknown, next?: unknown, key?: string) => unknown,
    ...collections: (
        | Iterable<[string, unknown], any, any>
        | Partial<{ height: number; left: number; top: number; width: number }>
    )[],
): this
Parameters
merger(previous?: unknown, next?: unknown, key?: string) => unknown
...collections(
| Iterable<[string, unknown], any, any>
| Partial<{ height: number; left: number; top: number; width: number }>
)[]
Returns
this

removeIn

Deprecated

removeIn(keyPath: Iterable<unknown>): this
Deprecated
Parameters
keyPathIterable<unknown>
Returns
this
Deprecated
Not part of the collection API the Nutrient Web SDK supports. Use deleteIn(), or update() followed by delete().

set

set<K extends "left" | "top" | "width" | "height">(
key: K,
value: { height: number; left: number; top: number; width: number }[K],
): this
Type Parameters
Kextends "left" | "top" | "width" | "height"
Parameters
keyK
value{ height: number; left: number; top: number; width: number }[K]
Returns
this

setIn

setIn(keyPath: Iterable<unknown>, value: unknown): this
Parameters
keyPathIterable<unknown>
valueunknown
Returns
this

toJS

toJS(): { height: number; left: number; top: number; width: number }
Deeply converts this Record to equivalent native JavaScript Object.

Note: This method may not be overridden. Objects with custom serialization to plain JS may override toJSON() instead.
Returns
{ height: number; left: number; top: number; width: number }
height: number
The height of the rect. This is equivalent to height of a NutrientViewer.Geometry.Size.

Default Value
0
left: number
The left distance of the rect. This is equivalent to x of a NutrientViewer.Geometry.Point.

Default Value
0
top: number
The top distance of the rect. This is equivalent to y of a NutrientViewer.Geometry.Point.

Default Value
0
width: number
The width of the rect. This is equivalent to width of a NutrientViewer.Geometry.Size.

Default Value
0

toJSON

toJSON(): { height: number; left: number; top: number; width: number }
Shallowly converts this Record to equivalent native JavaScript Object.
Returns
{ height: number; left: number; top: number; width: number }
height: number
The height of the rect. This is equivalent to height of a NutrientViewer.Geometry.Size.

Default Value
0
left: number
The left distance of the rect. This is equivalent to x of a NutrientViewer.Geometry.Point.

Default Value
0
top: number
The top distance of the rect. This is equivalent to y of a NutrientViewer.Geometry.Point.

Default Value
0
width: number
The width of the rect. This is equivalent to width of a NutrientViewer.Geometry.Size.

Default Value
0

toSeq

Deprecated

toSeq(): Keyed<string, unknown>
Deprecated
Returns
Keyed<string, unknown>
Deprecated
Not part of the collection API the Nutrient Web SDK supports. Use entries().

update

update<K extends "left" | "top" | "width" | "height">(
    key: K,
    updater: (
        value: { height: number; left: number; top: number; width: number }[K],
    ) => { height: number; left: number; top: number; width: number }[K],
): this
Type Parameters
Kextends "left" | "top" | "width" | "height"
Parameters
keyK
updater(
value: { height: number; left: number; top: number; width: number }[K]
) => { height: number; left: number; top: number; width: number }[K]
Returns
this

updateIn

updateIn(
    keyPath: Iterable<unknown>,
    notSetValue: unknown,
    updater: (value: unknown) => unknown,
): this
Parameters
keyPathIterable<unknown>
notSetValueunknown
updater(value: unknown) => unknown
Returns
this
updateIn(keyPath: Iterable<unknown>, updater: (value: unknown) => unknown): this
Parameters
keyPathIterable<unknown>
updater(value: unknown) => unknown
Returns
this

withMutations

withMutations(mutator: (mutable: this) => unknown): this
Note: Not all methods can be used on a mutable collection or within withMutations! Only set may be used mutatively.
Parameters
mutator(mutable: this) => unknown
Returns
this
See Also
Map#withMutations

Class Rect

Example

Default Value

Hierarchy

Constructors

Parameters

Properties

Default Value

Default Value

Default Value

Default Value

Accessors

Returns

Returns

Methods

Parameters

Returns

Parameters

Returns

Example

Returns

Example

Returns

Example

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Returns

Returns

Example

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Example

Parameters

Returns

Parameters

Returns

Parameters

Returns

Example

Parameters

Returns

Parameters

Returns

Example

Parameters

Returns

Parameters

Returns

Example

Immutable Record API

Returns

Deprecated

See Also

Returns