Creating a new class in vtk.js

This guide illustrates how to add new classes to the vtk.js repository and the concepts behind the infrastructure we use.

First of all, vtk.js does not rely on the class definition that was brought in with the ES6 specification. Instead, vtk.js provides a closure based infrastructure which lets us compose methods into specific instances without any hierarchical constraint.Due to our closure paradigm methods can be used outside of their instance context and can be directly be passed as callbacks. Therefore their usage does not require this to be referenced each time.

By convention, we create a directory for each of our class. The name of the directory must be the name of the class capitalized without its “vtk” prefix (although when importing a class, we will add the “vtk” prefix). The definition of that class should be held in an “index.js” file within that directory.

import vtkDataSet from'vtk.js/Sources/Common/DataModel/DataSet';

The reason to use a directory instead of a simple JavaScript file is to enable the association of several resources to a specific class like a constants file, several tests, an example, and/or additional documentation.

That class should belong to a module and that module should be owned by a kit.Kits correspond to the root directories underneath the Sources directory of the repository.Each kit contains several modules which are the immediate child directories within.Within each module you find its class definitions.

For instance, vtk.js currently have the following set of kits in bold and modules in italic.

Common

Core

DataModel

System

Filters

General

Sources

IO

Core

Interaction

Style

Rendering

Core

Misc

OpenGL

SceneGraph

Class definition

Here is an example of how to get started writing a new class for vtk.js.The design inspiration originated from Douglas Crockford with functional inheritance, but we went further in some ways, too. This blog provides a very good background on the techniques we use and leverage inside vtk.js.This blog also explains why classes in JavaScript are not always the best choice.

Constants definition

API documentation

If you want to go beyond the code being the sole source of documentation, you can add your own markdown file to further document it with code snippets, member variables, and method usage.For that you need to add an api.md within the class directory like the following one:

## Usage```jsimport ConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource';const coneSource = ConeSource.New({ height: 2, radius: 1, resolution: 80 });const polydata = coneSource.getOutputData();``` ### Height (set/get)Floating point number representing the height of the cone.### Radius (set/get)Floating point number representing the radius of the cone base.### Resolution (set/get)Integer representing the number of points used to build the base of the cone.### Capping (set/get)Boolean letting you close the base of the cone.