Issue 73: Make New/Delete layer undo-able. Implement Rename layer. Ensure layers have unique names

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

editor/svg-editor.js

@@ -79,6 +79,9 @@ function svg_edit_setup() {
 		// we tell it to skip focusing the text control if the
 		// text element was previously in focus
 		updateContextPanel();
+		
+		// TODO: ensure that the current layer is selected
+		console.log(svgCanvas.getCurrentLayer());
 	};
 	
 	var zoomChanged = function(window, bbox) {
@@ -655,7 +658,6 @@ function svg_edit_setup() {
 	var clickUndo = function(){
 		if (svgCanvas.getUndoStackSize() > 0) {
 			svgCanvas.undo();
-			console.log('yooya');
 			populateLayers();
 		}
 	};
@@ -1083,7 +1085,15 @@ function svg_edit_setup() {
 	});
 	
 	$('#layer_new').click(function() {
-		svgCanvas.createLayer("New Layer");
+		var curNames = new Array(svgCanvas.getNumLayers());
+		for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); }
+	
+		var newName = prompt("Please enter a unique layer name","");
+		if (jQuery.inArray(newName, curNames) != -1) {
+			alert("There is already a layer named that!");
+			return;
+		}
+		svgCanvas.createLayer(newName);
 		updateContextPanel();
 		populateLayers();
 		$('#layerlist option:last').attr("selected", "selected");
@@ -1097,9 +1107,27 @@ function svg_edit_setup() {
 		}
 	});
 
+	$('#layer_rename').click(function() {
+		var oldName = $('#layerlist option:selected').attr("value");
+		var newName = prompt("Please enter the new layer name","");
+		if (oldName == newName) {
+			alert("Layer already has that name");
+			return;
+		}
+
+		var curNames = new Array(svgCanvas.getNumLayers());
+		for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); }
+		if (jQuery.inArray(newName, curNames) != -1) {
+			alert("There is already a layer named that!");
+			return;
+		}
+		
+		svgCanvas.renameLayer(oldName, newName);
+		populateLayers();
+	});
+
 	var populateLayers = function(){
 		var layerlen = svgCanvas.getNumLayers();
-		console.log('layerlen=' + layerlen);
 		$('#layerlist').empty();
 		for (var layer = 0; layer < layerlen; ++layer) {
 			var name = svgCanvas.getLayer(layer);

editor/svgcanvas.js

@@ -1,10 +1,10 @@
 /*
 Issue 73 (Layers) TODO:
 
-- consider getting rid of the <title> element and using @id like AI (easier to browse the DOM in FB)
+- do pop-up window that asks for layer name and rename layer, ensure that is undo-able
+- ensure that pointer-events work properly with layers named the same
 - create API for SvgCanvas that allows the client to:
 	- change layer order
-- ensure New/Delete are undo-able
 - create a mouseover region on the sidepanels that is resizable and affects all children within
 - default the side panel to closed
 - add a button that opens the side panel?
@@ -81,6 +81,10 @@ function ChangeElementCommand(elem, attrs, text) {
 				}
 			}
 		}
+		// if we are changing layer names, re-identify all layers
+		if (this.elem.tagName == "title" && this.elem.parentNode.parentNode == svgzoom) {
+			canvas.identifyLayers();
+		}		
 		return true;
 	};
 
@@ -110,6 +114,10 @@ function ChangeElementCommand(elem, attrs, text) {
 				}
 			}
 		}
+		// if we are changing layer names, re-identify all layers
+		if (this.elem.tagName == "title" && this.elem.parentNode.parentNode == svgzoom) {
+			canvas.identifyLayers();
+		}		
 		return true;
 	};
 
@@ -749,6 +757,7 @@ function BatchCommand(text) {
 	};
 
 	var call = function(event, arg) {
+		console.log(events[event]);
 		if (events[event]) {
 			return events[event](this,arg);
 		}
@@ -2617,6 +2626,9 @@ function BatchCommand(text) {
 		return true;
 	};
 
+	// Layer API Functions
+	// TODO: change layer order
+	
 	this.identifyLayers = function() {
 		all_layers = [];
 		var numchildren = svgzoom.childNodes.length;
@@ -2636,19 +2648,19 @@ function BatchCommand(text) {
 		}
 		walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:all");});
 	};
-	// Layer API Functions
-	// TODO: change layer order
 	
 	this.createLayer = function(name) {
 		var batchCmd = new BatchCommand("Create Layer");
 		current_layer = svgdoc.createElementNS(svgns, "g");
 		var layer_title = svgdoc.createElementNS(svgns, "title");
-		layer_title.appendChild(svgdoc.createTextNode(name));
+		layer_title.textContent = name; //appendChild(svgdoc.createTextNode(name));
 		current_layer.appendChild(layer_title);
 		current_layer = svgzoom.appendChild(current_layer);
 		all_layers.push([name,current_layer]);
 		batchCmd.addSubCommand(new InsertElementCommand(current_layer));
 		addCommandToHistory(batchCmd);
+		canvas.clearSelection();
+		call("changed", [current_layer]);
 	};
 	
 	this.deleteCurrentLayer = function() {
@@ -2669,6 +2681,8 @@ function BatchCommand(text) {
 			all_layers = new_layers;
 			current_layer = all_layers[all_layers.length-1][1];
 			addCommandToHistory(batchCmd);
+			canvas.clearSelection();
+			call("changed", [svgzoom]);
 			return true;
 		}
 		return false;
@@ -2711,6 +2725,7 @@ function BatchCommand(text) {
 			var oldLayer = current_layer;
 			// setCurrentLayer will return false if the name doesn't already exists
 			if (!canvas.setCurrentLayer(newname)) {
+				var batchCmd = new BatchCommand("Rename Layer");
 				// find the index of the layer
 				for (var i = 0; i < all_layers.length; ++i) {
 					if (all_layers[i][1] == oldLayer) break;
@@ -2724,9 +2739,12 @@ function BatchCommand(text) {
 					// found the <title> element, now append all the
 					if (child && child.tagName == "title") {
 						// wipe out old name 
-						// TODO: make this undo-able
 						while (child.firstChild) { child.removeChild(child.firstChild); }
-						child.appendChild( svgdoc.createTextNode(newname) );
+						child.textContent = newname;
+
+						batchCmd.addSubCommand(new ChangeElementCommand(child, {"#text":oldname}));
+						addCommandToHistory(batchCmd);
+						call("changed", [oldLayer]);
 						return true;
 					}
 				}
@@ -2743,13 +2761,7 @@ function BatchCommand(text) {
 				var child = g.childNodes.item(i);
 				// found the <title> element, now append all the
 				if (child && child.tagName == "title") {
-					var tlen = child.childNodes.length;
+					name = child.textContent;
-					for (var j = 0; j < tlen; ++j) {
-						var textNode = child.childNodes.item(j);
-						if (textNode.nodeType == 3) {
-							name += textNode.nodeValue;
-						}
-					}
 					break;
 				}
 			}