|  |  | 
 |  |  |  * Copyright(c) 2010 Alexis Deveria | 
 |  |  |  * | 
 |  |  |  */ | 
 |  |  |   | 
 |  |  | /*  | 
 |  |  |  | 
 |  |  | /* | 
 |  |  |   This is a very basic SVG-Edit extension. It adds a "Hello World" button in | 
 |  |  |   the left panel. Clicking on the button, and then the canvas will show the | 
 |  |  |   user the point on the canvas that was clicked on. | 
 |  |  | */ | 
 |  |  |   | 
 |  |  |  | 
 |  |  | methodDraw.addExtension("Hello World", function() { | 
 |  |  |  | 
 |  |  |     return { | 
 |  |  | 
 |  |  |       // For more notes on how to make an icon file, see the source of | 
 |  |  |       // the hellorworld-icon.xml | 
 |  |  |       svgicons: "extensions/helloworld-icon.xml", | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       // Multiple buttons can be added in this array | 
 |  |  |       buttons: [{ | 
 |  |  |         // Must match the icon ID in helloworld-icon.xml | 
 |  |  |         id: "hello_world",  | 
 |  |  |          | 
 |  |  |         id: "hello_world", | 
 |  |  |  | 
 |  |  |         // This indicates that the button will be added to the "mode" | 
 |  |  |         // button panel on the left side | 
 |  |  |         type: "mode",  | 
 |  |  |          | 
 |  |  |         type: "mode", | 
 |  |  |  | 
 |  |  |         // Tooltip text | 
 |  |  |         title: "Say 'Hello World'",  | 
 |  |  |          | 
 |  |  |         title: "Say 'Hello World'", | 
 |  |  |  | 
 |  |  |         // Events | 
 |  |  |         events: { | 
 |  |  |           'click': function() { | 
 |  |  |             // The action taken when the button is clicked on. | 
 |  |  |             // For "mode" buttons, any other button will  | 
 |  |  |             // For "mode" buttons, any other button will | 
 |  |  |             // automatically be de-pressed. | 
 |  |  |             svgCanvas.setMode("hello_world"); | 
 |  |  |           } | 
 |  |  |         } | 
 |  |  |       }], | 
 |  |  |       // This is triggered when the main mouse button is pressed down  | 
 |  |  |       // This is triggered when the main mouse button is pressed down | 
 |  |  |       // on the editor canvas (not the tool panels) | 
 |  |  |       mouseDown: function() { | 
 |  |  |         // Check the mode on mousedown | 
 |  |  |         if(svgCanvas.getMode() == "hello_world") { | 
 |  |  |          | 
 |  |  |           // The returned object must include "started" with  | 
 |  |  |  | 
 |  |  |           // The returned object must include "started" with | 
 |  |  |           // a value of true in order for mouseUp to be triggered | 
 |  |  |           return {started: true}; | 
 |  |  |         } | 
 |  |  |       }, | 
 |  |  |        | 
 |  |  |  | 
 |  |  |       // This is triggered from anywhere, but "started" must have been set | 
 |  |  |       // to true (see above). Note that "opts" is an object with event info | 
 |  |  |       mouseUp: function(opts) { | 
 |  |  |         // Check the mode on mouseup | 
 |  |  |         if(svgCanvas.getMode() == "hello_world") { | 
 |  |  |           var zoom = svgCanvas.getZoom(); | 
 |  |  |            | 
 |  |  |  | 
 |  |  |           // Get the actual coordinate by dividing by the zoom value | 
 |  |  |           var x = opts.mouse_x / zoom; | 
 |  |  |           var y = opts.mouse_y / zoom; | 
 |  |  |            | 
 |  |  |           var text = "Hello World!\n\nYou clicked here: "  | 
 |  |  |  | 
 |  |  |           var text = "Hello World!\n\nYou clicked here: " | 
 |  |  |             + x + ", " + y; | 
 |  |  |              | 
 |  |  |  | 
 |  |  |           // Show the text using the custom alert function | 
 |  |  |           $.alert(text); | 
 |  |  |         } |