On key press, cannot read 'getViewportByReference' of undefined

Web
1

I am implementing a simulation results viewer within a react app and am really liking vtk.js so far. At the moment I’m running into an error and hoping to get a little assistance.

I was using vtkFullScreenRenderer, but getting a “No Input” error so I followed this discourse post and have resolved that error.

Of course now I have another error! :grinning:

On key down I get the following:

Uncaught TypeError: Cannot read property 'getViewportByReference' of undefined
    at Object.publicAPI.isInViewport (:3000/static/js/0.chunk.js:339169)
    at Object.publicAPI.findPokedRenderer (:3000/static/js/0.chunk.js:328849)
    at updateCurrentRenderer (:3000/static/js/0.chunk.js:328274)
    at Object.publicAPI.getCurrentRenderer (:3000/static/js/0.chunk.js:328283)
    at Object.publicAPI.<computed> [as keyDownEvent] (:3000/static/js/0.chunk.js:328909)
    at HTMLDocument.publicAPI.handleKeyDown (:3000/static/js/0.chunk.js:328404)

I’m following the code in the discourse post I linked to above, but on reflection, the main difference is I’m not creating a new div but using a ref as the container. Could that have something to do with the error?

For reference here is that code:


const renderWindowSetup = (container: HTMLDivElement) => {

  // Standard rendering code setup
  const renderWindow = vtkRenderWindow.newInstance();
  const renderer = vtkRenderer.newInstance({ });
  renderer.setBackgroundFrom([0.0,0.0,0.0,0.0])
  
  renderWindow.addRenderer(renderer);

  // Use OpenGL as the backend to view the all this
  const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
  renderWindow.addView(openglRenderWindow);

  openglRenderWindow.setContainer(container);

  // Capture size of the container and set it to the renderWindow
  const { width, height } = container.getBoundingClientRect();
  openglRenderWindow.setSize(width, height);

  // Setup an interactor to handle mouse events
  const interactor = vtkRenderWindowInteractor.newInstance()
  interactor.setInteractorStyle(
    vtkInteractorStyleTrackballCamera.newInstance()
    );
  interactor.setView(openglRenderWindow)
  interactor.initialize()
  interactor.bindEvents(container)

  return {renderer, renderWindow, interactor}
}

Thanks in advance!

2

Hi, I’m not immediately seeing an issue with your code. Do you happen to have a minimal reproducible example, and if it can be made public, could you put it on codesandbox.io?

For context, what I’m guessing is that somehow the internally stored vtkRenderer is undefined, meaning that an invalid value was somehow added to the renderer list.

3

Thanks so much for your reply Forrest, it helped me find the solution. I created a minimal example, but the issue wasn’t reproduced.

Turns out as I loaded the file, my component was re-rendering and I was “cleaning up” the renderer et al prematurely following the function returned by useEffect in this example.

So more of a react problem than a vtk.js problem. Thanks!

4

@Forrest in case you or others would find it useful, here’s a pretty minimal react-vtk example.

1 Like