ext-helloworld.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. /*globals svgEditor, svgCanvas, $*/
  2. /*jslint vars: true, eqeq: true*/
  3. /*
  4. * ext-helloworld.js
  5. *
  6. * Licensed under the MIT License
  7. *
  8. * Copyright(c) 2010 Alexis Deveria
  9. *
  10. */
  11. /*
  12. This is a very basic SVG-Edit extension. It adds a "Hello World" button in
  13. the left panel. Clicking on the button, and then the canvas will show the
  14. user the point on the canvas that was clicked on.
  15. */
  16. svgEditor.addExtension("Hello World", function() {'use strict';
  17. return {
  18. name: "Hello World",
  19. // For more notes on how to make an icon file, see the source of
  20. // the hellorworld-icon.xml
  21. svgicons: svgEditor.curConfig.extPath + "helloworld-icon.xml",
  22. // Multiple buttons can be added in this array
  23. buttons: [{
  24. // Must match the icon ID in helloworld-icon.xml
  25. id: "hello_world",
  26. // This indicates that the button will be added to the "mode"
  27. // button panel on the left side
  28. type: "mode",
  29. // Tooltip text
  30. title: "Say 'Hello World'",
  31. // Events
  32. events: {
  33. 'click': function() {
  34. // The action taken when the button is clicked on.
  35. // For "mode" buttons, any other button will
  36. // automatically be de-pressed.
  37. svgCanvas.setMode("hello_world");
  38. }
  39. }
  40. }],
  41. // This is triggered when the main mouse button is pressed down
  42. // on the editor canvas (not the tool panels)
  43. mouseDown: function() {
  44. // Check the mode on mousedown
  45. if(svgCanvas.getMode() == "hello_world") {
  46. // The returned object must include "started" with
  47. // a value of true in order for mouseUp to be triggered
  48. return {started: true};
  49. }
  50. },
  51. // This is triggered from anywhere, but "started" must have been set
  52. // to true (see above). Note that "opts" is an object with event info
  53. mouseUp: function(opts) {
  54. // Check the mode on mouseup
  55. if(svgCanvas.getMode() == "hello_world") {
  56. var zoom = svgCanvas.getZoom();
  57. // Get the actual coordinate by dividing by the zoom value
  58. var x = opts.mouse_x / zoom;
  59. var y = opts.mouse_y / zoom;
  60. var text = "Hello World!\n\nYou clicked here: "
  61. + x + ", " + y;
  62. // Show the text using the custom alert function
  63. $.alert(text);
  64. }
  65. }
  66. };
  67. });