Fixed issue 135: Missing the ability to align a single object (relative to page). Also started converting labels to icons

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

editor/images/svg_edit_icons.svg

@@ -637,6 +637,34 @@
 </svg>
 </g>
 
+<g id="width">
+	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	  <path id="svg_6" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" stroke-width="8" stroke="#000000" fill="#000000"/>
+	</svg>
+</g>
+
+<g id="height">
+	<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+	  <path transform="rotate(90, 50, 50)" fill="#000000" stroke="#000000" stroke-width="8" d="m19,42.5l-7.5,7.5l7.5,7.5l0,-15zm0,7.5l62,0l0,-7.5l7.5,7.5l-7.5,7.5l0,-7.5" id="svg_6"/>
+	</svg>
+</g>
+
+<g id="c_radius">
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <rect stroke="#404040" fill="none" stroke-width="0.5" x="2.37501" y="2.4375" width="43.9375" height="43.9375" id="svg_1" rx="13" ry="13"/>
+  <path fill="none" stroke="#000000" d="m2.43674,15.88952l13.73722,0l0.08978,-13.46483m0.08978,14.08493" id="svg_3"/>
+  <line fill="none" stroke="#000000" x1="16.35107" y1="15.88934" x2="5.20504" y2="5.20504" id="svg_4" stroke-dasharray="2,2"/>
+</svg>
+</g>
+
+<g id="align">
+	<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
+	  <rect stroke="#606060" fill="#c0c0c0" id="svg_4" height="7" width="12" y="7.5" x="4.5"/>
+	  <rect stroke="#c15909" fill="#ef9a23" id="svg_2" height="40" width="2" y="-10" x="9.5"/>
+	  <rect stroke="#ffffff" fill="none" id="svg_5" height="5" width="10" y="8.5" x="5.5"/>
+	</svg>
+</g>
+
 <g id="align_left">
 	<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
 	  <rect stroke="#606060" fill="#ffffff" id="svg_4" height="7" width="12" y="2.5" x="2.5"/>

editor/svg-editor.css

@@ -601,6 +601,16 @@ span.zoom_tool {
 
 }
 
+#svg_editor .icon_label {
+	float: left;
+	padding-top: 3px;
+	padding-right: 3px;
+}
+
+#svg_editor .width_label {
+	padding-right: 5px;
+}
+
 #tool_bold, #tool_italic { 
 	font: bold 2.1em/1.1em serif;
 	text-align: center;
@@ -741,7 +751,8 @@ span.zoom_tool {
 }
 
 #svg_editor .stroke_tool.down div div,
-#svg_editor .stroke_tool.down button {
+#svg_editor .stroke_tool.down button,
+#tools_top .dropdown.down > * {
 	border: 1px inset gray;
 	background: #F4E284;
 }
@@ -754,6 +765,12 @@ span.zoom_tool {
 	float: left;
 }
 
+
+#tools_top .dropdown div {
+	border: 1px solid transparent;
+	margin-top: 3px;
+}
+
 #option_lists ul {
 	display: none;
 	position: absolute;
@@ -764,6 +781,15 @@ span.zoom_tool {
 	padding-left: 0;
 }
 
+#option_lists #position_opts {
+	width: 90px;
+	margin-left: -32px;
+}
+
+#option_lists #position_opts li {
+	float: left;
+}
+
 #svg_editor ul li.current {
 	background-color: #F4E284;
 }

editor/svg-editor.html

@@ -184,6 +184,11 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			</div>
 		</div>
 		
+		<div class="dropdown toolset" id="tool_position" title="Align Element to Page">
+				<div id="cur_position" class="icon_label"></div>
+				<button></button>
+		</div>		
+
 		<div id="xy_panel" class="toolset">
 			<label>
 				x: <input id="selected_x" class="attr_changer" title="Change X coordinate" size="3" data-attr="x"/>
@@ -228,25 +233,26 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 	<div id="rect_panel">
 		<div class="toolset">
 			<label>
-				<span id="rwidthLabel">width:</span>
+				<span id="rwidthLabel" class="icon_label"></span>
 				<input id="rect_width" class="attr_changer" title="Change rectangle width" size="3" data-attr="width"/>
 			</label>
 			<label>
-				<span id="rheightLabel">height:</span>
+				<span id="rheightLabel" class="icon_label"></span>
 				<input id="rect_height" class="attr_changer" title="Change rectangle height" size="3" data-attr="height"/>
 			</label>
 		</div>
-		<label id="cornerRadiusLabel">Corner Radius:
-			<input id="rect_rx" size="3" value="0" type="text" title="Change Rectangle Corner Radius" data-attr="Corner Radius"/>
+		<label id="cornerRadiusLabel" title="Change Rectangle Corner Radius">
+			<span class="icon_label"></span>
+			<input id="rect_rx" size="3" value="0" type="text" data-attr="Corner Radius"/>
 		</label>
 	</div>
 
 	<div id="image_panel">
 	<div class="toolset">
-		<label><span id="iwidthLabel">width:</span>
+		<label><span id="iwidthLabel" class="icon_label"></span>
 		<input id="image_width" class="attr_changer" title="Change image width" size="3" data-attr="width"/>
 		</label>
-		<label><span id="iheightLabel">height:</span>
+		<label><span id="iheightLabel" class="icon_label"></span>
 		<input id="image_height" class="attr_changer" title="Change image height" size="3" data-attr="height"/>
 		</label>
 	</div>
@@ -518,6 +524,15 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 		<li class="tool_button" id="linecap_square" title="Linecap: Square"></li>
 		<li class="tool_button" id="linecap_round" title="Linecap: Round"></li>
 	</ul>
+	
+	<ul id="position_opts">
+		<li class="push_button" id="tool_posleft" title="Align Left"></li>
+		<li class="push_button" id="tool_poscenter" title="Align Center"></li>
+		<li class="push_button" id="tool_posright" title="Align Right"></li>
+		<li class="push_button" id="tool_postop" title="Align Top"></li>
+		<li class="push_button" id="tool_posmiddle" title="Align Middle"></li>
+		<li class="push_button" id="tool_posbottom" title="Align Bottom"></li>
+	</ul>
 </div>
 
 
@@ -558,9 +573,9 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 			<fieldset id="change_resolution">
 				<legend id="svginfo_dim">Canvas Dimensions</legend>
 
-				<label><span id="svginfo_width">Width:</span> <input type="text" id="canvas_width" size="6"/></label>
+				<label><span id="svginfo_width">width:</span> <input type="text" id="canvas_width" size="6"/></label>
 					
-				<label><span id="svginfo_height">Height:</span> <input type="text" id="canvas_height" size="6"/></label>
+				<label><span id="svginfo_height">height:</span> <input type="text" id="canvas_height" size="6"/></label>
 				
 				<label>
 					<select id="resolution">

editor/svg-editor.js

@@ -308,12 +308,13 @@
 					'#tool_group':'group',
 					'#tool_ungroup':'ungroup',
 					
-					'#tool_alignleft':'align_left',
-					'#tool_aligncenter':'align_center',
-					'#tool_alignright':'align_right',
-					'#tool_aligntop':'align_top',
-					'#tool_alignmiddle':'align_middle',
-					'#tool_alignbottom':'align_bottom',
+					'#tool_alignleft, #tool_posleft':'align_left',
+					'#tool_aligncenter, #tool_poscenter':'align_center',
+					'#tool_alignright, #tool_posright':'align_right',
+					'#tool_aligntop, #tool_postop':'align_top',
+					'#tool_alignmiddle, #tool_posmiddle':'align_middle',
+					'#tool_alignbottom, #tool_posbottom':'align_bottom',
+					'#cur_position':'align',
 					
 					'#linecap_butt,#cur_linecap':'linecap_butt',
 					'#linecap_round':'linecap_round',
@@ -332,6 +333,10 @@
 					'#tool_source_save,#tool_docprops_save':'ok',
 					'#tool_source_cancel,#tool_docprops_cancel':'cancel',
 					
+					'#rwidthLabel, #iwidthLabel':'width',
+					'#rheightLabel, #iheightLabel':'height',
+					'#cornerRadiusLabel span':'c_radius',
+					
 					'.flyout_arrow_horiz':'arrow_right',
 					'.dropdown button, #main_button .dropdown':'arrow_down',
 					'#palette .palette_item:first, #fill_bg, #stroke_bg':'no_color'
@@ -1647,17 +1652,19 @@
 			}
 			
 			// TODO: Combine this with addDropDown or find other way to optimize
-			var addAltDropDown = function(elem, list, callback, dropUp) {
+			var addAltDropDown = function(elem, list, callback, opts) {
 				var button = $(elem);
 				var list = $(list);
 				var on_button = false;
+				var dropUp = opts.dropUp;
 				if(dropUp) {
 					$(elem).addClass('dropup');
 				}
-			
 				list.find('li').bind('mouseup', function() {
 					callback.apply(this, arguments);
-					$(this).addClass('current').siblings().removeClass('current');
+					if(!opts.multiclick) {
+						$(this).addClass('current').siblings().removeClass('current');
+					}
 				});
 				
 				$(window).mouseup(function(evt) {
@@ -1673,8 +1680,12 @@
 				
 				$(elem).bind('mousedown',function() {
 					var off = $(elem).offset();
-					off.top -= list.height();
-					off.left += 8;
+					if(dropUp) {
+						off.top -= list.height();
+						off.left += 8;
+					} else {
+						off.top += $(elem).height();
+					}
 					$(list).offset(off);
 					
 					if (!button.hasClass('down')) {
@@ -1693,6 +1704,12 @@
 				}).mouseout(function() {
 					on_button = false;
 				});
+				
+				if(opts.multiclick) {
+					list.mousedown(function() {
+						on_button = true;
+					});
+				}
 			}
 			
 			addDropDown('#font_family_dropdown', function() {
@@ -1754,7 +1771,7 @@
 				var icon = $.getSvgIcon(this.id).clone();
 				$('#cur_linecap').empty().append(icon);
 				$.resizeSvgIcons({'#cur_linecap .svg_icon': 20});
-			}, true);
+			}, {dropUp: true});
 			
 			addAltDropDown('#stroke_linejoin', '#linejoin_opts', function() {
 				var val = this.id.split('_')[1];
@@ -1763,7 +1780,12 @@
 				var icon = $.getSvgIcon(this.id).clone();
 				$('#cur_linejoin').empty().append(icon);
 				$.resizeSvgIcons({'#cur_linejoin .svg_icon': 20});
-			}, true);
+			}, {dropUp: true});
+			
+			addAltDropDown('#tool_position', '#position_opts', function() {
+				var letter = this.id.replace('tool_pos','').charAt(0);
+				svgCanvas.alignSelectedElements(letter, 'page');
+			}, {multiclick: true});
 			
 			/*
 			
@@ -1992,7 +2014,6 @@
 			
 			var clickExport = function() {
 				if(window.canvg) {
-					console.log(1);
 					svgCanvas.rasterExport();
 					return;
 				} else {
@@ -2254,7 +2275,7 @@
 				var size_num = icon_sizes[size];
 				
 				// Change icon size
-				$('.tool_button, .push_button, .tool_button_current, .disabled, #url_notice, #tool_open')
+				$('.tool_button, .push_button, .tool_button_current, .disabled, .icon_label, #url_notice, #tool_open')
 				.find('> svg, > img').each(function() {
 					this.setAttribute('width',size_num);
 					this.setAttribute('height',size_num);
@@ -2275,6 +2296,7 @@
 					.tool_button_current,\
 					.push_button_pressed,\
 					.disabled,\
+					.icon_label,\
 					.tools_flyout .tool_button": {
 						'width': {s: '16px', l: '32px', xl: '48px'},
 						'height': {s: '16px', l: '32px', xl: '48px'},
@@ -2375,6 +2397,9 @@
 					},
 					"input.spin-button.down": {
 						'background-position': {l: '100% -85px', xl: '100% -82px'}
+					},
+					"#position_opts": {
+						'width': {all: (size_num*4) +'px'}
 					}
 				};
 				
@@ -2391,8 +2416,8 @@
 						selector = '#svg_editor ' + selector.replace(/,/g,', #svg_editor');
 						style_str += selector + '{';
 						$.each(rules, function(prop, values) {
-							if(values[size]) {
-								style_str += (prop + ':' + values[size] + ';');
+							if(values[size] || values.all) {
+								style_str += (prop + ':' + (values[size] || values.all) + ';');
 							}
 						});
 						style_str += '}';

editor/svgcanvas.js

@@ -8824,8 +8824,8 @@ function BatchCommand(text) {
 		if (relative_to == 'page') {
 			minx = 0;
 			miny = 0;
-			maxx = svgcontent.getAttribute('width');
-			maxy = svgcontent.getAttribute('height');
+			maxx = canvas.contentW;
+			maxy = canvas.contentH;
 		}
 
 		var dx = new Array(len);