Move in 3D lineWidget on resliceCursorWidget

Once I have added lineWidget in resliceCursorWidget in the example on the web vtk.js I want to be able to move it in 3d view on the cube like in the lineWidget example on the vtk.js web vtk.js

LineWidget is locked on the 2d views and I can only move it in 2d, I can only move LineWidget in X and Y but not in z.

What do I have to configure in linewidget or resliceCursorWidget to allow 3D movement?

You might have to play with the line widget manipulator parameters.

which manipulator parameters I have to change.
this is the code I used in the resliceCursorWidget example

const widget = vtkLineWidget.newInstance();
const currentHandle = view3D.widgetManager.addWidget(widget);
view3D.widgetManager.grabFocus(widget);

In the 2D views I have no problem adding LineWidget
as follows:

obj.renderWindow.getInteractor().onMouseEnter(() => {
        lineWidget.setPickable(true);
        const wobj = resliceCursorWidget.updateReslicePlane(
          obj.reslice,
          xyzToViewType[obj.id]
        );
        lineWidget.getManipulator().setOriginFrom(wobj.origin);
        lineWidget.getManipulator().setNormalFrom(this.widget.getWidgetState().getPlanes()[xyzToViewType[obj.id]].normal);
});

Neither of the two configurations allows me to move LineWiget in 3D, it is always locked in the plane where you add the Linewidget.

You have to change the manipulator normal. You may want to set the normal to the same than the camera normal.

Alternatively you can also change the manipulator type (default is a plane manipulator). You might want to consider the new vtkPickerManipulator that would make your line handles stick to “any” of the 3 planes (you have to configure the picklist of the picker manipulator though)

Problem is fixed in vtk.js V28
I don’t know how to do this in vtk.js V28
Previously in V25 I did it like this:

const wobj = resliceCursorWidget.updateReslicePlane(
  obj.reslice,
  xyzToViewType[obj.id]
);
lineWidget.getManipulator().setOriginFrom(wobj.origin);
lineWidget.getManipulator().setNormalFrom(resliceCursorWidget.getWidgetState().getPlanes()[xyzToViewType[obj.id]].normal);

Could you give me an example of code that does this in the V28 version?
There is not much documentation and I don’t know how to do it.

The challenge is due to the fact that the widget shares the same manipulator between all the views.

I also do not think you need to modidy the origin, you only have to configure the manipulator to use the camera normal:

const planeManipulatorInThreeDView = vtkPlaneManipulator.newInstance({useCameraNormal:true})
lineWidgetInThreeDView = threeDViewWidgetManager.addWidget(lineWidget, ViewTypes.GEOMETRY, {manipulator: planeManipulatorInThreeDView});

I have managed to add LineWidget in ResliceCursorWidget in vtk.js V28 as follows:

const origin = resliceCursorWidget.getWidgetState().getCenter();
const planeNormal = resliceCursorWidget.getPlaneNormalFromViewType(xyzToViewType[obj.id]);
lineWidget.getManipulator().setWidgetOrigin(...origin);
lineWidget.getManipulator().setWidgetNormal(...planeNormal);

But when I add LineWidget in one of the views the other two are blocked and I can’t interact neither with ResliceCursorWidget nor with LineWidget in any of them, I can only interact in the view where I added LineWidget.
I think it has something to do with grabFocus and releaseFocus but I’m not sure and I don’t know how to fix it.

I want to modify the line color of the linewidget. What should I do?

lineWidget.getRepresentations()[2].getActor().getProperty().setColor(...) or something like that.