Fix Issue 233: Highlight the layer when its name is hovered

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

editor/svg-editor.js

@@ -1257,7 +1257,6 @@ function svg_edit_setup() {
 	$('#sidepanel_handle')
 		.mousedown(function(evt) {sidedrag = evt.pageX;})
 		.mouseup(function(evt) {sidedrag = -1;});
-	// TODO: is there a better way to do this splitter without attaching mouse handlers here?
 	$('#svg_editor')
 		.mouseup(function(){sidedrag=-1;})
 		.mouseout(function(evt){
@@ -1308,6 +1307,26 @@ function svg_edit_setup() {
 		layerpanel.css('width', parseInt(layerpanel.css('width'))+deltax);
 		centerCanvasIfNeeded();
 	};
+	
+	// this function highlights the layer passed in (by fading out the other layers)
+	// if no layer is passed in, this function restores the other layers
+	var toggleHighlightLayer = function(layerNameToHighlight) {
+		var curNames = new Array(svgCanvas.getNumLayers());
+		for (var i = 0; i < curNames.length; ++i) { curNames[i] = svgCanvas.getLayer(i); }
+	
+		if (layerNameToHighlight) {
+			for (var i = 0; i < curNames.length; ++i) {
+				if (curNames[i] != layerNameToHighlight) {
+					svgCanvas.setLayerOpacity(curNames[i], 0.5);
+				}
+			}
+		}
+		else {
+			for (var i = 0; i < curNames.length; ++i) {
+				svgCanvas.setLayerOpacity(curNames[i], 1.0);
+			}
+		}
+	};
 
 	var populateLayers = function(){
 		var layerlist = $('#layerlist tbody');
@@ -1333,13 +1352,20 @@ function svg_edit_setup() {
 			$('#layerlist tr:first').addClass("layersel");
 		}
 		// handle selection of layer
-		$('#layerlist td.layername').click(function(evt){
+		$('#layerlist td.layername')
-			$('#layerlist tr.layer').removeClass("layersel");
+			.click(function(evt){
-			var row = $(this.parentNode);
+				$('#layerlist tr.layer').removeClass("layersel");
-			row.addClass("layersel");
+				var row = $(this.parentNode);
-			svgCanvas.setCurrentLayer(this.textContent);
+				row.addClass("layersel");
-			evt.preventDefault();
+				svgCanvas.setCurrentLayer(this.textContent);
-		});
+				evt.preventDefault();
+			})
+			.mouseover(function(evt){
+				toggleHighlightLayer(this.textContent);
+			})
+			.mouseout(function(evt){
+				toggleHighlightLayer();
+			});
 		$('#layerlist td.layervis').click(function(evt){
 			var row = $(this.parentNode).prevAll().length;
 			var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();

editor/svgcanvas.js

@@ -3406,6 +3406,51 @@ function BatchCommand(text) {
 	var getLayerName = function(g) {
 		return $("title",g).text();
 	};
+	
+	// Function: getLayerOpacity
+	// Returns the opacity of the given layer.  If the input name is not a layer, null is returned.
+	//
+	// Parameters: 
+	// layername - name of the layer on which to get the opacity
+	//
+	// Returns:
+	// The opacity value of the given layer.  This will be a value between 0.0 and 1.0, or null
+	// if layername is not a valid layer
+	this.getLayerOpacity = function(layername) {
+		for (var i = 0; i < all_layers.length; ++i) {
+			if (all_layers[i][0] == layername) {
+				var g = all_layers[i][1];
+				var opacity = g.getAttribute("opacity");
+				if (!opacity) {
+					opacity = "1.0";
+				}
+				return parseFloat(opacity);
+			}
+		}
+		
+		return null;
+	};
+	
+	// Function: setLayerOpacity
+	// Sets the opacity of the given layer.  If the input name is not a layer, nothing happens.
+	// This is not an undo-able action.  NOTE: this function exists solely to apply
+	// a highlighting/de-emphasis effect to a layer, when it is possible for a user to affect
+	// the opacity of a layer, we will need to allow this function to produce an undo-able action.
+	// If opacity is not a value between 0.0 and 1.0, then nothing happens.
+	//
+	// Parameters:
+	// layername - name of the layer on which to set the opacity
+	// opacity - a float value in the range 0.0-1.0
+	this.setLayerOpacity = function(layername, opacity) {
+		if (opacity < 0.0 || opacity > 1.0) return;
+		for (var i = 0; i < all_layers.length; ++i) {
+			if (all_layers[i][0] == layername) {
+				var g = all_layers[i][1];
+				g.setAttribute("opacity", opacity);
+				break;
+			}
+		}
+	};
 
 	// Function: clear
 	// Clears the current document.  This is not an undoable action.