ScalarBarActor

Introduction

vtkScalarBarActor creates a scalar bar with tick marks. A
scalar bar is a legend that indicates to the viewer the correspondence
between color value and data value. The legend consists of a rectangular bar
made of rectangular pieces each colored a constant value. Since
vtkScalarBarActor is a subclass of vtkActor2D, it is drawn in the image plane
(i.e., in the renderer’s viewport) on top of the 3D graphics window.

Methods

completedImage

Argument Type Required Description
doUpdate Boolean Yes

computeBarSize

based on all the settins compute a barSegments array containing the
segments opf the scalar bar each segment contains :
corners[4][2]
title - e.g. NaN, Above, ticks
scalars - the normalized scalars values to use for that segment

Note that the bar consumes the space in the box that remains
after leaving room for the text labels.

Argument Type Required Description
textSizes ITextSizes Yes

createPolyDataForOneLabel

Called by updatePolyDataForLabels modifies class constants ptv3, tmpv3

Argument Type Required Description
text Yes
pos Yes
xdir Yes
ydir Yes
dir Yes
offset Yes
results Yes

extend

Method use to decorate a given object (publicAPI+model) with vtkScalarBarActor characteristics.

Argument Type Required Description
publicAPI Yes object on which methods will be bounds (public)
model Yes object on which data structure will be bounds (protected)
initialValues IScalarBarActorInitialValues No (default: {})

getActors

getAutoLayout

getAutomated

getAxisLabel

getAxisTextStyle

getAxisTitlePixelOffset

getBoxPosition

getBoxPositionByReference

getBoxSize

getBoxSizeByReference

getDrawAboveRangeSwatch

getDrawBelowRangeSwatch

getDrawNanAnnotation

getGenerateTicks

getNestedProps

getScalarsToColors

getTickTextStyle

newInstance

Method use to create a new instance of vtkScalarBarActor

recomputeBarSegments

Argument Type Required Description
textSizes ITextSizes Yes

resetAutoLayoutToDefault

setAutoLayout

Argument Type Required Description
autoLayout Yes

setAutomated

Argument Type Required Description
automated Boolean Yes

setAxisLabel

Argument Type Required Description
axisLabel String Yes

setAxisTextStyle

Argument Type Required Description
axisTextStyle IStyle Yes

setAxisTitlePixelOffset

Argument Type Required Description
axisTitlePixelOffset Number Yes

setBarPosition

Argument Type Required Description
barPosition Vector2 Yes

setBarPositionFrom

Argument Type Required Description
barPosition Vector2 Yes

setBarSize

Argument Type Required Description
barSize Size Yes

setBarSizeFrom

Argument Type Required Description
barSize Size Yes

setBoxPosition

Argument Type Required Description
boxPosition Vector2 Yes

setBoxPositionFrom

Argument Type Required Description
boxPosition Vector2 Yes

setBoxSize

Argument Type Required Description
boxSize Size Yes

setBoxSizeFrom

Argument Type Required Description
boxSize Size Yes

setDrawAboveRangeSwatch

Set whether the Above range swatch should be rendered or not

Argument Type Required Description
drawAboveRangeSwatch Boolean Yes

setDrawBelowRangeSwatch

Set whether the Below range swatch should be rendered or not

Argument Type Required Description
drawBelowRangeSwatch Boolean Yes

setDrawNanAnnotation

Set whether the NaN annotation should be rendered or not.

Argument Type Required Description
drawNanAnnotation Boolean Yes

setGenerateTicks

Sets the function used to generate legend ticks.

This function takes a vtkScalarBarActorHelper and returns true on success.
To have the desired effect, the function must call: helper.setTicks(ticks: num[]) and helper.setTickStrings(tickStrings: string[]).

After setting the generateTicks function you must regenerate the vtkScalarBarActor for your changes to take effect.
One way to do that is:

const mapper = scalarBarActor.getMapper()
if (mapper) {
mapper.getLookupTable().resetAnnotations()
}
Argument Type Required Description
generateTicks Yes

setScalarsToColors

Argument Type Required Description
scalarsToColors vtkScalarsToColors Yes

setTickLabelPixelOffset

Argument Type Required Description
tickLabelPixelOffset Yes

setTickTextStyle

Argument Type Required Description
tickStyle IStyle Yes

setVisibility

update

main method to rebuild the scalarBar when something has changed tracks
modified times

updatePolyDataForBarSegments

updatePolyDataForLabels

Udate the polydata associated with drawing the text labels
specifically the quads used for each label and their associated tcoords
etc. This changes every time the camera viewpoint changes

updateTextureAtlas

create the texture map atlas that contains the rendering of
all the text strings. Only needs to be called when the text strings
have changed (labels and ticks)

Source

index.d.ts
import vtkScalarsToColors from "../../../Common/Core/ScalarsToColors";
import { Size, Vector2, Vector3 } from "../../../types";
import vtkActor, { IActorInitialValues } from "../Actor";


export interface ITextSizes {
tickWidth: number;
tickHeight: number;
}

export interface IResult {
ptIdx: number,
cellIdx: number,
polys: Float64Array,
points: Uint16Array,
tcoords: Float32Array,
}

export interface IStyle {
fontColor?: string;
fontStyle?: string;
fontFamily?: string;
fontSize?: string;
}

/**
*
*/
export interface IScalarBarActorInitialValues extends IActorInitialValues {
automated?: boolean,
autoLayout?: (publicAPI: object, model: object) => void,
axisLabel?: string,
barPosition?: Vector2,
barSize?: Size,
boxPosition?: Vector2,
boxSize?: Size,
scalarToColors?: null,
axisTitlePixelOffset?: number,
axisTextStyle?: IStyle,
tickLabelPixelOffset?: number,
tickTextStyle?: IStyle,
generateTicks?: (helper: any) => void,
drawBelowRangeSwatch?: boolean,
drawAboveRangeSwatch?: boolean,
drawNanAnnotation?: boolean,
}

export interface vtkScalarBarActor extends vtkActor {

/**
*
* @param {Boolean} doUpdate
*/
completedImage(doUpdate: boolean): void;

/**
* based on all the settins compute a barSegments array containing the
* segments opf the scalar bar each segment contains :
* corners[4][2]
* title - e.g. NaN, Above, ticks
* scalars - the normalized scalars values to use for that segment
*
* Note that the bar consumes the space in the box that remains
* after leaving room for the text labels.
* @param {ITextSizes} textSizes
*/
computeBarSize(textSizes: ITextSizes): Size;

/**
* Called by updatePolyDataForLabels modifies class constants ptv3, tmpv3
* @param text
* @param pos
* @param xdir
* @param ydir
* @param dir
* @param offset
* @param results
*/
createPolyDataForOneLabel(text: string, pos: Vector3, xdir: Vector3, ydir: Vector3, dir: Vector2, offset: number, results: IResult): void;

/**
*
*/
getActors(): vtkActor[];

/**
*
*/
getAutoLayout(): any;

/**
*
*/
getGenerateTicks(): any;

/**
*
*/
getAutomated(): boolean;

/**
*
*/
getAxisLabel(): string;

/**
*
*/
getAxisTextStyle(): IStyle;

/**
*
*/
getAxisTitlePixelOffset(): number;

/**
*
*/
getBoxPosition(): Vector2;

/**
*
*/
getBoxPositionByReference(): Vector2;

/**
*
*/
getBoxSize(): Size;

/**
*
*/
getBoxSizeByReference(): Size;

/**
*
*/
getNestedProps(): vtkActor[];

/**
*
*/
getScalarsToColors(): vtkScalarsToColors;

/**
*
*/
getDrawNanAnnotation(): boolean

/**
*
*/
getDrawBelowRangeSwatch(): boolean

/**
*
*/
getDrawAboveRangeSwatch(): boolean

/**
*
*/
getTickTextStyle(): IStyle;

/**
*
* @param {ITextSizes} textSizes
*/
recomputeBarSegments(textSizes: ITextSizes): void;

/**
*
*/
resetAutoLayoutToDefault(): void;

/**
*
* @param autoLayout
*/
setAutoLayout(autoLayout: any): boolean;

/**
* Sets the function used to generate legend ticks.
*
* This function takes a vtkScalarBarActorHelper and returns true on success.
* To have the desired effect, the function must call: `helper.setTicks(ticks: num[])` and `helper.setTickStrings(tickStrings: string[])`.
*
* After setting the generateTicks function you must regenerate the vtkScalarBarActor for your changes to take effect.
* One way to do that is:
* ```
* const mapper = scalarBarActor.getMapper()
* if (mapper) {
* mapper.getLookupTable().resetAnnotations()
* }
* ```
* @param generateTicks
*/
setGenerateTicks(generateTicks: (helper: any) => void): boolean;

/**
*
* @param {Boolean} automated
*/
setAutomated(automated: boolean): boolean;

/**
*
* @param {String} axisLabel
*/
setAxisLabel(axisLabel: string): boolean;

/**
*
* @param {IStyle} axisTextStyle
*/
setAxisTextStyle(axisTextStyle: IStyle): boolean;

/**
*
* @param {Number} axisTitlePixelOffset
*/
setAxisTitlePixelOffset(axisTitlePixelOffset: number): boolean;

/**
*
* @param {Vector2} boxPosition
*/
setBoxPosition(boxPosition: Vector2): boolean;

/**
*
* @param {Vector2} boxPosition
*/
setBoxPositionFrom(boxPosition: Vector2): boolean;

/**
*
* @param {Size} boxSize
*/
setBoxSize(boxSize: Size): boolean;

/**
*
* @param {Size} boxSize
*/
setBoxSizeFrom(boxSize: Size): boolean;

/**
*
* @param {Vector2} barPosition
*/
setBarPosition(barPosition: Vector2): boolean;

/**
*
* @param {Vector2} barPosition
*/
setBarPositionFrom(barPosition: Vector2): boolean;

/**
*
* @param {Size} barSize
*/
setBarSize(barSize: Size): boolean;

/**
*
* @param {Size} barSize
*/
setBarSizeFrom(barSize: Size): boolean;

/**
*
* @param {vtkScalarsToColors} scalarsToColors
*/
setScalarsToColors(scalarsToColors: vtkScalarsToColors): boolean;

/**
* Set whether the NaN annotation should be rendered or not.
* @param {Boolean} drawNanAnnotation
*/
setDrawNanAnnotation(drawNanAnnotation: boolean): boolean;

/**
* Set whether the Below range swatch should be rendered or not
* @param {Boolean} drawBelowRangeSwatch
*/
setDrawBelowRangeSwatch(drawBelowRangeSwatch: boolean): boolean;

/**
* Set whether the Above range swatch should be rendered or not
* @param {Boolean} drawAboveRangeSwatch
*/
setDrawAboveRangeSwatch(drawAboveRangeSwatch: boolean): boolean;

/**
*
* @param tickLabelPixelOffset
*/
setTickLabelPixelOffset(tickLabelPixelOffset: number): boolean;

/**
*
* @param {IStyle} tickStyle
*/
setTickTextStyle(tickStyle: IStyle): void;

/**
*
*/
setVisibility(visibility: boolean): boolean;

/**
* main method to rebuild the scalarBar when something has changed tracks
* modified times
*/
update(): void;

/**
*
*/
updatePolyDataForBarSegments(): void;

/**
* Udate the polydata associated with drawing the text labels
* specifically the quads used for each label and their associated tcoords
* etc. This changes every time the camera viewpoint changes
*/
updatePolyDataForLabels(): void;

/**
* create the texture map atlas that contains the rendering of
* all the text strings. Only needs to be called when the text strings
* have changed (labels and ticks)
*/
updateTextureAtlas(): void;
}


/**
* Method use to decorate a given object (publicAPI+model) with vtkScalarBarActor characteristics.
*
* @param publicAPI object on which methods will be bounds (public)
* @param model object on which data structure will be bounds (protected)
* @param {IScalarBarActorInitialValues} [initialValues] (default: {})
*/
export function extend(publicAPI: object, model: object, initialValues?: IScalarBarActorInitialValues): void;

/**
* Method use to create a new instance of vtkScalarBarActor
*/
export function newInstance(initialValues?: IScalarBarActorInitialValues): vtkScalarBarActor;

/**
* vtkScalarBarActor creates a scalar bar with tick marks. A
* scalar bar is a legend that indicates to the viewer the correspondence
* between color value and data value. The legend consists of a rectangular bar
* made of rectangular pieces each colored a constant value. Since
* vtkScalarBarActor is a subclass of vtkActor2D, it is drawn in the image plane
* (i.e., in the renderer's viewport) on top of the 3D graphics window.
*/
export declare const vtkScalarBarActor: {
newInstance: typeof newInstance;
extend: typeof extend;
};
export default vtkScalarBarActor;
index.js
import * as d3 from 'd3-scale';
import * as vtkMath from 'vtk.js/Sources/Common/Core/Math';
import macro from 'vtk.js/Sources/macros';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkDataArray from 'vtk.js/Sources/Common/Core/DataArray';
import vtkScalarsToColors from 'vtk.js/Sources/Common/Core/ScalarsToColors';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData';
import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';

const { VectorMode } = vtkScalarsToColors;

// ----------------------------------------------------------------------------
// vtkScalarBarActor
//
// Note log scales are currently not supported
//
// Developer note: This class is broken into the main class and a helper
// class. The main class holds view independent properties (those properties
// that do not change as the view's resolution/aspect ratio change). The
// helper class is instantiated one per view and holds properties that can
// depend on view specific values such as resolution. The helper class code
// could have been left to the View specific implementation (such as
// vtkWebGPUScalarBarActor) but is instead placed here to it can be shared by
// multiple rendering backends.
//
// ----------------------------------------------------------------------------

function applyTextStyle(ctx, style) {
ctx.strokeStyle = style.strokeColor;
ctx.lineWidth = style.strokeSize;
ctx.fillStyle = style.fontColor;
ctx.font = `${style.fontStyle} ${style.fontSize}px ${style.fontFamily}`;
}

// ----------------------------------------------------------------------------
// Default autoLayout function
// ----------------------------------------------------------------------------

// compute good values to use based on window size etc a bunch of heuristics
// here with hand tuned constants These values worked for me but really this
// method could be redically changed. The basic gist is
// 1) compute a resonable font size
// 2) render the text atlas using those font sizes
// 3) pick horizontal or vertical bsed on window size
// 4) based on the size of the title and tick labels rendered
// compute the box size and position such that
// the text will all fit nicely and the bar will be a resonable size
// 5) compute the bar segments based on the above settings
//
// Note that this function can and should read values from the
// ScalarBarActor but should only write values to the view dependent helper
// instance that is provided as those values are the ones that will be used
// for rendering.
//
function defaultAutoLayout(publicAPI, model) {
return (helper) => {
// we don't do a linear scale, the proportions for
// a 700 pixel window differ from a 1400
const lastSize = helper.getLastSize();
const xAxisAdjust = (lastSize[0] / 700) ** 0.8;
const yAxisAdjust = (lastSize[1] / 700) ** 0.8;
const minAdjust = Math.min(xAxisAdjust, yAxisAdjust);

const axisTextStyle = helper.getAxisTextStyle();
const tickTextStyle = helper.getTickTextStyle();
Object.assign(axisTextStyle, model.axisTextStyle);
Object.assign(tickTextStyle, model.tickTextStyle);

// compute a reasonable font size first
axisTextStyle.fontSize = Math.max(24 * minAdjust, 12);
if (helper.getLastAspectRatio() > 1.0) {
tickTextStyle.fontSize = Math.max(20 * minAdjust, 10);
} else {
tickTextStyle.fontSize = Math.max(16 * minAdjust, 10);
}

// rebuild the text atlas
const textSizes = helper.updateTextureAtlas();

// now compute the boxSize and pixel offsets, different algorithm
// for horizonal versus vertical
helper.setTopTitle(false);

const boxSize = helper.getBoxSizeByReference();

// if vertical
if (helper.getLastAspectRatio() > 1.0) {
helper.setTickLabelPixelOffset(0.3 * tickTextStyle.fontSize);

// if the title will fit within the width of the bar then that looks
// nicer to put it at the top (helper.topTitle), otherwise rotate it
// and place it sideways
if (
textSizes.titleWidth <=
textSizes.tickWidth +
helper.getTickLabelPixelOffset() +
0.8 * tickTextStyle.fontSize
) {
helper.setTopTitle(true);
helper.setAxisTitlePixelOffset(0.2 * tickTextStyle.fontSize);
boxSize[0] =
(2.0 *
(textSizes.tickWidth +
helper.getTickLabelPixelOffset() +
0.8 * tickTextStyle.fontSize)) /
lastSize[0];
helper.setBoxPosition([0.98 - boxSize[0], -0.92]);
} else {
helper.setAxisTitlePixelOffset(0.2 * tickTextStyle.fontSize);
boxSize[0] =
(2.0 *
(textSizes.titleHeight +
helper.getAxisTitlePixelOffset() +
textSizes.tickWidth +
helper.getTickLabelPixelOffset() +
0.8 * tickTextStyle.fontSize)) /
lastSize[0];
helper.setBoxPosition([0.99 - boxSize[0], -0.92]);
}
boxSize[1] = Math.max(1.2, Math.min(1.84 / yAxisAdjust, 1.84));
} else {
// horizontal
helper.setAxisTitlePixelOffset(1.2 * tickTextStyle.fontSize);
helper.setTickLabelPixelOffset(0.1 * tickTextStyle.fontSize);
const titleHeight = // total offset from top of bar (includes ticks)
(2.0 *
(0.8 * tickTextStyle.fontSize +
textSizes.titleHeight +
helper.getAxisTitlePixelOffset())) /
lastSize[1];
const tickWidth = (2.0 * textSizes.tickWidth) / lastSize[0];
boxSize[0] = Math.min(
1.9,
Math.max(1.4, 1.4 * tickWidth * (helper.getTicks().length + 3))
);
boxSize[1] = titleHeight;
helper.setBoxPosition([-0.5 * boxSize[0], -0.97]);
}

// recomute bar segments based on positioning
helper.recomputeBarSegments(textSizes);
};
}

// ----------------------------------------------------------------------------
// Default generateTicks function
// ----------------------------------------------------------------------------

// This function returns the default function used to generate vtkScalarBarActor ticks.
// The default function makes use of d3.scaleLinear() to generate 5 tick marks between
// the minimum and maximum values of the scalar bar. Customize this behavior by passing
// a function to vtkScalarBarActor.newInstance({ generateTicks: customGenerateTicks })
// or by calling scalarBarActor.setGenerateTicks(customGenerateTicks).
function defaultGenerateTicks(publicApi, model) {
return (helper) => {
const lastTickBounds = helper.getLastTickBounds();
const scale = d3
.scaleLinear()
.domain([lastTickBounds[0], lastTickBounds[1]]);
const ticks = scale.ticks(5);
const format = scale.tickFormat(5);

helper.setTicks(ticks);
helper.setTickStrings(ticks.map(format));
};
}

// many properties of this actor depend on the API specific view The main
// dependency being the resolution as that drives what font sizes to use.
// Bacause of this we need to do some of the calculations in a API specific
// subclass. But... we don't want a lot of duplicated code between WebGL and
// WebGPU for example so we have this helper class, that is designed to be
// fairly API independent so that API specific views can call this to do
// most of the work.
function vtkScalarBarActorHelper(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkScalarBarActorHelper');

publicAPI.setRenderable = (renderable) => {
if (model.renderable === renderable) {
return;
}
model.renderable = renderable;
model.barActor.setProperty(renderable.getProperty());
model.barActor.setParentProp(renderable);
model.barActor.setCoordinateSystemToDisplay();
model.tmActor.setProperty(renderable.getProperty());
model.tmActor.setParentProp(renderable);
model.tmActor.setCoordinateSystemToDisplay();

model.generateTicks = renderable.generateTicks;
model.axisTextStyle = { ...renderable.getAxisTextStyle() };
model.tickTextStyle = { ...renderable.getTickTextStyle() };

publicAPI.modified();
};

publicAPI.updateAPISpecificData = (size, camera, renderWindow) => {
// has the size changed?
if (model.lastSize[0] !== size[0] || model.lastSize[1] !== size[1]) {
model.lastSize[0] = size[0];
model.lastSize[1] = size[1];
model.lastAspectRatio = size[0] / size[1];
model.forceUpdate = true;
}

const scalarsToColors = model.renderable.getScalarsToColors();
if (!scalarsToColors || !model.renderable.getVisibility()) {
return;
}

// make sure the lut is assigned to our mapper
model.barMapper.setLookupTable(scalarsToColors);

// camera should be the same for all views
model.camera = camera;

model.renderWindow = renderWindow;

// did something significant change? If so rebuild a lot of things
if (
model.forceUpdate ||
Math.max(
scalarsToColors.getMTime(),
publicAPI.getMTime(),
model.renderable.getMTime()
) > model.lastRebuildTime.getMTime()
) {
const range = scalarsToColors.getMappingRange();
model.lastTickBounds = [...range];

// compute tick marks for axes (update for log scale)
model.renderable.getGenerateTicks()(publicAPI);

if (model.renderable.getAutomated()) {
model.renderable.getAutoLayout()(publicAPI);
} else {
// copy values from renderable
model.axisTextStyle = { ...model.renderable.getAxisTextStyle() };
model.tickTextStyle = { ...model.renderable.getTickTextStyle() };
model.barPosition = [...model.renderable.getBarPosition()];
model.barSize = [...model.renderable.getBarSize()];
model.boxPosition = [...model.renderable.getBoxPosition()];
model.boxSize = [...model.renderable.getBoxSize()];
model.axisTitlePixelOffset = model.renderable.getAxisTitlePixelOffset();
model.tickLabelPixelOffset = model.renderable.getTickLabelPixelOffset();

// rebuild the texture only when force or changed bounds, face
// visibility changes do to change the atlas
const textSizes = publicAPI.updateTextureAtlas();

// recompute bar segments based on positioning
publicAPI.recomputeBarSegments(textSizes);
}
publicAPI.updatePolyDataForLabels();
publicAPI.updatePolyDataForBarSegments();
model.lastRebuildTime.modified();
model.forceUpdate = false;
}
};

// create the texture map atlas that contains the rendering of
// all the text strings. Only needs to be called when the text strings
// have changed (labels and ticks)
publicAPI.updateTextureAtlas = () => {
// set the text properties
model.tmContext.textBaseline = 'bottom';
model.tmContext.textAlign = 'left';

// return some factors about the text atlas
const results = {};

// first the axislabel
const newTmAtlas = new Map();
let maxWidth = 0;
let totalHeight = 1; // start one pixel in so we have a border
applyTextStyle(model.tmContext, model.axisTextStyle);
let metrics = model.tmContext.measureText(model.renderable.getAxisLabel());
let entry = {
height: metrics.actualBoundingBoxAscent + 2,
startingHeight: totalHeight,
width: metrics.width + 2,
textStyle: model.axisTextStyle,
};
newTmAtlas.set(model.renderable.getAxisLabel(), entry);
totalHeight += entry.height;
maxWidth = entry.width;
results.titleWidth = entry.width;
results.titleHeight = entry.height;

// and the ticks, NaN Below and Above
results.tickWidth = 0;
results.tickHeight = 0;
applyTextStyle(model.tmContext, model.tickTextStyle);
const strings = [...publicAPI.getTickStrings(), 'NaN', 'Below', 'Above'];
for (let t = 0; t < strings.length; t++) {
if (!newTmAtlas.has(strings[t])) {
metrics = model.tmContext.measureText(strings[t]);
entry = {
height: metrics.actualBoundingBoxAscent + 2,
startingHeight: totalHeight,
width: metrics.width + 2,
textStyle: model.tickTextStyle,
};
newTmAtlas.set(strings[t], entry);
totalHeight += entry.height;
if (maxWidth < entry.width) {
maxWidth = entry.width;
}
if (results.tickWidth < entry.width) {
results.tickWidth = entry.width;
}
if (results.tickHeight < entry.height) {
results.tickHeight = entry.height;
}
}
}

// always use power of two to avoid interpolation
// in cases where PO2 is required
maxWidth = vtkMath.nearestPowerOfTwo(maxWidth);
totalHeight = vtkMath.nearestPowerOfTwo(totalHeight);

// set the tcoord values
newTmAtlas.forEach((value) => {
value.tcoords = [
0.0,
(totalHeight - value.startingHeight - value.height) / totalHeight,
value.width / maxWidth,
(totalHeight - value.startingHeight - value.height) / totalHeight,
value.width / maxWidth,
(totalHeight - value.startingHeight) / totalHeight,
0.0,
(totalHeight - value.startingHeight) / totalHeight,
];
});

// make sure we have power of two dimensions
model.tmCanvas.width = maxWidth;
model.tmCanvas.height = totalHeight;
model.tmContext.textBaseline = 'bottom';
model.tmContext.textAlign = 'left';
model.tmContext.clearRect(0, 0, maxWidth, totalHeight);

// draw the text onto the texture
newTmAtlas.forEach((value, key) => {
applyTextStyle(model.tmContext, value.textStyle);
model.tmContext.fillText(key, 1, value.startingHeight + value.height - 1);
});

model.tmTexture.setCanvas(model.tmCanvas);
// mark as modified since the canvas typically doesn't change
model.tmTexture.modified();
model._tmAtlas = newTmAtlas;

return results;
};

publicAPI.computeBarSize = (textSizes) => {
// compute orientation
model.vertical = model.boxSize[1] > model.boxSize[0];

const tickHeight = (2.0 * textSizes.tickHeight) / model.lastSize[1];

const segSize = [1, 1];

// horizontal and vertical have different astetics so adjust based on
// orientation
if (model.vertical) {
const tickWidth =
(2.0 * (textSizes.tickWidth + model.tickLabelPixelOffset)) /
model.lastSize[0];
if (model.topTitle) {
const titleHeight =
(2.0 * (textSizes.titleHeight + model.axisTitlePixelOffset)) /
model.lastSize[1];
model.barSize[0] = model.boxSize[0] - tickWidth;
model.barSize[1] = model.boxSize[1] - titleHeight;
} else {
// rotated title so width is based off height
const titleWidth =
(2.0 * (textSizes.titleHeight + model.axisTitlePixelOffset)) /
model.lastSize[0];
model.barSize[0] = model.boxSize[0] - titleWidth - tickWidth;
model.barSize[1] = model.boxSize[1];
}
model.barPosition[0] = model.boxPosition[0] + tickWidth;
model.barPosition[1] = model.boxPosition[1];
segSize[1] = tickHeight;
} else {
const tickWidth = (2.0 * textSizes.tickWidth - 8) / model.lastSize[0];
const titleHeight =
(2.0 * (textSizes.titleHeight + model.axisTitlePixelOffset)) /
model.lastSize[1];
model.barSize[0] = model.boxSize[0];
model.barPosition[0] = model.boxPosition[0];
model.barSize[1] = model.boxSize[1] - titleHeight;
model.barPosition[1] = model.boxPosition[1];
segSize[0] = tickWidth;
}
return segSize;
};

// based on all the settins compute a barSegments array
// containing the segments opf the scalar bar
// each segment contains
// corners[4][2]
// title - e.g. NaN, Above, ticks
// scalars - the normalized scalars values to use for that segment
//
// Note that the bar consumes the space in the box that remains after
// leaving room for the text labels
publicAPI.recomputeBarSegments = (textSizes) => {
// first compute the barSize/Position
const segSize = publicAPI.computeBarSize(textSizes);

model.barSegments = [];

const startPos = [0.0, 0.0];

// horizontal and vertical have different astetics so adjust based on
// orientation
const barAxis = model.vertical ? 1 : 0;
const segSpace = model.vertical ? 0.01 : 0.02;

function pushSeg(title, scalars) {
model.barSegments.push({
corners: [
[...startPos],
[startPos[0] + segSize[0], startPos[1]],
[startPos[0] + segSize[0], startPos[1] + segSize[1]],
[startPos[0], startPos[1] + segSize[1]],
],
scalars,
title,
});
startPos[barAxis] += segSize[barAxis] + segSpace;
}
if (
model.renderable.getDrawNanAnnotation() &&
model.renderable.getScalarsToColors().getNanColor()
) {
pushSeg('NaN', [NaN, NaN, NaN, NaN]);
}

if (
model.renderable.getDrawBelowRangeSwatch() &&
model.renderable.getScalarsToColors().getUseBelowRangeColor?.()
) {
pushSeg('Below', [-0.1, -0.1, -0.1, -0.1]);
}

const haveAbove = model.renderable
.getScalarsToColors()
.getUseAboveRangeColor?.();

// extra space around the ticks section
startPos[barAxis] += segSpace;

const oldSegSize = segSize[barAxis];
segSize[barAxis] = haveAbove
? 1.0 - 2.0 * segSpace - segSize[barAxis] - startPos[barAxis]
: 1.0 - segSpace - startPos[barAxis];

pushSeg(
'ticks',
model.vertical ? [0, 0, 0.995, 0.995] : [0, 0.995, 0.995, 0]
);

if (model.renderable.getDrawAboveRangeSwatch() && haveAbove) {
segSize[barAxis] = oldSegSize;
startPos[barAxis] += segSpace;
pushSeg('Above', [1.1, 1.1, 1.1, 1.1]);
}
};

// called by updatePolyDataForLabels
// modifies class constants tmp2v3
const tmp2v3 = new Float64Array(3);

// anchor point = pos
// H alignment = left, middle, right
// V alignment = bottom, middle, top
// Text Orientation = horizontal, vertical
// orientation
publicAPI.createPolyDataForOneLabel = (
text,
pos,
alignment,
orientation,
offset,
results
) => {
const value = model._tmAtlas.get(text);
if (!value) {
return;
}
// have to find the four corners of the texture polygon for this label
let ptIdx = results.ptIdx;
let cellIdx = results.cellIdx;

// get achor point in pixels
tmp2v3[0] = (0.5 * pos[0] + 0.5) * model.lastSize[0];
tmp2v3[1] = (0.5 * pos[1] + 0.5) * model.lastSize[1];
tmp2v3[2] = pos[2];

tmp2v3[0] += offset[0];
tmp2v3[1] += offset[1];

// get text size in display pixels
const textSize = [];
const textAxes = orientation === 'vertical' ? [1, 0] : [0, 1];
if (orientation === 'vertical') {
textSize[0] = value.width;
textSize[1] = -value.height;
// update anchor point based on alignment
if (alignment[0] === 'middle') {
tmp2v3[1] -= value.width / 2.0;
} else if (alignment[0] === 'right') {
tmp2v3[1] -= value.width;
}
if (alignment[1] === 'middle') {
tmp2v3[0] += value.height / 2.0;
} else if (alignment[1] === 'top') {
tmp2v3[0] += value.height;
}
} else {
textSize[0] = value.width;
textSize[1] = value.height;
// update anchor point based on alignment
if (alignment[0] === 'middle') {
tmp2v3[0] -= value.width / 2.0;
} else if (alignment[0] === 'right') {
tmp2v3[0] -= value.width;
}
if (alignment[1] === 'middle') {
tmp2v3[1] -= value.height / 2.0;
} else if (alignment[1] === 'top') {
tmp2v3[1] -= value.height;
}
}

results.points[ptIdx * 3] = tmp2v3[0];
results.points[ptIdx * 3 + 1] = tmp2v3[1];
results.points[ptIdx * 3 + 2] = tmp2v3[2];
results.tcoords[ptIdx * 2] = value.tcoords[0];
results.tcoords[ptIdx * 2 + 1] = value.tcoords[1];
ptIdx++;
tmp2v3[textAxes[0]] += textSize[0];
results.points[ptIdx * 3] = tmp2v3[0];
results.points[ptIdx * 3 + 1] = tmp2v3[1];
results.points[ptIdx * 3 + 2] = tmp2v3[2];
results.tcoords[ptIdx * 2] = value.tcoords[2];
results.tcoords[ptIdx * 2 + 1] = value.tcoords[3];
ptIdx++;
tmp2v3[textAxes[1]] += textSize[1];
results.points[ptIdx * 3] = tmp2v3[0];
results.points[ptIdx * 3 + 1] = tmp2v3[1];
results.points[ptIdx * 3 + 2] = tmp2v3[2];
results.tcoords[ptIdx * 2] = value.tcoords[4];
results.tcoords[ptIdx * 2 + 1] = value.tcoords[5];
ptIdx++;
tmp2v3[textAxes[0]] -= textSize[0];
results.points[ptIdx * 3] = tmp2v3[0];
results.points[ptIdx * 3 + 1] = tmp2v3[1];
results.points[ptIdx * 3 + 2] = tmp2v3[2];
results.tcoords[ptIdx * 2] = value.tcoords[6];
results.tcoords[ptIdx * 2 + 1] = value.tcoords[7];
ptIdx++;

// add the two triangles to represent the quad
results.polys[cellIdx * 4] = 3;
results.polys[cellIdx * 4 + 1] = ptIdx - 4;
results.polys[cellIdx * 4 + 2] = ptIdx - 3;
results.polys[cellIdx * 4 + 3] = ptIdx - 2;
cellIdx++;
results.polys[cellIdx * 4] = 3;
results.polys[cellIdx * 4 + 1] = ptIdx - 4;
results.polys[cellIdx * 4 + 2] = ptIdx - 2;
results.polys[cellIdx * 4 + 3] = ptIdx - 1;

results.ptIdx += 4;
results.cellIdx += 2;
};

// update the polydata associated with drawing the text labels
// specifically the quads used for each label and their associated tcoords
// etc. This changes every time the camera viewpoint changes
const tmpv3 = new Float64Array(3);
publicAPI.updatePolyDataForLabels = () => {
// update the polydata
const numLabels =
publicAPI.getTickStrings().length + model.barSegments.length;
const numPts = numLabels * 4;
const numTris = numLabels * 2;
const points = new Float64Array(numPts * 3);
const polys = new Uint16Array(numTris * 4);
const tcoords = new Float32Array(numPts * 2);

const results = {
ptIdx: 0,
cellIdx: 0,
polys,
points,
tcoords,
};

// compute the direction vector
const offsetAxis = model.vertical ? 0 : 1;
const spacedAxis = model.vertical ? 1 : 0;

tmpv3[2] = -0.99; // near plane

// draw the title
const alignment = model.vertical
? ['right', 'middle']
: ['middle', 'bottom'];
let dir = [0, 1];
const tickOffsets = [0, 0];
if (model.vertical) {
tickOffsets[0] = -model.tickLabelPixelOffset;
if (model.topTitle) {
tmpv3[0] = model.boxPosition[0] + 0.5 * model.boxSize[0];
tmpv3[1] = model.barPosition[1] + model.barSize[1];

// write the axis label
publicAPI.createPolyDataForOneLabel(
model.renderable.getAxisLabel(),
tmpv3,
['middle', 'bottom'],
'horizontal',
[0, model.axisTitlePixelOffset],
results
);
} else {
tmpv3[0] = model.barPosition[0] + model.barSize[0];
tmpv3[1] = model.barPosition[1] + 0.5 * model.barSize[1];

// write the axis label
publicAPI.createPolyDataForOneLabel(
model.renderable.getAxisLabel(),
tmpv3,
['middle', 'top'],
'vertical',
[model.axisTitlePixelOffset, 0],
results
);
}
dir = [-1, 0];
} else {
tickOffsets[1] = model.tickLabelPixelOffset;
tmpv3[0] = model.barPosition[0] + 0.5 * model.barSize[0];
tmpv3[1] = model.barPosition[1] + model.barSize[1];
publicAPI.createPolyDataForOneLabel(
model.renderable.getAxisLabel(),
tmpv3,
['middle', 'bottom'],
'horizontal',
[0, model.axisTitlePixelOffset],
results
);
}

tmpv3[offsetAxis] =
model.barPosition[offsetAxis] +
(0.5 * dir[offsetAxis] + 0.5) * model.barSize[offsetAxis];
tmpv3[spacedAxis] =
model.barPosition[spacedAxis] + model.barSize[spacedAxis] * 0.5;

// draw bar segment labels
let tickSeg = null;
for (let i = 0; i < model.barSegments.length; i++) {
const seg = model.barSegments[i];
if (seg.title === 'ticks') {
// handle ticks below
tickSeg = seg;
} else {
tmpv3[spacedAxis] =
model.barPosition[spacedAxis] +
0.5 *
model.barSize[spacedAxis] *
(seg.corners[2][spacedAxis] + seg.corners[0][spacedAxis]);
publicAPI.createPolyDataForOneLabel(
seg.title,
tmpv3,
alignment,
'horizontal',
tickOffsets,
results
);
}
}

// write the tick labels
const tickSegmentStart =
model.barPosition[spacedAxis] +
model.barSize[spacedAxis] * tickSeg.corners[0][spacedAxis];
const tickSegmentSize =
model.barSize[spacedAxis] *
(tickSeg.corners[2][spacedAxis] - tickSeg.corners[0][spacedAxis]);
const ticks = publicAPI.getTicks();
const tickStrings = publicAPI.getTickStrings();
for (let t = 0; t < ticks.length; t++) {
const tickPos =
(ticks[t] - model.lastTickBounds[0]) /
(model.lastTickBounds[1] - model.lastTickBounds[0]);
tmpv3[spacedAxis] = tickSegmentStart + tickSegmentSize * tickPos;
publicAPI.createPolyDataForOneLabel(
tickStrings[t],
tmpv3,
alignment,
'horizontal',
tickOffsets,
results
);
}

const tcoordDA = vtkDataArray.newInstance({
numberOfComponents: 2,
values: tcoords,
name: 'TextureCoordinates',
});
model.tmPolyData.getPointData().setTCoords(tcoordDA);
model.tmPolyData.getPoints().setData(points, 3);
model.tmPolyData.getPoints().modified();
model.tmPolyData.getPolys().setData(polys, 1);
model.tmPolyData.getPolys().modified();
model.tmPolyData.modified();
};

publicAPI.updatePolyDataForBarSegments = () => {
const scalarsToColors = model.renderable.getScalarsToColors();
let numberOfExtraColors = 0;
if (
model.renderable.getDrawNanAnnotation() &&
scalarsToColors.getNanColor()
) {
numberOfExtraColors += 1;
}
if (
model.renderable.getDrawBelowRangeSwatch() &&
scalarsToColors.getUseBelowRangeColor?.()
) {
numberOfExtraColors += 1;
}
if (
model.renderable.getDrawAboveRangeSwatch() &&
scalarsToColors.getUseAboveRangeColor?.()
) {
numberOfExtraColors += 1;
}

const numPts = 4 * (1 + numberOfExtraColors);
const numQuads = numPts;

// handle vector component mode
let numComps = 1;
if (scalarsToColors.getVectorMode() === VectorMode.COMPONENT) {
numComps = scalarsToColors.getVectorComponent() + 1;
}

// create the colored bars
const points = new Float64Array(numPts * 3);
const cells = new Uint16Array(numQuads * 5);
const scalars = new Float32Array(numPts * numComps);

let ptIdx = 0;
let cellIdx = 0;

for (let i = 0; i < model.barSegments.length; i++) {
const seg = model.barSegments[i];
for (let e = 0; e < 4; e++) {
tmpv3[0] = model.barPosition[0] + seg.corners[e][0] * model.barSize[0];
tmpv3[1] = model.barPosition[1] + seg.corners[e][1] * model.barSize[1];
points[ptIdx * 3] = (0.5 * tmpv3[0] + 0.5) * model.lastSize[0];
points[ptIdx * 3 + 1] = (0.5 * tmpv3[1] + 0.5) * model.lastSize[1];
points[ptIdx * 3 + 2] = tmpv3[2];
for (let nc = 0; nc < numComps; nc++) {
scalars[ptIdx * numComps + nc] =
model.lastTickBounds[0] +
seg.scalars[e] *
(model.lastTickBounds[1] - model.lastTickBounds[0]);
}
ptIdx++;
}
cells[cellIdx * 5] = 4;
cells[cellIdx * 5 + 1] = ptIdx - 4;
cells[cellIdx * 5 + 2] = ptIdx - 3;
cells[cellIdx * 5 + 3] = ptIdx - 2;
cells[cellIdx * 5 + 4] = ptIdx - 1;
cellIdx++;
}

const scalarsDA = vtkDataArray.newInstance({
numberOfComponents: numComps,
values: scalars,
name: 'Scalars',
});
model.polyData.getPointData().setScalars(scalarsDA);
model.polyData.getPoints().setData(points, 3);
model.polyData.getPoints().modified();
model.polyData.getPolys().setData(cells, 1);
model.polyData.getPolys().modified();
model.polyData.modified();
};
}

const newScalarBarActorHelper = macro.newInstance(
(publicAPI, model, initialValues = { renderable: null }) => {
Object.assign(model, {}, initialValues);

// Inheritance
macro.obj(publicAPI, model);

macro.setGet(publicAPI, model, [
'axisTitlePixelOffset',
'tickLabelPixelOffset',
'renderable',
'topTitle',
'ticks',
'tickStrings',
]);
macro.get(publicAPI, model, [
'lastSize',
'lastAspectRatio',
'lastTickBounds',
'axisTextStyle',
'tickTextStyle',
'barActor',
'tmActor',
]);
macro.getArray(publicAPI, model, ['boxPosition', 'boxSize']);
macro.setArray(publicAPI, model, ['boxPosition', 'boxSize'], 2);

model.forceUpdate = false;
model.lastRebuildTime = {};
macro.obj(model.lastRebuildTime, { mtime: 0 });
model.lastSize = [-1, -1];

model.tmCanvas = document.createElement('canvas');
model.tmContext = model.tmCanvas.getContext('2d');
model._tmAtlas = new Map();

model.barMapper = vtkMapper.newInstance();
model.barMapper.setInterpolateScalarsBeforeMapping(true);
model.barMapper.setUseLookupTableScalarRange(true);
model.polyData = vtkPolyData.newInstance();
model.barMapper.setInputData(model.polyData);
model.barActor = vtkActor.newInstance();
model.barActor.setMapper(model.barMapper);

// for texture atlas
model.tmPolyData = vtkPolyData.newInstance();
model.tmMapper = vtkMapper.newInstance();
model.tmMapper.setInputData(model.tmPolyData);
model.tmTexture = vtkTexture.newInstance();
model.tmTexture.setInterpolate(false);
model.tmActor = vtkActor.newInstance({ parentProp: publicAPI });
model.tmActor.setMapper(model.tmMapper);
model.tmActor.addTexture(model.tmTexture);

model.barPosition = [0, 0];
model.barSize = [0, 0];
model.boxPosition = [0.88, -0.92];
model.boxSize = [0.1, 1.1];

// internal variables
model.lastTickBounds = [];

vtkScalarBarActorHelper(publicAPI, model);
},
'vtkScalarBarActorHelper'
);

//
// Now we define the public class that the application sets view independent
// properties on. This class is fairly small as it mainly just holds
// properties setter and getters leaving all calculations to the helper
// class.
//
function vtkScalarBarActor(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkScalarBarActor');

publicAPI.setTickTextStyle = (tickStyle) => {
model.tickTextStyle = { ...model.tickTextStyle, ...tickStyle };
publicAPI.modified();
};

publicAPI.setAxisTextStyle = (axisStyle) => {
model.axisTextStyle = { ...model.axisTextStyle, ...axisStyle };
publicAPI.modified();
};

publicAPI.resetAutoLayoutToDefault = () => {
publicAPI.setAutoLayout(defaultAutoLayout(publicAPI, model));
};

publicAPI.resetGenerateTicksToDefault = () => {
publicAPI.setGenerateTicks(defaultGenerateTicks(publicAPI, model));
};
}

// ----------------------------------------------------------------------------
// Object factory
// ----------------------------------------------------------------------------

function defaultValues(initialValues) {
return {
automated: true,
autoLayout: null,
axisLabel: 'Scalar Value',
barPosition: [0, 0],
barSize: [0, 0],
boxPosition: [0.88, -0.92],
boxSize: [0.1, 1.1],
scalarToColors: null,
axisTitlePixelOffset: 36.0,
axisTextStyle: {
fontColor: 'white',
fontStyle: 'normal',
fontSize: 18,
fontFamily: 'serif',
},
tickLabelPixelOffset: 14.0,
tickTextStyle: {
fontColor: 'white',
fontStyle: 'normal',
fontSize: 14,
fontFamily: 'serif',
},
generateTicks: null,
drawNanAnnotation: true,
drawBelowRangeSwatch: true,
drawAboveRangeSwatch: true,
...initialValues,
};
}

// ----------------------------------------------------------------------------

export function extend(publicAPI, model, initialValues = {}) {
Object.assign(model, defaultValues(initialValues));

if (!model.autoLayout) model.autoLayout = defaultAutoLayout(publicAPI, model);
if (!model.generateTicks)
model.generateTicks = defaultGenerateTicks(publicAPI, model);

// Inheritance
vtkActor.extend(publicAPI, model, initialValues);

publicAPI.getProperty().setDiffuse(0.0);
publicAPI.getProperty().setAmbient(1.0);

macro.setGet(publicAPI, model, [
'automated',
'autoLayout',
'axisTitlePixelOffset',
'axisLabel',
'scalarsToColors',
'tickLabelPixelOffset',
'generateTicks',
'drawNanAnnotation',
'drawBelowRangeSwatch',
'drawAboveRangeSwatch',
]);
macro.get(publicAPI, model, ['axisTextStyle', 'tickTextStyle']);
macro.getArray(publicAPI, model, [
'barPosition',
'barSize',
'boxPosition',
'boxSize',
]);
macro.setArray(
publicAPI,
model,
['barPosition', 'barSize', 'boxPosition', 'boxSize'],
2
);

// Object methods
vtkScalarBarActor(publicAPI, model);
}

// ----------------------------------------------------------------------------

export const newInstance = macro.newInstance(extend, 'vtkScalarBarActor');

// ----------------------------------------------------------------------------

export default { newInstance, extend, newScalarBarActorHelper };