make square/circle selecting more cooler :-)

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@21 eee81c28-f429-11dd-99c0-75d572ba1ddd

svg-editor.css

@@ -116,7 +116,7 @@
 	border-bottom: 1px solid #808080;
 }
 
-#tools_rect, #tools_circle {
+#tools_rect, #tools_ellipse {
 	position: absolute;
 	display: none;
 	height: 28px;
@@ -126,9 +126,33 @@
 	float: left;
 }
 
-#tools_rect div, #tools_circle div {
+#tool_square {
+	background: 2px 2px url('images/square.png') no-repeat;
+}
+
+#tool_rect {
+	background: 2px 2px url('images/rect.png') no-repeat;
+}
+
+#tool_fhrect {
+	background: 2px 2px url('images/path.png') no-repeat;
+}
+
+#tool_circle {
+	background: 2px 2px url('images/circle.png') no-repeat;
+}
+
+#tool_ellipse {
+	background: 2px 2px url('images/ellipse.png') no-repeat;
+}
+
+#tool_fhellipse {
+	background: 2px 2px url('images/path.png') no-repeat;
+}
+
+#tools_rect div, #tools_ellipse div {
 	float: left;
-	background: #E8E8E8;
+	background-color: #E8E8E8;
 	border-left: 1px solid #FFFFFF;
 	border-top: 1px solid #FFFFFF;
 	border-right: 1px solid #808080;

svg-editor.html

@@ -19,15 +19,15 @@
 </div>
 
 <div id="tools_rect">
-<div id="tool_square">square</div>
-<div id="tool_rect">rectangle</div>
-<div id="tool_fhrect">freehand</div>
+<div id="tool_square"></div>
+<div id="tool_rect"></div>
+<div id="tool_fhrect"></div>
 </div>
 
-<div id="tools_circle">
-<div id="tool_circle">circle</div>
-<div id="tool_ellipse">ellipse</div>
-<div id="tool_fhellipse">freehand</div>
+<div id="tools_ellipse">
+<div id="tool_circle"></div>
+<div id="tool_ellipse"></div>
+<div id="tool_fhellipse"></div>
 </div>
 
 <div id="tools">
@@ -38,8 +38,8 @@
 -->
 <img class="tool_button_current" id="tool_path" src="images/path.png" /><br/>
 <img class="tool_button" id="tool_line" src="images/line.png" /><br/>
-<img class="tool_button" id="tools_rect_show" src="images/rect.png" /><br/>
-<img class="tool_button" id="tools_circle_show" src="images/circle.png" /><br/>
+<img class="tool_button" id="tools_rect_show" src="images/square.png" /><br/>
+<img class="tool_button" id="tools_ellipse_show" src="images/circle.png" /><br/>
 <img class="tool_button" id="tool_delete" src="images/delete.png" /><hr/>
 <img class="tool_button" id="tool_clear" src="images/clear.png" /><br/>
 <img class="tool_button" id="tool_submit" src="images/submit.png" /><br/>

svg-editor.js

@@ -10,8 +10,8 @@ $(document).ready(function(){
 
 	var pos = $('#tools_rect_show').position();
 	$('#tools_rect').css({'left': pos.left+2, 'top': pos.top+2});
-	pos = $('#tools_circle_show').position();
-	$('#tools_circle').css({'left': pos.left+2, 'top': pos.top+2});
+	pos = $('#tools_ellipse_show').position();
+	$('#tools_ellipse').css({'left': pos.left+2, 'top': pos.top+2});
 
 	$('#stroke_width').change(function(){
 		SvgCanvas.setStrokeWidth(this.options[this.selectedIndex].value);
@@ -84,23 +84,23 @@ $(document).ready(function(){
 
 	$('#tool_circle').click(function(){
 		SvgCanvas.setMode('circle');
-		$('#tools_circle').hide();
+		$('#tools_ellipse').hide();
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_circle_show').addClass('tool_button_current');
+		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_ellipse').click(function(){
 		SvgCanvas.setMode('ellipse');
-		$('#tools_circle').hide();
+		$('#tools_ellipse').hide();
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_circle_show').addClass('tool_button_current');
+		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_fhellipse').click(function(){
 		SvgCanvas.setMode('fhellipse');
-		$('#tools_circle').hide();
+		$('#tools_ellipse').hide();
 		$('.tool_button_current').removeClass('tool_button_current').addClass('tool_button');
-		$('#tools_circle_show').addClass('tool_button_current');
+		$('#tools_ellipse_show').addClass('tool_button_current');
 	});
 
 	$('#tool_delete').click(function(){
@@ -163,12 +163,12 @@ $(document).ready(function(){
 		$('#tools_rect').hide();
 	});
 */
-	$('#tools_circle_show').click(function(){
-		$('#tools_circle').show();
+	$('#tools_ellipse_show').click(function(){
+		$('#tools_ellipse').show();
 	});
 /*
-	$('#tools_circle').mouseout(function(){
-		$('#tools_circle').hide();
+	$('#tools_ellipse').mouseout(function(){
+		$('#tools_ellipse').hide();
 	});
 */
 })

svgcanvas.js

@@ -194,6 +194,22 @@ function SvgCanvas(doc)
 				});
 				break;
 			case "circle":
+				started = true;
+				addSvgElementFromJson({
+					"element": "circle",
+					"attr": {
+						"cx": x,
+						"cy": y,
+						"r": 0,
+						"id": "circle_" + obj_num,
+						"fill": current_fill,
+						"stroke": current_stroke,
+						"stroke-width": current_stroke_width,
+						"stroke-dasharray": current_stroke_style,
+						"opacity": 0.5
+					}
+				});
+				break;
 			case "ellipse":
 				started = true;
 				addSvgElementFromJson({
@@ -211,7 +227,7 @@ function SvgCanvas(doc)
 						"opacity": 0.5
 					}
 				});
-			break;
+				break;
 			case "delete":
 				var t = evt.target;
 				if (t == svgroot) return;
@@ -268,12 +284,11 @@ function SvgCanvas(doc)
 				}
 				break;
 			case "circle":
-				var shape = svgdoc.getElementById("ellipse_" + obj_num);
+				var shape = svgdoc.getElementById("circle_" + obj_num);
 				var cx = shape.getAttributeNS(null, "cx");
 				var cy = shape.getAttributeNS(null, "cy");
 				var rad = Math.sqrt( (x-cx)*(x-cx) + (y-cy)*(y-cy) );
-				shape.setAttributeNS(null, "rx", rad);
-				shape.setAttributeNS(null, "ry", rad);
+				shape.setAttributeNS(null, "r", rad);
 				break;
 			case "ellipse":
 				var shape = svgdoc.getElementById("ellipse_" + obj_num);
@@ -348,6 +363,15 @@ function SvgCanvas(doc)
 				}
 				break;
 			case "circle":
+				element = svgdoc.getElementById("circle_" + obj_num);
+				if (element.getAttribute('r') == 0) {
+					element.parentNode.removeChild(element);
+					element = null;
+				} else {
+					element.setAttribute("opacity", current_opacity);
+					obj_num++;
+				}
+				break;
 			case "ellipse":
 				element = svgdoc.getElementById("ellipse_" + obj_num);
 				if (element.getAttribute('rx') == 0 &&