VTK.js widgetManager.addWidget(vtkLabelWidget) says "widget.getWidgetForView is not a function"

Web
1

Hello,

I dynamically add vtkLabelWidget to the scene when users click on some checkboxes. The code that is perfectly working is:

  const widget = vtkLabelWidget.newInstance();
  widget.setInteractor(renderWindow.getInteractor());
  widget.setEnabled(1);
  widget.getWidgetRep().setLabelText(path);
  widget.getWidgetRep().setWorldPosition([x, y, z]);

Now when the users uncheck the checkbox, I want to remove the widget from the scene. Doing widgetManager.removeWidget(widget) doesn’t remove the widget from the scene.

I thought this is because I didn’t call VTK.js widgetManager.addWidget(widget). But when I add this line I get the message:

widget.getWidgetForView is not a function

Is that a bug or am I doing a mistake ?

2

It looks like you’re mixing the old widgets in vtk.js/Sources/Interaction/Widgets with the new widget manager in vtk.js/Sources/Widgets. WidgetManager can only be used with widgets located in vtk.js/Sources/Widgets, and the ones in Interaction/Widgets will be deprecated at some point.

3

Ok thank you. I didn’t realize that. I will move to the new widget architecture then. From your point of view, what is best way to get started to create a custom widget (do you have any simple example to get started, or should I get inspiration from the widgets already existing in vtk.js, or something else ?) ?

4

You can start by looking at the examples in Sources/Widgets/Widgets3D. The DistanceWidget should be a good place to start. We also have some docs on the vtk.js website.

5

Ok. Thank you !

6

Back on this topic, I’m right now trying to use a Widget3D LineWidget (LineWidget | vtk.js) to achieve this. By setting handle1 and handle2 shapes to None, and setting the same origin for both handles, I almost get the expected behavior. The only missing part, is that I would like to be able to move the widget by clicking on the text and dragging it, but doing so the widget is not moved. Do you know if and how this can be achieved ? Thanks !

7

You can drag the widget by the line (see the LineWidget example).
If you look at the line widget behavior, you could see what to change to do drag it by the text.

8

Thank you Julien for the quick answer.

I know the widget can be dragged by the line and I’ve seen the example. But I would need that line only to drag the text. I give both handles a void shape and the same origin, to make the line disappear because from an interaction point of view, I find it more practical to be able to drag the text itself.

I understand I’m kind of hijacking the LineWidget only to have a movable text widget though. I hoped it would be the quickest path for what I’m trying to do.

Let me have yet another look at the LineWidget behavior. Maybe I will better understand how to achieve that. I already tried to add the manipulator mixin on the SVGText substate, with no luck. Will try again, maybe differently.