ext-helloworld.js 2.1 KB

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