# Interacting with View and Widget simultaneously.

**URL:** https://discourse.vtk.org/t/interacting-with-view-and-widget-simultaneously/7923
**Category:** Web
**Created:** [February 25, 2022, 2:48pm UTC](https://discourse.vtk.org/t/interacting-with-view-and-widget-simultaneously/7923 "2022-02-25T14:48:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![szymswiat](https://discourse.vtk.org/user_avatar/discourse.vtk.org/szymswiat/32/4542_2.png) [@szymswiat](https://discourse.vtk.org/u/szymswiat)
#### Post date: [February 25, 2022, 2:48pm UTC](https://discourse.vtk.org/t/interacting-with-view-and-widget-simultaneously/7923/1 "2022-02-25T14:48:44Z")

</div>

Hello,

I’m implementing web based application for medical image annotation using react-vtk-js library. I followed an [example](https://kitware.github.io/vtk-js/examples/PaintWidget.html) 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

---

<div class="post-metadata">

### Author: ![Forrest](https://discourse.vtk.org/user_avatar/discourse.vtk.org/forrest/32/300_2.png) [@Forrest](https://discourse.vtk.org/u/Forrest)
#### Post date: [February 28, 2022, 2:33pm UTC](https://discourse.vtk.org/t/interacting-with-view-and-widget-simultaneously/7923/2 "2022-02-28T14:33:11Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![szymswiat](https://discourse.vtk.org/user_avatar/discourse.vtk.org/szymswiat/32/4542_2.png) [@szymswiat](https://discourse.vtk.org/u/szymswiat)
#### Post date: [March 4, 2022, 12:04pm UTC](https://discourse.vtk.org/t/interacting-with-view-and-widget-simultaneously/7923/3 "2022-03-04T12:04:30Z")

</div>

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

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

```auto
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 };

```