Creating "Tools" for the View & Data API

By Philippe Leefsma

Here is just a quickie before the weekend showing you how to create a "tool" for the viewer. A tool is basically a custom "class" (in the JavaScript way) implementing the ToolInterface that will give your code easy access to callbacks such as mouse events, keyboard events, touch events and so on...

It's pretty straightforward to put in place and use it. The below implementation does not much except dumping to the browser console the various tool callbacks and their parameters. I commented out the "update" and "handleMouseMove" so the console doesn't get too much stuff logged in:

  1 ///////////////////////////////////////////////////////////////////
  2 // Simple Custom Tool viewer extension
  3 // by Philippe Leefsma, March 2015
  4 //
  5 ///////////////////////////////////////////////////////////////////
  6 AutodeskNamespace("Autodesk.ADN.Viewing.Extension");
  7 
  8 Autodesk.ADN.Viewing.Extension.CustomTool = 
  9     
 10     function (viewer, options) {
 11 
 12     Autodesk.Viewing.Extension.call(this, viewer, options);
 13 
 14     var _self = this;
 15 
 16     _self.tool = null;
 17 
 18     function AdnTool(viewer, toolName) {
 19 
 20         this.getNames = function() {
 21 
 22             return [toolName];
 23         };
 24 
 25         this.getName = function() {
 26 
 27             return toolName;
 28         };
 29 
 30         this.activate = function(name) {
 31 
 32             console.log('-------------------');
 33             console.log('Tool:activate(name)');
 34             console.log(name);
 35         };
 36 
 37         this.deactivate = function(name) {
 38 
 39             console.log('-------------------');
 40             console.log('Tool:deactivate(name)');
 41             console.log(name);
 42         };
 43 
 44         this.update = function(t) {
 45 
 46             //console.log('-------------------');
 47             //console.log('Tool:update(t)');
 48             //console.log(t);
 49 
 50             return false;
 51         };
 52 
 53         this.handleSingleClick = function(event, button) {
 54 
 55             console.log('-------------------');
 56             console.log('Tool:handleSingleClick(event, button)');
 57             console.log(event);
 58             console.log(button);
 59 
 60             return false;
 61         };
 62 
 63         this.handleDoubleClick = function(event, button) {
 64 
 65             console.log('-------------------');
 66             console.log('Tool:handleDoubleClick(event, button)');
 67             console.log(event);
 68             console.log(button);
 69 
 70             return false;
 71         };
 72 
 73 
 74         this.handleSingleTap = function(event) {
 75 
 76             console.log('-------------------');
 77             console.log('Tool:handleSingleTap(event)');
 78             console.log(event);
 79 
 80             return false;
 81         };
 82 
 83 
 84         this.handleDoubleTap = function(event) {
 85 
 86             console.log('-------------------');
 87             console.log('Tool:handleDoubleTap(event)');
 88             console.log(event);
 89 
 90             return false;
 91         };
 92 
 93 
 94         this.handleKeyDown = function(event, keyCode) {
 95 
 96             console.log('-------------------');
 97             console.log('Tool:handleKeyDown(event, keyCode)');
 98             console.log(event);
 99             console.log(keyCode);
100 
101             return false;
102         };
103 
104         this.handleKeyUp = function(event, keyCode) {
105 
106             console.log('-------------------');
107             console.log('Tool:handleKeyUp(event, keyCode)');
108             console.log(event);
109             console.log(keyCode);
110 
111             return false;
112         };
113 
114 
115         this.handleWheelInput = function(delta) {
116 
117             console.log('-------------------');
118             console.log('Tool:handleWheelInput(delta)');
119             console.log(delta);
120 
121             return false;
122         };
123 
124         this.handleButtonDown = function(event, button) {
125 
126             console.log('-------------------');
127             console.log('Tool:handleButtonDown(event, button)');
128             console.log(event);
129             console.log(button);
130 
131             return false;
132         };
133 
134         this.handleButtonUp = function(event, button) {
135 
136             console.log('-------------------');
137             console.log('Tool:handleButtonUp(event, button)');
138             console.log(event);
139             console.log(button);
140 
141             return false;
142         };
143 
144         this.handleMouseMove = function(event) {
145 
146             //console.log('-------------------');
147             //console.log('Tool:handleMouseMove(event)');
148             //console.log(event);
149 
150             return false;
151         };
152 
153         this.handleGesture = function(event) {
154 
155             console.log('-------------------');
156             console.log('Tool:handleGesture(event)');
157             console.log(event);
158 
159             return false;
160         };
161 
162         this.handleBlur = function(event) {
163 
164             console.log('-------------------');
165             console.log('Tool:handleBlur(event)');
166             console.log(event);
167 
168             return false;
169         };
170 
171         this.handleResize = function() {
172 
173             console.log('-------------------');
174             console.log('Tool:handleResize()');
175         };
176     }
177 
178     var toolName = "Autodesk.ADN.Viewing.Tool.CustomTool";
179 
180     _self.load = function () {
181 
182         _self.tool = new AdnTool(viewer, toolName);
183 
184         viewer.toolController.registerTool(_self.tool);
185 
186         viewer.toolController.activateTool(toolName);
187 
188         console.log('Autodesk.ADN.Viewing.Extension.CustomTool loaded');
189         return true;
190     };
191 
192     _self.unload = function () {
193 
194         viewer.toolController.deactivateTool(toolName);
195 
196         console.log('Autodesk.ADN.Viewing.Extension.CustomTool unloaded');
197         return true;
198     };
199 };
200 
201 Autodesk.ADN.Viewing.Extension.CustomTool.prototype =
202     Object.create(Autodesk.Viewing.Extension.prototype);
203 
204 Autodesk.ADN.Viewing.Extension.CustomTool.prototype.constructor =
205     Autodesk.ADN.Viewing.Extension.CustomTool;
206 
207 Autodesk.Viewing.theExtensionManager.registerExtension(
208     'Autodesk.ADN.Viewing.Extension.CustomTool',
209     Autodesk.ADN.Viewing.Extension.CustomTool);
210 

You can find the complete code as part of our viewer extension samples:

Autodesk.ADN.Viewing.Extension.CustomTool.js