PrizmDoc Viewer v13.23 - Updated
Developer Guide / Viewer / How to Customize the Viewer / Create a Custom Mouse Tool
In This Topic
    Create a Custom Mouse Tool
    In This Topic

    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. 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>