Creating a multiple buttons for the same annotation type that each have their own defaults

[Matt Parizeau]

Q:

How can you add multiple buttons in the toolbar that create the same annotation type but have their own default values similar to the four freehand tools in the default UI?

A:

When creating separate buttons that create the same type of annotation but with different defaults then the way to do that is create new tool objects and specify the defaults there. Here is an example that creates a custom ellipse tool with its own defaults:

var CustomEllipseTool = function() {
  Tools.EllipseCreateTool.apply(this, arguments);
  this.defaults.FillColor = new Annotations.Color(255, 255, 0);
  this.defaults.StrokeColor = new Annotations.Color(0, 0, 255);
  this.defaults.StrokeThickness = 5;
};

CustomEllipseTool.prototype = new Tools.EllipseCreateTool();

$(document).on('viewerLoaded', function() {
  readerControl.registerTool({
    toolName: 'EllipseCreateTool2',
    toolObject: new CustomEllipseTool(readerControl.docViewer),
    buttonImage: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">' +
      '<path d="m0 0h24v24h-24z" fill="none"/>' +
      '<path d="m12 21c-4.97056275 0-9-4.0294373-9-9 0-4.97056275 4.02943725-9 9-9 4.9705627 0 9 4.02943725 9 9 0 4.9705627-4.0294373 9-9 9zm0-2c3.8659932 0 7-3.1340068 7-7 0-3.86599325-3.1340068-7-7-7-3.86599325 0-7 3.13400675-7 7 0 3.8659932 3.13400675 7 7 7z"/>' +
    '</svg>',
    buttonName: 'ellipseToolButton2',
    tooltip: 'Ellipse 2'
  });

  readerControl.setHeaderItems(function(header) {
    var ellipseToolButton2 = {
      type: 'toolButton',
      toolName: 'EllipseCreateTool2'
    };
    header.get('freeHandToolGroupButton').insertBefore(ellipseToolButton2);
  });
});