[SOLVED] Is there a way to change default cursor styles in VTKJS?

Is there a way to change default cursor styles in VTKJS?

I am working on a project where I have created different kinds of tools (Ex: Pan, Zoom, Rotate) using VTKJS. Each time I select any of this tools particular functionality activates (Ex: When I select Zoom then I am able to zoom in and zoom out the image).Now the issue is if I select any of these tools the default style for cursor applied which is cursor: pointer and I want to change different cursor styles for each tool item. Is there any way in VTKJS that I can change this default behavior. Ex: For Zoom I need zoom-in, For Pan I need pointer, For Rotate its default(arrow).

Now what I have tried is on each of this tool items I have created event listeners

 zoomButton.setAttribute("style", "cursor:zoom-in !important");

and it works fine and it changes the cursor icons. But whenever I try to zoom-in or zoom-out the cursor revert back to cursor:pointer. So is their ant way we can handle this ?

Solution

You should be able to set the cursor via an interactor or renderWindow object via the setCursor() method. For example:

import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';

const genericRenderWindow = vtkGenericRenderWindow.newInstance();
const renderWindow = genericRenderWindow.getRenderWindow();

renderWindow.setCursor('zoom-in');