PrizmDoc Viewer v13.15 Release - 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

    A custom mouse tool can be used in the Viewer, first by defining the tool and then by updating the UI to have a button for the tool.

    Step 1: Define the tool in JavaScript code.

    It doesn’t matter where in code the tool is defined as long as it is defined before the tool is selected:

    Example
    Copy Code
    // 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 attribute data-pcc-nav-tab="annotate":

    Example
    Copy Code
    <!-- 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>