[vtk.js] vtkFullScreenRenderWindow not resizing properly to container

Web
1

I’m working on a web application for medical data analysis, and I’m using VTK.js to render visualizations. However, I’m facing an issue where the VTK full screen render window, which I’m using to display the visualizations, is not resizing correctly to fit its container on the web page.

Here are the example codes to reproduce the issue:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="./main.js" defer></script>
</head>

<body id="main_body">
    <div id="vtk_display_container">
    </div>
</body>

</html>

// main.js
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkSphereSource from '@kitware/vtk.js/Filters/Sources/SphereSource';

const vtk_display_container = document.getElementById('vtk_display_container');

const fullScreenRenderWindow = vtkFullScreenRenderWindow.newInstance({
    background: [0, 0, 0],
    container: vtk_display_container,
});

const renderer = fullScreenRenderWindow.getRenderer();
const renderWindow = fullScreenRenderWindow.getRenderWindow();

const cone = vtkSphereSource.newInstance();
const mapper = vtkMapper.newInstance();
mapper.setInputConnection(cone.getOutputPort());

const actor = vtkActor.newInstance();
actor.setMapper(mapper);
renderer.addActor(actor);

renderer.resetCamera();
renderWindow.render();

This is the result i get where the vtk canvas is twice the size of the viewport so a scrollbar appears:

problem
problem1920×901 27.4 KB

I have tried to fix the issue by manually resizing the canvas but the results are unreliable and often doesn’t work. Here is the code for resizing:

function resizeVTKScreen() {
    let main_body_size = document.getElementById('main_body').getBoundingClientRect();
    let toolbar_size = toolbar.getBoundingClientRect();

    let container_size = {
        width: main_body_size.width,
        height: main_body_size.height - toolbar_size.height,
    };

    console.log(container_size.width, container_size.height);

    vtk_display_container.style.width = container_size.width + 'px';
    vtk_display_container.style.height = container_size.height + 'px';

}
resizeVTKScreen();

window.onresize = function () => {
    resizeVTKScreen();
    renderWindow.render();
}

Any help is appreciated.

2

I suggest you look at the VTK.js examples that work fine.

3

The example I provided is from the vtk.js example library (link: vtk.js). The only change I made was adding the container parameter for vtkFullScreenRenderWindow. Without the container, it works fine. However, I need the canvas to fit inside the container, hence the modification.

4

Here is the difference then.

5

Thanks for the quick response.