CanvasView

Introduction

vtkCanvasView provides a way to create a canvas view.

Methods

extend

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

getCanvas

Get the canvas element

getCursor

Get the used cursor

getInteractive

getInteractor

Get the interactor

getRenderable

getRenderers

getRenderersByReference

getSize

Get the size of the canvas view

getSizeByReference

Get the size of the canvas view

getUseBackgroundImage

getUseOffScreen

isInViewport

newInstance

Method used to create a new instance of vtkCanvasView

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

setBackgroundImage

Argument Type Required Description
backgroundImage HTMLImageElement Yes The background image HTML element.

setCanvas

Argument Type Required Description
canvas HTMLCanvasElement Yes The canvas HTML element.

setContainer

Argument Type Required Description
container HTMLElement Yes The container HTML element.

setCursor

Argument Type Required Description
cursor String Yes The used cursor.

setInteractor

Argument Type Required Description
interactor Yes

setSize

Set the size of the canvas view.

Argument Type Required Description
width Number Yes The width of the canvas view.
height Number Yes The height of the canvas view.

setSize

Set the size of the canvas view.

Argument Type Required Description
size Size Yes The size of the canvas view.

setSizeFrom

Set the size of the canvas view.

Argument Type Required Description
size Size Yes The size of the canvas view.

setUseBackgroundImage

Argument Type Required Description
useBackgroundImage Yes

setUseOffScreen

Argument Type Required Description
useOffScreen Yes

setViewStream

Argument Type Required Description
viewStream Yes

traverseAllPasses

Source

index.d.ts
import { vtkObject } from '../../../interfaces';
import { Size } from '../../../types';

/**
*
*/
export interface ICanvasViewInitialValues {
canvas?: HTMLCanvasElement;
size?: Size;
cursorVisibility?: boolean;
cursor?: string;
useOffScreen?: boolean;
useBackgroundImage?: boolean;
}

export interface vtkCanvasView extends vtkObject {
/**
* Get the canvas element
*/
getCanvas(): HTMLCanvasElement;

/**
* Get the used cursor
*/
getCursor(): string;

/**
*
*/
getInteractive(): boolean;

/**
* Get the interactor
*/
getInteractor(): any;

/**
*
*/
getRenderable(): any;

/**
*
*/
getRenderers(): any[];

/**
*
*/
getRenderersByReference(): any[];

/**
* Get the size of the canvas view
*/
getSize(): Size;

/**
* Get the size of the canvas view
*/
getSizeByReference(): boolean;

/**
*
*/
getUseBackgroundImage(): boolean;

/**
*
*/
getUseOffScreen(): boolean;

/**
*
*/
isInViewport(): boolean;

/**
*
* @param {HTMLImageElement} backgroundImage The background image HTML element.
*/
setBackgroundImage(backgroundImage: HTMLImageElement): boolean;

/**
*
* @param {HTMLCanvasElement} canvas The canvas HTML element.
*/
setCanvas(canvas: HTMLCanvasElement): boolean;

/**
*
* @param {HTMLElement} container The container HTML element.
*/
setContainer(container: HTMLElement): boolean;

/**
*
* @param {String} cursor The used cursor.
*/
setCursor(cursor: string): boolean;

/**
*
* @param interactor
*/
setInteractor(interactor: any): boolean;

/**
* Set the size of the canvas view.
* @param {Size} size The size of the canvas view.
*/
setSize(size: Size): boolean;

/**
* Set the size of the canvas view.
* @param {Number} width The width of the canvas view.
* @param {Number} height The height of the canvas view.
*/
setSize(width: number, height: number): boolean;

/**
* Set the size of the canvas view.
* @param {Size} size The size of the canvas view.
*/
setSizeFrom(size: Size): boolean;

/**
*
* @param useBackgroundImage
*/
setUseBackgroundImage(useBackgroundImage: boolean): void;

/**
*
* @param useOffScreen
*/
setUseOffScreen(useOffScreen: boolean): boolean;

/**
*
* @param viewStream
*/
setViewStream(viewStream: any): boolean; // viewStream is vtkViewStream

/**
*
*/
traverseAllPasses(): void;
}

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

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

/**
* vtkCanvasView provides a way to create a canvas view.
*/
export declare const vtkCanvasView: {
newInstance: typeof newInstance;
extend: typeof extend;
};
export default vtkCanvasView;
index.js
import macro from 'vtk.js/Sources/macros';

const { vtkErrorMacro } = macro;

// ----------------------------------------------------------------------------
// vtkCanvasView methods
// ----------------------------------------------------------------------------

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

// Auto update style
function updateWindow() {
// Canvas size
if (model._renderable) {
model.canvas.setAttribute('width', model.size[0]);
model.canvas.setAttribute('height', model.size[1]);
}

// ImageStream size
if (model.viewStream) {
// If same size that's a NoOp
model.viewStream.setSize(model.size[0], model.size[1]);
}

// Offscreen ?
model.canvas.style.display = model.useOffScreen ? 'none' : 'block';

// Cursor type
if (model.el) {
model.el.style.cursor = model.cursorVisibility ? model.cursor : 'none';
}
}
publicAPI.onModified(updateWindow);

publicAPI.setContainer = (el) => {
if (model.el && model.el !== el) {
if (model.canvas.parentNode !== model.el) {
vtkErrorMacro('Error: canvas parent node does not match container');
}

// Remove canvas from previous container
model.el.removeChild(model.canvas);

// If the renderer has previously added
// a background image, remove it from the DOM.
if (model.el.contains(model.bgImage)) {
model.el.removeChild(model.bgImage);
}
}

if (model.el !== el) {
model.el = el;
if (model.el) {
model.el.appendChild(model.canvas);
}

// If the renderer is set to use a background
// image, attach it to the DOM.
if (model.useBackgroundImage) {
model.el.appendChild(model.bgImage);
}

// Trigger modified()
publicAPI.modified();
}
};

publicAPI.setBackgroundImage = (img) => {
model.bgImage.src = img.src;
};

publicAPI.setUseBackgroundImage = (value) => {
model.useBackgroundImage = value;

// Add or remove the background image from the
// DOM as specified.
if (
model.useBackgroundImage &&
model.el &&
!model.el.contains(model.bgImage)
) {
model.el.appendChild(model.bgImage);
} else if (
!model.useBackgroundImage &&
model.el &&
model.el.contains(model.bgImage)
) {
model.el.removeChild(model.bgImage);
}
};

publicAPI.setViewStream = (stream) => {
if (model.viewStream === stream) {
return false;
}
if (model.subscription) {
model.subscription.unsubscribe();
model.subscription = null;
}
model.viewStream = stream;
if (model.viewStream) {
// Enable display of the background image
publicAPI.setUseBackgroundImage(true);

// Bind to remote stream
model.subscription = model.viewStream.onImageReady((e) =>
publicAPI.setBackgroundImage(e.image)
);
model.viewStream.setSize(model.size[0], model.size[1]);
model.viewStream.invalidateCache();
model.viewStream.render();

publicAPI.modified();
}
return true;
};

publicAPI.delete = macro.chain(publicAPI.setViewStream, publicAPI.delete);

// --------------------------------------------------------------------------
// Make us look like a View (i.e.: vtkOpenGLRenderWindow)
// --------------------------------------------------------------------------
model._renderable = publicAPI;
model._renderers = [publicAPI];
publicAPI.traverseAllPasses = () => {};
publicAPI.isInViewport = () => true;
publicAPI.getInteractive = () => true;
}

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

const DEFAULT_VALUES = {
canvas: null,
size: [300, 300],
cursorVisibility: true,
cursor: 'pointer',
useOffScreen: false,
useBackgroundImage: false,
};

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

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

// Create internal instances
model.canvas = document.createElement('canvas');
model.canvas.style.width = '100%';

// Create internal bgImage
model.bgImage = new Image();
model.bgImage.style.position = 'absolute';
model.bgImage.style.left = '0';
model.bgImage.style.top = '0';
model.bgImage.style.width = '100%';
model.bgImage.style.height = '100%';
model.bgImage.style.zIndex = '-1';

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

// Build VTK API
macro.get(publicAPI, model, ['useBackgroundImage', '_renderable']);

macro.setGet(publicAPI, model, [
'canvas',
'cursor',
'useOffScreen',
'interactor',
]);

macro.setGetArray(publicAPI, model, ['size'], 2);
macro.getArray(publicAPI, model, ['_renderers']);
macro.moveToProtected(publicAPI, model, ['renderable', 'renderers']);

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

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

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

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

export default { newInstance, extend };