# How to add a widget in a view with rotation

**URL:** <https://discourse.vtk.org/t/how-to-add-a-widget-in-a-view-with-rotation/14151>\
**Category:** Development\
**Tags:** vtkjs\
**Created:** [July 1, 2024, 12:23pm UTC](https://discourse.vtk.org/t/how-to-add-a-widget-in-a-view-with-rotation/14151 "2024-07-01T12:23:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Juan\_Augusto\_Tardivo](https://discourse.vtk.org/user_avatar/discourse.vtk.org/juan_augusto_tardivo/32/9025_2.png) [@Juan\_Augusto\_Tardivo](https://discourse.vtk.org/u/Juan_Augusto_Tardivo)\
**Post date:** [July 1, 2024, 12:23pm UTC](https://discourse.vtk.org/t/how-to-add-a-widget-in-a-view-with-rotation/14151/1 "2024-07-01T12:23:25Z")

</div>

I am creating a component that renders 2D images and STL file.  
In both cases or at least in the STL files I need to have interaction, for example zoom and rotate.  
I have this code:  
const render2D = async (vtk2DRefs, imgSrc) =\> {  
const renderWindow = vtkRenderWindow.newInstance()  
const renderer = vtkRenderer.newInstance();  
renderer.setBackground([242 / 255, 246 / 255, 254 / 255]);

const mapper = vtkImageSliceMapper.newInstance();  
const actor = vtkImageSlice.newInstance();

const data = vtkImageData.newInstance();

async function loadImage(src) {  
return new Promise((resolve, reject) =\> {  
const img = new Image();  
img.src = src;  
img.onload = () =\> resolve(img);  
img.onerror = (error) =\> reject(error);  
});  
}

const img = await loadImage(imgSrc);  
const canvas = document.createElement(‘canvas’);  
const ctx = canvas.getContext(‘2d’);

canvas.width = img.width;  
canvas.height = img.height;

ctx.drawImage(img, 0, 0);  
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

const imageDataArray = new Uint8Array(imageData.data);  
const dataArray = vtkDataArray.newInstance({  
numberOfComponents: 4,  
values: imageDataArray  
});

data.setDimensions(img.width, img.height, 1);  
data.setSpacing(1, 1, 1);  
data.setOrigin(0, 0, 0);  
data.getPointData().setScalars(dataArray);

mapper.setInputData(data);  
actor.setMapper(mapper);  
actor.rotateX(180);

const openGLRenderWindow = vtkOpenGLRenderWindow.newInstance();  
renderWindow.addView(openGLRenderWindow);  
openGLRenderWindow.setContainer(vtkContainerRef.current);

const interactor = vtkRenderWindowInteractor.newInstance();  
interactor.setView(openGLRenderWindow);  
interactor.initialize();  
interactor.setContainer(vtkContainerRef.current);

interactor.setInteractorStyle(vtkInteractorStyleTrackballCamera.newInstance())

openGLRenderWindow.setSize(  
vtkContainerRef.current.clientWidth,  
vtkContainerRef.current.clientHeight  
);

renderer.addViewProp(actor);  
renderWindow.addRenderer(renderer);

const widgetManagerForms = vtkWidgetManager.newInstance()  
widgetManagerForms.setRenderer(renderer)  
widgetManagerForms.disablePicking()

vtk2DRefs.current = {  
widgetManagerForms,  
renderWindow,  
mapper,  
actor,  
renderer,  
openGLRenderWindow,  
interactor,  
};

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

and this is to add a vtkEllipseWidget:

const AddCircle = () =\> {  
const widget = vtkEllipseWidget.newInstance({  
modifierBehavior: {  
None: {  
[BehaviorCategory.PLACEMENT]: ShapeBehavior[BehaviorCategory.PLACEMENT].CLICK\_AND\_DRAG,  
[BehaviorCategory.POINTS]: ShapeBehavior[BehaviorCategory.POINTS].DIAMETER,  
[BehaviorCategory.RATIO]: ShapeBehavior[BehaviorCategory.RATIO].RADIUS  
}  
}  
})

```auto
const handle = vtk2DRefs.current.widgetManagerForms.addWidget(widget, ViewTypes.YZ_PLANE)
vtk2DRefs.current.widgetManagerForms.grabFocus(widget)

handle.setActiveColor(0, 0)

handle.getRepresentations()[0].getMapper().setScalarVisibility(false)
handle.getRepresentations()[0].getActor().getProperty().setColor(8 / 255, 29 / 255, 73 / 255)
handle.getRepresentations()[1].getMapper().setScalarVisibility(false)
handle.getRepresentations()[1].getActor().getProperty().setColor(8 / 255, 29 / 255, 73 / 255)

handle.getRepresentations()[1].setDrawBorder(true)
handle.getRepresentations()[1].setDrawFace(false)
handle.getRepresentations()[1].setOpacity(1)

handle.onStartInteractionEvent(() => {
  setCurrentHandle(handle)
})

recordAction({ type: 'add', widget: handle });
setNewWidget(true);

```

}

so, the problem is that when i do:  
const handle = vtk2DRefs.current.widgetManagerForms.addWidget(widget, ViewTypes.YZ\_PLANE)

the interaction with the 2D and 3D image (zoom and rotate) are crashed

I have to close mi application if i want to rotate the images.

Can you help me?  
When i close the image i delete all the contexts:

const DeleteContexts = () =\> {

```auto
if (vtk3DRefs.current) {
  const { renderWindow, reader, mapper, actor, renderer, openGLRenderWindow, interactor, style } = vtk3DRefs.current;
  renderWindow.delete();
  reader.delete();
  mapper.delete();
  actor.delete();
  renderer.delete();
  openGLRenderWindow.setContainer(null);
  openGLRenderWindow.delete();
  interactor.delete();
  style.delete();
  vtk3DRefs.current = null;
}
if (vtk2DRefs.current) {
  const { widgetManagerForms, renderWindow, mapper, actor, renderer, openGLRenderWindow, interactor } = vtk2DRefs.current;
  // widgetManagerLabel.delete();
  widgetManagerForms.delete();
  // widgetManagerArrow.delete();
  renderWindow.delete();
  mapper.delete();
  actor.delete();
  renderer.delete();
  openGLRenderWindow.setContainer(null);
  openGLRenderWindow.delete();
  interactor.delete();
  vtk2DRefs.current = null;
}

```

}

but it still doest not working

---

<div class="post-metadata">

**Author:** ![Paulo\_Carvalho](https://discourse.vtk.org/user_avatar/discourse.vtk.org/paulo_carvalho/32/370_2.png) [@Paulo\_Carvalho](https://discourse.vtk.org/u/Paulo_Carvalho)\
**Post date:** [July 2, 2024, 1:46pm UTC](https://discourse.vtk.org/t/how-to-add-a-widget-in-a-view-with-rotation/14151/2 "2024-07-02T13:46:46Z")

</div>

Hello,

Please, enclose all code blocks between a heading ````cpp` and a trailing ```. Please, also enclose in-phrase code between two `. This improves readability quite a lot.

thank you,

PC