Reserved keys in vtk.js

Web
1

I noticed that vtk.js has reserved some keys, for example R, and when entering text in the input field, in the renderWindow some actions can occur that I would like to avoid. For example, this is noticeable in the example https://kitware.github.io/vtk-js/examples/ResliceCursorWidget/index.html. Does vtk.js provide disabling or customization of functions that are called when pressing the R key out of the box or is it necessary to control the behavior only by js capabilities?

2

The behavior is only controllable through JS. It’s part of certain interactor styles, while other interactor style override that functionality (e.g. vtkInteractorStyleManipulator).

3

As the application grows and the more text input fields appear in it, many problems arise with the reserved keys for vtk.js.

Could you suggest an effective way of how, while typing something in the input or textarea, without causing a bunch of actions in the background? (I discovered today that the V and W keys in my case disable and enable outline of the 3D image)

I tried something like this:

  const resetButtonPress = (e) => {
    if (
      e.key === 'r' ||
      e.key === 'R' ||
      e.key === 'w' ||
      e.key === 'W' ||
      e.key === 'v' ||
      e.key === 'V'
    ) {
      e.preventDefault()
    }
  }

  useEffect(() => {
    document.addEventListener('keydown', resetButtonPress)
    return () => {
      document.removeEventListener('keydown', resetButtonPress)
    }
  }, [])

And in the same way, add the required letter to the input field, however, this approach does not allow me to add a letter anywhere in the sentence, but only at the end. This also does not allow me to correctly check the emptiness of the input field and bunch of other problems occurs that I would like to avoid.

Maybe these function keys will be useful for some people, but for me they are a pain in the neck and I don’t understand why they work in input fields.

Thanks in advance for your answer.

4

By the way, this is clearly visible in this example https://kitware.github.io/vtk-js/examples/LineWidget/index.html

If my focus in the input field and I press W, V, R buttons, the cube is just going crazy while I’m typing the text for the line. I think this is incredibly critical and urgently needs to be fixed.

5

Any reason for you to not want to use vtkInteractorStyleManipulator like suggested before?

6

As I understand it, you propose to rebuild all the interactor events I need from scratch?

If so, then I found this example vtk.js and first decided to create something as standard as possible like this:

  const interactorStyle = vtkInteractorStyleManipulator.newInstance()
  interactor.setInteractorStyle(interactorStyle)

  const rotateManipulator =
    vtkMouseCameraTrackballRotateManipulator.newInstance()
  rotateManipulator.setButton(1)
  interactorStyle.addMouseManipulator(rotateManipulator)

  const zoomManipulator = vtkMouseCameraTrackballZoomManipulator.newInstance()
  zoomManipulator.setScrollEnabled(true)
  interactorStyle.addMouseManipulator(zoomManipulator)

  interactorStyle.addGestureManipulator(
    vtkGestureCameraManipulator.newInstance()
  )

However, when rotating a 3D image, the center of rotation is not in the center of the 3D image itself (with vtkInteractorStyleTrackballCamera all was ok), and center of rotation located somewhere on the edge (while zooming occurs correctly). How to fix it?

I’m also wondering how to add a pinch-to-zoom feature for touchpads (this was also included in the vtkInteractorStyleTrackballCamera out of the box).

And for me personally, it remains a mystery why it is necessary to rebuild all interactor events from scratch using vtkInteractorStyleManipulator, instead of just doing something like vtkInteractorStyleTrackballCamera.removeAllKeyboardManipulators() if the user does not need them?

Thank you for your answer.

7

I would not call it from scratch but more define the mapping of action you aim to have using existing classes. You can see their usage in the view proxy where we have style defined from JSON presets.

For the rotation, you need to set the center of rotation since it is not bound to the focal point (more flexible).

For the pinch to zoom, I’m not sure, but adding any missing piece can be added. Using the manipulator path provide more flexibility.

For your suggestion of removeAllKeyboardManipulators , if I’m not mistaken, VTK/C++ does not give you that option either.

Also what you are calling a necessity, I call it various path to achieve what you want.
My suggesting was to provide a solution that can work now without changing any code base.

But if you don’t want to do it, it is fine. Just remember that you can create your own JS class that does not do those key binding. All is open source and you can contribute to it if need be. But from my point of view, it is not a bug. It is just a choice that don’t match your expectation as of today.

8

Thank you, it looks like I’ve figured out the 3D interactor for the image so far, but now I need to do the same with the 2D interactor.

In my case, switching between slices is done using resliceCursorWidget, so I only need to add to my 2D interactor the ability to change windowColor and windowLevel when press-hold-move-release the left mouse button like here, for example: vtk.js.

Should I also use vtkInteractorStyleManipulator for windowColor and windowLevel adjustement?

If so, how to do this, since it seems to me that this event is much more difficult to implement without pre-prepared presets.

Also, I looked inside presets from viewProxy and they don’t solve the windowColor and windowLevel problem unfortunately.

And continuing our discussion, I meant that the bug is that when you enter text into the text field, the state of the objects in renderWindow changes. As far as I know, when building applications in vtk+python, for example, when a modal window or part of the interface in which there is a text field is in focus, events associated with renderWindow fade into the background and when entering text they are not called by pressing reserved keys. However, I don’t know if something similatr can be done in js.

9

You could create a WindowLevelManipulator that takes as parameter an ImageActor.
It would be great if you could contribute that manipulator to VTK.js repo.