Hello
I am currently working on a React project where I use VTK to display medical images. I am able to visualize my images successfully, but since I use vtkFullScreenRenderWindow, the rendering window creates a new div in my page. The problem is that when I navigate to another page, this div remains present.
Does anyone know how I can completely remove my renderings before navigating to another page?
Here a glimpse of what I am urrently doing in my code
useEffect(() => {
const initializeVTK = async () => {
if (!renderWindowRef.current) {
setError(‘Erreur: renderWindowRef.current est null.’);
return;
}
if (!renderWindowRef.current.getRenderer) {
renderWindowRef.current = vtkFullScreenRenderWindow.newInstance({
parentElement: renderWindowRef.current,
background: [0.1, 0.1, 0.1],
});
}
const renderer = renderWindowRef.current.getRenderer();
const renderWindow = renderWindowRef.current.getRenderWindow();
if (!renderer || !renderWindow) {
setError('Erreur d\'initialisation VTK');
return;
}
try {
const polyDataReader = vtkPolyDataReader.newInstance();
const brainUrl = `/Data/Data/${patient_id}/MR-T1_Brain.vtk`;
await polyDataReader.setUrl(brainUrl);
polyDataReader.loadData().then(() => {
const brainData = polyDataReader.getOutputData();
const brainMapper = vtkMapper.newInstance();
brainMapper.setInputData(brainData);
const brainActor = vtkActor.newInstance();
brainActor.setMapper(brainMapper);
renderer.addActor(brainActor);
coordinates.forEach(({ x, y, z }) => {
const sphereSource = vtkSphereSource.newInstance({
center: [x, y, z],
radius: 5.0,
phiResolution: 32,
thetaResolution: 32,
});
const sphereMapper = vtkMapper.newInstance();
sphereMapper.setInputConnection(sphereSource.getOutputPort());
const sphereActor = vtkActor.newInstance();
sphereActor.setMapper(sphereMapper);
sphereActor.getProperty().setColor(0.0, 0.0, 1.0);
renderer.addActor(sphereActor);
});
secondCoordinates.forEach(({ x, y, z }) => {
const sphereSource = vtkSphereSource.newInstance({
center: [x, y, z],
radius: 5.0,
phiResolution: 32,
thetaResolution: 32,
});
const sphereMapper = vtkMapper.newInstance();
sphereMapper.setInputConnection(sphereSource.getOutputPort());
const sphereActor = vtkActor.newInstance();
sphereActor.setMapper(sphereMapper);
sphereActor.getProperty().setColor(1.0, 0.0, 0.0);
renderer.addActor(sphereActor);
});
renderer.resetCamera();
renderWindow.render();
});
} catch (error) {
console.error('Erreur lors du chargement du modèle:', error);
setError('Erreur lors du chargement du modèle VTK.');
}
};
if (coordinates.length > 0 && secondCoordinates.length > 0) {
initializeVTK();
}
}, [coordinates, secondCoordinates, patient_id]);
// Fonction de gestion du clic sur le bouton
const handleNextStep = () => {
// Nettoyer la scène et supprimer la fenêtre d’affichage
if (renderWindowRef.current) {
const renderer = renderWindowRef.current.getRenderer();
const renderWindow = renderWindowRef.current.getRenderWindow();
if (renderer && renderWindow) {
renderer.removeAllViewProps(); // Supprimer tous les objets
renderWindow.render(); // Rafraîchir la vue
}
// Supprimer complètement la fenêtre d'affichage
renderWindowRef.current.delete();
renderWindowRef.current = null; // Libérer la référence
}
// Naviguer vers la page suivante
navigate('/bilan', {
state: { patient_id, user_id, taskStatus }, // Passage des données à la page suivante
});
};