Change the cursor when one specific tool is active

Hi,

I have added and registered a ToolButton in the annotation toolbar. When this button is active, I’d like to change the cursor to a “crosshair”. How can I achieve that ? The Tool class has a “cursor” property but I don’t know how to change the value once the tool is registered.

Thanks for your help !

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

Hello @AntoineF

The cursor property of the registerTool API should be enough to change the mouse cursor when the tool is active. I just tried the code below and it works for me on WebViewer 8.4:

instance.UI.registerTool({
    ...
    cursor: 'crosshair'
  }, AnnotationType);

Hi Diego, thanks for your answer ! it works :slight_smile:

Hi @dfelix , actually, it doesn’t work for me (it was due to a side effect…).

Here is how I registered the tool. I can see the tool in the header. But when I click on it, the pointer doesn’t shift to pointer (in this case)…I have the default cursor. I’m also on webviewer 8.4.1

Hello @AntoineF

That’s weird.

Could you record a video or post some screenshots of what exactly you are doing/seeing? Do you see any errors in the console?

@dfelix , here a short video.
No error in the console…

you can see that when I click on the tool (on the right), it is activated, but the cursor over the pdf is the default cursor. When I select a built in tool, I get the appropriate cursor, like the crosshair for the rubber tool.

PS : please note that as you can see in the code, I didn’t link the button to any specific action / annotation. I just created the buttonTool object + register it and added it to the header.

One idea : can the problem be due to a bad “time” of the tool creation. At the moment, I’m creating the tool when the “documentLoaded” event is triggered.

Hello @dfelix , any news on this one ?

Hello @AntoineF

Actually yes.

First of all, I was caught on a side effect too (I tried crosshair, but crosshair is actually the default cursor, so it didn’t work). Also, I did find that using the cursor option when registering a tool is not supposed to work. The actual way to change the cursor is to do it in the tool’s constructor.

I don’t have your tool code to show you the exact spot, but here is the tool code snippet that I managed to work (using a very different cursor this time around):

class RotatableCreateTool extends Tools.GenericAnnotationCreateTool {
    constructor(documentViewer) {
      super(documentViewer, Rotatable);
      this.cursor = 'help';
    }
  }

  const rotatableToolName = 'AnnotationCreateRotatable';

  const rotatableTool = new RotatableCreateTool(documentViewer);
  UI.registerTool({
    toolName: rotatableToolName,
    toolObject: rotatableTool,
    buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 64 64">' +
      '<line x1="9.37" x2="54.63" y1="9.37" y2="9.37" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '<line x1="9.37" x2="9.37" y1="54.63" y2="9.37" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '<line x1="54.63" x2="54.63" y1="9.37" y2="54.63" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '<line x1="9.37" x2="54.63" y1="54.63" y2="54.63" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '<line x1="9.37" x2="54.63" y1="9.37" y2="54.63" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '<line x1="9.37" x2="54.63" y1="54.63" y2="9.37" fill="none" stroke="#010101" stroke-miterlimit="10" stroke-width="4"/>' +
      '</svg>',
    buttonName: 'rotatableToolButton',
    tooltip: 'Rotatable',
  }, Rotatable);

  UI.setHeaderItems((header) => {
    header.getHeader('toolbarGroup-Shapes').get('freeHandToolGroupButton').insertBefore({
      type: 'toolButton',
      toolName: rotatableToolName
    });
  });

Hello @dfelix ,
I apologize for the late anwser, it seems that my previous answer was not sent…
Anyway, it works like a charm ! Thanks a lot for your answer and the example you provided !

Best,
Antoine