From 66457b70bfeb7d59b3e706417d5b5031db1ac51c Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Wed, 3 Mar 2010 15:30:38 +0000
Subject: [PATCH] Added hello world extension

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1442 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/extensions/ext-helloworld.js   | 80 +++++++++++++++++++++++++++
 editor/extensions/helloworld-icon.xml | 23 ++++++++
 editor/svg-editor.html                |  3 +-
 3 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 editor/extensions/ext-helloworld.js
 create mode 100644 editor/extensions/helloworld-icon.xml

diff --git a/editor/extensions/ext-helloworld.js b/editor/extensions/ext-helloworld.js
new file mode 100644
index 00000000..7daf2a3a
--- /dev/null
+++ b/editor/extensions/ext-helloworld.js
@@ -0,0 +1,80 @@
+/*
+ * ext-helloworld.js
+ *
+ * Licensed under the Apache License, Version 2
+ *
+ * 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.
+*/
+ 
+$(function() {
+	svgCanvas.addExtension("Hello World", function() {
+
+		return {
+			name: "Hello World",
+			// 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", 
+				
+				// 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() {
+						// 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() {
+				// 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(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);
+				}
+			}
+		};
+	});
+});
+
diff --git a/editor/extensions/helloworld-icon.xml b/editor/extensions/helloworld-icon.xml
new file mode 100644
index 00000000..68b6d964
--- /dev/null
+++ b/editor/extensions/helloworld-icon.xml
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<!-- 
+	Sample icons file. This file looks like an SVG file with groups as its
+	children. Each group element has an ID that must match the ID of the button given
+	in the extension. The SVG inside the group makes up the actual icon, and
+	needs use a viewBox instead of width/height for it to scale	properly.
+	
+	Multiple icons can be included, each within their own group. A final element
+	with ID "svg_eof" must be included too.
+-->
+	<g id="hello_world">
+		<svg viewBox="0 0 102 102" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+		 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+		 <g>
+		  <title>Layer 1</title>
+		  <rect ry="30" rx="30" x="2.5" y="2.5" width="97" height="97" id="svg_3" fill="#008000" stroke="#000000" stroke-width="5"/>
+		  <text x="52.668" y="42.5" id="svg_1" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve">Hello</text>
+		  <text x="52.668" y="71.5" fill="#ffffff" stroke="#000000" stroke-width="0" font-size="24" font-family="Monospace" text-anchor="middle" xml:space="preserve" id="svg_2">World!</text>
+		 </g>
+		</svg>
+	</g>
+	<g id="svg_eof"/>
+</svg>
\ No newline at end of file
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index de4d7dcd..dc346d03 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -21,7 +21,8 @@
 <script type="text/javascript" src="extensions/ext-closepath.js"></script>
 <script type="text/javascript" src="extensions/ext-arrows.js"></script>
 <script type="text/javascript" src="extensions/ext-connector.js"></script>
-<!--<script type="text/javascript" src="extensions/ext-foreignobject.js"></script>-->
+<!-- <script type="text/javascript" src="extensions/ext-helloworld.js"></script> -->
+<!-- <script type="text/javascript" src="extensions/ext-foreignobject.js"></script> -->
 
 <!-- Release version of script tags: >
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>