Fix Issue 73: Implement Layers

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

editor/svg-editor.css

@@ -144,9 +144,15 @@ body {
 	background-repeat: no-repeat;
 	background-position: 3px center;
 	width: 22px;
+	cursor:pointer;
 }
 #svg_editor #layerlist td.layerinvis {
 	background-image: none;
+	cursor:pointer;
+}
+
+#svg_editor #layerlist td.layername {
+	cursor: pointer;
 }
 
 #svg_editor #layerlist tr.layersel td.layername {

editor/svg-editor.js

@@ -1175,8 +1175,13 @@ function svg_edit_setup() {
 		while (layer--) {
 			var name = svgCanvas.getLayer(layer);
 			// contenteditable=\"true\"
+			if (svgCanvas.getLayerVisibility(name)) {
 				layerlist.append("<tr class=\"layer\"><td class=\"layervis\"/><td class=\"layername\" >" + name + "</td></tr>");
 			}
+			else {
+				layerlist.append("<tr class=\"layer\"><td class=\"layervis layerinvis\"/><td class=\"layername\" >" + name + "</td></tr>");
+			}
+		}
 		// if we only have one layer, then always make sure that layer is selected
 		// (This is really only required upon first initialization)
 		if (layerlist.size() == 1) {
@@ -1189,6 +1194,18 @@ function svg_edit_setup() {
 			row.addClass("layersel");
 			svgCanvas.setCurrentLayer(this.textContent);
 		});
+		$('#layerlist td.layervis').click(function(evt){
+			var row = $(this.parentNode).prevAll().length;
+			var name = $('#layerlist tr.layer:eq(' + row + ') td.layername').text();
+			var vis = $(this).hasClass('layerinvis');
+			svgCanvas.setLayerVisibility(name, vis);
+			if (vis) {
+				$(this).removeClass('layerinvis');
+			}
+			else {
+				$(this).addClass('layerinvis');
+			}
+		});
 		
 		// if there were too few rows, let's add a few to make it not so lonely
 		var num = 5 - $('#layerlist tr.layer').size();

editor/svgcanvas.js

@@ -1,17 +1,3 @@
-/*
-Issue 73 (Layers) TODO:
-
-- Fit To Content must look at all layers
-- convert select/options to tables, handle 'selection' of rows
-- add visibility icon to table as a column
-- determine how to toggle visibility of layers (UI-wise)
-- hide the pointer-events stuff from the serialized SVG source somehow
-- 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?
-
-*/
-
 if(!window.console) {
 	window.console = {};
 	window.console.log = function(str) {};
@@ -28,7 +14,7 @@ var svgWhiteList = {
 	"circle": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "r", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
 	"defs": [],
 	"ellipse": ["cx", "cy", "fill", "fill-opacity", "id", "opacity", "rx", "ry", "stroke", "stroke-dasharray", "stroke-opacity", "stroke-width", "transform"],
-	"g": ["id", "transform"],
+	"g": ["id", "display", "transform"],
 	"image": ["height", "id", "opacity", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
 	"line": ["fill", "fill-opacity", "id", "opacity", "stroke", "stroke-dasharray", "stroke-linecap", "stroke-opacity", "stroke-width",  "transform", "x1", "x2", "y1", "y2"],
 	"linearGradient": ["id", "gradientTransform", "gradientUnits", "spreadMethod", "x1", "x2", "y1", "y2"],
@@ -2787,29 +2773,9 @@ function BatchCommand(text) {
 			if (oldpos == all_layers.length) { return false; }
 			
 			if (oldpos != newpos) {
-				// TODO: we could use the following loop to quickly re-establish all_layers
-				// but i think walking the DOM inside identifyLayers() is less bug-prone :)
-				/*
-				var new_layers = new Array(all_layers.length);
-				var trackIndex = 0;
-				for (var j = 0; j < new_layers.length; ++j) {
-					// new position of current_layer
-					if (newpos == j) {
-						new_layers[j] = all_layers[oldpos];
-					}
-					else {
-						// make sure we skip over the old position
-						if (trackIndex == oldpos) trackIndex++;
-						new_layers[j] = all_layers[trackIndex];
-						trackIndex++;
-					}
-				}
-				*/
-				
 				// if our new position is below us, we need to insert before the node after newpos
 				var refLayer = null;
 				var oldNextSibling = current_layer.nextSibling;
-				console.log([oldpos,newpos,all_layers.length]);
 				if (newpos > oldpos ) {
 					if (newpos < all_layers.length-1) {
 						refLayer = all_layers[newpos+1][1];
@@ -2833,6 +2799,43 @@ function BatchCommand(text) {
 		return false;
 	};
 	
+	this.getLayerVisibility = 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;
+		return (layer.getAttribute("display") != "none");
+	};
+	
+	this.setLayerVisibility = function(layername, bVisible) {
+		// 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 oldDisplay = layer.getAttribute("display");
+		if (!oldDisplay) oldDisplay = "inline";
+		layer.setAttribute("display", bVisible ? "inline" : "none");
+		addCommandToHistory(new ChangeElementCommand(layer, {"display":oldDisplay}, "Layer Visibility"));
+		
+		if (layer == current_layer) {
+			canvas.clearSelection();
+		}
+//		call("changed", [selected]);
+		
+		return true;
+	};
+	
 	// used internally
 	var getLayerName = function(g) {
 		var name = "";