create 4 modes for align: selected, largest, smallest, page

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

editor/svg-editor.css

@@ -141,6 +141,10 @@ div.color_block {
 	vertical-align: 12px;
 }
 
+#svg_editor #multiselected_panel .selected_tool {
+	vertical-align: 12px;
+}
+
 #svg_editor #text_panel .text_tool {
 	vertical-align: 12px;
 }

editor/svg-editor.html

@@ -88,10 +88,16 @@
 		<img class="tool_button" id="tool_alignleft" src="images/align-left.png" title="Align Left" alt="Left"/>
 		<img class="tool_button" id="tool_aligncenter" src="images/align-center.png" title="Align Center" alt="Center"/>
 		<img class="tool_button" id="tool_alignright" src="images/align-right.png" title="Align Right" alt="Right"/>
-		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<img class="tool_button" id="tool_aligntop" src="images/align-top.png" title="Align Top" alt="Top"/>
 		<img class="tool_button" id="tool_alignmiddle" src="images/align-middle.png" title="Align Middle" alt="Middle"/>
 		<img class="tool_button" id="tool_alignbottom" src="images/align-bottom.png" title="Align Bottom" alt="Bottom"/>
+		<span class="selected_tool">relative to:</span>
+		<select id="align_relative_to" class="selected_tool" title="Align relative to ...">
+		<option value="selected">selected objects</option>
+		<option value="largest">largest object</option>
+		<option value="smallest">smallest object</option>
+		<option value="page">page</option>
+		</select>
 	</div>
 
 	<div id="rect_panel">

editor/svg-editor.js

@@ -545,22 +545,22 @@ function svg_edit_setup() {
 	};
 
 	var clickAlignLeft = function(){
-		svgCanvas.alignSelectedElements('l');
+		svgCanvas.alignSelectedElements('l', $('#align_relative_to option:selected').val() );
 	};
 	var clickAlignCenter = function(){
-		svgCanvas.alignSelectedElements('c');
+		svgCanvas.alignSelectedElements('c', $('#align_relative_to option:selected').val() );
 	};
 	var clickAlignRight = function(){
-		svgCanvas.alignSelectedElements('r');
+		svgCanvas.alignSelectedElements('r', $('#align_relative_to option:selected').val() );
 	};
 	var clickAlignTop = function(){
-		svgCanvas.alignSelectedElements('t');
+		svgCanvas.alignSelectedElements('t', $('#align_relative_to option:selected').val() );
 	};
 	var clickAlignMiddle = function(){
-		svgCanvas.alignSelectedElements('m');
+		svgCanvas.alignSelectedElements('m', $('#align_relative_to option:selected').val() );
 	};
 	var clickAlignBottom = function(){
-		svgCanvas.alignSelectedElements('b');
+		svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() );
 	};
 
 	var showSourceEditor = function(){

editor/svgcanvas.js

@@ -2681,16 +2681,17 @@ function SvgCanvas(c)
 	};
 
 	// aligns selected elements (type is a char - see switch below for explanation)
-	this.alignSelectedElements = function(type) {
+	// relative_to can be "selected", "largest", "smallest", "page"
+	this.alignSelectedElements = function(type, relative_to) {
 		var bboxes = [], angles = [];
 		var minx = Number.MAX_VALUE, maxx = Number.MIN_VALUE, miny = Number.MAX_VALUE, maxy = Number.MIN_VALUE;
+		var curwidth = Number.MIN_VALUE, curheight = Number.MIN_VALUE;
 		var len = selectedElements.length;
 		if (!len) return;
 		for (var i = 0; i < len; ++i) {
 			if (selectedElements[i] == null) break;
 			var elem = selectedElements[i];
 			bboxes[i] = this.getBBox(elem);
-			
 			// TODO: could make the following code block as part of getBBox() and add a parameter 
 			//       to that function
 			// if element is rotated, get angle and rotate the 4 corners of the bbox and get
@@ -2728,12 +2729,45 @@ function SvgCanvas(c)
 			}
 			
 			// now bbox is axis-aligned and handles rotation
+			switch (relative_to) {
+				case 'smallest':
+					if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth > bboxes[i].width) ||
+					     (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight > bboxes[i].height) ) {
+						minx = bboxes[i].x;
+						miny = bboxes[i].y;
+						maxx = bboxes[i].x + bboxes[i].width;
+						maxy = bboxes[i].y + bboxes[i].height;
+						curwidth = bboxes[i].width;
+						curheight = bboxes[i].height;
+					}
+					break;
+				case 'largest':
+					if ( (type == 'l' || type == 'c' || type == 'r') && (curwidth == Number.MIN_VALUE || curwidth < bboxes[i].width) ||
+					     (type == 't' || type == 'm' || type == 'b') && (curheight == Number.MIN_VALUE || curheight < bboxes[i].height) ) {
+						minx = bboxes[i].x;
+						miny = bboxes[i].y;
+						maxx = bboxes[i].x + bboxes[i].width;
+						maxy = bboxes[i].y + bboxes[i].height;
+						curwidth = bboxes[i].width;
+						curheight = bboxes[i].height;
+					}
+					break;
+				default: // 'selected'
 					if (bboxes[i].x < minx) minx = bboxes[i].x;
 					if (bboxes[i].y < miny) miny = bboxes[i].y;
 					if (bboxes[i].x + bboxes[i].width > maxx) maxx = bboxes[i].x + bboxes[i].width;
 					if (bboxes[i].y + bboxes[i].height > maxy) maxy = bboxes[i].y + bboxes[i].height;
+					break;
+			}
 		} // loop for each element to find the bbox and adjust min/max
 
+		if (relative_to == 'page') {
+			minx = 0;
+			miny = 0;
+			maxx = svgroot.getAttribute('width');
+			maxy = svgroot.getAttribute('height');
+		}
+
 		var dx = new Array(len);
 		var dy = new Array(len);
 		for (var i = 0; i < len; ++i) {