Can someone help me to understand, how to use the vtkHandleWidget? The example does not help me at all :frowning:

Currently I try to set it up like this:

const handle = vtkHandleWidget.newInstance()
const rep = vtkHandleRepresentation.newInstance()


handle.onInteractionEvent(() => {

But I always get the error

t.widgetRep.computeInteractionState is not a function

Also I would love to attach an existing Actor to the widget and did not find any way to do that yet

Hey sadly I didn’t get anywhere with this yet, so any input would be appreciated

You can look here as an alternative. Also in the example section, you can find a couple example using the new widget infrastructure.

Thank you, I’ll look into it

You can look at the multiple tests that exercise the handle widget.

Worth noting - Take a look at the vtkSeedWidget - It is an interactive widget that adds/edits/deletes handle widgets with user interaction.

First: Could it be the case, that the new Widgets are not yet in the pre-packed JS file from https://unpkg.com/vtk.js yet? Because I can easily access vtk.Interaction.Widgets through it, but vtk.Widgets is undefined. In the npm package though, I can find them

Secondly: Could you please lay down the very basic pipeline to create one of the new widgets and attach it to a renderer? I am trying to figure it out by trial and error combined with the information from https://kitware.github.io/vtk-js/docs/concepts_widgets.html, but so far I don’t really get anywhere. I can use the StateBuilder but calling the Widgetfactory returns a Widget(I guess?) which causes the following errors

Uncaught TypeError: Cannot read property ‘onModified’ of undefined

or when trying to call methods on the result
Uncaught TypeError: Cannot destructure property viewId of ‘undefined’ or ‘null’.

The widgets should be accessible via vtk.Widgets when using the unpkg URL. I verified by running a small example. You are using the latest version of vtk.js, correct?

Check out the PolyLine widget for an example of a completed widget. While the widget does slightly more than just a simple handle widget, it’s a good starting point for showing off how to construct a widget and attach it to a renderer.

Thank you for your answer. I changed the URL to https://unpkg.com/vtk.js@8.4.2/dist/vtk.js now, to make sure it is the current version. This works in a small test-HTML without any issues but in my real application, I always get some older version it appears (I’m also missing some other functionality).

Since I’m working with typescript, I import vtk via a script tag in my HTML and access it by declaring

declare var vtk: any;

This lets me access the import in my code, but as I said, apparently an “incomplete” or old version :frowning: I will keep trying to figure out why. I would have wished it was cache related but it does not seem to be

Ooook nevermind, somehow I was still importing my old, local vtk.js and the script import is not working like that in Typescript/Angular.
I had to dynamically create the script tag for the import and NOW I finally have an up to date vtk.js

public loadScript(url: string) {
const body = document.body;
const script = document.createElement(‘script’);
script.innerHTML = ‘’;
script.src = url;
script.async = false;
script.defer = true;

Hello @marf

I had the same error. After looking at the source code of HandleWidget (Sources/Interaction/Widgets/HandleWidget) I found out that it actually uses a SphereHandleRepresentation instance:

  // Overriden method
  publicAPI.createDefaultRepresentation = () => {
    if (!model.widgetRep) {
      model.widgetRep = vtkSphereHandleRepresentation.newInstance();

In your example, I changed const rep = vtkHandleRepresentation.newInstance() by const rep = vtkSphereHandleRepresentation.newInstance(); and is working fine. Now I’m able to position the widget programmatically and do some other stuffs.