array of default colors
options.propertyName The annotation property for which we need to render a customized array of colors in the color dropdown. The built-in color properties are:
Different annotations have different color properties, but all of them are listed above. If you pass a color property that it's not supported, you will get an error.
The configuration of the customized color picker
The array of colors to be displayed in a customized color picker dropdown
OptionalshowColorPicker?: booleanDefines whether you want to render the custom color picker UI. The default value is true, meaning that by default we render the custom color picker in the color dropdown.
Customize different color dropdowns.
NutrientViewer.load({
annotationToolbarColorPresets: function ({ propertyName }) {
if (propertyName === "font-color") {
return {
presets: [
{
color: new NutrientViewer.Color({ r: 0, g: 0, b: 0 }),
localization: {
id: "brightRed",
defaultMessage: "Bright Red",
},
},
{
color: new NutrientViewer.Color({ r: 100, g: 100, b: 180 }),
localization: {
id: "deepBlue",
defaultMessage: "deepBlue",
},
},
],
};
}
if (propertyName === "stroke-color") {
return {
presets: [
{
color: new NutrientViewer.Color({ r: 0, g: 0, b: 0 }),
localization: {
id: "brightRed",
defaultMessage: "Bright Red",
},
},
{
color: new NutrientViewer.Color({ r: 100, g: 100, b: 180 }),
localization: {
id: "deepBlue",
defaultMessage: "deepBlue",
},
},
],
showColorPicker: false,
};
}
},
//...
});
This callback allows users to customize the colors that will be displayed in our color dropdown picker, and to add a custom color picker UI to it.