Hello forum, I have a question for cropping widget in react:
In the following code, the cropping widget does not show up. Do I need to bind the widget to any div?
Is there any code sample that I can look into? I wrote the code from cropping widget example
Thanks in advance!!
import { useRef, useEffect } from ‘react’;
import ‘@kitware/vtk.js/Rendering/Profiles/Volume’;
import vtkImageData from ‘@kitware/vtk.js/Common/DataModel/ImageData’;
import vtkColorMaps from “@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps”;
import vtkFullScreenRenderWindow from ‘@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow’;
import vtkVolume from ‘@kitware/vtk.js/Rendering/Core/Volume’;
import vtkVolumeMapper from ‘@kitware/vtk.js/Rendering/Core/VolumeMapper’;
import vtkDataArray from ‘@kitware/vtk.js/Common/Core/DataArray’;
import vtkColorTransferFunction from ‘@kitware/vtk.js/Rendering/Core/ColorTransferFunction’;
import vtkPiecewiseFunction from ‘@kitware/vtk.js/Common/DataModel/PiecewiseFunction’;
import vtkImageCroppingWidget from ‘@kitware/vtk.js/Widgets/Widgets3D/ImageCroppingWidget’;
import vtkImageCropFilter from ‘@kitware/vtk.js/Filters/General/ImageCropFilter’;
import vtkWidgetManager from ‘@kitware/vtk.js/Widgets/Core/WidgetManager’;
const MAX = 100;
function App() {
const vtkContainerRef = useRef(null);
const context = useRef(null);
useEffect(() => {
if (!context.current) {
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
background: [.1, .2, 1],
rootContainer: vtkContainerRef.current
});
const actor = vtkVolume.newInstance();
const mapper = vtkVolumeMapper.newInstance();
actor.setMapper(mapper);
const lookupTable = vtkColorTransferFunction.newInstance();
const piecewiseFun = vtkPiecewiseFunction.newInstance();
lookupTable.applyColorMap(vtkColorMaps.getPresetByName('Cool to Warm'));
lookupTable.setMappingRange(0, 256);
lookupTable.updateRange();
for (let i = 0; i <= 8; i++) {
piecewiseFun.addPoint(i * 32, i / 8);
}
actor.getProperty().setRGBTransferFunction(0, lookupTable);
actor.getProperty().setScalarOpacity(0, piecewiseFun);
const float32 = new Float32Array(MAX * MAX * MAX);
let idx = 0;
for (let i = 0; i < MAX; i++) {
for (let j = 0; j < MAX; j++) {
for (let k = 0; k < MAX; k++) {
float32[idx++] = i * 10 % 256;
}
}
}
const imageData = vtkImageData.newInstance({
origin: [0, 0, 0],
spacing: [1, 1, 1],
direction: [1, 0, 0, 0, 1, 0, 0, 0, 1]
})
const dataArray = vtkDataArray.newInstance({
name: 'Data',
values: float32
});
imageData.getPointData().setScalars(dataArray);
imageData.setDimensions([MAX, MAX, MAX]);
console.log(imageData.getPointData().getScalars().getRange())
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
renderer.addVolume(actor);
//Cropping code
const widgetManager = vtkWidgetManager.newInstance();
widgetManager.setRenderer(renderer);
const widget = vtkImageCroppingWidget.newInstance();
const viewWidget = widgetManager.addWidget(widget);
const cropFilter = vtkImageCropFilter.newInstance();
const cropState = widget.getWidgetState().getCroppingPlanes();
cropState.onModified(() =>
cropFilter.setCroppingPlanes(cropState.getPlanes())
);
cropFilter.setInputData(imageData);
mapper.setInputConnection(cropFilter.getOutputPort());
widgetManager.enablePicking();
//end Cropping code
const range = imageData.getPointData().getScalars().getRange();
lookupTable.setMappingRange(...range);
lookupTable.updateRange();
renderer.resetCamera();
renderWindow.render();
context.current = {
fullScreenRenderer,
renderWindow,
renderer,
actor,
mapper,
imageData
};
}
return () => {
if (context.current) {
const { fullScreenRenderer, actor, mapper, imageData } = context.current;
actor.delete();
mapper.delete();
fullScreenRenderer.delete();
imageData.delete();
context.current = null;
}
};
}, [vtkContainerRef]);
return (
<div ref={vtkContainerRef} />
);
}
export default App;