Arrow2DSource

Introduction

vtkArrow2DSource creates a cone centered at a specified point and pointing in a specified direction.
(By default, the center is the origin and the direction is the x-axis.) Depending upon the resolution of this object,
different representations are created. If resolution=0 a line is created; if resolution=1, a single triangle is created;
if resolution=2, two crossed triangles are created. For resolution > 2, a 3D cone (with resolution number of sides)
is created. It also is possible to control whether the bottom of the cone is capped with a (resolution-sided) polygon,
and to specify the height and thickness of the cone.

Methods

extend

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

getBase

Get the cap the base of the cone with a polygon.

getCenter

Get the center of the cone.

getCenterByReference

Get the center of the cone.

getDirection

Get the orientation vector of the cone.

getDirectionByReference

Get the orientation vector of the cone.

getHeight

Get the height of the cone.

getThickness

Get the base thickness of the cone.

getWidth

Get the number of facets used to represent the cone.

newInstance

Method used to create a new instance of vtkArrow2DSource.

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

requestData

Expose methods

Argument	Type	Required	Description
inData		Yes
outData		Yes

setBase

Turn on/off whether to cap the base of the cone with a polygon.

Argument	Type	Required	Description
base	Number	Yes	The value of the

setCenter

Set the center of the cone.
It is located at the middle of the axis of the cone.
!!! warning
This is not the center of the base of the cone!

Argument	Type	Required	Description
x	Number	Yes	The x coordinate.
y	Number	Yes	The y coordinate.
z	Number	Yes	The z coordinate.

setCenterFrom

Set the center of the cone.
It is located at the middle of the axis of the cone.
!!! warning
This is not the center of the base of the cone!

Argument	Type	Required	Description
center	Array.	Yes

setDirection

Set the direction for the arrow 2D.

Argument	Type	Required	Description
direction	Array.	Yes	The direction coordinates.

setDirection

Set the direction for the arrow.

Argument	Type	Required	Description
x	Number	Yes	The x coordinate.
y	Number	Yes	The y coordinate.
z	Number	Yes	The z coordinate.

setDirectionFrom

Set the direction for the arrow 2D.

Argument	Type	Required	Description
direction	Array.	Yes	The direction coordinates.

setHeight

Set the height of the cone.
This is the height along the cone in its specified direction.

Argument	Type	Required	Description
height	Number	Yes	The height value.

setThickness

Set the base thickness of the cone.

Argument	Type	Required	Description
thickness	Number	Yes

setWidth

Set the number of facets used to represent the cone.

Argument	Type	Required	Description
width	Number	Yes

Source

Constants.js

export const ShapeType = {
  TRIANGLE: 'triangle',
  STAR: 'star',
  ARROW_4: 'arrow4points',
  ARROW_6: 'arrow6points',
};

export default { ShapeType };

index.d.ts

import { VtkAlgorithm, VtkObject } from 'vtk.js/Sources/macro';

export enum ShapeType {
	TRIANGLE,
	STAR,
	ARROW_4,
	ARROW_6
}

/**
 *
 */
interface IArrow2DSourceInitialValues {
	base?: number;
	height?: number;
	width?: number;
	thickness?: number;
	center?: number[];
	pointType?: string;
	origin?: number[];
	direction?: number[];
}

type vtkArrow2DSourceBase = VtkObject & Omit<VtkAlgorithm,
	| 'getInputData'
	| 'setInputData'
	| 'setInputConnection'
	| 'getInputConnection'
	| 'addInputConnection'
	| 'addInputData'>;

export interface vtkArrow2DSource extends vtkArrow2DSourceBase {
	/**
	 * Get the cap the base of the cone with a polygon.
	 * @default 0
	 */
	getBase(): number;

	/**
	 * Get the center of the cone.
	 * @default [0, 0, 0]
	 */
	getCenter(): number[];

	/**
	 * Get the center of the cone.
	 */
	getCenterByReference(): number[];

	/**
	 * Get the orientation vector of the cone.
	 * @default [1.0, 0.0, 0.0]
	 */
	getDirection(): number[];

	/**
	 * Get the orientation vector of the cone.
	 */
	getDirectionByReference(): number[];

	/**
	 * Get the height of the cone.
	 * @default 1.0
	 */
	getHeight(): number;

	/**
	 * Get the base thickness of the cone.
	 * @default 0.5
	 */
	getThickness(): number;

	/**
	 * Get the number of facets used to represent the cone.
	 * @default 6
	 */
	getWidth(): number;

	/**
	 * Expose methods
	 * @param inData 
	 * @param outData 
	 */
	requestData(inData: any, outData: any): void;

	/**
	 * Turn on/off whether to cap the base of the cone with a polygon.
	 * @param {Number} base The value of the 
	 */
	setBase(base: number): boolean;

	/**
	 * Set the center of the cone.
	 * It is located at the middle of the axis of the cone.
	 * !!! warning
	 *     This is not the center of the base of the cone!
	 * @param {Number} x The x coordinate.
	 * @param {Number} y The y coordinate.
	 * @param {Number} z The z coordinate.
	 * @default [0, 0, 0]
	 */
	setCenter(x: number, y: number, z: number): boolean;

	/**
	 * Set the center of the cone.
	 * It is located at the middle of the axis of the cone.
	 * !!! warning
	 *     This is not the center of the base of the cone!
	 * @param {Number[]}  center 
	 * @default [0, 0, 0]
	 */
	setCenterFrom(center: number[]): boolean;

	/**
	 * Set the direction for the arrow.
	 * @param {Number} x The x coordinate.
	 * @param {Number} y The y coordinate.
	 * @param {Number} z The z coordinate.
	 */
	setDirection(x: number, y: number, z: number): boolean;

	/**
	 * Set the direction for the arrow 2D.
	 * @param {Number[]} direction The direction coordinates.
	 */
	setDirection(direction: number[]): boolean;

	/**
	 * Set the direction for the arrow 2D.
	 * @param {Number[]} direction The direction coordinates.
	 */
	setDirectionFrom(direction: number[]): boolean;

	/**
	 * Set the height of the cone.
	 * This is the height along the cone in its specified direction.
	 * @param {Number} height The height value.
	 */
	setHeight(height: number): boolean;

	/**
	 * Set the base thickness of the cone.
	 * @param {Number} thickness 
	 */
	setThickness(thickness: number): boolean;

	/**
	 * Set the number of facets used to represent the cone.
	 * @param {Number} width 
	 */
	setWidth(width: number): boolean;
}

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

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

/**
 * vtkArrow2DSource creates a cone centered at a specified point and pointing in a specified direction.
 * (By default, the center is the origin and the direction is the x-axis.) Depending upon the resolution of this object,
 * different representations are created. If resolution=0 a line is created; if resolution=1, a single triangle is created;
 * if resolution=2, two crossed triangles are created. For resolution > 2, a 3D cone (with resolution number of sides)
 * is created. It also is possible to control whether the bottom of the cone is capped with a (resolution-sided) polygon,
 * and to specify the height and thickness of the cone.
 */
export declare const vtkArrow2DSource: {
	newInstance: typeof newInstance,
	extend: typeof extend,
};
export default vtkArrow2DSource;

index.js

import macro from 'vtk.js/Sources/macro';
import vtkMatrixBuilder from 'vtk.js/Sources/Common/Core/MatrixBuilder';
import vtkPolyData from 'vtk.js/Sources/Common/DataModel/PolyData';
import Constants from './Constants';

const { ShapeType } = Constants;

// ----------------------------------------------------------------------------
// vtkArrow2DSource methods
// ----------------------------------------------------------------------------

function vtkStarSource(publicAPI, model) {
  const dataset = vtkPolyData.newInstance();

  const points = macro.newTypedArray(model.pointType, 10 * 3);
  const edges = new Uint32Array(11);
  edges[0] = 10;
  for (let i = 0; i < 10; i++) {
    const radius = i % 2 === 1 ? model.height : model.height * 0.4;
    points[3 * i + 0] = radius * Math.cos(((2 * i - 1) * Math.PI) / 10);
    points[3 * i + 1] = radius * Math.sin(((2 * i - 1) * Math.PI) / 10);
    points[3 * i + 2] = 0;

    edges[1 + i] = i;
  }

  dataset.getPoints().setData(points, 3);
  dataset.getPolys().setData(edges, 1);

  return dataset;
}

function vtk6PointsArrow(publicAPI, model) {
  const dataset = vtkPolyData.newInstance();

  const points = macro.newTypedArray(model.pointType, 6 * 3);

  const thickOp = model.height * 0.5 * model.thickness;

  const offsetOp = model.height * 0.5 - thickOp;

  const baseOffsetOp =
    (model.height * 0.9 +
      thickOp -
      offsetOp -
      (model.height * 0.5 - thickOp - offsetOp)) *
    (1 - model.base);

  points[0] = (model.width / 2) * -1 - thickOp;
  points[1] = model.height / 4 - offsetOp - baseOffsetOp;
  points[2] = 0.0;

  points[3] = 0.0;
  points[4] = model.height * 0.9 + thickOp - offsetOp - baseOffsetOp;
  points[5] = 0.0;

  points[6] = model.width / 2 + thickOp;
  points[7] = model.height / 4 - offsetOp - baseOffsetOp;
  points[8] = 0.0;

  points[9] = model.width / 3;
  points[10] = model.height * 0.1 - thickOp - offsetOp - baseOffsetOp;
  points[11] = 0.0;

  points[12] = 0.0;
  points[13] = model.height * 0.5 - thickOp - offsetOp - baseOffsetOp;
  points[14] = 0.0;

  points[15] = (model.width / 3) * -1;
  points[16] = model.height * 0.1 - thickOp - offsetOp - baseOffsetOp;
  points[17] = 0.0;

  // prettier-ignore
  const cells = Uint8Array.from([
    3, 0, 1, 5,
    3, 1, 4, 5,
    3, 1, 4, 3,
    3, 1, 2, 3,
  ]);

  dataset.getPoints().setData(points, 3);
  dataset.getPolys().setData(cells, 1);

  return dataset;
}

function vtk4PointsArrow(publicAPI, model) {
  const dataset = vtkPolyData.newInstance();

  const points = macro.newTypedArray(model.pointType, 4 * 3);

  const thickOp = (model.height / 3) * model.thickness;

  const offsetOp = model.height / 3 - thickOp;

  const baseOffsetOp =
    (model.height - offsetOp - (model.height / 3 - thickOp - offsetOp)) *
    (1 - model.base);

  points[0] = (model.width / 2) * -1;
  points[1] = 0.0 - offsetOp - baseOffsetOp;
  points[2] = 0.0;

  points[3] = 0.0;
  points[4] = model.height - offsetOp - baseOffsetOp;
  points[5] = 0.0;

  points[6] = model.width / 2;
  points[7] = 0.0 - offsetOp - baseOffsetOp;
  points[8] = 0.0;

  points[9] = 0.0;
  points[10] = model.height / 3 - thickOp - offsetOp - baseOffsetOp;
  points[11] = 0.0;

  const cells = Uint8Array.from([3, 0, 1, 3, 3, 1, 2, 3]);

  dataset.getPoints().setData(points, 3);
  dataset.getPolys().setData(cells, 1);

  return dataset;
}

function vtkTriangleSource(publicAPI, model) {
  const dataset = vtkPolyData.newInstance();

  const points = macro.newTypedArray(model.pointType, 3 * 3);

  const baseOffsetOp = model.height * (1 - model.base);

  points[0] = (model.width / 2) * -1;
  points[1] = 0.0 - baseOffsetOp;
  points[2] = 0.0;

  points[3] = 0.0;
  points[4] = model.height - baseOffsetOp;
  points[5] = 0.0;

  points[6] = model.width / 2;
  points[7] = 0.0 - baseOffsetOp;
  points[8] = 0.0;

  const cells = Uint8Array.from([3, 0, 1, 2]);

  dataset.getPoints().setData(points, 3);
  dataset.getPolys().setData(cells, 1);

  return dataset;
}

function vtkArrow2DSource(publicAPI, model) {
  const shapeToSource = {
    [ShapeType.TRIANGLE]: vtkTriangleSource,
    [ShapeType.STAR]: vtkStarSource,
    [ShapeType.ARROW_4]: vtk4PointsArrow,
    [ShapeType.ARROW_6]: vtk6PointsArrow,
  };

  publicAPI.requestData = (inData, outData) => {
    outData[0] = shapeToSource[model.shape](publicAPI, model);

    vtkMatrixBuilder
      .buildFromRadian()
      .translate(...model.center)
      .rotateFromDirections([1, 0, 0], model.direction)
      .apply(outData[0].getPoints().getData());
  };
}

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

/**
 * height modifies the size of the source along x axis
 * width modifies the size of the source along y axis

 * thickness modifies the shape of the source, which becomes wider on
 * y axis

 * base modifies the position which lowers the source on x axis for 0 and moves
 * the source up on x axis for 1
 */
function defaultValues(initialValues) {
  return {
    base: 0,
    center: [0, 0, 0],
    height: 1.0,
    direction: [1, 0, 0],
    pointType: 'Float32Array',
    thickness: 0,
    width: 1.0,
    ...initialValues,
  };
}

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

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

  // Build VTK API
  macro.obj(publicAPI, model);
  macro.setGet(publicAPI, model, ['height', 'width', 'thickness', 'base']);
  macro.setGetArray(publicAPI, model, ['center', 'direction'], 3);
  macro.algo(publicAPI, model, 0, 1);
  vtkArrow2DSource(publicAPI, model);
}

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

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

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

export default { newInstance, extend };