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 Yes

setXMinusFaceProperty

The -X face property.

Argument Type Required Description
prop IFaceProperty Yes -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 -Y ace property

setYPlusFaceProperty

The +Y face property.

Argument Type Required Description
prop IFaceProperty Yes +Y face property

setZMinusFaceProperty

The -Z face property.

Argument Type Required Description
prop IFaceProperty Yes -Z face property

setZPlusFaceProperty

The +Z face property.

Argument Type Required Description
prop IFaceProperty Yes +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 from '../Actor';

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

/**
*
*/
interface IAnnotatedCubeActorInitialValues {
}

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

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

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

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

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

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

/**
* The -Z face property.
* @param {IFaceProperty} prop -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 };