Fix Issue 55: height of bottom toolbar. Also improve code for recalculating outline/dimensions. Also fix it so that multiple elements can be moved using the arrow keys

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

editor/svg-editor.css

@@ -258,13 +258,11 @@ div.color_block {
 
 #svg_editor #tools_bottom_1 {
 	width: 100px;
-	height: 100px;
 	float: left;
 }
 
 #svg_editor #tools_bottom_2 {
 	width: 250px;
-	height: 100px;
 	float: left;
 }
 

editor/svg-editor.js

@@ -350,7 +350,7 @@ function svg_edit_setup() {
 	}
 
 	var moveSelected = function(dx,dy) {
-		if (selectedElement != null) {
+		if (selectedElement != null || multiselected) {
 			svgCanvas.moveSelectedElement(dx,dy);
 		}
 	}

editor/svgcanvas.js

@@ -108,7 +108,8 @@ function BatchCommand(text) {
 	this.stack = [];
 	
 	this.apply = function() {
-		for (var i = 0; i < this.stack.length; ++i) {
+		var len = this.stack.length;
+		for (var i = 0; i < len; ++i) {
 			this.stack[i].apply();
 		}
 	};
@@ -551,22 +552,38 @@ function SvgCanvas(c)
 		return out;
 	}; // end svgToString()
 
-	var recalculateSelectedDimensions = function() {
+	var recalculateAllSelectedDimensions = function() {
 		var text = (current_resize_mode == "none" ? "position" : "size");
 		var batchCmd = new BatchCommand(text);
-		for (var i = 0; i < selectedElements.length; ++i) {
+
+		var i = selectedElements.length;
+		while(i--) {
+			var cmd = recalculateSelectedDimensions(i);
+			if (cmd) {
+				batchCmd.addSubCommand(cmd);
+			}
+		}
+
+		if (!batchCmd.isEmpty()) {
+			addCommandToHistory(batchCmd);
+			call("changed", selectedElements);
+		}
+	};
+	
+	// this function returns the command which resulted from th selected change
+	var recalculateSelectedDimensions = function(i) {
 		var selected = selectedElements[i];
-			if (selected == null) break;
+		if (selected == null) return null;
 		var selectedBBox = selectedBBoxes[i];
 		var box = selected.getBBox();
 
 		// if we have not moved/resized, then immediately leave
 		if (box.x == selectedBBox.x && box.y == selectedBBox.y &&
 			box.width == selectedBBox.width && box.height == selectedBBox.height) {
-				return;
+			return null;
 		}
 
-			// after this point, we have some change
+		// after this point, we have some change to this element
 		
 		var remapx = function(x) {return ((x-box.x)/box.width)*selectedBBox.width + selectedBBox.x;}
 		var remapy = function(y) {return ((y-box.y)/box.height)*selectedBBox.height + selectedBBox.y;}
@@ -659,20 +676,7 @@ function SvgCanvas(c)
 			break;
 		}
 		if (changes) {
-				batchCmd.addSubCommand(new ChangeElementCommand(selected, changes, text));
+			return new ChangeElementCommand(selected, changes);
-			}
-		} // for each selected element
-		
-		if (!batchCmd.isEmpty()) addCommandToHistory(batchCmd);
-		call("changed", selectedElements);
-	};
-
-	var recalculateSelectedOutline = function() {
-		var len = selectedElements.length;
-		for (var i = 0; i < len; ++i) {
-			var selected = selectedElements[i];
-			if (selected == null) break;
-			selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);
 		}
 	};
 
@@ -1031,7 +1035,7 @@ function SvgCanvas(c)
 
 				selected.setAttribute("transform", ("translate(" + (left+tx) + "," + (top+ty) + 
 					") scale(" + (sx) + "," + (sy) + ") translate(" + (-left) + "," + (-top) + ")"));
-				recalculateSelectedOutline();
+				selectorManager.requestSelector(selected).resize(selectedBBox);
 				break;
 			case "text":
 				shape.setAttribute("x", x);
@@ -1085,7 +1089,8 @@ function SvgCanvas(c)
 		// TODO: should we fire the change event here?  I'm thinking only fire
 		// this event when the user mouses up.  That's when the action (create,
 		// move, resize, draw) has finished
-		// fire changed event
+		// Only question is whether in Wave Gadget mode whether we want to see the 
+		// person live-dragging the element around (for instance)
 //		call("changed", selected);
 	};
 
@@ -1093,7 +1098,7 @@ function SvgCanvas(c)
 	//   and store it on the Undo stack
 	// - in move/resize mode, the element's attributes which were affected by the move/resize are
 	//   identified, a ChangeElementCommand is created and stored on the stack for those attrs
-	//   this is done in recalculateSelectedDimensions()
+	//   this is done in when we recalculate the selected dimensions()
 	var mouseUp = function(evt)
 	{
 		if (!started) return;
@@ -1129,8 +1134,11 @@ function SvgCanvas(c)
 						
 						selectorManager.requestSelector(selected).showGrips(selected.tagName != "text");
 					}
-					recalculateSelectedDimensions();
+					recalculateAllSelectedDimensions();
-					recalculateSelectedOutline();
+					var i = selectedElements.length;
+					while(i--) {
+						selectorManager.requestSelector(selectedElements[i]).resize(selectedBBoxes[i]);
+					}
 					// we return immediately from select so that the obj_num is not incremented
 					return;
 				}				
@@ -1230,8 +1238,7 @@ function SvgCanvas(c)
 		// remove the selected outline before serializing
 		this.clearSelection();
 		var str = "<?xml version=\"1.0\" standalone=\"no\"?>\n";
-		// see http://jwatt.org/svg/authoring/#doctype-declaration
+		// no need for doctype, see http://jwatt.org/svg/authoring/#doctype-declaration
-//		str += "<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">\n";
 		str += svgToString(svgroot, 0);
 		this.saveHandler(str);
 	};
@@ -1441,6 +1448,9 @@ function SvgCanvas(c)
 		}
 	};
 
+	// TODO: to prevent paths/lines from getting fill values set, we can special-case
+	// the fill attribute here and if tagName == "path" or "line" then ignore it?
+	// ^^^ is a hack though
 	this.changeSelectedAttribute = function(attr, val) {
 		var batchCmd = new BatchCommand("Change " + attr);
 		var len = selectedElements.length;
@@ -1453,8 +1463,7 @@ function SvgCanvas(c)
 				if (attr == "#text") selected.textContent = val;
 				else selected.setAttribute(attr, val);
 				selectedBBoxes[i] = selected.getBBox();
-				// TODO: do the select calculation in here directly
+				selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);				
-				recalculateSelectedOutline();
 				var changes = {};
 				changes[attr] = oldval;
 				batchCmd.addSubCommand(new ChangeElementCommand(selected, changes, attr));
@@ -1515,16 +1524,25 @@ function SvgCanvas(c)
 		}
 	};
 
-	// TODO: get this to work with multiple selected elements
 	this.moveSelectedElement = function(dx,dy) {
-		var selected = selectedElements[0];
+		var batchCmd = new BatchCommand("position");
+		var i = selectedElements.length;
+		while (i--) {
+			var selected = selectedElements[i];
 			if (selected != null) {
-			selectedBBoxes[0] = selected.getBBox();
+				selectedBBoxes[i] = selected.getBBox();
-			selectedBBoxes[0].x += dx;
+				selectedBBoxes[i].x += dx;
-			selectedBBoxes[0].y += dy;
+				selectedBBoxes[i].y += dy;
-
+				var cmd = recalculateSelectedDimensions(i);
-			recalculateSelectedDimensions();
+				if (cmd) {
-			recalculateSelectedOutline();
+					batchCmd.addSubCommand(cmd);
+				}
+				selectorManager.requestSelector(selected).resize(selectedBBoxes[i]);				
+			}
+		}
+		if (!batchCmd.isEmpty()) {
+			addCommandToHistory(batchCmd);
+			call("changed", selectedElements);
 		}
 	};