Move-To-Layer control now lives in the Layers panel. Restructured layout of layers panel and added a non-functional handle. Changed pointer-events to be 'inherit' for all elements inside the layer. Clear selection after moving elements to a layer.

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

editor/locale/lang.en.js

@@ -114,8 +114,7 @@
 {"id":"curve_segments","textContent":"Curve"},
 {"id":"tool_node_clone","title":"Clone 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"}
+{"id":"selLayerLabel","textContent":"Move elements to:"},
+{"id":"selLayerNames","title":"Move selected elements to a different layer"},
+{"id":"sidepanel_handle","title":"Drag left/right to resize Layer panel","textContent":"L a y e r s"}
 ];

editor/svg-editor.css

@@ -71,21 +71,56 @@ body {
 
 #svg_editor #sidepanels {
 	display: inline-block;
-	background-color: #E8E8E8;
 	position:absolute;
 	top: 75px;
 	bottom: 60px;
 	right: 0px;
-	width: 126px;
+	width: 136px;
+	padding: 12px;
 	border-color: #808080;
 	border-style: solid;
 	border-width: 1px;
+	border-left: none;
+}
+
+#svg_editor #layerpanel {
+	display: inline-block;
+	background-color: #E8E8E8;
+	position:absolute;
+	top: 0px;
+	bottom: 0px;
+	right: 0px;
+	width: 126px;
 	overflow-y: scroll;
 	padding-left: 12px;
 	padding-right: 12px;
 	margin: 0px;
 }
 
+#svg_editor #sidepanel_handle {
+	display: inline-block;
+	position: absolute;
+	background-color: #E8E8E8;
+	left: 0px;
+	top: 40%;
+	width: 1em;
+	border-style: solid;
+	border-color: #666;
+	border-width: 1px;
+	padding: 2px 1px 2px 4px;
+	cursor: pointer;
+	-moz-user-select: none;
+}
+
+#svg_editor #sidepanel_handle:hover {
+	border-width: 2px;
+	margin-top: -1px;
+	margin-left: -1px;
+}
+#svg_editor #sidepanel_handle * {
+	cursor: pointer;
+	-moz-user-select: none;
+}
 #svg_editor #layerbuttons {
 	margin: 0px;
 	padding: 0px;
@@ -160,6 +195,10 @@ body {
 	font-weight: bold;
 }
 
+#svg_editor #selLayerNames {
+	display: block;
+}
+
 #svg_editor div.palette_item {
 	height: 16px;
 	width: 16px;

editor/svg-editor.html

@@ -66,7 +66,12 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 				<td class="layername">Layer 1</td>
 			</tr>
 		</table>
+		<span id="selLayerLabel">Move elements to:</span>
+		<select id="selLayerNames" title="Move selected elements to a different layer" disabled="disabled">
+			<option selected="selected" value="layer1">Layer 1</option>
+		</select>
 	</div>
+	<div id="sidepanel_handle" onselectstart="return false;" title="Drag left/right to resize Layer panel">L a y e r s</div>
 </div>
 
 <div id="logo">
@@ -117,10 +122,6 @@ 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 -->
@@ -143,10 +144,6 @@ 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

@@ -197,27 +197,15 @@ function svg_edit_setup() {
 			$('#angle').val(svgCanvas.getRotationAngle(elem));
 			return;
 		}
+
+		var is_node = elem ? (elem.id && elem.id.indexOf('polypointgrip') == 0) : false;
 		
 		$('#selected_panel, #multiselected_panel, #g_panel, #rect_panel, #circle_panel,\
 			#ellipse_panel, #line_panel, #text_panel, #image_panel, #poly_node_panel').hide();
 		if (elem != null) {
 			$('#angle').val(svgCanvas.getRotationAngle(elem));
 
-			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();
@@ -281,18 +269,6 @@ function svg_edit_setup() {
 			}
 		} // 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();
 		}
 		
@@ -311,6 +287,25 @@ function svg_edit_setup() {
 		}
 		
 		svgCanvas.addedNew = false;
+
+		if ( (elem && !is_node)	|| multiselected) {
+			// update the selected elements' layer
+			$('#selLayerNames')[0].removeAttribute('disabled');
+			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');
+				}
+			}
+		}
+		else {
+			$('#selLayerNames')[0].setAttribute('disabled', 'disabled');
+		}
+		
 	};
 
 	$('#text').focus( function(){ textBeingEntered = true; } );
@@ -371,10 +366,11 @@ function svg_edit_setup() {
 	});
 
 	// fired when user wants to move elements to another layer
-	$('#selLayerNames,#mselLayerNames').change(function(){
+	$('#selLayerNames').change(function(){
 		var destLayer = this.options[this.selectedIndex].value;
 		if (destLayer) {
 			svgCanvas.moveSelectedToLayer(destLayer);
+			svgCanvas.clearSelection();
 		}
 	});
 

editor/svgcanvas.js

@@ -1519,7 +1519,7 @@ function BatchCommand(text) {
 						"stroke-linecap": "round",
 						"stroke-linejoin": "round",
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				freehand_min_x = x;
@@ -1540,7 +1540,7 @@ function BatchCommand(text) {
 						"height": 0,
 						"id": getNextId(),
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
         		newImage.setAttributeNS(xlinkns, "href", "images/logo.png");
@@ -1567,7 +1567,7 @@ function BatchCommand(text) {
 						"stroke-opacity": cur_shape.stroke_opacity,
 						"fill-opacity": cur_shape.fill_opacity,
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				break;
@@ -1588,7 +1588,7 @@ function BatchCommand(text) {
 						"stroke-opacity": cur_shape.stroke_opacity,
 						"fill": "none",
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				break;
@@ -1608,7 +1608,7 @@ function BatchCommand(text) {
 						"stroke-opacity": cur_shape.stroke_opacity,
 						"fill-opacity": cur_shape.fill_opacity,
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				break;
@@ -1629,7 +1629,7 @@ function BatchCommand(text) {
 						"stroke-opacity": cur_shape.stroke_opacity,
 						"fill-opacity": cur_shape.fill_opacity,
 						"opacity": cur_shape.opacity / 2,
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				break;
@@ -1652,7 +1652,7 @@ function BatchCommand(text) {
 						"font-size": cur_text.font_size,
 						"font-family": cur_text.font_family,
 						"text-anchor": "middle",
-						"style": "pointer-events:all"
+						"style": "pointer-events:inherit"
 					}
 				});
 				newText.textContent = "text";
@@ -2672,7 +2672,7 @@ function BatchCommand(text) {
 							"opacity": cur_shape.opacity,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
-							"style": "pointer-events:all"
+							"style": "pointer-events:inherit"
 						}
 					});
 					call("changed",[element]);
@@ -2697,7 +2697,7 @@ function BatchCommand(text) {
 							"opacity": cur_shape.opacity,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"fill-opacity": cur_shape.fill_opacity,
-							"style": "pointer-events:all"
+							"style": "pointer-events:inherit"
 						}
 					});
 					call("changed",[element]);
@@ -2742,7 +2742,7 @@ function BatchCommand(text) {
 							"stroke-dasharray": cur_shape.stroke_style,
 							"stroke-opacity": cur_shape.stroke_opacity,
 							"opacity": cur_shape.opacity / 2,
-							"style": "pointer-events:all"
+							"style": "pointer-events:inherit"
 						}
 					});
 					// set stretchy line to first point
@@ -3138,7 +3138,8 @@ function BatchCommand(text) {
 			current_layer = svgzoom.appendChild(current_layer);
 			all_layers.push( [newname, current_layer] );
 		}
-		walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:all");});
+		walkTree(current_layer, function(e){e.setAttribute("style","pointer-events:inherit");});
+		current_layer.setAttribute("style","pointer-events:all");
 	};
 	
 	// Function: createLayer
@@ -3238,9 +3239,9 @@ function BatchCommand(text) {
 			if (name == all_layers[i][0]) {
 				if (current_layer != all_layers[i][1]) {
 					canvas.clearSelection();
-					walkTree(current_layer,function(e){e.setAttribute("style","pointer-events:none");});
+					current_layer.setAttribute("style", "pointer-events:none");
 					current_layer = all_layers[i][1];
-					walkTree(current_layer,function(e){e.setAttribute("style","pointer-events:all");});
+					current_layer.setAttribute("style", "pointer-events:all");
 				}
 				return true;
 			}