Interacting with View and Widget simultaneously.

Web
1

Hello,

I’m implementing web based application for medical image annotation using react-vtk-js library. I followed an example and attached vtkWidgetManager to renderer (along with other required objects) and a few widgets to it. I noticed that after I grab focus to a widget, all interactions enabled using View component (vtkRenderWindowInteractor) like for panning or zooming stops working (zoom using scroll still works). When I releaseFocus it starts to work of course.

How can I use widget and renderer interactors simultaneously? For example I want to use vtkPaintWidget along with pan, zoom and window/level control features. Now grabbing focus to widget blocks the rest.

Thanks

2

Just to clarify, so I can understand your use-case: are you looking to be able to do other operations like pan, zoom, and window/level with the right mouse button, while painting is enabled with the left mouse button?

If that’s the case, you will need to either copy the PaintWidget code and modify it, or extend the vtkPaintWidget class. I don’t know exactly what needs to be done without some testing, but you would need to ensure that events such as handleRightButtonPress and handleMouseMove don’t abort the event callback chain, so that your panning/zooming/etc. interactor styles can handle those appropriately. This is because widget event handlers have higher priority than the interactor style handler’s priority.

3

Yes, that’s excactly what I want to achieve. Thanks for the tip.

I extended existing widget with below code and now everything works.

import macro from '@kitware/vtk.js/macros';
import vtkPaintWidget from '@kitware/vtk.js/Widgets/Widgets3D/PaintWidget';

function widgetBehavior(parentBehavior: any) {
  return (publicAPI: any, model: any) => {
    parentBehavior(publicAPI, model);

    const oldHandleEvent = publicAPI.handleEvent;

    publicAPI.handleEvent = (callData: any) => {
      oldHandleEvent(callData);
      return macro.VOID;
    };
  };
}

function vtkPaintWidget2(publicAPI: any, model: any) {
  model.classHierarchy.push('vtkPaintWidget2');

  model.behavior = widgetBehavior(model.behavior);
}

export function extend(publicAPI: any, model: any, initialValues = {}) {
  vtkPaintWidget.extend(publicAPI, model, initialValues);

  vtkPaintWidget2(publicAPI, model);
}

export const newInstance = macro.newInstance(extend, 'vtkPaintWidget2');

export default { newInstance, extend };