PrizmDoc® Viewer v14.0 Release - Updated
PrizmDoc Viewer / Developer Guide / Viewer / How to Customize the Viewer / Create a Custom Mouse Tool
In This Topic
    Create a Custom Mouse Tool
    In This Topic


    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:


    // Create the new mouse tool
        var myTool = PCCViewer.MouseTools.createMouseTool(
    // Configure the tool to draw a pink (#FF69B4) line that is 10 pixel thick

    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":


    <!-- 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
        class\="pcc-icon pcc-icon-annotate-line"
        title="Pink Line Tool"\></button>