svgedit/dist/extensions/ext-helloworld.js

var svgEditorExtension_helloworld = (function () {
  'use strict';

  /* globals jQuery */
  /*
   * ext-helloworld.js
   *
   * Licensed under the MIT License
   *
   * 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.
  */

  var extHelloworld = {
    name: 'Hello World',
    init: function init() {
      var svgEditor = this;
      var $ = jQuery;
      var svgCanvas = svgEditor.canvas;
      return {
        name: 'Hello World',
        // For more notes on how to make an icon file, see the source of
        // the helloworld-icon.xml
        svgicons: svgEditor.curConfig.extIconsPath + 'helloworld-icon.xml',

        // Multiple buttons can be added in this array
        buttons: [{
          // Must match the icon ID in helloworld-icon.xml
          id: 'hello_world',

          // This indicates that the button will be added to the "mode"
          // button panel on the left side
          type: 'mode',

          // Tooltip text
          title: "Say 'Hello World'",

          // Events
          events: {
            click: function click() {
              // The action taken when the button is clicked on.
              // 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
        // on the editor canvas (not the tool panels)
        mouseDown: function mouseDown() {
          // Check the mode on mousedown
          if (svgCanvas.getMode() === 'hello_world') {
            // 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 mouseUp(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: ' + x + ', ' + y;

            // Show the text using the custom alert function
            $.alert(text);
          }
        }
      };
    }
  };

  return extHelloworld;

}());