RemoteView

Introduction

vtkRemoteView provides a way to create a remote view.

Methods

delete

Release GL context

extend

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

getCanvasView

getContainer

Get container element

getInteractiveQuality

getInteractiveRatio

getInteractor

getInteractorStyle

getRpcGestureEvent

getRpcMouseEvent

getRpcWheelEvent

getSession

getStillQuality

getStillRatio

getViewStream

newInstance

Method used to create a new instance of vtkCanvasView

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

render

resetCamera

resize

Handle window resize

setContainer

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

setInteractiveQuality

Argument	Type	Required	Description
interactiveQuality		Yes

setInteractiveRatio

Argument	Type	Required	Description
interactiveRatio		Yes

setRpcGestureEvent

Argument	Type	Required	Description
rpcGestureEvent		Yes

setRpcMouseEvent

Argument	Type	Required	Description
rpcMouseEvent		Yes

setRpcWheelEvent

Argument	Type	Required	Description
rpcWheelEvent		Yes

setSession

Argument	Type	Required	Description
session		Yes

setStillQuality

Argument	Type	Required	Description
stillQuality		Yes

setStillRatio

Argument	Type	Required	Description
stillRatio		Yes

setViewId

Argument	Type	Required	Description
viewId		Yes

setViewStream

Argument	Type	Required	Description
viewStream		Yes

Source

index.d.ts

import { vtkObject } from '../../../interfaces';
import vtkCanvasView from '../CanvasView';
import vtkImageStream from '../../../IO/Core/ImageStream';
import vtkViewStream from '../../../IO/Core/ImageStream/ViewStream';

interface IRemoteViewInitialValues {
  viewId?: string;
  interactiveQuality?: number;
  interactiveRatio?: number;
  stillQuality?: number;
  stillRatio?: number;
  rpcMouseEvent?: string;
  rpcGestureEvent?: any;
  rpcWheelEvent?: any;
  viewStream?: vtkViewStream;
}

export interface vtkRemoteView extends vtkObject {
  /**
   * Get container element
   */
  getContainer(): HTMLElement;

  /**
   *
   */
  getViewStream(): vtkViewStream;

  /**
   *
   */
  getCanvasView(): vtkCanvasView;

  /**
   *
   */
  getInteractor(): any;

  /**
   *
   */
  getInteractorStyle(): any;

  /**
   *
   */
  getInteractiveQuality(): number;

  /**
   *
   */
  getInteractiveRatio(): number;

  /**
   *
   */
  getStillQuality(): number;

  /**
   *
   */
  getStillRatio(): number;

  /**
   *
   */
  getSession(): any;

  /**
   *
   * @param session
   */
  setSession(session: any): boolean;

  /**
   *
   */
  getRpcMouseEvent(): string;

  /**
   *
   * @param rpcMouseEvent
   */
  setRpcMouseEvent(rpcMouseEvent: string): boolean;

  /**
   *
   */
  getRpcGestureEvent(): any;

  /**
   *
   * @param rpcGestureEvent
   */
  setRpcGestureEvent(rpcGestureEvent: any): boolean;

  /**
   *
   */
  getRpcWheelEvent(): any;

  /**
   *
   * @param rpcWheelEvent
   */
  setRpcWheelEvent(rpcWheelEvent: any): boolean;

  /**
   * Release GL context
   */
  delete(): void;

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

  /**
   *
   * @param viewId
   */
  setViewId(viewId: string): void;

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

  /**
   * Handle window resize
   */
  resize(): void;

  /**
   *
   */
  render(): void;

  /**
   *
   */
  resetCamera(): void;

  /**
   *
   * @param interactiveQuality
   */
  setInteractiveQuality(interactiveQuality: number): boolean;

  /**
   *
   * @param interactiveRatio
   */
  setInteractiveRatio(interactiveRatio: number): boolean;

  /**
   *
   * @param stillQuality
   */
  setStillQuality(stillQuality: number): boolean;

  /**
   *
   * @param stillRatio
   */
  setStillRatio(stillRatio: number): boolean;
}

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

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

export function connectImageStream(session: any): void;

export function disconnectImageStream(): void;

/**
 * vtkRemoteView provides a way to create a remote view.
 */
export declare const vtkRemoteView: {
  newInstance: typeof newInstance;
  extend: typeof extend;
  SHARED_IMAGE_STREAM: vtkImageStream;
  connectImageStream: typeof connectImageStream;
  disconnectImageStream: typeof disconnectImageStream;
};
export default vtkRemoteView;

index.js

import macro from 'vtk.js/Sources/macros';
import vtkCanvasView from 'vtk.js/Sources/Rendering/Misc/CanvasView';
import vtkImageStream from 'vtk.js/Sources/IO/Core/ImageStream';
import vtkInteractorStyleRemoteMouse from 'vtk.js/Sources/Interaction/Style/InteractorStyleRemoteMouse';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';

const SHARED_IMAGE_STREAM = vtkImageStream.newInstance();
export const connectImageStream = SHARED_IMAGE_STREAM.connect;
export const disconnectImageStream = SHARED_IMAGE_STREAM.disconnect;

// ----------------------------------------------------------------------------
// vtkRemoteView methods
// ----------------------------------------------------------------------------

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

  // Constructor
  model.canvasView = vtkCanvasView.newInstance();
  model.interactorStyle = vtkInteractorStyleRemoteMouse.newInstance();

  model.interactor = vtkRenderWindowInteractor.newInstance();
  model.interactor.setView(model.canvasView);
  model.interactor.initialize();
  model.interactor.setInteractorStyle(model.interactorStyle);

  // Mouse
  model.interactorStyle.onRemoteMouseEvent((e) => {
    if (model.session && model.rpcMouseEvent) {
      model.session.call(model.rpcMouseEvent, [e]);
    }
  });
  // Wheel
  model.interactorStyle.onRemoteWheelEvent((e) => {
    if (model.session && model.rpcWheelEvent) {
      model.session.call(model.rpcWheelEvent, [e]);
    }
  });
  // Gesture
  model.interactorStyle.onRemoteGestureEvent((e) => {
    if (model.session && model.rpcGestureEvent) {
      model.session.call(model.rpcGestureEvent, [e]);
    }
  });

  // --------------------------------------------------------------------------
  // API
  // --------------------------------------------------------------------------

  publicAPI.delete = macro.chain(() => {
    model.session = null;
    if (model.canvasView) {
      model.canvasView.setViewStream(null);
      model.canvasView.delete();
    }
    if (model.interactor) {
      model.interactor.delete();
    }
    if (model.viewStream) {
      model.viewStream.delete();
    }
  }, publicAPI.delete);

  // --------------------------------------------------------------------------
  // remote handing
  // --------------------------------------------------------------------------

  publicAPI.setViewStream = (viewStream) => {
    model.viewStream = viewStream;
    model.canvasView.setViewStream(model.viewStream);

    // Configure image quality
    model.viewStream.setStillQuality(model.stillQuality);
    model.viewStream.setStillRatio(model.stillRatio);
    model.viewStream.setInteractiveQuality(model.interactiveQuality);
    model.viewStream.setInteractiveRatio(model.interactiveRatio);

    // Link user interactions
    model.interactor.onStartAnimation(model.viewStream.startInteraction);
    model.interactor.onEndAnimation(model.viewStream.endInteraction);

    publicAPI.setViewId(viewStream.getViewId());
  };

  publicAPI.setViewId = (id) => {
    if (!model.viewStream) {
      publicAPI.setViewStream(SHARED_IMAGE_STREAM.createViewStream(id));
    }

    model.viewStream.setViewId(id);
    model.interactorStyle.setRemoteEventAddOn({ view: id });
    publicAPI.modified();
  };

  // --------------------------------------------------------------------------
  // DOM handling
  // --------------------------------------------------------------------------

  publicAPI.setContainer = (container) => {
    if (model.container) {
      model.interactor.unbindEvents(container);
    }

    // Capture container
    model.container = container;
    model.canvasView.setContainer(model.container);

    // Attach listeners
    if (container) {
      model.interactor.bindEvents(container);
      publicAPI.resize();
    }
  };

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

  publicAPI.resize = () => {
    if (model.container && model.canvasView) {
      const { width, height } = model.container.getBoundingClientRect();
      model.canvasView.setSize(width, height);
      publicAPI.render();
    }
  };

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

  publicAPI.render = () => {
    if (model.viewStream) {
      model.viewStream.render();
    }
  };

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

  publicAPI.resetCamera = () => {
    if (model.viewStream) {
      model.viewStream.resetCamera();
    }
  };

  // --------------------------------------------------------------------------
  // viewStream setters
  // --------------------------------------------------------------------------
  const internal = { modified: publicAPI.modified };
  macro.set(internal, model, [
    'interactiveQuality',
    'interactiveRatio',
    'stillQuality',
    'stillRatio',
  ]);

  publicAPI.setInteractiveQuality = (q) => {
    const changeDetected = internal.setInteractiveQuality(q);
    if (model.viewStream && changeDetected) {
      model.viewStream.setInteractiveQuality(model.interactiveQuality);
    }
    return changeDetected;
  };

  publicAPI.setInteractiveRatio = (r) => {
    const changeDetected = internal.setInteractiveRatio(r);
    if (model.viewStream && changeDetected) {
      model.viewStream.setInteractiveRatio(model.interactiveRatio);
    }
    return changeDetected;
  };

  publicAPI.setStillQuality = (q) => {
    const changeDetected = internal.setStillQuality(q);
    if (model.viewStream && changeDetected) {
      model.viewStream.setStillQuality(model.stillQuality);
    }
    return changeDetected;
  };

  publicAPI.setStillRatio = (r) => {
    const changeDetected = internal.setStillRatio(r);
    if (model.viewStream && changeDetected) {
      model.viewStream.setStillRatio(model.stillRatio);
    }
    return changeDetected;
  };

  // Initialize viewStream if available
  if (model.viewStream) {
    publicAPI.setViewStream(model.viewStream);
  }
}

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

const DEFAULT_VALUES = {
  viewId: '-1',
  interactiveQuality: 60,
  interactiveRatio: 1 / window.devicePixelRatio,
  stillQuality: 100,
  stillRatio: 1,
  rpcMouseEvent: 'viewport.mouse.interaction',
  rpcGestureEvent: null,
  rpcWheelEvent: null,
};

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

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

  macro.obj(publicAPI, model, initialValues);
  macro.get(publicAPI, model, [
    'container',
    'viewStream',
    'canvasView',
    'interactor',
    'interactorStyle',
    'interactiveQuality',
    'interactiveRatio',
    'stillQuality',
    'stillRatio',
  ]);
  macro.setGet(publicAPI, model, [
    'session',
    'rpcMouseEvent',
    'rpcGestureEvent',
    'rpcWheelEvent',
  ]);

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

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

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

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

export default {
  newInstance,
  extend,
  SHARED_IMAGE_STREAM,
  connectImageStream,
  disconnectImageStream,
};