Fixed issue 68 by adding Convert to Path button, also included Reorient Path button

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

editor/images/svg_edit_icons.svg

@@ -511,6 +511,41 @@
  </svg>
 </g>
 
+<g id="to_path">
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient y2="0.46875" x2="0.42969" y1="0.10156" x1="0.10547" id="svg_105">
+   <stop stop-color="#ff0000" offset="0"/>
+   <stop stop-opacity="0" stop-color="#ff0000" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g>
+  <title>Layer 1</title>
+  <circle cx="21" cy="21.3125" r="18.44531" id="svg_120" fill="url(#svg_105)" stroke="#000000"/>
+  <path fill="none" stroke="#000000" d="m2.875,21.3125c-0.375,-9.25 7.75,-18.875 17.75,-18" id="svg_115"/>
+  <line x1="25.375" y1="3.0625" x2="8.5" y2="3.0625" id="svg_116" stroke="#808080" fill="none"/>
+  <line x1="2.625" y1="24.75" x2="2.625" y2="9.8125" id="svg_117" stroke="#808080" fill="none"/>
+  <circle cx="8.5" cy="2.9375" r="1.95313" fill="#00ffff" stroke="#0000ff" stroke-width="0.5" id="svg_118"/>
+  <circle cx="2.625" cy="9.8125" r="1.95313" fill="#00ffff" stroke="#0000ff" stroke-width="0.5" id="svg_119"/>
+  <circle cx="20.875" cy="3.1875" r="2.5" id="svg_112" fill="#00ffff" stroke="#0000ff"/>
+  <circle cx="2.875" cy="21.0625" r="2.5" fill="#00ffff" stroke="#0000ff" id="svg_114"/>
+ </g>
+</svg>
+</g>
+
+<g id="reorient">
+<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+  <linearGradient y2="1" x2="1" y1="1" x1="0" id="svg_113">
+   <stop stop-opacity="0" stop-color="#0000ff" offset="0"/>
+   <stop stop-opacity="1" stop-color="#507ece" offset="1"/>
+  </linearGradient>
+ </defs>
+  <rect stroke-dasharray="2,2" stroke="#0000ff" fill="none" id="svg_108" height="19.125" width="18.625" y="2.625" x="2.875"/>
+  <rect transform="rotate(45, 12.2344, 12.1719)" stroke="#000000" fill="url(#svg_113)" id="svg_107" height="6.125" width="16" y="9.10848" x="4.23267"/>
+</svg>
+</g>
+
 <g id="group">
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>

editor/svg-editor.html

@@ -106,6 +106,8 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<div class="tool_sep"></div>
 		<div class="push_button" id="tool_move_top" title="Move to Top [Shift+Up]"></div>
 		<div class="push_button" id="tool_move_bottom" title="Move to Bottom [Shift+Down]"></div>
+		<div class="push_button" id="tool_topath" title="Convert to Path"></div>
+		<div class="push_button" id="tool_reorient" title="Reorient path"></div>
 		<div class="tool_sep"></div>
 
 		<label id="group_opacityLabel" class="selected_tool" for="group_opacity">opac:</label>

editor/svg-editor.js

@@ -342,7 +342,7 @@ function svg_edit_setup() {
 		if (svgCanvas.getMode() == 'rotate' && elem != null) {
 			$('#angle').val(svgCanvas.getRotationAngle(elem));
 			return;
-		} else if(svgCanvas.addedNew && elem != null && elem.nodeName == 'image') {
+		} else if(svgCanvas.addedNew && elem != null && elname == 'image') {
 			promptImgURL();
 		}
 		var is_node = elem ? (elem.id && elem.id.indexOf('pathpointgrip') == 0) : false;
@@ -350,17 +350,19 @@ function svg_edit_setup() {
 		$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
 			#ellipse_panel, #line_panel, #text_panel, #image_panel').hide();
 		if (elem != null) {
-			$('#angle').val(svgCanvas.getRotationAngle(elem));
+			var elname = elem.nodeName;
+			var angle = svgCanvas.getRotationAngle(elem);
+			$('#angle').val(angle);
 			
 			if(!is_node) {
 				$('#selected_panel').show();
 				// Elements in this array already have coord fields
-				if($.inArray(elem.nodeName, ['line', 'circle', 'ellipse']) != -1) {
+				if($.inArray(elname, ['line', 'circle', 'ellipse']) != -1) {
 					$('#xy_panel').hide();
 				} else {
 					var x,y;
 					// Get BBox vals for g, polyline and path
-					if($.inArray(elem.nodeName, ['g', 'polyline', 'path']) != -1) {
+					if($.inArray(elname, ['g', 'polyline', 'path']) != -1) {
 						var bb = svgCanvas.getStrokedBBox([elem]);
 						x = bb.x;
 						y = bb.y;
@@ -372,6 +374,11 @@ function svg_edit_setup() {
 					$('#selected_y').val(y || 0);
 					$('#xy_panel').show();
 				}
+				
+				// Elements in this array cannot be converted to a path
+				var no_path = $.inArray(elname, ['image', 'text', 'path', 'g']) == -1;
+				$('#tool_topath').toggle(no_path);
+				$('#tool_reorient').toggle(elname == 'path');
 			} else {
 				var point = svgCanvas.getNodePoint();
 				if(point) {
@@ -874,6 +881,18 @@ function svg_edit_setup() {
 		}
 	};
 	
+	var convertToPath = function() {
+		if (selectedElement != null) {
+			svgCanvas.convertToPath();
+		}
+	}
+	
+	var reorientPath = function() {
+		if (selectedElement != null) {
+			svgCanvas.reorientPath();
+		}
+	}
+
 	var moveSelected = function(dx,dy) {
 		if (selectedElement != null || multiselected) {
 			svgCanvas.moveSelectedElements(dx,dy);
@@ -1358,10 +1377,12 @@ function svg_edit_setup() {
 	$('#tool_docprops').click(showDocProperties);
 	$('#tool_delete').click(deleteSelected);
 	$('#tool_delete_multi').click(deleteSelected);
+	$('#tool_reorient').click(reorientPath);
 	$('#tool_node_clone').click(clonePathNode);
 	$('#tool_node_delete').click(deletePathNode);
 	$('#tool_move_top').click(moveToTopSelected);
 	$('#tool_move_bottom').click(moveToBottomSelected);
+	$('#tool_topath').click(convertToPath);
 	$('#tool_undo').click(clickUndo);
 	$('#tool_redo').click(clickRedo);
 	$('#tool_clone').click(clickClone);
@@ -2184,6 +2205,8 @@ function setSVGIcons() {
 			'#layer_delete,#tool_delete,#tool_delete_multi,#tool_node_delete':'delete',
 			'#tool_move_top':'move_top',
 			'#tool_move_bottom':'move_bottom',
+			'#tool_topath':'to_path',
+			'#tool_reorient':'reorient',
 			'#tool_group':'group',
 			'#tool_ungroup':'ungroup',
 			

editor/svgcanvas.js

@@ -2447,6 +2447,9 @@ function BatchCommand(text) {
 							xform.setTranslate(dx,dy);
 							if(tlist.numberOfItems) {
 								tlist.replaceItem(xform, 0);
+								// TODO: Webkit returns null here, find out why
+// 								console.log(selected.getAttribute("transform"))
+
 							} else {
 								tlist.appendItem(xform);
 							}
@@ -2709,6 +2712,29 @@ function BatchCommand(text) {
 		}
 	}
 	
+	this.reorientPath = function() {
+		var elem = selectedElements[0];
+		if(!elem) return;
+		var angle = canvas.getRotationAngle(elem);
+		if(angle == 0) return;
+		var batchCmd = new BatchCommand("Reorient path");
+		var changes = {
+			d: elem.getAttribute('d'),
+			transform: elem.getAttribute('transform')
+		};
+		batchCmd.addSubCommand(new ChangeElementCommand(elem, changes));
+		canvas.clearSelection();
+		resetPathOrientation(elem, angle);
+		addCommandToHistory(batchCmd);
+		current_path = elem;
+		resetPointGrips();
+		setPointContainerTransform("");	// Maybe this should be in resetPointGrips?
+		removeAllPointGripsFromPath();
+
+		canvas.addToSelection([elem], true);
+		call("changed", selectedElements);
+	}
+	
 	// Rotate all points of a path and remove its transform value
 	var resetPathOrientation = function(path, angle) {
 		if(path == null || path.nodeName != 'path') return false;
@@ -2744,10 +2770,20 @@ function BatchCommand(text) {
 	}
 
 	// Convert an element to a path
-	var convertToPath = function(elem, getBBox, angle) {
+	this.convertToPath = function(elem, getBBox, angle) {
-		if(elem == null) return;
+		if(elem == null) {
+			var elems = selectedElements;
+			$.each(selectedElements, function(i, elem) {
+				if(elem) canvas.convertToPath(elem);
+			});
+			return;
+		}
+		
+		if(!getBBox) {
+			var batchCmd = new BatchCommand("Convert element to Path");
+		}
+		
 		var attrs = getBBox?{}:{
-			"id": elem.id,
 			"fill": cur_shape.fill,
 			"fill-opacity": cur_shape.fill_opacity,
 			"stroke": cur_shape.stroke,
@@ -2763,9 +2799,19 @@ function BatchCommand(text) {
 			"attr": attrs
 		});
 		
-		path.setAttribute("transform",elem.getAttribute("transform"));
+		var eltrans = elem.getAttribute("transform");
+		if(eltrans) {
+			path.setAttribute("transform",eltrans);
+		}
+		
+		var id = elem.id;
+		var parent = elem.parentNode;
+		if(elem.nextSibling) {
+			parent.insertBefore(path, elem);
+		} else {
+			parent.appendChild(path);
+		}
 		
-		elem.parentNode.appendChild(path);
 		var d = '';
 		
 		var joinSegs = function(segs) {
@@ -2859,8 +2905,17 @@ function BatchCommand(text) {
 		
 		if(!getBBox) {
 			// Replace the current element with the converted one
+			batchCmd.addSubCommand(new RemoveElementCommand(elem, parent));
+			batchCmd.addSubCommand(new InsertElementCommand(path));
+
+			canvas.clearSelection();
 			elem.parentNode.removeChild(elem)
+			path.setAttribute('id', id);
 			path.removeAttribute("visibility");
+			canvas.addToSelection([path], true);
+			
+			addCommandToHistory(batchCmd);
+			
 		} else {
 			// Get the correct BBox of the new path, then discard it
 			resetPathOrientation(path, angle);
@@ -5600,13 +5655,13 @@ function BatchCommand(text) {
 						// Get the BBox from the raw path for these elements
 						var elemNames = ['ellipse','path','line','polyline','polygon'];
 						if($.inArray(elem.tagName, elemNames) != -1) {
-							bb = good_bb = convertToPath(elem, true, angle);
+							bb = good_bb = canvas.convertToPath(elem, true, angle);
 						} else if(elem.tagName == 'rect') {
 							// Look for radius
 							var rx = elem.getAttribute('rx');
 							var ry = elem.getAttribute('ry');
 							if(rx || ry) {
-								bb = good_bb = convertToPath(elem, true, angle);
+								bb = good_bb = canvas.convertToPath(elem, true, angle);
 							}
 						}