Optionaloptions: { height?: number; left?: number; top?: number; width?: number }The height of the rect. This is equivalent to height of a Geometry.Size.
The left distance of the rect. This is equivalent to x of a
Geometry.Point.
The top distance of the rect. This is equivalent to y of a
Geometry.Point.
The width of the rect. This is equivalent to width of a Geometry.Size.
StaticdefaultComputes the bottom point in the rect by adding top and height.
Computes the right point in the rect by adding left and width.
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]
Returns a new instance of this Record type with all values set to their default values.
Returns a new instance of this Record type with the value for the specific key set to its default value.
Expand the rect to include the list of points.
A new Rect.
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.
OptionalnotSetValue: anyReturns the NutrientViewer.Geometry.Point that is the center of this rect.
A point that is on the center of this rect.
Returns the NutrientViewer.Geometry.Point that is the upper-left corner of this rect.
A point that is on the upper-left corner of this rect.
Returns the NutrientViewer.Geometry.Size of the rect.
The size of the rect.
Grows the rect by growth on every side but keeps the center of the Rect at the same position.
The growth factor. It will be applied on every side, so the new width
and height will increase by two times this factor.
A new Rect.
Test if a point is within the rect. This can be used for hit testing.
The point that should be tested.
true if the point is inside, false otherwise.
Test if a rect is completely inside this rect.
The rect that should be tested.
true if the rect is inside, false otherwise.
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
Test if the union area of two rects is greater than zero.
The rect that should be tested.
true if the rect is overlapping, false otherwise.
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
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.
Rounds all coordinates to whole numbers. This implementation uses Math.round for all
coordinates. The resulting Rect might no longer overlap the source Rect.
A new 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.
A new 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.
Scale value for the left and width value. If sy is not set, this scale
will also be applied to top and height.
Optionalsy: numberScale value for the top an height value.
A new Rect.
Updates the location of the rect by modifying left and top.
The new location for the rect.
A new Rect with left and top updated.
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.
Shallowly converts this Record to equivalent native JavaScript Object.
Shallowly converts this Record to equivalent JavaScript Object.
Translates the location of the rect by a point.
A point that describes the translation distance.
A new Rect.
Translates the horizontal location of the rect by a number.
A number to translate the left value.
A new Rect.
Translates the vertical location of the rect by a number.
A number to translate the top value.
A new Rect.
StaticareStaticareStaticfromCreates a new rect from a DOM ClientRect.
A DOM ClientRect.
A new Rect.
StaticfromStaticfromCreates a new rect from four points.
An array of four points.
A new Rect.
StaticgetStaticunionCreates 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.
An immutable list of rects.
A new Rect.
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}
A rect describes a rectangle in 2D space. It consists of a location (
leftandtop) and dimensions (widthandheight). Provided values are defined in same units used by the page, point units. Point units are only equal to pixels when zoom value is1.It is an https://facebook.github.io/immutable-js/docs/#/Record|Immutable.Record and thus can be updated using
set(key, value), for example:rect.set("left", 20).Example
Create and update a rect.
Param: args
An object used to initialize the Point. If
left,top,widthorheightis omitted,0will be used instead.Default