From 7c5c80beec62961998cb4f742583722b08940e2d Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Wed, 24 Jun 2009 04:33:09 +0000
Subject: [PATCH] Fix Issue 26: context tools for rect, circle, ellipse, line
 are now editable

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@188 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.html | 30 +++++++++++++++---------------
 editor/svg-editor.js   |  4 ++++
 editor/svgcanvas.js    |  9 +++++++++
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index ed645aaa..3af21f6f 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -59,47 +59,47 @@
 			<option value="20">20</option>
 		</select>
 		<label class="rect_tool">x:</label>
-		<input id="rect_x" class="rect_tool" title="Change rectangle X coordinate" alt="x" size="5" disabled/>
+		<input id="rect_x" class="rect_tool attr_changer" title="Change rectangle X coordinate" alt="x" size="5"/>
 		<label class="rect_tool">y:</label>
-		<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="y" size="5" disabled/>
+		<input id="rect_y" class="rect_tool attr_changer" title="Change rectangle Y coordinate" alt="y" size="5"/>
 		<label class="rect_tool">width:</label>
-		<input id="rect_w" class="rect_tool" title="Change rectangle width" alt="width" size="5" disabled/>
+		<input id="rect_w" class="rect_tool attr_changer" title="Change rectangle width" alt="width" size="5"/>
 		<label class="rect_tool">height:</label>
-		<input id="rect_h" class="rect_tool" title="Change rectangle height" alt="height" size="5" disabled/>
+		<input id="rect_h" class="rect_tool attr_changer" title="Change rectangle height" alt="height" size="5"/>
 	</div>
 
 	<div id="circle_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="circle_tool">cx:</label>
-		<input id="circle_cx" class="circle_tool" title="Change circle's cx coordinate" alt="cx" size="5" disabled/>
+		<input id="circle_cx" class="circle_tool attr_changer" title="Change circle's cx coordinate" alt="cx" size="5"/>
 		<label class="circle_tool">cy:</label>
-		<input id="circle_cy" class="circle_tool" title="Change circle's cy coordinate" alt="cy" size="5" disabled/>
+		<input id="circle_cy" class="circle_tool attr_changer" title="Change circle's cy coordinate" alt="cy" size="5"/>
 		<label class="circle_tool">r:</label>
-		<input id="circle_r" class="circle_tool" title="Change circle's radius" alt="r" size="5" disabled/>
+		<input id="circle_r" class="circle_tool attr_changer" title="Change circle's radius" alt="r" size="5"/>
 	</div>
 	
 	<div id="ellipse_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="ellipse_tool">cx:</label>
-		<input id="ellipse_cx" class="ellipse_tool" title="Change ellipse's cx coordinate" alt="cx" size="5" disabled/>
+		<input id="ellipse_cx" class="ellipse_tool attr_changer" title="Change ellipse's cx coordinate" alt="cx" size="5"/>
 		<label class="ellipse_tool">cy:</label>
-		<input id="ellipse_cy" class="ellipse_tool" title="Change ellipse's cy coordinate" alt="cy" size="5" disabled/>
+		<input id="ellipse_cy" class="ellipse_tool attr_changer" title="Change ellipse's cy coordinate" alt="cy" size="5"/>
 		<label class="ellipse_tool">rx:</label>
-		<input id="ellipse_rx" class="ellipse_tool" title="Change ellipse's x radius" alt="rx" size="5" disabled/>
+		<input id="ellipse_rx" class="ellipse_tool attr_changer" title="Change ellipse's x radius" alt="rx" size="5"/>
 		<label class="ellipse_tool">ry:</label>
-		<input id="ellipse_ry" class="ellipse_tool" title="Change ellipse's y radius" alt="ry" size="5" disabled/>
+		<input id="ellipse_ry" class="ellipse_tool attr_changer" title="Change ellipse's y radius" alt="ry" size="5"/>
 	</div>
 	
 	<div id="line_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="line_tool">x1:</label>
-		<input id="line_x1" class="line_tool" title="Change line's starting x coordinate" alt="x1" size="5" disabled/>
+		<input id="line_x1" class="line_tool attr_changer" title="Change line's starting x coordinate" alt="x1" size="5"/>
 		<label class="line_tool">y1:</label>
-		<input id="line_y1" class="line_tool" title="Change line's starting y coordinate" alt="y1" size="5" disabled/>
+		<input id="line_y1" class="line_tool attr_changer" title="Change line's starting y coordinate" alt="y1" size="5"/>
 		<label class="line_tool">x2:</label>
-		<input id="line_x2" class="line_tool" title="Change line's ending x coordinate" alt="x2" size="5" disabled/>
+		<input id="line_x2" class="line_tool attr_changer" title="Change line's ending x coordinate" alt="x2" size="5"/>
 		<label class="line_tool">y2:</label>
-		<input id="line_y2" class="line_tool" title="Change line's ending y coordinate" alt="x1" size="5" disabled/>
+		<input id="line_y2" class="line_tool attr_changer" title="Change line's ending y coordinate" alt="x1" size="5"/>
 	</div>
 
 	<div id="text_panel">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 7cc20221..4d912722 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -182,6 +182,10 @@ function svg_edit_setup() {
 	$('#rect_radius').change(function(){
 		svgCanvas.setRectRadius(this.options[this.selectedIndex].value);
 	});
+	
+	$('.attr_changer').change(function() {
+		svgCanvas.changeSelectedAttribute(this.getAttribute("alt"), this.value);
+	});
 
 	$('.palette_item').click(function(evt){
 		var id = (evt.shiftKey ? '#stroke_color' : '#fill_color');
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index f4a85ea5..4a6b1672 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -937,6 +937,15 @@ function SvgCanvas(c)
 			call("changed", selected);
 		}
 	}
+	
+	this.changeSelectedAttribute = function(attr, val) {
+		if (selected != null && selected.getAttribute(attr) != val) {
+			selected.setAttribute(attr, val);
+			selectedBBox = selected.getBBox();
+			recalculateSelectedOutline();
+			call("changed", selected);
+		}
+	}
 
 	$(container).mouseup(mouseUp);
 	$(container).mousedown(mouseDown);