From f3bce20321caad07ec3263b901cdb8d1938ea067 Mon Sep 17 00:00:00 2001
From: Jeff Schiller <codedread@gmail.com>
Date: Thu, 11 Jun 2009 15:18:46 +0000
Subject: [PATCH] Add rect radius contextual tool.  Fix bug where text elements
 were 50% opacity by default

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@97 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  |  8 ++++++
 editor/svg-editor.html | 19 +++++++++++++
 editor/svg-editor.js   | 62 ++++++++++++++++++++++--------------------
 editor/svgcanvas.js    | 23 ++++++++++------
 4 files changed, 73 insertions(+), 39 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index ad910fde..9298afba 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -94,6 +94,10 @@
 	display: none;
 }
 
+#svg_editor #rect_panel {
+	display: none;
+}
+
 #svg_editor #text_panel {
 	display: none;
 }
@@ -102,6 +106,10 @@
 	vertical-align:12px;
 }
 
+#svg_editor #rect_panel .rect_tool {
+	vertical-align:12px;
+}
+
 #svg_editor .tool_button, #svg_editor .tool_button_current {
 	height: 24px;
 	width: 24px;
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index b77d6776..8044cd37 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -40,6 +40,25 @@
 	
 	<!-- FIXME: need a separator image -->
 
+	<!-- TODO: also add x, y, width, height -->
+	<div id="rect_panel">
+		<label class="rect_tool" >Radius:</label>
+		<!-- TODO: turn this into a spinner control! -->
+		<select id="rect_radius" class="rect_tool" title="Change Rectangle Corner Radius" alt="Corner Radius">
+			<option selected="selected" value="0">0</option>
+			<option value="1">1</option>
+			<option value="2">2</option>
+			<option value="3">3</option>
+			<option value="5">5</option>
+			<option value="7">7</option>
+			<option value="10">10</option>
+			<option value="15">15</option>
+			<option value="20">20</option>
+		</select>
+	</div>
+	
+	<!-- TODO: add a circle_panel, ellipse_panel, line_panel -->
+
 	<div id="text_panel">
 		<select id="font_family" class="text_tool" title="Change Font Family">
 			<option selected="selected" value="serif">serif</option>
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index ebbcc474..44b85d78 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -14,7 +14,6 @@ function svg_edit_setup() {
 	var selectedElement = null;
 	var selectedChanged = function(window,elem) {
 		selectedElement = elem;
-		
 		if (elem != null) {
 		
 			// always set the mode of the editor to select because
@@ -22,16 +21,6 @@ function svg_edit_setup() {
 			// select mode and this event fires - we need our UI to be in sync
 			setSelectMode();
 			
-			// update contextual tools here
-			$('#tool_delete').show();
-			if (elem.tagName == "text") {
-				// jquery's show() always sets display to block
-				$('#text_panel').show().css("display", "inline");
-			}
-			else {
-				$('#text_panel').hide();
-			}
-
 			// update fill color
 			var fillColor = elem.getAttribute("fill");
 			if (fillColor == null || fillColor == "" || fillColor == "none") {
@@ -81,28 +70,37 @@ function svg_edit_setup() {
 			if (strokeDashArray == null || strokeDashArray == "") {
 				strokeDashArray = "none";
 			}
-			$('#stroke_style').val(strokeDashArray);
-			
-			if (elem.tagName == "text") {
-				$('.text_tool').removeAttr('disabled');
-				$('#font_family').val(elem.getAttribute("font-family"));
-				$('#font_size').val(elem.getAttribute("font-size"));
-				$('#text').val(elem.textContent);
-				$('#text').focus();
-				$('#text').select();
-			}
-			else {
-				$('.text_tool').attr('disabled', "disabled");
-			}
+			$('#stroke_style').val(strokeDashArray);			
 		} // if (elem != null)
-		else {
-			// nothing is now selected
-			// update contextual tools here
-			$('#tool_delete').hide();
-			$('#text_panel').hide();
-		}
+		
+		updateContextPanel();
 	}
 
+	function updateContextPanel() {
+		var elem = selectedElement;
+		$('#tool_delete').hide();
+		$('#rect_panel').hide();
+		$('#text_panel').hide();
+		if (elem != null) {
+			$('#tool_delete').show();
+			// update contextual tools here
+			switch(elem.tagName) {
+				case "rect":
+					$('#rect_panel').show().css("display", "inline");
+					break;
+				case "text":
+					// jquery's show() always sets display to block
+					$('#text_panel').show().css("display", "inline");
+					$('#font_family').val(elem.getAttribute("font-family"));
+					$('#font_size').val(elem.getAttribute("font-size"));
+					$('#text').val(elem.textContent);
+					$('#text').focus();
+					$('#text').select();
+					break;
+			}
+		}	
+	}
+	
 	$('#text').focus( function(){ textBeingEntered = true; } );
 	$('#text').blur( function(){ textBeingEntered = false; } );
 
@@ -151,6 +149,10 @@ function svg_edit_setup() {
 	$('#text').keyup(function(){
 		svgCanvas.setTextContent(this.value);
 	});
+	
+	$('#rect_radius').change(function(){
+		svgCanvas.setRectRadius(this.options[this.selectedIndex].value);
+	});
 
 	$('.palette_item').click(function(){
 		color = $(this).css('background-color');
diff --git a/editor/svgcanvas.js b/editor/svgcanvas.js
index 31b00c68..4996a94e 100644
--- a/editor/svgcanvas.js
+++ b/editor/svgcanvas.js
@@ -71,6 +71,10 @@ function SvgCanvas(c)
 			element.removeAttribute('stroke-opacity');
 		if (element.getAttribute('stroke-width') == '1')
 			element.removeAttribute('stroke-width');
+		if (element.getAttribute('rx') == '0')
+			element.removeAttribute('rx')
+		if (element.getAttribute('ry') == '0')
+			element.removeAttribute('ry')
 	}
 
 	var addSvgElementFromJson = function(data) {
@@ -328,21 +332,14 @@ function SvgCanvas(c)
 						"stroke-dasharray": current_stroke_style,
 						"stroke-opacity": current_stroke_opacity,
 						"fill-opacity": current_fill_opacity,
-						"opacity": current_opacity / 2,
+						// fix for bug where text elements were always 50% opacity
+						"opacity": current_opacity,
 						"font-size": current_font_size,
 						"font-family": current_font_family,
 					}
 				});
 				newText.textContent = "text";
 				break;
-/*
-			case "delete":
-				var t = evt.target;
-				if (t == svgroot) return;
-				t.parentNode.removeChild(t);
-				call("deleted",t);
-				break;
-*/
 		}
 	}
 
@@ -731,6 +728,14 @@ function SvgCanvas(c)
 		}
 	}
 	
+	this.setRectRadius = function(val) {
+		if (selected != null && selected.tagName == "rect") {
+			selected.setAttribute("rx", val);
+			selected.setAttribute("rx", val);
+			call("changed", selected);
+		}
+	}
+	
 	$(container).mouseup(mouseUp);
 	$(container).mousedown(mouseDown);
 	$(container).mousemove(mouseMove);