From 96f74b4daeeef2fb2f6e7ca3807496aabb78110a Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Wed, 24 Jun 2009 04:17:35 +0000
Subject: [PATCH] Add circle, ellipse, line context controls

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@187 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  | 24 +++++++++++++++++++++
 editor/svg-editor.html | 47 +++++++++++++++++++++++++++++++++++-------
 editor/svg-editor.js   | 25 +++++++++++++++++++++-
 wave/svg-edit.xml      | 43 ++++++++++++++++++++++++++++++++++++--
 4 files changed, 128 insertions(+), 11 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 28e5896a..13fc7955 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -102,6 +102,18 @@
 	display: none;
 }
 
+#svg_editor #circle_panel {
+	display: none;
+}
+
+#svg_editor #ellipse_panel {
+	display: none;
+}
+
+#svg_editor #line_panel {
+	display: none;
+}
+
 #svg_editor #text_panel {
 	display: none;
 }
@@ -114,6 +126,18 @@
 	vertical-align:12px;
 }
 
+#svg_editor #circle_panel .circle_tool {
+	vertical-align:12px;
+}
+
+#svg_editor #ellipse_panel .ellipse_tool {
+	vertical-align:12px;
+}
+
+#svg_editor #line_panel .line_tool {
+	vertical-align:12px;
+}
+
 #svg_editor .tool_button, #svg_editor .tool_button_current, #svg_editor .tool_button_disabled {
 	height: 24px;
 	width: 24px;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index e9b2dda3..ed645aaa 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -43,7 +43,6 @@
 	<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
 	</div>
 
-	<!-- TODO: also add x, y, width, height -->
 	<div id="rect_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="rect_tool">Radius:</label>
@@ -59,17 +58,49 @@
 			<option value="15">15</option>
 			<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/>
-		<label class="rect_tool">Y:</label>
-		<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="Y" size="5" disabled/>
-		<label class="rect_tool">W:</label>
+		<label class="rect_tool">x:</label>
+		<input id="rect_x" class="rect_tool" title="Change rectangle X coordinate" alt="x" size="5" disabled/>
+		<label class="rect_tool">y:</label>
+		<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="y" size="5" disabled/>
+		<label class="rect_tool">width:</label>
 		<input id="rect_w" class="rect_tool" title="Change rectangle width" alt="width" size="5" disabled/>
-		<label class="rect_tool">H:</label>
+		<label class="rect_tool">height:</label>
 		<input id="rect_h" class="rect_tool" title="Change rectangle height" alt="height" size="5" disabled/>
 	</div>
 
-	<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
+	<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/>
+		<label class="circle_tool">cy:</label>
+		<input id="circle_cy" class="circle_tool" title="Change circle's cy coordinate" alt="cy" size="5" disabled/>
+		<label class="circle_tool">r:</label>
+		<input id="circle_r" class="circle_tool" title="Change circle's radius" alt="r" size="5" disabled/>
+	</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/>
+		<label class="ellipse_tool">cy:</label>
+		<input id="ellipse_cy" class="ellipse_tool" title="Change ellipse's cy coordinate" alt="cy" size="5" disabled/>
+		<label class="ellipse_tool">rx:</label>
+		<input id="ellipse_rx" class="ellipse_tool" title="Change ellipse's x radius" alt="rx" size="5" disabled/>
+		<label class="ellipse_tool">ry:</label>
+		<input id="ellipse_ry" class="ellipse_tool" title="Change ellipse's y radius" alt="ry" size="5" disabled/>
+	</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/>
+		<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/>
+		<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/>
+		<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/>
+	</div>
 
 	<div id="text_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index 09fa1cf8..7cc20221 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -80,19 +80,42 @@ function svg_edit_setup() {
 		var elem = selectedElement;
 		$('#selected_panel').hide();
 		$('#rect_panel').hide();
+		$('#circle_panel').hide();
+		$('#ellipse_panel').hide();
+		$('#line_panel').hide();
 		$('#text_panel').hide();
 		if (elem != null) {
 			$('#selected_panel').show();
 			// update contextual tools here
 			switch(elem.tagName) {
 				case "rect":
-					$('#rect_panel').show().css("display", "inline");
+					$('#rect_panel').show();
 					$('#rect_radius').val(elem.getAttribute("rx")||0);
 					$('#rect_x').val(elem.getAttribute("x")||0);
 					$('#rect_y').val(elem.getAttribute("y")||0);
 					$('#rect_w').val(elem.getAttribute("width")||0);
 					$('#rect_h').val(elem.getAttribute("height")||0);
 					break;
+				case "circle":
+					$('#circle_panel').show();
+					$('#circle_cx').val(elem.getAttribute("cx")||0);
+					$('#circle_cy').val(elem.getAttribute("cy")||0);
+					$('#circle_r').val(elem.getAttribute("r")||0);
+					break;
+				case "ellipse":
+					$('#ellipse_panel').show();
+					$('#ellipse_cx').val(elem.getAttribute("cx")||0);
+					$('#ellipse_cy').val(elem.getAttribute("cy")||0);
+					$('#ellipse_rx').val(elem.getAttribute("rx")||0);
+					$('#ellipse_ry').val(elem.getAttribute("ry")||0);
+					break;
+				case "line":
+					$('#line_panel').show();
+					$('#line_x1').val(elem.getAttribute("x1")||0);
+					$('#line_y1').val(elem.getAttribute("y1")||0);
+					$('#line_x2').val(elem.getAttribute("x2")||0);
+					$('#line_y2').val(elem.getAttribute("y2")||0);
+					break;
 				case "text":
 					// jquery's show() always sets display to block
 					$('#text_panel').show().css("display", "inline");
diff --git a/wave/svg-edit.xml b/wave/svg-edit.xml
index 3bd4e5f9..b83c3689 100644
--- a/wave/svg-edit.xml
+++ b/wave/svg-edit.xml
@@ -47,7 +47,6 @@
 	<img class="tool_button" id="tool_move_bottom" src="http://svg-edit.googlecode.com/svn/trunk/editor/images/move_bottom.png" title="Move to Bottom" alt="Bottom"/>
 	</div>
 
-	<!-- TODO: also add x, y, width, height -->
 	<div id="rect_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<label class="rect_tool" >Radius:</label>
@@ -63,9 +62,49 @@
 			<option value="15">15</option>
 			<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/>
+		<label class="rect_tool">y:</label>
+		<input id="rect_y" class="rect_tool" title="Change rectangle Y coordinate" alt="y" size="5" disabled/>
+		<label class="rect_tool">width:</label>
+		<input id="rect_w" class="rect_tool" title="Change rectangle width" alt="width" size="5" disabled/>
+		<label class="rect_tool">height:</label>
+		<input id="rect_h" class="rect_tool" title="Change rectangle height" alt="height" size="5" disabled/>
 	</div>
 
-	<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
+	<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/>
+		<label class="circle_tool">cy:</label>
+		<input id="circle_cy" class="circle_tool" title="Change circle's cy coordinate" alt="cy" size="5" disabled/>
+		<label class="circle_tool">r:</label>
+		<input id="circle_r" class="circle_tool" title="Change circle's radius" alt="r" size="5" disabled/>
+	</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/>
+		<label class="ellipse_tool">cy:</label>
+		<input id="ellipse_cy" class="ellipse_tool" title="Change ellipse's cy coordinate" alt="cy" size="5" disabled/>
+		<label class="ellipse_tool">rx:</label>
+		<input id="ellipse_rx" class="ellipse_tool" title="Change ellipse's x radius" alt="rx" size="5" disabled/>
+		<label class="ellipse_tool">ry:</label>
+		<input id="ellipse_ry" class="ellipse_tool" title="Change ellipse's y radius" alt="ry" size="5" disabled/>
+	</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/>
+		<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/>
+		<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/>
+		<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/>
+	</div>
 
 	<div id="text_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>