OrientationMarkerWidget

Introduction

vtkOrientationMarkerWidget is a 2D widget for manipulating a marker prop

Methods

computeViewport

Get the computed viewport size.
The format is [left, bottom, right, top].

delete

Dereference any internal object and remove any subscription.
It gives custom class to properly detach themselves from the DOM
or any external dependency that could prevent their deletion
when the GC runs.

extend

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

getActor

getEnabled

Get wheter the orientation marker is enabled.

getInteractor

Get the render window interactor associated with the widget.

getMaxPixelSize

Get the maximum side length, in pixels, for the orientation marker widget
viewport.

getMinPixelSize

Get the minimum side length, in pixels, for the orientation marker widget
viewport.

getRenderer

Get the renderer associated with the widget.

getViewportCorner

Get the viewport corner.

getViewportSize

Get the viewport size.

newInstance

Method used to create a new instance of vtkOrientationMarkerWidget

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

setActor

Get the actor associated with the widget.

Argument Type Required Description
actor Yes

setEnabled

Set the widget enabled status, i.e. to show the widget or not.

Argument Type Required Description
enabled Boolean Yes

setInteractor

Set the render window interactor associated with the widget.

Argument Type Required Description
interactor vtkRenderWindowInteractor Yes

setMaxPixelSize

Set the maximum side length, in pixels, for the orientation marker widget
viewport.

Argument Type Required Description
pixelSize Number Yes

setMinPixelSize

Set the minimum side length, in pixels, for the orientation marker widget
viewport.

Argument Type Required Description
pixelSize Number Yes

setViewportCorner

Set which corner to put the widget’s viewport.

Argument Type Required Description
viewportCorner Corners Yes

setViewportSize

Set the viewport size. The sizeFactor should be between 0.0 and 1.0.
It says how much of the main render window to color.

Argument Type Required Description
sizeFactor Yes

updateMarkerOrientation

Manually updates the marker’s orientation.

updateViewport

Updates the orientation widget viewport size.

Source

Constants.js
const Corners = {
TOP_LEFT: 'TOP_LEFT',
TOP_RIGHT: 'TOP_RIGHT',
BOTTOM_LEFT: 'BOTTOM_LEFT',
BOTTOM_RIGHT: 'BOTTOM_RIGHT',
};

export default { Corners };
index.d.ts
import { vtkObject } from "../../../interfaces";
import vtkAnnotatedCubeActor from "../../../Rendering/Core/AnnotatedCubeActor";
import vtkAxesActor from "../../../Rendering/Core/AxesActor";
import vtkRenderer from "../../../Rendering/Core/Renderer";
import vtkRenderWindowInteractor from "../../../Rendering/Core/RenderWindowInteractor";

export enum Corners {
TOP_LEFT,
TOP_RIGHT,
BOTTOM_LEFT,
BOTTOM_RIGHT,
}

/**
*
*/
export interface IOrientationMarkerWidgetInitialValues {
actor?: vtkAnnotatedCubeActor | vtkAxesActor,
interactor?: vtkRenderWindowInteractor,
viewportCorner?: Corners,
viewportSize?: number,
minPixelSize?: number,
maxPixelSize?: number
}

export interface vtkOrientationMarkerWidget extends vtkObject {

/**
* Get the computed viewport size.
* The format is `[left, bottom, right, top]`.
*/
computeViewport(): [number, number, number, number];

/**
* Dereference any internal object and remove any subscription.
* It gives custom class to properly detach themselves from the DOM
* or any external dependency that could prevent their deletion
* when the GC runs.
*/
delete(): void;

/**
*
*/
getActor(): vtkAnnotatedCubeActor | vtkAxesActor;

/**
* Get wheter the orientation marker is enabled.
*/
getEnabled(): boolean;

/**
* Get the render window interactor associated with the widget.
*/
getInteractor(): vtkRenderWindowInteractor;

/**
* Get the maximum side length, in pixels, for the orientation marker widget
* viewport.
*/
getMaxPixelSize(): number;

/**
* Get the minimum side length, in pixels, for the orientation marker widget
* viewport.
*/
getMinPixelSize(): number;

/**
* Get the renderer associated with the widget.
*/
getRenderer(): vtkRenderer;

/**
* Get the viewport corner.
*/
getViewportCorner(): Corners;

/**
* Get the viewport size.
*/
getViewportSize(): number;

/**
* Get the actor associated with the widget.
* @param actor
*/
setActor(actor: vtkAnnotatedCubeActor | vtkAxesActor): void;

/**
* Set the widget enabled status, i.e. to show the widget or not.
* @param {Boolean} enabled
*/
setEnabled(enabled: boolean): void;

/**
* Set the render window interactor associated with the widget.
* @param {vtkRenderWindowInteractor} interactor
*/
setInteractor(interactor: vtkRenderWindowInteractor): boolean;

/**
* Set the maximum side length, in pixels, for the orientation marker widget
* viewport.
* @param {Number} pixelSize
* @default 200
*/
setMaxPixelSize(pixelSize: number): boolean;

/**
* Set the minimum side length, in pixels, for the orientation marker widget
* viewport.
* @param {Number} pixelSize
* @default 50
*/
setMinPixelSize(pixelSize: number): boolean;

/**
* Set which corner to put the widget's viewport.
* @param {Corners} viewportCorner
* @default BOTTOM_LEFT
*/
setViewportCorner(viewportCorner: Corners): boolean;

/**
* Set the viewport size. The sizeFactor should be between 0.0 and 1.0.
* It says how much of the main render window to color.
* @param sizeFactor
* @default 0.2
*/
setViewportSize(sizeFactor: number): void;

/**
* Manually updates the marker's orientation.
*/
updateMarkerOrientation(): void;

/**
* Updates the orientation widget viewport size.
*/
updateViewport(): void;
}

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

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


/**
* vtkOrientationMarkerWidget is a 2D widget for manipulating a marker prop
*/
export declare const vtkOrientationMarkerWidget: {
newInstance: typeof newInstance;
extend: typeof extend;
}
export default vtkOrientationMarkerWidget;
index.js
import macro from 'vtk.js/Sources/macros';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import Constants from 'vtk.js/Sources/Interaction/Widgets/OrientationMarkerWidget/Constants';

const { vtkErrorMacro } = macro;
const { Corners } = Constants;

// ----------------------------------------------------------------------------
// vtkOrientationMarkerWidget
// ----------------------------------------------------------------------------

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

const superClass = { ...publicAPI };

// Private variables

const previousCameraInput = [];
const selfRenderer = vtkRenderer.newInstance();
const resizeObserver = new ResizeObserver((entries) => {
if (entries.length === 1) {
publicAPI.updateViewport();
}
});
let interactorUnsubscribe = null;
let selfSubscription = null;

publicAPI.computeViewport = () => {
const [viewXSize, viewYSize] = model.interactor.getView().getSize();
const minViewSize = Math.min(viewXSize, viewYSize);

let pixelSize = model.viewportSize * minViewSize;
// clamp pixel size
pixelSize = Math.max(
Math.min(model.minPixelSize, minViewSize),
Math.min(model.maxPixelSize, pixelSize)
);

const xFrac = pixelSize / viewXSize;
const yFrac = pixelSize / viewYSize;
// [left bottom right top]
switch (model.viewportCorner) {
case Corners.TOP_LEFT:
return [0, 1 - yFrac, xFrac, 1];
case Corners.TOP_RIGHT:
return [1 - xFrac, 1 - yFrac, 1, 1];
case Corners.BOTTOM_LEFT:
return [0, 0, xFrac, yFrac];
case Corners.BOTTOM_RIGHT:
return [1 - xFrac, 0, 1, yFrac];
default:
vtkErrorMacro('Invalid widget corner');
return null;
}
};

publicAPI.updateViewport = () => {
selfRenderer.setViewport(...publicAPI.computeViewport());
model.interactor.render();
};

publicAPI.updateMarkerOrientation = () => {
const currentCamera = model.interactor
.findPokedRenderer()
.getActiveCamera();

if (!currentCamera) {
return;
}

const position = currentCamera.getReferenceByName('position');
const focalPoint = currentCamera.getReferenceByName('focalPoint');
const viewUp = currentCamera.getReferenceByName('viewUp');
if (
previousCameraInput[0] !== position[0] ||
previousCameraInput[1] !== position[1] ||
previousCameraInput[2] !== position[2] ||
previousCameraInput[3] !== focalPoint[0] ||
previousCameraInput[4] !== focalPoint[1] ||
previousCameraInput[5] !== focalPoint[2] ||
previousCameraInput[6] !== viewUp[0] ||
previousCameraInput[7] !== viewUp[1] ||
previousCameraInput[8] !== viewUp[2]
) {
previousCameraInput[0] = position[0];
previousCameraInput[1] = position[1];
previousCameraInput[2] = position[2];
previousCameraInput[3] = focalPoint[0];
previousCameraInput[4] = focalPoint[1];
previousCameraInput[5] = focalPoint[2];
previousCameraInput[6] = viewUp[0];
previousCameraInput[7] = viewUp[1];
previousCameraInput[8] = viewUp[2];
const activeCamera = selfRenderer.getActiveCamera();
activeCamera.setPosition(position[0], position[1], position[2]);
activeCamera.setFocalPoint(focalPoint[0], focalPoint[1], focalPoint[2]);
activeCamera.setViewUp(viewUp[0], viewUp[1], viewUp[2]);
selfRenderer.resetCamera();
}
};

/**
* Enables/Disables the orientation marker.
*/
publicAPI.setEnabled = (enabling) => {
if (enabling) {
if (model.enabled) {
return;
}

if (!model.actor) {
vtkErrorMacro('Must set actor before enabling orientation marker.');
return;
}

if (!model.interactor) {
vtkErrorMacro(
'Must set interactor before enabling orientation marker.'
);
return;
}

const renderWindow = model.interactor
.findPokedRenderer()
.getRenderWindow();
renderWindow.addRenderer(selfRenderer);
if (renderWindow.getNumberOfLayers() < 2) {
renderWindow.setNumberOfLayers(2);
}
// Highest number is foreground
selfRenderer.setLayer(renderWindow.getNumberOfLayers() - 1);
selfRenderer.setInteractive(false);

selfRenderer.addViewProp(model.actor);
model.actor.setVisibility(true);

({ unsubscribe: interactorUnsubscribe } = model.interactor.onAnimation(
publicAPI.updateMarkerOrientation
));

resizeObserver.observe(model.interactor.getView().getCanvas());

publicAPI.updateViewport();
publicAPI.updateMarkerOrientation();

model.enabled = true;
} else {
if (!model.enabled) {
return;
}
model.enabled = false;

resizeObserver.disconnect();
interactorUnsubscribe();
interactorUnsubscribe = null;

model.actor.setVisibility(false);
selfRenderer.removeViewProp(model.actor);

const renderWindow = model.interactor
.findPokedRenderer()
.getRenderWindow();
if (renderWindow) {
renderWindow.removeRenderer(selfRenderer);
}
}
publicAPI.modified();
};

/**
* Sets the viewport corner.
*/
publicAPI.setViewportCorner = (corner) => {
if (corner === model.viewportCorner) {
return;
}

model.viewportCorner = corner;
if (model.enabled) {
publicAPI.updateViewport();
}
};

/**
* Sets the viewport size.
*/
publicAPI.setViewportSize = (sizeFactor) => {
const viewportSize = Math.min(1, Math.max(0, sizeFactor));
if (viewportSize === model.viewportSize) {
return;
}

model.viewportSize = viewportSize;
if (model.enabled) {
publicAPI.updateViewport();
}
};

publicAPI.setActor = (actor) => {
const previousState = model.enabled;
publicAPI.setEnabled(false);
model.actor = actor;
publicAPI.setEnabled(previousState);
};

publicAPI.getRenderer = () => selfRenderer;

publicAPI.delete = () => {
superClass.delete();
if (selfSubscription) {
selfSubscription.unsubscribe();
selfSubscription = null;
}
if (interactorUnsubscribe) {
interactorUnsubscribe();
interactorUnsubscribe = null;
}
resizeObserver.disconnect();
};

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

// update viewport whenever we are updated
selfSubscription = publicAPI.onModified(publicAPI.updateViewport);
}

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

export const DEFAULT_VALUES = {
// actor: null,
// interactor: null,
viewportCorner: Constants.Corners.BOTTOM_LEFT,
viewportSize: 0.2,
minPixelSize: 50,
maxPixelSize: 200,
};

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

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

// Build VTK API
macro.obj(publicAPI, model);

macro.get(publicAPI, model, ['enabled', 'viewportCorner', 'viewportSize']);

// NOTE: setting these while the widget is enabled will
// not update the widget.
macro.setGet(publicAPI, model, [
'interactor',
'minPixelSize',
'maxPixelSize',
]);
macro.get(publicAPI, model, ['actor']);

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

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

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

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

export default { newInstance, extend, ...Constants };