From 606e474efb93bc22195175c9662853b1deda12dd Mon Sep 17 00:00:00 2001
From: Alexis Deveria <adeveria@gmail.com>
Date: Tue, 15 Sep 2009 14:38:26 +0000
Subject: [PATCH] Added zoom spinner to interface

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@648 eee81c28-f429-11dd-99c0-75d572ba1ddd
---
 editor/svg-editor.css  |  4 ++++
 editor/svg-editor.html |  7 +++++++
 editor/svg-editor.js   | 19 +++++++++++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/editor/svg-editor.css b/editor/svg-editor.css
index 2722efeb..9357d80c 100644
--- a/editor/svg-editor.css
+++ b/editor/svg-editor.css
@@ -157,6 +157,10 @@ div.color_block {
 	vertical-align: 12px;
 }
 
+#svg_editor .zoom_tool {
+	vertical-align: 12px;
+}
+
 #svg_editor #text_panel .text_tool {
 	vertical-align: 12px;
 }
diff --git a/editor/svg-editor.html b/editor/svg-editor.html
index 3686bb8d..48b71001 100644
--- a/editor/svg-editor.html
+++ b/editor/svg-editor.html
@@ -56,6 +56,13 @@
 		<div class="tool_button tool_button_disabled" id="tool_undo" title="Undo [Z]"></div>
 		<div class="tool_button tool_button_disabled" id="tool_redo" title="Redo [Y]"></div>
 	</div>
+	
+    <!-- Zoom buttons -->
+	<div>
+		<img class="tool_sep" src="images/sep.png" alt="|"/>
+		<span class="zoom_tool">zoom:</span>
+		<input id="zoom" class="zoom_tool" title="Change zoom level" alt="Zoom %" size="3" value="100" type="text"/>
+	</div>
 
 	<!-- Buttons when a single element is selected -->
 	<div id="selected_panel">
diff --git a/editor/svg-editor.js b/editor/svg-editor.js
index f4bf3541..52ffa176 100644
--- a/editor/svg-editor.js
+++ b/editor/svg-editor.js
@@ -286,6 +286,12 @@ function svg_edit_setup() {
 	var changeRotationAngle = function(ctl) {
 		svgCanvas.setRotationAngle(ctl.value);
 	}
+	var changeZoom = function(ctl) {
+		var zoomlevel = ctl.value / 100;
+		var res = svgCanvas.getResolution();
+		setResolution(res.w * zoomlevel, res.h * zoomlevel, true);
+		svgCanvas.setZoom(zoomlevel);
+	}
 
 	$('#stroke_style').change(function(){
 		svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
@@ -596,10 +602,11 @@ function svg_edit_setup() {
 		svgCanvas.alignSelectedElements('b', $('#align_relative_to option:selected').val() );
 	};
 
-	var clickZoom = function(zoomIn) {
+	var zoomImage = function(zoomIn) {
 		var res = svgCanvas.getResolution();
 		var multiplier = zoomIn? res.zoom * 2 : res.zoom * 0.5;
 		setResolution(res.w * multiplier, res.h * multiplier, true);
+		$('#zoom').val(multiplier * 100);
 		svgCanvas.setZoom(multiplier);
 	};
 
@@ -797,8 +804,8 @@ function svg_edit_setup() {
 			['shift+right', function(){rotateSelected(1)}],
 			['shift+O', selectPrev],
 			['shift+P', selectNext],
-			['ctrl+up', function(evt){clickZoom(true);evt.preventDefault();}],
-			['ctrl+down', function(evt){clickZoom();evt.preventDefault();}],
+			['ctrl+up', function(evt){zoomImage(true);evt.preventDefault();}],
+			['ctrl+down', function(evt){zoomImage();evt.preventDefault();}],
 			['up', function(evt){moveSelected(0,-1);evt.preventDefault();}],
 			['down', function(evt){moveSelected(0,1);evt.preventDefault();}],
 			['left', function(evt){moveSelected(-1,0);evt.preventDefault();}],
@@ -1013,10 +1020,14 @@ function svg_edit_setup() {
 		}
 	});
 
+	//Prevent browser from erroneously repopulating fields
+	$('input,select').attr("autocomplete","off");
+
 	$('#rect_rx').SpinButton({ min: 0, max: 1000, step: 1, callback: changeRectRadius });
 	$('#stroke_width').SpinButton({ min: 0, max: 99, step: 1, callback: changeStrokeWidth });
 	$('#angle').SpinButton({ min: -180, max: 180, step: 5, callback: changeRotationAngle });
-
+	$('#zoom').SpinButton({ min: 10, max: 10000, step: 50, callback: changeZoom });
+	
 	svgCanvas.setCustomHandlers = function(opts) {
 		if(opts.open) {
 			$('#tool_open').show();