Hello there! I am using vtk.js with react.js and my goal is to connect the vtkResliceCursorWidget with basic html-js slider: <input type="range" />. In my mind I should have two functions - one for widget event and another one for slider event. For X axis slice my widget event looks like this:
widgetInstanceX.onInteractionEvent(() => {
const modified = widget.updateReslicePlane(resliceX, xyzToViewType[0])
if (modified) {
const widgetResliceAxes = widget.getResliceAxes(xyzToViewType[0])
setXSlice(Array.from(widgetResliceAxes)[12])
resliceActorX.setUserMatrix(widgetResliceAxes)
}
widget.updateCameraPoints(rendererX, xyzToViewType[0])
renderWindow.render()
})
For the same axis my slider event looks like this:
useEffect(() => {
if (context.current) {
const {
resliceX,
resliceActorX,
renderWindowX,
renderWindow,
widget,
rendererX,
} = context.current
const widgetResliceAxes = widget.getResliceAxes(xyzToViewType[0])
const widgetResliceAxesArray = Array.from(widgetResliceAxes)
widgetResliceAxesArray[12] = XSlice
resliceX.setResliceAxes(new Float64Array(widgetResliceAxesArray))
resliceActorX.setUserMatrix(new Float64Array(widgetResliceAxesArray))
widget.updateCameraPoints(rendererX, xyzToViewType[0])
renderWindowX.render()
renderWindow.render()
}
}, [XSlice])
Also some background information:
const [XSlice, setXSlice] = useState(0)
const widget = vtkResliceCursorWidget.newInstance()
const widgetManagerX = vtkWidgetManager.newInstance()
const widgetInstanceX = widgetManagerX.addWidget(widget, xyzToViewType[0])
const resliceX = vtkImageReslice.newInstance()
const resliceActorX = vtkImageSlice.newInstance()
<input
type="range"
name="X"
min={axisBounds.X.min}
max={axisBounds.X.max}
step={spacings.X}
value={XSlice}
onChange={(e) => setXSlice(Number(e.target.value))}
/>
All this stuff works well except that when I’m changing the position of the slice using the widget and then switch to the slider, everything works as it should, but if firstly I will change the position of the slice using the slider and then will change it using the widget, the slice will not change from its actual position, since initially it will return to the position that the widget remembered and from that point changes will occur depending on the scroll movements.
It is obvious to me that this happens due to the fact that in the code for the slider there is no setter function for the slice position directly in the widget, since I couldn’t find it, but only managed to find the getter function widget.getResliceAxes(xyzToViewType[0]).
The logic is that I have an XSlice variable, the value of which should be relevant for both the slider and the widget slice position.
The question is whether there is any function or ability to set the XSlice variable to the widget while slider changes, so that the XSlice value will be relevant for both the slider and the widget. And if this is not possible, then is it worth using some other widget or disabling the existing widget event and performing scroll slicing using the interactor event?