Example
Create and update a color.
var color = new NutrientViewer.Color({ r: 245, g: 0, b: 0 });
color = color.set("r", 255);
color.r; // => 255
Default Value
{ r: 0, g: 0, b: 0, transparent: false }Hierarchy
Constructors
Parameters
color{ b?: number; g?: number; r?: number; transparent?: boolean }
Properties
Methods
Parameters
colorNutrientViewer.ColorReturns
number
Returns a darker version of the current Color.
Parameters
percentnumberThe percentage of lightness between 0 and 100.
Returns
A Color with the new values.
Example
const color = NutrientViewer.Color.RED.darker(50);
- equals(
color:
| NutrientViewer.Color
| { b: number; g: number; r: number; transparent: boolean },
): booleanReturns true if the provided color or object and the current Color have the same RGB values.
Parameters
colorNutrientViewer.Color | { b: number; g: number; r: number; transparent: boolean }Color instance or RGB object.
Returns
booleanTrue if equal, false otherwise.
Example
const color = NutrientViewer.Color.RED.equals({ r: 248, g: 36, b: 0 });
Returns a lighter version of the current Color.
Parameters
percentnumberThe percentage of lightness between 0 and 100.
Returns
A Color with the new values.
Example
const color = NutrientViewer.Color.RED.lighter(50);
Returns
number
Modifies the saturation of the Color and returns a new one.
Parameters
percentnumberThe percentage of saturation between 0 and 100.
Returns
A Color with the new values.
Example
const color = NutrientViewer.Color.RED.saturate(50);
Parameters
RGBComponentnumberReturns
number
Converts the color to a CSS value (e.g.
rgb(255, 0, 0)).Returns
stringA CSS color value in
rgbformat.Example
NutrientViewer.Color.RED.toCSSValue(); // => 'rgb(248, 36, 0)'
Converts the color to a Hex value (e.g.
#000000).Returns
stringA CSS color value in
hexformat.Example
NutrientViewer.Color.RED.toHex(); // => '#f82400'
fromHex
Converts a hex color value to a Color instance.
Parameters
hexColorstringThe hex color value to convert.
Returns
A Color instance.
Immutable Record API
30
Returns
IterableIterator<["r" | "g" | "b" | "transparent", number | boolean]>
Returns
thisSee Also
Map#asImmutable
Returns
thisSee Also
Map#asMutable
Returns a new instance of this Record type with all values set to their default values.
Returns
this
Returns a new instance of this Record type with the value for the specific key set to its default value.
- get<K extends "r" | "g" | "b" | "transparent">(
key: K,
notSetValue?: unknown,
): { b: number; g: number; r: number; transparent: boolean }[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.
Parameters
keystringReturns
key is "r" | "g" | "b" | "transparent"
Returns
number
Parameters
keyPathIterable<unknown>...collectionsunknown[]Returns
this
Parameters
keyPathIterable<unknown>...collectionsunknown[]Returns
this
Parameters
keyPathIterable<unknown>valueunknownReturns
this
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
{ b: number; g: number; r: number; transparent: boolean }b: number
The blue value of the color.
Default Value
0g: number
The green value of the color.
Default Value
0r: number
The red value of the color.
Default Value
0transparent: boolean
Transparency of the color.
Default Value
false
Shallowly converts this Record to equivalent native JavaScript Object.
Returns
{ b: number; g: number; r: number; transparent: boolean }b: number
The blue value of the color.
Default Value
0g: number
The green value of the color.
Default Value
0r: number
The red value of the color.
Default Value
0transparent: boolean
Transparency of the color.
Default Value
false
Shallowly converts this Record to equivalent JavaScript Object.
Returns
{ b: number; g: number; r: number; transparent: boolean }b: number
The blue value of the color.
Default Value
0g: number
The green value of the color.
Default Value
0r: number
The red value of the color.
Default Value
0transparent: boolean
Transparency of the color.
Default Value
false
Returns
Keyed<"r" | "g" | "b" | "transparent", number | boolean>
Parameters
keyPathIterable<unknown>updater(value: unknown) => unknownReturns
this
Returns
booleanSee Also
Map#wasAltered
Note: Not all methods can be used on a mutable collection or within
withMutations! Onlysetmay be used mutatively.Parameters
mutator(mutable: this) => unknownReturns
thisSee Also
Map#withMutations
Color objects are used in annotations for defining colors. We're using an rgb representation internally with the
r,g,bvalues clipped between0and255inclusive, and atransparentflag that can be used to indicate that the color is transparent, in which case the providedr,g, andbvalues are ignored and set to0in the instantiatedColor.It is an Immutable.Record and thus can be updated using
set(key, value), for example:color.set("r", 255).However, in order to obtain a transparent color the static
TRANSPARENTvalue should be used instead.The difference between using
Color.TRANSPARENTandnullas values for annotation color properties may depend on the context; if the annotation is being created or updated:Color.TRANSPARENT, the color value will be updated and be transparent.null, the color change will not be saved to the document, although it may appear as transparent in the viewer.To avoid inconsistencies, it is recommended to always use
Color.TRANSPARENTinstead ofnullwhen updating annotations.