V2 represents a major shift away from the class-based components towards functional components. There are several goals and reasons for this migration:
- Addresses some bugs inherent in how contexts were being consumed.
- Addresses a major issue with regards to parent-child unmounting order being at odds with vtk.js resource management.
- Migrates the codebase to Typescript and React 18. This also means we will expose Typescript types.
- Does some clean-up on props and some confusing component usage.
- Addresses rendering performance via batching.
Once V2 is released, V1 will be considered legacy. Bugfixes may still be made for it, but V2 will be considered current.
The View component no longer has any of the picking modes or picking props. Instead, a new <Picking /> component is provided. Most of the API has been moved over with no changes, except for the following:
setPropsprop and the*inforeadonly props, which have been removed.onSelecthas been removed. Instead, look at the Picking example for how to get the same functionality.
There is a new onHoverDebounceWait parameter that determines the debounce wait threshold for the onHover event.
View.pick from before has been split into pick and pickWithFrustum, since they return different types.
The cube axes and scalar bar have been split out into their own components.
<Algorithm> can take both a vtk.js class as a string name or as the vtk.js class directly. In both cases, you must import the class in order for it to register with the vtk string constructor.
ShareDataSet is no longer global. You must specify a ShareDataSetRoot as an ancestor to the subtree in which you wish to use ShareDataSet. The new API looks like the following:
<ShareDataSetRoot>
<RegisterDataSet id="cone">
<Algorithm vtkClass={vtkConeSource} />
</RegisterDataSet>
<View>
<GeometryRepresentation>
<UseDataSet id="cone" />
</GeometryRepresentation>
</View>
</ShareDataSetRoot>
The View imperative ref API has changed completely. Refer to the IView type for more info. Examples of changes needed:
view.camerais nowview.getCamera()view.openglRenderWindowis nowview.getOpenGLRenderWindow().get()view.interactoris nowview.getRenderWindow().getInteractor()view.renderView()is nowview.requestRender()
The autoResetCamera prop supercedes the triggerResetCamera prop. When autoResetCamera is true (by default), camera will now reset whenever the data in the scene changes.
The triggerRender prop is removed in favor of using the imperative API: viewRef.current.requestRender().
The camera prop supercedes the old camera* prefixed props (i.e. cameraPosition, cameraFocalPoint, etc.). camera must be specified as a collection of camera properties to be set.
The default keybinds for resetting the camera (KeyR) has been removed. Application developers should decide if they want this functionality back by adding a keyboard listener and calling viewRef.current.resetCamera().
All picking props have been removed. See the <Picking /> component.
The exposed contexts have changed APIs and names. The following is a list of available contexts (from contexts.ts):
- OpenGLRenderWindowContext
- RenderWindowContext
- RendererContext
- FieldDataContext
- DatasetContext
- RepresentationContext
- DownstreamContext
- ShareDataSetContext
- MultiViewRootContext
- ViewContext
The disabled prop no longer exists.
arrayBufferprop now accepts an ArrayBuffer.base64ArrayBuffertakes a Base64 string of an ArrayBuffer.vtkClassprop now takes a vtk class. String is still supported, but you must import to register the class first.renderOnUpdateandresetCameraOnUpdateno longer exist. This is automatic.optionshas been renamed tourlOptions.idis not used.