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