Add an id input field in the context panel. Users can see and change the ID of elements now

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

editor/svg-editor.html

@@ -155,6 +155,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<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>
+				<span>id:</span>
+				<input id="elem_id" class="attr_changer" data-attr="id" size="10" type="text" title="Identify the element"/>
+			</label>
 		</div>
 		<div class="toolset" id="tool_opacity">
 			<label>

editor/svg-editor.js

@@ -665,6 +665,7 @@ function svg_edit_setup() {
 	};	
 
 	// updates the toolbar (colors, opacity, etc) based on the selected element
+	// This function also updates the opacity and id elements that are in the context panel
 	var updateToolbar = function() {
 		if (selectedElement != null && 
 			selectedElement.tagName != "image" &&
@@ -727,6 +728,7 @@ function svg_edit_setup() {
 			var opac_perc = ((selectedElement.getAttribute("opacity")||1.0)*100);
 			$('#group_opacity').val(opac_perc);
 			$('#opac_slider').slider('option', 'value', opac_perc);
+			$('#elem_id').val(selectedElement.id);
 		}
 		
 		updateToolButtonState();
@@ -1033,8 +1035,18 @@ function svg_edit_setup() {
 			$.alert(uiStrings.invalidAttrValGiven);
 			this.value = selectedElement.getAttribute(attr);
 			return false;
-		} 
-		svgCanvas.changeSelectedAttribute(attr, val);
+		}
+		// if the user is changing the id, then de-select the element first
+		// change the ID, then re-select it with the new ID
+		if (attr == "id") {
+			var elem = selectedElement;
+			svgCanvas.clearSelection();
+			elem.id = val;
+			svgCanvas.addToSelection([elem],true);
+		}
+		else {
+			svgCanvas.changeSelectedAttribute(attr, val);
+		}
 	});
 	
 	// Prevent selection of elements when shift-clicking

editor/svgcanvas.js

@@ -1066,6 +1066,20 @@ function BatchCommand(text) {
 						if(re.test(val)) valid = true;
 					});
 				}
+			} else if (attr == "id") {
+				// if we're trying to change the id, make sure it's not already present in the doc
+				// and the id value is valid.
+
+				var result = false;
+				// because getElem() can throw an exception in the case of an invalid id
+				// (according to http://www.w3.org/TR/xml-id/ IDs must be a NCName)
+				// we wrap it in an exception and only return true if the ID was valid and
+				// not already present
+				try {
+					var elem = getElem(val);
+					result = (elem == null);
+				} catch(e) {}
+				return result;
 			} else valid = true;			
 			
 			return valid;
@@ -5637,6 +5651,11 @@ function BatchCommand(text) {
 	// Returns:
 	// This function returns false if the import was unsuccessful, true otherwise.
 
+	// TODO: properly handle if namespace is introduced by imported content (must add to svgcontent
+	//       and update all prefixes in the imported node)
+	// TODO: properly handle recalculating dimensions, recalculateDimensions() doesn't handle
+	//       arbitrary transform lists, but makes some assumptions about how the transform list 
+	//       was obtained
 	// TODO: import should happen in top-left of current zoomed viewport	
 	// TODO: create a new layer for the imported SVG
 	this.importSvgString = function(xmlString) {
@@ -8186,4 +8205,5 @@ var Utils = {
 		catch(e){ throw new Error("Error parsing XML string"); };
 		return out;
 	}
+
 };