/*globals svgEditor, svgCanvas, $*/ /*jslint vars: true, eqeq: true*/ /* * 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. */ svgEditor.addExtension("Advanced", function() {'use strict'; return { name: "Advanced", // For more notes on how to make an icon file, see the source of // the helloworld-icon.xml svgicons: svgEditor.curConfig.extPath + "advanced-icon.xml", // Multiple buttons can be added in this array buttons: [{ // Must match the icon ID in helloworld-icon.xml id: "advanced", // This indicates that the button will be added to the "mode" // button panel on the left side type: "mode", // Tooltip text title: "Show Advanced Options", // Events events: { 'click': function() { // The action taken when the button is clicked on. // For "mode" buttons, any other button will // automatically be de-pressed. if (svgCanvas.getMode() != "advanced") { svgCanvas.setMode("advanced"); } else { } } } }], // 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() == "advanced") { // 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() == "advanced") { 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 = "These are advanced features!\n\nYou clicked here: " + x + ", " + y; // Show the text using the custom alert function $.alert(text); } } }; });