Best way for adding cropping / clipping?

[hsellik]

Hi,

I would like to add cropping tool to react-vtk-js in a similar fashion as the CropTool works in Glance with ImageCroppingWidget.

For more context, it is meant to be added to the volume rendering example.

Any pointers on what would be the best way to go about it with react-vtk-js?

[floryst]

Here are some steps off the top of my head:

1. The <View> component needs to create and expose a vtkWidgetManager.
2. A new component, <ImageCroppingWidget> needs to be created. It can grab the View component ref from the ViewContext context, which gives access to the vtkRenderer and vtkWidgetManager.

[hsellik]

Thanks for the quick response!

@floryst If I wanted to also control the values programmatically (rather than the green spheres on the canvas), is there a way for this as well or should I use something other than the widget? Right now I'm thinking of extracting necessary refs and attaching CropFilter

This kind of works:

// Need extra import
import '@kitware/vtk.js/Filters/General/ImageCropFilter'

<View background={[255, 255, 255]} id="0">
  <VolumeRepresentation ref={volumeRef}>
    <Algorithm
      vtkClass="vtkImageCropFilter"
      state={{ croppingPlanes: croppingPlanes }}
    >
        <VolumeController />
        <Reader vtkClass={vtkXMLImageDataReader} url="/output.vti" />
      </Algorithm>
    </VolumeRepresentation>
</View>