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.

getInteractiveRenderer

An instance of this class will spawn its own renderer, by default non interactive.
This behavior is configurable through the interactiveRenderer property when initializing the instance.

Returns

Type	Description
	true if the renderer was created as interactive, false otherwise.

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.

getParentRenderer

Gets the parent renderer, if any.

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	vtkActor	Yes	The actor instance.

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

setParentRenderer

Sets the parent renderer

Argument	Type	Required	Description
ren	vtkRenderer	Yes	The parent renderer

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	Number	Yes

updateMarkerOrientation

Manually updates the marker’s orientation.

updateViewport

Updates the orientation widget viewport size.

Source

Constants.d.ts

export declare enum Corners {
  TOP_LEFT = 'TOP_LEFT',
  TOP_RIGHT = 'TOP_RIGHT',
  BOTTOM_LEFT = 'BOTTOM_LEFT',
  BOTTOM_RIGHT = 'BOTTOM_RIGHT',
}

declare const _default: {
  Corners: typeof Corners;
};
export default _default;

Constants.js

export 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 vtkActor from '../../../Rendering/Core/Actor';
import vtkRenderer from '../../../Rendering/Core/Renderer';
import vtkRenderWindowInteractor from '../../../Rendering/Core/RenderWindowInteractor';
import { Nullable } from '../../../types';
import { Corners } from './Constants';

/**
 *
 */
export interface IOrientationMarkerWidgetInitialValues {
  actor?: vtkActor;
  interactor?: vtkRenderWindowInteractor;
  parentRenderer?: vtkRenderer;
  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(): vtkActor;

  /**
   * Gets the parent renderer, if any.
   */
  getParentRenderer(): Nullable<vtkRenderer>;

  /**
   * 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 {vtkActor} actor The actor instance.
   */
  setActor(actor: vtkActor): void;

  /**
   * Sets the parent renderer
   * @param {vtkRenderer} ren The parent renderer
   */
  setParentRenderer(ren: vtkRenderer): boolean;

  /**
   * 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 {Number} sizeFactor
   * @default 0.2
   */
  setViewportSize(sizeFactor: number): void;

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

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

  /**
   * An instance of this class will spawn its own renderer, by default non interactive.
   * This behavior is configurable through the interactiveRenderer property when initializing the instance.
   * @returns true if the renderer was created as interactive, false otherwise.
   */
  getInteractiveRenderer(): boolean;
}

/**
 * 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;
  Corners: typeof Corners;
};

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) => {
    publicAPI.updateViewport();
  });
  let onCameraChangedSub = null;
  let onCameraModifiedSub = null;
  let onAnimationSub = null;
  let onEndAnimationSub = null;
  let selfSubscription = null;

  function onCameraModified() {
    // If animating, marker will be updated on Animation event
    if (!model._interactor.isAnimating()) {
      publicAPI.updateMarkerOrientation();
    }
  }

  model._onParentRendererChanged = () => publicAPI.updateViewport();

  publicAPI.computeViewport = () => {
    const parentRen =
      model.parentRenderer || model._interactor.getCurrentRenderer();

    const [xMin, yMin, xMax, yMax] = parentRen.getViewport();

    const view = model._interactor.getView();
    const canvasSize = view.getSize();
    const [viewXSize, viewYSize] = view.getViewportSize(parentRen);
    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 / canvasSize[0];
    const yFrac = pixelSize / canvasSize[1];
    // [left bottom right top]
    switch (model.viewportCorner) {
      case Corners.TOP_LEFT:
        return [xMin, yMax - yFrac, xMin + xFrac, yMax];
      case Corners.TOP_RIGHT:
        return [xMax - xFrac, yMax - yFrac, xMax, yMax];
      case Corners.BOTTOM_LEFT:
        return [xMin, yMin, xMin + xFrac, yMin + yFrac];
      case Corners.BOTTOM_RIGHT:
        return [xMax - xFrac, yMin, xMax, yMin + yFrac];
      default:
        vtkErrorMacro('Invalid widget corner');
        return null;
    }
  };

  publicAPI.updateViewport = () => {
    if (model.enabled) {
      selfRenderer.setViewport(...publicAPI.computeViewport());
      model._interactor.render();
    }
  };

  publicAPI.updateMarkerOrientation = () => {
    const ren = model.parentRenderer || model._interactor.getCurrentRenderer();
    const currentCamera = ren.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 ren =
        model.parentRenderer || model._interactor.getCurrentRenderer();
      const renderWindow = ren.getRenderWindow();
      renderWindow.addRenderer(selfRenderer);
      if (renderWindow.getNumberOfLayers() < 2) {
        renderWindow.setNumberOfLayers(2);
      }
      // Highest number is foreground
      selfRenderer.setLayer(renderWindow.getNumberOfLayers() - 1);
      selfRenderer.setInteractive(model.interactiveRenderer);

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

      onCameraChangedSub = ren.onEvent((event) => {
        if (event.type === 'ActiveCameraEvent') {
          if (onCameraModifiedSub) {
            onCameraModifiedSub.unsubscribe();
          }
          onCameraModifiedSub = event.camera.onModified(onCameraModified);
        }
      });
      onCameraModifiedSub = ren.getActiveCamera().onModified(onCameraModified);
      onAnimationSub = model._interactor.onAnimation(
        publicAPI.updateMarkerOrientation
      );
      onEndAnimationSub = model._interactor.onEndAnimation(
        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();
      onCameraChangedSub.unsubscribe();
      onCameraChangedSub = null;
      onCameraModifiedSub.unsubscribe();
      onCameraModifiedSub = null;
      onAnimationSub.unsubscribe();
      onAnimationSub = null;
      onEndAnimationSub.unsubscribe();
      onEndAnimationSub = 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;
    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;
    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 (onCameraChangedSub) {
      onCameraChangedSub.unsubscribe();
      onCameraChangedSub = null;
    }
    if (onCameraModifiedSub) {
      onCameraModifiedSub.unsubscribe();
      onCameraModifiedSub = null;
    }
    if (onAnimationSub) {
      onAnimationSub.unsubscribe();
      onAnimationSub = null;
    }
    if (onEndAnimationSub) {
      onEndAnimationSub.unsubscribe();
      onEndAnimationSub = 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,
  parentRenderer: null,
  interactiveRenderer: false,
};

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

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',
    'interactiveRenderer',
  ]);

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

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

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

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

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

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