RenderWindowWithControlBar

Introduction

vtkRenderWindowWithControlBar provides a skeleton for implementing a render window
with a control bar.

Methods

extend

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

getControlContainer

Get control bar container element

getRenderWindowContainer

Get RenderWindow container element

getRootContainer

Get root container element

newInstance

Method used to create a new instance of vtkRenderWindowWithControlBar

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

setContainer

Set control container element

Argument Type Required Description
el HTMLElement Yes

setControlPosition

Set control container element

Argument Type Required Description
position Placement Yes Position of the control bar.

setControlSize

Set control container element

Argument Type Required Description
size Number Yes Size of the control bar.

Source

RenderWindowWithControlBar.module.css
.rootContainer {
position: relative;
}

.renderWindow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

.control {
z-index: 1;
position: absolute;
}
index.d.ts
import { Placement } from '../../../types';
import vtkGenericRenderWindow, {
IGenericRenderWindowInitialValues,
} from '../GenericRenderWindow';

/**
*
*/
export interface IRenderWindowWithControlBarInitialValues
extends IGenericRenderWindowInitialValues {
rootContainer?: HTMLElement;
controlPosition?: Placement;
controlSize?: number;
}

export interface vtkRenderWindowWithControlBar extends vtkGenericRenderWindow {
/**
* Get control bar container element
*/
getControlContainer(): HTMLElement;

/**
* Get RenderWindow container element
*/
getRenderWindowContainer(): HTMLElement;

/**
* Get root container element
*/
getRootContainer(): HTMLElement;

/**
* Set control container element
* @param {HTMLElement} el
*/
setContainer(el: HTMLElement): void;

/**
* Set control container element
* @param {Number} size Size of the control bar.
*/
setControlSize(size: number): void;

/**
* Set control container element
* @param {Placement} position Position of the control bar.
*/
setControlPosition(position: Placement): void;
}

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

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

/**
* vtkRenderWindowWithControlBar provides a skeleton for implementing a render window
* with a control bar.
*/
export declare const vtkRenderWindowWithControlBar: {
newInstance: typeof newInstance;
extend: typeof extend;
};
export default vtkRenderWindowWithControlBar;
index.js
import macro from 'vtk.js/Sources/macros';
import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';
import style from 'vtk.js/Sources/Rendering/Misc/RenderWindowWithControlBar/RenderWindowWithControlBar.module.css';

// Load basic classes for vtk() factory
import 'vtk.js/Sources/Common/Core/Points';
import 'vtk.js/Sources/Common/Core/DataArray';
import 'vtk.js/Sources/Common/DataModel/PolyData';
import 'vtk.js/Sources/Rendering/Core/Actor';
import 'vtk.js/Sources/Rendering/Core/Mapper';

// ----------------------------------------------------------------------------
// Utility functions to control style
// ----------------------------------------------------------------------------

const CONTROL_STYLE = {
left(size) {
return {
top: '0',
left: '0',
bottom: '0',
right: 'unset',
height: 'unset',
width: `${size}px`,
};
},
right(size) {
return {
top: '0',
right: '0',
bottom: '0',
left: 'unset',
height: 'unset',
width: `${size}px`,
};
},
top(size) {
return {
top: '0',
left: '0',
right: '0',
bottom: 'unset',
width: 'unset',
height: `${size}px`,
};
},
bottom(size) {
return {
bottom: '0',
left: '0',
right: '0',
top: 'unset',
width: 'unset',
height: `${size}px`,
};
},
};

function applyControlStyle(el, position, size) {
const styleToApply = CONTROL_STYLE[position](size);
Object.keys(styleToApply).forEach((key) => {
el.style[key] = styleToApply[key];
});
}

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

function vtkRenderWindowWithControlBar(publicAPI, model) {
const superClass = { ...publicAPI };

function resetStyleToZero(key) {
model.renderWindowContainer.style[key] = '0px';
}

function updateControlerStyle() {
['left', 'right', 'top', 'bottom'].forEach(resetStyleToZero);
model.renderWindowContainer.style[
model.controlPosition
] = `${model.controlSize}px`;
applyControlStyle(
model.controlContainer,
model.controlPosition,
model.controlSize
);
}

// Create container for the vtkGenericRenderWindow
model.renderWindowContainer = document.createElement('div');
model.renderWindowContainer.classList.add(style.renderWindow);
superClass.setContainer(model.renderWindowContainer);

// Create container for controls
model.controlContainer = document.createElement('div');
model.controlContainer.classList.add(style.control);

// Handle DOM container relocation
publicAPI.setContainer = (el) => {
if (model.rootContainer) {
model.rootContainer.removeChild(model.container);
model.rootContainer.removeChild(model.controlContainer);
model.rootContainer.classList.remove(style.rootContainer);
}

// Switch container
model.rootContainer = el;

// Bind to new container
if (model.rootContainer) {
model.rootContainer.appendChild(model.container);
model.rootContainer.appendChild(model.controlContainer);
model.rootContainer.classList.add(style.rootContainer);
updateControlerStyle();
publicAPI.resize();
}
};

publicAPI.setControlSize = (size) => {
model.controlSize = size;
updateControlerStyle();
publicAPI.modified();
};

publicAPI.setControlPosition = (pos) => {
model.controlPosition = pos;
updateControlerStyle();
publicAPI.modified();
};

// Handle size
if (model.listenWindowResize) {
window.addEventListener('resize', publicAPI.resize);
}
updateControlerStyle();
publicAPI.resize();
}

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

const DEFAULT_VALUES = {
rootContainer: null,
controlPosition: 'left',
controlSize: 10,
};

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

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

// Object methods
vtkGenericRenderWindow.extend(publicAPI, model);
macro.get(publicAPI, model, [
'rootContainer',
'controlContainer',
'renderWindowContainer',
]);

// Object specific methods
vtkRenderWindowWithControlBar(publicAPI, model);
}

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

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

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

export default { newInstance, extend };