Introduction

You can create a custom mouse tool in the Viewer by defining the tool and then by updating the UI to show the button for the tool.

Step 1: Define the tool in JavaScript code

Define the tool in the code before the tool is selected. For example:

Example

// Create the new mouse tool
    var myTool = PCCViewer.MouseTools.createMouseTool(
        "PinkLine",
        PCCViewer.MouseTool.Type.LineAnnotation);

// Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick
    myTool.getTemplateMark()
        .setColor("#FF69B4")
        .setThickness(10);

Step 2: Update the UI to show a button for the tool

This modification will take place in the viewerTemplate.html file. NOTE: Refer to the Customizing the Viewer section for details on using the viewerTemplate.html. The button can be added to several places in the UI, but a common place to add the button is in the Annotate tab pane. Content of the Annotate tab is defined in the element with the attribute data-pcc-nav-tab="annotate":

Example

<!-- The following markup will create a button that enables use
     of the mouse tool named "PinkLine".

     The custom attributes that are used:
      \* data-pcc-mouse-tool="PinkLine" - specifies that the button selects the mouse tool named "MyLineTool"
      \* data-pcc-context-menu="false" - specifies that a context menu is not shown for this mouse tool
     -->
<button
    data-pcc-mouse-tool="PinkLine"
    data-pcc-context-menu="false"
    class\="pcc-icon pcc-icon-annotate-line"
    title="Pink Line Tool"\></button>