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 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): any;
/**
* vtkRemoteView provides a way to create a remote view.
*/
export declare const vtkRemoteView: {
newInstance: typeof newInstance;
extend: typeof extend;
connectImageStream: typeof connectImageStream;
};
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,
};