Added working zoom button for drag/click zoom, no visible box yet

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

editor/svg-editor.html

@@ -243,6 +243,7 @@
 	<img class="tool_button" id="tool_text" src="images/text.png" title="Text Tool [6]" alt="Text"/>
 	<img class="tool_button" id="tool_poly" src="images/polygon.png" title="Poly Tool [7]" alt="Poly"/>
 	<img class="tool_button" id="tool_image" src="images/image.png" title="Image Tool [8]" alt="Image"/>
+	<img class="tool_button" id="tool_zoom" src="images/zoom.png" title="Zoom Tool [Ctrl+Up/Down]" alt="Zoom"/>
 </div> <!-- tools_left -->
 
 <div id="tools_bottom" class="tools_panel">

editor/svg-editor.js

@@ -80,6 +80,27 @@ function svg_edit_setup() {
 		// text element was previously in focus
 		updateContextPanel();
 	};
+	
+	var zoomChanged = function(window, bbox) {
+		var scrbar = 15;
+		var res = svgCanvas.getResolution();
+		
+		var w_area = $('#workarea');
+		w_area.css('cursor','auto');
+		var z_info = svgCanvas.setBBoxZoom(bbox, w_area.width()-scrbar, w_area.height()-scrbar);
+		if(!z_info) return;
+		var zoomlevel = z_info.zoom;
+		var bb = z_info.bbox;
+		$('#zoom').val(Math.round(zoomlevel*100));
+		setResolution(res.w * zoomlevel, res.h * zoomlevel);
+		var scrLeft = bb.x * zoomlevel;
+		var scrOffX = w_area.width()/2 - (bb.width * zoomlevel)/2;
+		w_area[0].scrollLeft = Math.max(0,scrLeft - scrOffX);
+		var scrTop = bb.y * zoomlevel;
+		var scrOffY = w_area.height()/2 - (bb.height * zoomlevel)/2;
+		w_area[0].scrollTop = Math.max(0,scrTop - scrOffY);
+		clickSelect();
+	}
 
 	// updates the toolbar (colors, opacity, etc) based on the selected element
 	var updateToolbar = function() {
@@ -259,6 +280,7 @@ function svg_edit_setup() {
 	svgCanvas.bind("selected", selectedChanged);
 	svgCanvas.bind("changed", elementChanged);
 	svgCanvas.bind("saved", saveHandler);
+	svgCanvas.bind("zoomed", zoomChanged);
 
 	var str = '<div class="palette_item" style="background-image: url(\'images/none.png\');" data-rgb="none"></div>'
 	$.each(palette, function(i,item){
@@ -507,6 +529,23 @@ function svg_edit_setup() {
 		}
 	};
 
+	var clickZoom = function(){
+		if (toolButtonClick('#tool_zoom')) {
+			$('#workarea').css('cursor','crosshair');
+			svgCanvas.setMode('zoom');
+		}
+	};
+
+	var dblclickZoom = function(){
+		if (toolButtonClick('#tool_zoom')) {
+			var res = svgCanvas.getResolution();
+			setResolution(res.w, res.h);
+			$('#zoom').val(100);
+			svgCanvas.setZoom(1);
+			setSelectMode();
+		}
+	};
+
 	var clickFHRect = function(){
 		if (toolButtonClick('#tools_rect_show')) {
 			svgCanvas.setMode('fhrect');
@@ -763,6 +802,8 @@ function svg_edit_setup() {
 	$('#tool_ellipse').mouseup(clickEllipse);
 	$('#tool_fhellipse').mouseup(clickFHEllipse);
 	$('#tool_image').mouseup(clickImage);
+	$('#tool_zoom').mouseup(clickZoom);
+	$('#tool_zoom').dblclick(dblclickZoom);
 	$('#tool_text').click(clickText);
 	$('#tool_poly').click(clickPoly);
 	$('#tool_clear').click(clickClear);
@@ -1042,6 +1083,7 @@ function svg_edit_setup() {
 	}
 	
 	function setResolution(w, h, center) {
+		w-=0; h-=0;
 		$('#svgcanvas').css( { 'width': w, 'height': h } );
 		if(center) {
 			var w_area = $('#workarea');

editor/svgcanvas.js

@@ -1393,6 +1393,11 @@ function BatchCommand(text) {
 					}, 100);
 				}
 				break;
+			case "zoom": 
+				started = true;
+				start_x = x;
+				start_y = y;
+				break;
 			case "resize":
 				started = true;
 				start_x = x;
@@ -2105,6 +2110,14 @@ function BatchCommand(text) {
 				// we return immediately from select so that the obj_num is not incremented
 				return;
 				break;
+			case "zoom":
+				call("zoomed", {
+					'x': Math.min(start_x,x),
+					'y': Math.min(start_y,y),
+					'width': Math.abs(x-start_x),
+					'height': Math.abs(y-start_y)
+				});
+				return;
 			case "path":
 				keep = true;
 				break;
@@ -2591,11 +2604,24 @@ function BatchCommand(text) {
 		}
 	};
 
-	this.setBBoxZoom = function(type, editor_w, editor_h) {
+	this.setBBoxZoom = function(val, editor_w, editor_h) {
 		var spacer = .85;
 		var w_zoom, h_zoom;
 		
-		switch ( type ) {
+		if(typeof val == 'object') {
+			var bb = val;
+			if(bb.width == 0 || bb.height == 0) {
+				canvas.setZoom(current_zoom * 2);
+				return {'zoom': current_zoom, 'bbox': bb};
+			}
+			w_zoom = Math.round((editor_w / bb.width)*100 * spacer)/100;
+			h_zoom = Math.round((editor_h / bb.height)*100 * spacer)/100;	
+			var zoomlevel = Math.min(w_zoom,h_zoom);
+			canvas.setZoom(zoomlevel);
+			return {'zoom': zoomlevel, 'bbox': bb};
+		}
+		
+		switch (val) {
 			case 'selection':
 				if(!selectedElements[0]) return;
 				var bb = selectedBBoxes[0];