Change the cursor when one specific tool is active

Technical Support WebViewer
10

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
    });
  });