Custom Tool

[mi...@stellarlibrary.com]

Hi,

I'm looking for an example on how to create a new custom annotation tool/button.

We wish to create a new 'AnnotationCreateFreeHand' button that applies different default stroke settings.

Our working prototype maps an additional item in 'buttonIdsToToolModes' but I'm wrestling too much to have the icons behave.

Regards

Mike

[Justin Jung]

Hello Mike,

You can add the following to config.js. This creates a separate freehand tool mode, adds button to the menu and sets default styles for each freehand tool.

$(document).on('viewerLoaded', function() {

  readerControl.toolModeMap.MY_NEW_TOOL = new Tools.FreeHandCreateTool(readerControl.docViewer);

  readerControl.buttonIdsToToolModes.MY_NEW_TOOL = readerControl.toolModeMap.MY_NEW_TOOL;

  var customToolButton = $('\

    <a id="MY_NEW_TOOL" data-transition="none" data-toolmode="MY_NEW_TOOL" class="mobile-button">\

        <span class="glyphicons leaf"></span>\

    </a>\

  ');

  customToolButton.insertBefore($('#annotCreateMenuContext #annotCreateCancelButton'));

  readerControl.docViewer.on('toolModeUpdated', function(e, newToolMode) {

    if (newToolMode === readerControl.toolModeMap.MY_NEW_TOOL) {

      newToolMode.defaults.StrokeColor = new Annotations.Color(255, 0, 0);

      newToolMode.defaults.StrokeThickness = 5;

      newToolMode.defaults.Opacity = 0.5;

    } else if (newToolMode === readerControl.toolModeMap.AnnotationCreateFreeHand) {

      newToolMode.defaults.StrokeColor = new Annotations.Color(0, 0, 255);

      newToolMode.defaults.StrokeThickness = 1;

      newToolMode.defaults.Opacity = 1;

    }

  });

});

Justin Jung

Software Developer

PDFTron Systems Inc.

[mi...@stellarlibrary.com]

That is great thank you Justin.

Is there any in-built support for independent styling, eg when that custom tool is selected and and existing style has changed, that it apples to the tool as a default ?

Regards

Mike

[Justin Jung]

Hello Mike,

Glad the solution worked out :)

As you can see in the example code, each tool can have its own set of defaults. You can listen to defaultToolValueChanged event, check the current tool and then update the appropriate defaults. For example,

$(document).on('defaultToolValueChanged', function(e, annotation, property, value) {

  // check current tool, annotation type, and update tool defaults for property

[mi...@stellarlibrary.com]

Thanks for the event listener. I have this sorted now.

Q. Do you have reference to all the events emitted by WebViewer somewhere ?

I searched for events in your auto-generated manual, it appears some are missing.

Mike

On Friday, May 12, 2017 at 3:39:22 AM UTC+12, (unknown) wrote:

[Justin Jung]

Glad it helped!

You can see events for AnnotationManager and DocumentViewer from here: https://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/CoreControls.AnnotationManager.html, https://www.pdftron.com/webviewer/demo/lib/html5/doc/symbols/CoreControls.DocumentViewer.html

Unfortunately, there is no documentation for the events outside of CoreControls (ie. ReaderControl, AnnotationEdit, ControlUtils).