AnnotatedCubeActor

Introduction

All propertyObjects may have any of the following keys:

  • text: the face text (default “”)
  • faceColor: the face color (default “white”)
  • faceRotation: the face rotation, in degrees (default 0)
  • fontFamily: the font family to use (default Arial)
  • fontColor: the font color (default “black”)
  • fontStyle: the CSS style for the text (default “normal”)
  • fontSizeScale: A function that takes the face resolution and returns the
    pixel size of the font (default (resolution) => resolution / 1.8)
  • edgeThickness: the face edge/border thickness, which is a fraction of the
    cube resolution (default 0.1)
  • edgeColor: the color of each face’s edge/border (default “white”)
    resolution: the pixel resolution of a face, i.e. pixel side length (default 200)
    If a key is not specified, then the default value is used.

Methods

extend

Method use to decorate a given object (publicAPI+model) with vtkAnnotatedCubeActor 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 IAnnotatedCubeActorInitialValues No (default: {})

newInstance

Method use to create a new instance of vtkAnnotatedCubeActor

Argument Type Required Description
initialValues IAnnotatedCubeActorInitialValues No for pre-setting some of its content

setDefaultStyle

Set the default style.

Argument Type Required Description
style IStyle Yes

setXMinusFaceProperty

The -X face property.

Argument Type Required Description
prop IFaceProperty Yes The -X face property.

setXPlusFaceProperty

The +X face property.

Argument Type Required Description
prop IFaceProperty Yes +X face property

setYMinusFaceProperty

The -Y face property.

Argument Type Required Description
prop IFaceProperty Yes The -Y ace property.

setYPlusFaceProperty

The +Y face property.

Argument Type Required Description
prop IFaceProperty Yes The +Y face property.

setZMinusFaceProperty

The -Z face property.

Argument Type Required Description
prop IFaceProperty Yes The -Z face property.

setZPlusFaceProperty

The +Z face property.

Argument Type Required Description
prop IFaceProperty Yes The +Z face property.

Source

Presets.js
const STYLES = {
default: {
defaultStyle: {
fontStyle: 'bold',
fontFamily: 'Arial',
fontColor: 'black',
fontSizeScale: (res) => res / 2,
faceColor: 'white',
edgeThickness: 0.1,
edgeColor: 'black',
resolution: 400,
},
xMinusFaceProperty: {
text: 'X-',
faceColor: 'yellow',
},
xPlusFaceProperty: {
text: 'X+',
faceColor: 'yellow',
},
yMinusFaceProperty: {
text: 'Y-',
faceColor: 'red',
},
yPlusFaceProperty: {
text: 'Y+',
faceColor: 'red',
},
zMinusFaceProperty: {
text: 'Z-',
faceColor: '#008000',
},
zPlusFaceProperty: {
text: 'Z+',
faceColor: '#008000',
},
},
lps: {
xMinusFaceProperty: {
text: 'R',
faceRotation: -90,
},
xPlusFaceProperty: {
text: 'L',
faceRotation: 90,
},
yMinusFaceProperty: {
text: 'A',
faceRotation: 0,
},
yPlusFaceProperty: {
text: 'P',
faceRotation: 180,
},
zMinusFaceProperty: {
text: 'I',
faceRotation: 180,
},
zPlusFaceProperty: {
text: 'S',
faceRotation: 0,
},
},
};

function applyDefinitions(definitions, cubeActor) {
cubeActor.set(definitions);
}

function applyPreset(name, cubeActor) {
return applyDefinitions(STYLES[name], cubeActor);
}

function registerStylePreset(name, definitions) {
STYLES[name] = definitions;
}

export default {
applyDefinitions,
applyPreset,
registerStylePreset,
};
index.d.ts
import vtkActor, { IActorInitialValues } from '../Actor';

export interface IStyle {
text?: string;
faceColor?: string;
faceRotation?: number;
fontFamily?: string;
fontColor?: string;
fontStyle?: string;
fontSizeScale?: (res: number) => number;
edgeThickness?: number;
edgeColor?: string;
resolution?: number;
}

export interface IFaceProperty extends IStyle {
text?: string;
faceRotation?: number;
}

/**
*
*/
export interface IAnnotatedCubeActorInitialValues extends IActorInitialValues {
}

export interface vtkAnnotatedCubeActor extends vtkActor {
/**
* Set the default style.
* @param {IStyle} style
*/
setDefaultStyle(style: IStyle): boolean;

/**
* The +X face property.
* @param {IFaceProperty} prop +X face property
*/
setXPlusFaceProperty(prop: IFaceProperty): boolean;

/**
* The -X face property.
* @param {IFaceProperty} prop The -X face property.
*/
setXMinusFaceProperty(prop: IFaceProperty): boolean;

/**
* The +Y face property.
* @param {IFaceProperty} prop The +Y face property.
*/
setYPlusFaceProperty(prop: IFaceProperty): boolean;

/**
* The -Y face property.
* @param {IFaceProperty} prop The -Y ace property.
*/
setYMinusFaceProperty(prop: IFaceProperty): boolean;

/**
* The +Z face property.
* @param {IFaceProperty} prop The +Z face property.
*/
setZPlusFaceProperty(prop: IFaceProperty): boolean;

/**
* The -Z face property.
* @param {IFaceProperty} prop The -Z face property.
*/
setZMinusFaceProperty(prop: IFaceProperty): boolean;
}

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

/**
* Method use to create a new instance of vtkAnnotatedCubeActor
* @param {IAnnotatedCubeActorInitialValues} [initialValues] for pre-setting some of its content
*/
export function newInstance(initialValues?: IAnnotatedCubeActorInitialValues): vtkAnnotatedCubeActor;

/**
* All propertyObjects may have any of the following keys:
* * text: the face text (default “”)
* * faceColor: the face color (default “white”)
* * faceRotation: the face rotation, in degrees (default 0)
* * fontFamily: the font family to use (default Arial)
* * fontColor: the font color (default “black”)
* * fontStyle: the CSS style for the text (default “normal”)
* * fontSizeScale: A function that takes the face resolution and returns the
* pixel size of the font (default (resolution) => resolution / 1.8)
* * edgeThickness: the face edge/border thickness, which is a fraction of the
* cube resolution (default 0.1)
* * edgeColor: the color of each face’s edge/border (default “white”)
* resolution: the pixel resolution of a face, i.e. pixel side length (default 200)
* If a key is not specified, then the default value is used.
*/
export declare const vtkAnnotatedCubeActor: {
newInstance: typeof newInstance,
extend: typeof extend,
};
export default vtkAnnotatedCubeActor;
index.js
import macro from 'vtk.js/Sources/macros';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkTexture from 'vtk.js/Sources/Rendering/Core/Texture';
import vtkCubeSource from 'vtk.js/Sources/Filters/Sources/CubeSource';
import ImageHelper from 'vtk.js/Sources/Common/Core/ImageHelper';

import Presets from 'vtk.js/Sources/Rendering/Core/AnnotatedCubeActor/Presets';

const FACE_TO_INDEX = {
xPlus: 0,
xMinus: 1,
yPlus: 2,
yMinus: 3,
zPlus: 4,
zMinus: 5,
};

// ----------------------------------------------------------------------------
// vtkAnnotatedCubeActor
// ----------------------------------------------------------------------------

function vtkAnnotatedCubeActor(publicAPI, model) {
// Set our className
model.classHierarchy.push('vtkAnnotatedCubeActor');

// Make sure face properties are not references to the default value
model.xPlusFaceProperty = { ...model.xPlusFaceProperty };
model.xMinusFaceProperty = { ...model.xMinusFaceProperty };
model.yPlusFaceProperty = { ...model.yPlusFaceProperty };
model.yMinusFaceProperty = { ...model.yMinusFaceProperty };
model.zPlusFaceProperty = { ...model.zPlusFaceProperty };
model.zMinusFaceProperty = { ...model.zMinusFaceProperty };

// private variables

let cubeSource = null;

const canvas = document.createElement('canvas');
const mapper = vtkMapper.newInstance();
const texture = vtkTexture.newInstance();
texture.setInterpolate(true);

// private methods

function updateFaceTexture(faceName, newProp = null) {
if (newProp) {
Object.assign(model[`${faceName}FaceProperty`], newProp);
}

const prop = {
...model.defaultStyle,
...model[`${faceName}FaceProperty`],
};

// set canvas resolution
canvas.width = prop.resolution;
canvas.height = prop.resolution;

const ctxt = canvas.getContext('2d');

// set background color
ctxt.fillStyle = prop.faceColor;
ctxt.fillRect(0, 0, canvas.width, canvas.height);

// draw edge
if (prop.edgeThickness > 0) {
ctxt.strokeStyle = prop.edgeColor;
ctxt.lineWidth = prop.edgeThickness * canvas.width;
ctxt.strokeRect(0, 0, canvas.width, canvas.height);
}

// set face rotation
ctxt.save();

// vertical flip
ctxt.translate(0, canvas.height);
ctxt.scale(1, -1);

ctxt.translate(canvas.width / 2, canvas.height / 2);
ctxt.rotate(-Math.PI * (prop.faceRotation / 180.0));

// set foreground text
const textSize = prop.fontSizeScale(prop.resolution);
ctxt.fillStyle = prop.fontColor;
ctxt.textAlign = 'center';
ctxt.textBaseline = 'middle';
ctxt.font = `${prop.fontStyle} ${textSize}px "${prop.fontFamily}"`;
ctxt.fillText(prop.text, 0, 0);

ctxt.restore();

const vtkImage = ImageHelper.canvasToImageData(canvas);
texture.setInputData(vtkImage, FACE_TO_INDEX[faceName]);
publicAPI.modified();
}

function updateAllFaceTextures() {
cubeSource = vtkCubeSource.newInstance({
generate3DTextureCoordinates: true,
});

mapper.setInputConnection(cubeSource.getOutputPort());

updateFaceTexture('xPlus');
updateFaceTexture('xMinus');
updateFaceTexture('yPlus');
updateFaceTexture('yMinus');
updateFaceTexture('zPlus');
updateFaceTexture('zMinus');
}

// public methods

publicAPI.setDefaultStyle = (style) => {
model.defaultStyle = { ...model.defaultStyle, ...style };
updateAllFaceTextures();
};

publicAPI.setXPlusFaceProperty = (prop) => updateFaceTexture('xPlus', prop);
publicAPI.setXMinusFaceProperty = (prop) => updateFaceTexture('xMinus', prop);
publicAPI.setYPlusFaceProperty = (prop) => updateFaceTexture('yPlus', prop);
publicAPI.setYMinusFaceProperty = (prop) => updateFaceTexture('yMinus', prop);
publicAPI.setZPlusFaceProperty = (prop) => updateFaceTexture('zPlus', prop);
publicAPI.setZMinusFaceProperty = (prop) => updateFaceTexture('zMinus', prop);

// constructor

updateAllFaceTextures();

// set mapper
mapper.setInputConnection(cubeSource.getOutputPort());
publicAPI.setMapper(mapper);

// set texture
publicAPI.addTexture(texture);
}

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

export const DEFAULT_VALUES = {
defaultStyle: {
text: '',
faceColor: 'white',
faceRotation: 0,
fontFamily: 'Arial',
fontColor: 'black',
fontStyle: 'normal',
fontSizeScale: (resolution) => resolution / 1.8,
edgeThickness: 0.1,
edgeColor: 'black',
resolution: 200,
},
// xPlusFaceProperty: null,
// xMinusFaceProperty: null,
// yPlusFaceProperty: null,
// yMinusFaceProperty: null,
// zPlusFaceProperty: null,
// zMinusFaceProperty: null,
};

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

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

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

macro.get(publicAPI, model, [
'defaultStyle',
'xPlusFaceProperty',
'xMinusFaceProperty',
'yPlusFaceProperty',
'yMinusFaceProperty',
'zPlusFaceProperty',
'zMinusFaceProperty',
]);

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

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

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

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

export default { newInstance, extend, Presets };