align elements (work in progress)

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

editor/svg-editor.html

@@ -53,13 +53,15 @@
 		<img class="tool_button tool_button_disabled" id="tool_redo" src="images/redo.png" title="Redo [Y]" alt="Redo"/>
 	</div>
 
-	<!-- Buttons when something a single element is selected -->
+	<!-- Buttons when a single element is selected -->
 	<div id="selected_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_clone" src="images/copy.png" title="Clone Element [C]" alt="Copy"/>
+		<img class="tool_button" id="tool_clone" src="images/clone.png" title="Clone Element [C]" alt="Copy"/>
 		<img class="tool_button" id="tool_delete" src="images/delete.png" title="Delete Element [Delete/Backspace]" alt="Delete"/>
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<img class="tool_button" id="tool_move_top" src="images/move_top.png" title="Move to Top [Shift+Up]" alt="Top"/>
 		<img class="tool_button" id="tool_move_bottom" src="images/move_bottom.png" title="Move to Bottom [Shift+Down]" alt="Bottom"/>
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
 		<select id="group_opacity" class="selected_tool" title="Change selected item opacity">
 			<option selected="selected" value="1">100 %</option>
 			<option value="0.9">90 %</option>
@@ -76,11 +78,19 @@
 		<input id="angle" class="selected_tool" title="Change rotation angle" alt="Rotation Angle" size="2" value="0" type="text"/>
 	</div>
 
-	<!-- Buttons when something a single element is selected -->
+	<!-- Buttons when multiple elements are selected -->
 	<div id="multiselected_panel">
 		<img class="tool_sep" src="images/sep.png" alt="|"/>
-		<img class="tool_button" id="tool_clone_multi" src="images/copy.png" title="Clone Elements [C]" alt="Clone"/>
+		<img class="tool_button" id="tool_clone_multi" src="images/clone.png" title="Clone Elements [C]" alt="Clone"/>
 		<img class="tool_button" id="tool_delete_multi" src="images/delete.png" title="Delete Selected Elements [Delete/Backspace]" alt="Delete"/>
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
+		<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"/>
 	</div>
 
 	<div id="rect_panel">

editor/svg-editor.js

@@ -475,6 +475,25 @@ function svg_edit_setup() {
 		svgCanvas.cloneSelectedElements();
 	};
 	
+	var clickAlignLeft = function(){
+		svgCanvas.alignSelectedElements('l');
+	};
+	var clickAlignCenter = function(){
+		svgCanvas.alignSelectedElements('c');
+	};
+	var clickAlignRight = function(){
+		svgCanvas.alignSelectedElements('r');
+	};
+	var clickAlignTop = function(){
+		svgCanvas.alignSelectedElements('t');
+	};
+	var clickAlignMiddle = function(){
+		svgCanvas.alignSelectedElements('m');
+	};
+	var clickAlignBottom = function(){
+		svgCanvas.alignSelectedElements('b');
+	};
+	
 	var showSourceEditor = function(){
 		if (editingsource) return;
 		editingsource = true;
@@ -533,6 +552,12 @@ function svg_edit_setup() {
 	$('#tool_redo').click(clickRedo);
 	$('#tool_clone').click(clickClone);
 	$('#tool_clone_multi').click(clickClone);
+	$('#tool_alignleft').click(clickAlignLeft);
+	$('#tool_aligncenter').click(clickAlignCenter);
+	$('#tool_alignright').click(clickAlignRight);
+	$('#tool_aligntop').click(clickAlignTop);
+	$('#tool_alignmiddle').click(clickAlignMiddle);
+	$('#tool_alignbottom').click(clickAlignBottom);
 	// these two lines are required to make Opera work properly with the flyout mechanism
 	$('#tools_rect_show').click(clickSquare);
 	$('#tools_ellipse_show').click(clickCircle);
@@ -565,12 +590,12 @@ function svg_edit_setup() {
 	$('#tool_paste').mousedown(function(){$('#tool_paste').addClass('tool_button_current');});
 	$('#tool_paste').mouseup(function(){$('#tool_paste').removeClass('tool_button_current');});
 	$('#tool_paste').mouseout(function(){$('#tool_paste').removeClass('tool_button_current');});
-	$('#tool_copy').mousedown(function(){$('#tool_copy').addClass('tool_button_current');});
-	$('#tool_copy').mouseup(function(){$('#tool_copy').removeClass('tool_button_current');});
-	$('#tool_copy').mouseout(function(){$('#tool_copy').removeClass('tool_button_current');});
-	$('#tool_copy_multi').mousedown(function(){$('#tool_copy').addClass('tool_button_current');});
-	$('#tool_copy_multi').mouseup(function(){$('#tool_copy').removeClass('tool_button_current');});
-	$('#tool_copy_multi').mouseout(function(){$('#tool_copy').removeClass('tool_button_current');});
+	$('#tool_clone').mousedown(function(){$('#tool_clone').addClass('tool_button_current');});
+	$('#tool_clone').mouseup(function(){$('#tool_clone').removeClass('tool_button_current');});
+	$('#tool_clone').mouseout(function(){$('#tool_clone').removeClass('tool_button_current');});
+	$('#tool_clone_multi').mousedown(function(){$('#tool_clone').addClass('tool_button_current');});
+	$('#tool_clone_multi').mouseup(function(){$('#tool_clone').removeClass('tool_button_current');});
+	$('#tool_clone_multi').mouseout(function(){$('#tool_clone').removeClass('tool_button_current');});
 	$('#tool_move_top').mousedown(function(){$('#tool_move_top').addClass('tool_button_current');});
 	$('#tool_move_top').mouseup(function(){$('#tool_move_top').removeClass('tool_button_current');});
 	$('#tool_move_top').mouseout(function(){$('#tool_move_top').removeClass('tool_button_current');});