Fix Issue 186: Basic Document Properties window

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

editor/svg-editor.css

@@ -329,12 +329,17 @@ div.color_block {
 	text-align: center;
 }
 
-#svg_docprops #svg_docprops_container {
+/*
-	position: absolute;
 	top: 100px;
 	left: 80px;
 	right: 80px;
 	bottom: 100px;
+*/
+
+#svg_docprops #svg_docprops_container {
+	position: absolute;
+	top: 50px;
+	padding: 10px;
 	background-color: #B0B0B0;
 	opacity: 1.0;
 	text-align: center;
@@ -349,11 +354,16 @@ div.color_block {
 	font-size: 12px;
 }
 
-#svg_source_editor #tool_source_back, #svg_source_editor #tool_docprops_back {
+#svg_source_editor #tool_source_back {
 	text-align: left;
 	padding-left: 20px;
 }
 
+#svg_docprops_container #tool_docprops_back div {
+	text-align: left;
+	padding: 20px;
+}
+
 #svg_source_editor button, #svg_docprops button {
 	padding: 5px 2px 6px 28px;
 	margin: 5px 20px 0 0;	

editor/svg-editor.html

@@ -225,18 +225,6 @@
 
 <div id="tools_bottom" class="tools_panel">
 
-	<div id="tools_bottom_1">
-		<select id="resolution">
-			<option selected="selected">640x480</option>
-			<option>800x600</option>
-			<option>1024x768</option>
-			<option>1280x960</option>
-			<option>1600x1200</option>
-			<option>Fit to Content</option>
-			<option>Custom</option>
-		</select>
-	</div>
-
 	<div id="tools_bottom_2">
 		<table>
 		<tr>
@@ -305,6 +293,19 @@
 		<div id="tool_docprops_back" class="toolbar_button">
 			<button id="tool_docprops_save">Save</button>
 			<button id="tool_docprops_cancel">Cancel</button>
+
+			<div id="change_resolution">
+				<label>Resolution:</label>
+				<select id="resolution">
+					<option selected="selected">640x480</option>
+					<option>800x600</option>
+					<option>1024x768</option>
+					<option>1280x960</option>
+					<option>1600x1200</option>
+					<option>Fit to Content</option>
+					<option>Custom</option>
+				</select>
+			</div>
 		</div>
 	</div>
 </div>

editor/svg-editor.js

@@ -636,6 +636,20 @@ function svg_edit_setup() {
 		svgCanvas.clearSelection();
 		hideSourceEditor();
 	};
+	
+	var saveDocProperties = function(){
+		// update resolution
+		var x = '', y = '';
+		var resOption = $('#resolution');
+		var val = resOption.val();
+		if (val && val != 'Fit to content') {
+			var res = val.split('x');
+			x = parseInt(res[0]);
+			y = parseInt(res[1]);
+		}
+		svgCanvas.setResolution(x,y);
+		hideDocProperties();
+	};
 
 	var cancelOverlays = function() {
 		if (!editingsource && !docprops) return;
@@ -689,6 +703,7 @@ function svg_edit_setup() {
 	$('#tool_source').click(showSourceEditor);
 	$('#tool_source_cancel,#svg_source_overlay,#tool_docprops_cancel').click(cancelOverlays);
 	$('#tool_source_save').click(saveSourceEditor);
+	$('#tool_docprops_save').click(saveDocProperties);
 	$('#tool_docprops').click(showDocProperties);
 	$('#tool_delete').click(deleteSelected);
 	$('#tool_delete_multi').click(deleteSelected);
@@ -982,14 +997,10 @@ function svg_edit_setup() {
 					alert('Invalid size. Width or height may not be 0.');
 					return false;
 				}
+				$('#resolution').val(x+'x'+y);
 			}
-		} else if(this.value == 'Fit to content'){
-			var x = '', y = '';
-		} else {
-			var res = this.value.split('x');
-			var x = parseInt(res[0]), y = parseInt(res[1]);
 		}
-		svgCanvas.setResolution(x,y);
+//		svgCanvas.setResolution(x,y);
 	});
 
 	$('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius });

editor/svgcanvas.js

@@ -2556,9 +2556,7 @@ function BatchCommand(text) {
 	this.setResolution = function(x, y) {
 		var res = canvas.getResolution();
 		var w = res.w, h = res.h;
-		var batchCmd = new BatchCommand("Change Image Dimensions");
 
-		var handle = svgroot.suspendRedraw(1000);
 		
 		if(!x) {
 			canvas.clearSelection();
@@ -2574,17 +2572,23 @@ function BatchCommand(text) {
 				return;
 			}
 		}
-		svgroot.setAttribute('width', x * current_zoom);
+		x *= current_zoom;
-		svgroot.setAttribute('height', y * current_zoom);
+		y *= current_zoom;
-		batchCmd.addSubCommand(new ChangeElementCommand(svgroot, {"width":w, "height":h}));
+		if (x != w || y != h) {
+			var handle = svgroot.suspendRedraw(1000);
+			var batchCmd = new BatchCommand("Change Image Dimensions");
+			svgroot.setAttribute('width', x);
+			svgroot.setAttribute('height', y);
+			batchCmd.addSubCommand(new ChangeElementCommand(svgroot, {"width":w, "height":h}));
 
-		svgzoom.setAttribute("viewBox", ["0 0", x, y].join(' '));
+			svgzoom.setAttribute("viewBox", ["0 0", x, y].join(' '));
-		batchCmd.addSubCommand(new ChangeElementCommand(svgzoom, {"viewBox": ["0 0", w, h].join(' ')}));
+			batchCmd.addSubCommand(new ChangeElementCommand(svgzoom, {"viewBox": ["0 0", w, h].join(' ')}));
 
-		svgroot.unsuspendRedraw(handle);
 		
-		addCommandToHistory(batchCmd);
+			addCommandToHistory(batchCmd);
-		call("changed", [svgzoom]);
+			svgroot.unsuspendRedraw(handle);
+			call("changed", [svgzoom]);
+		}
 	};
 
 	this.setZoom = function(zoomlevel) {