Fix Issue 227: Move elements to a different layer. Also document all of the Layer API functions of SvgCanvas.

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

editor/locale/lang.en.js

@@ -113,5 +113,9 @@
 {"id":"straight_segments","textContent":"Straight"},
 {"id":"curve_segments","textContent":"Curve"},
 {"id":"tool_node_clone","title":"Clone Node"},
-{"id":"tool_node_delete","title":"Delete Node"}
+{"id":"tool_node_delete","title":"Delete Node"},
+{"id":"selLayerLabel","textContent":"layer:"},
+{"id":"selLayerNames","title":"Move selected elements to a different layer"}
+{"id":"mselLayerLabel","textContent":"layer:"},
+{"id":"mselLayerNames","title":"Move selected elements to a different layer"}
 ];

editor/svg-editor.html

@@ -117,6 +117,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		</select>
 		<span id="angleLabel" class="selected_tool">angle:</span>
 		<input id="angle" class="selected_tool" title="Change rotation angle" size="2" value="0" type="text"/>
+		<span id="selLayerLabel" class="selected_tool">layer:</span>
+		<select id="selLayerNames" class="selected_tool" title="Move selected elements to a different layer">
+			<option selected="selected" value="layer1">Layer 1</option>
+		</select>
 	</div>
 
 	<!-- Buttons when multiple elements are selected -->
@@ -139,6 +143,10 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<option id="page" value="page">page</option>
 		</select>
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
+		<span id="mselLayerLabel" class="selected_tool">layer:</span>
+		<select id="mselLayerNames" class="selected_tool" title="Move selected elements to a different layer">
+			<option selected="selected" value="layer1">Layer 1</option>
+		</select>
 		<img class="tool_button" id="tool_group" src="images/shape_group.png" title="Group Elements [G]" alt="Group"/>
 	</div>
 

editor/svg-editor.js

@@ -190,6 +190,7 @@ function svg_edit_setup() {
 	// updates the context panel tools based on the selected element
 	var updateContextPanel = function() {
 		var elem = selectedElement;
+		var currentLayer = svgCanvas.getCurrentLayer();
 		
 		// No need to update anything else in rotate mode
 		if (svgCanvas.getMode() == 'rotate' && elem != null) {
@@ -205,6 +206,18 @@ function svg_edit_setup() {
 			var is_node = (elem.id && elem.id.indexOf('polypointgrip') == 0);
 
 			if(!is_node) {
+				// update the selected elements' layer
+				var opts = $('#selLayerNames option');
+				for (var i = 0; i < opts.length; ++i) {
+					var opt = opts[i];
+					if (currentLayer == opt.textContent) {
+						opt.setAttribute('selected', 'selected');
+					}
+					else {
+						opt.removeAttribute('selected');
+					}
+				}
+				
 				$('#selected_panel').show();
 			} else {
 				$('#poly_node_panel').show();
@@ -231,7 +244,6 @@ function svg_edit_setup() {
 			var el_name = elem.tagName;
 			
 			if(panels[el_name]) {
-			
 				var cur_panel = panels[el_name];
 				
 				
@@ -261,14 +273,26 @@ function svg_edit_setup() {
 					if (svgCanvas.addedNew) {
 						$('#text').focus().select();
 					}
-				}
+				} // text
 				else if(el_name == 'image') {
           			var xlinkNS="http://www.w3.org/1999/xlink";
           			$('#image_url').val(elem.getAttributeNS(xlinkNS, "href"));
-        		}
+        		} // image
 			}
 		} // if (elem != null)
 		else if (multiselected) {
+			// update the selected layer
+			var opts = $('#mselLayerNames option');
+			for (var i = 0; i < opts.length; ++i) {
+				var opt = opts[i];
+				if (currentLayer == opt.textContent) {
+					opt.setAttribute('selected', 'selected');
+				}
+				else {
+					opt.removeAttribute('selected');
+				}
+			}
+				
 			$('#multiselected_panel').show();
 		}
 		
@@ -343,7 +367,15 @@ function svg_edit_setup() {
 	$('select').change(function(){$(this).blur();});
 
 	$('#group_opacity').change(function(){
-		svgCanvas.setOpacity(this.options[this.selectedIndex].value);
+		svgCanvas.setOpacity();
+	});
+
+	// fired when user wants to move elements to another layer
+	$('#selLayerNames,#mselLayerNames').change(function(){
+		var destLayer = this.options[this.selectedIndex].value;
+		if (destLayer) {
+			svgCanvas.moveSelectedToLayer(destLayer);
+		}
 	});
 
 	$('#font_size').change(function(){
@@ -1214,7 +1246,11 @@ function svg_edit_setup() {
 
 	var populateLayers = function(){
 		var layerlist = $('#layerlist tbody');
+		var selLayerNames = $('#selLayerNames');
+		var mselLayerNames = $('#mselLayerNames');
 		layerlist.empty();
+		selLayerNames.empty();
+		mselLayerNames.empty();
 		var layer = svgCanvas.getNumLayers();
 		// we get the layers in the reverse z-order (the layer rendered on top is listed first)
 		while (layer--) {
@@ -1226,6 +1262,8 @@ function svg_edit_setup() {
 			else {
 				layerlist.append("<tr class=\"layer\"><td class=\"layervis layerinvis\"/><td class=\"layername\" >" + name + "</td></tr>");
 			}
+			selLayerNames.append("<option values=\"" + name + "\">" + name + "</option>");
+			mselLayerNames.append("<option values=\"" + name + "\">" + name + "</option>");
 		}
 		// if we only have one layer, then always make sure that layer is selected
 		// (This is really only required upon first initialization)

editor/svgcanvas.js

@@ -3192,6 +3192,15 @@ function BatchCommand(text) {
 		return all_layers.length;
 	};
 	
+	// Function: getLayer
+	// This function returns the name of the ith layer.  If the index is out of range,
+	// then an empty string is returned.
+	//
+	// Parameters:
+	// i - the zero-based index of the layer you are querying.
+	// 
+	// Returns:
+	// The name of the ith layer
 	this.getLayer = function(i) {
 		if (i >= 0 && i < canvas.getNumLayers()) {
 			return all_layers[i][0];
@@ -3199,6 +3208,12 @@ function BatchCommand(text) {
 		return "";
 	};
 	
+	// Function: getCurrentLayer
+	// This function returns the name of the currently selected layer.  If an error occurs,
+	// an empty string is returned.
+	//
+	// Returns:
+	// The name of the currently active layer.
 	this.getCurrentLayer = function() {
 		for (var i = 0; i < all_layers.length; ++i) {
 			if (all_layers[i][1] == current_layer) {
@@ -3208,6 +3223,15 @@ function BatchCommand(text) {
 		return "";
 	};
 	
+	// Function: setCurrentLayer
+	// This function sets the current layer.  If the name is not a valid layer name, then this
+	// function returns false.  Otherwise it returns true.  This is not an undo-able action.
+	//
+	// Parameters:
+	// name - the name of the layer you want to switch to.
+	//
+	// Returns:
+	// true if the current layer was switched, otherwise false
 	this.setCurrentLayer = function(name) {
 		name = toXml(name);
 		for (var i = 0; i < all_layers.length; ++i) {
@@ -3224,6 +3248,17 @@ function BatchCommand(text) {
 		return false;
 	};
 	
+	// Function: renameCurrentLayer
+	// This function renames the current layer.  This is an undo-able action.  If the layer name 
+	// is not valid (i.e. unique), then this function does nothing and returns false, otherwise
+	// it returns true.
+	// 
+	// Parameters:
+	// newname - the new name you want to give the current layer.  This name must be unique 
+	// among all layer names.
+	//
+	// Returns:
+	// true if the rename succeeded, false otherwise.
 	this.renameCurrentLayer = function(newname) {
 		if (current_layer) {
 			var oldLayer = current_layer;
@@ -3259,6 +3294,17 @@ function BatchCommand(text) {
 		return false;
 	};
 	
+	// Function: setCurrentLayerPosition
+	// This function changes the position of the current layer to the new value.  This is an
+	// undo-able action.  If the new index is not valid, this function does nothing and returns
+	// false, otherwise it returns true.
+	//
+	// Parameters:
+	// newpos - The zero-based index of the new position of the layer.  This should be between
+	// 0 and (number of layers - 1)
+	// 
+	// Returns:
+	// true if the current layer position was changed, false otherwise.
 	this.setCurrentLayerPosition = function(newpos) {
 		if (current_layer && newpos >= 0 && newpos < all_layers.length) {
 			for (var oldpos = 0; oldpos < all_layers.length; ++oldpos) {
@@ -3290,10 +3336,18 @@ function BatchCommand(text) {
 			}
 		}
 		
-		// TODO: if i differs, then MoveElementCommand
 		return false;
 	};
 	
+	// Function: getLayerVisibility
+	// This function returns whether the layer is visible.  If the layer name is not valid, then
+	// this function returns false.
+	//
+	// Parameters:
+	// layername - the name of the layer which you want to query.
+	//
+	// Returns:
+	// The visibility state of the layer, or false if the layer name was invalid.
 	this.getLayerVisibility = function(layername) {
 		// find the layer
 		var layer = null;
@@ -3307,6 +3361,16 @@ function BatchCommand(text) {
 		return (layer.getAttribute("display") != "none");
 	};
 	
+	// Function: setLayerVisibility
+	// This function sets the visibility of the layer.  This is an undo-able action.  If the 
+	// layer name is not valid, this function return false, otherwise it returns true.
+	//
+	// Parameters:
+	// layername - the name of the layer to change the visibility
+	// bVisible - true/false, whether the layer should be visible
+	//
+	// Returns:
+	// true if the layer's visibility was set, false otherwise
 	this.setLayerVisibility = function(layername, bVisible) {
 		// find the layer
 		var layer = null;
@@ -3331,6 +3395,46 @@ function BatchCommand(text) {
 		return true;
 	};
 	
+	// Function: moveSelectedToLayer
+	// This function moves the selected elements to layername.  This is an undo-able action.
+	// If the name is not a valid layer name, then false is returned.  Otherwise it returns true.
+	//
+	// Parameters:
+	// layername - the name of the layer you want to which you want to move the selected elements
+	//
+	// Returns:
+	// true if the selected elements were moved to the layer, false otherwise.
+	this.moveSelectedToLayer = function(layername) {
+		// find the layer
+		var layer = null;
+		for (var i = 0; i < all_layers.length; ++i) {
+			if (all_layers[i][0] == layername) {
+				layer = all_layers[i][1];
+				break;
+			}
+		}
+		if (!layer) return false;
+		
+		var batchCmd = new BatchCommand("Move Elements to Layer");
+		
+		// loop for each selected element and move it
+		var selElems = selectedElements;
+		var i = selElems.length;
+		while (i--) {
+			var elem = selElems[i];
+			if (!elem) continue;
+			var oldNextSibling = elem.nextSibling;
+			// TODO: this is pretty brittle!
+			var oldLayer = elem.parentNode;
+			layer.appendChild(elem);
+			batchCmd.addSubCommand(new MoveElementCommand(elem, oldNextSibling, oldLayer));
+		}
+		
+		addCommandToHistory(batchCmd);
+		
+		return true;
+	};
+	
 	// used internally
 	var getLayerName = function(g) {
 		return $("title",g).text();