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