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