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 };