Mousewheel zoom

Author: phoboslab

lib/weltmeister/config.js

@@ -35,11 +35,17 @@ wm.config = {
 		'G': 'grid',
 		'C': 'clone',
 		'Z': 'undo',
-		'Y': 'redo'
+		'Y': 'redo',
+		'MWHEEL_UP': 'zoomin',
+		'PLUS': 'zoomin',
+		'MWHEEL_DOWN': 'zoomout',
+		'MINUS': 'zoomout'
 	},
 
 	'view': {
-		'zoom': 2,
+		'zoom': 1,
+		'zoomMax': 4,
+		'zoomMin': 0.125,
 		'grid': false
 	},
 

lib/weltmeister/edit-map.js

@@ -243,8 +243,10 @@ wm.EditMap = ig.BackgroundMap.extend({
 	// -------------------------------------------------------------------------
 	// Drawing
 
-	draw: function() {			
-		if( this.visible ) {
+	draw: function() {
+		// For performance reasons, repeated background maps are not drawn
+		// when zoomed out
+		if( this.visible && !(wm.config.view.zoom < 1 && this.repeat) ) {
 			this.drawTiled();
 		}
 

lib/weltmeister/weltmeister.css

@@ -432,6 +432,16 @@ input.modalDialogPath:focus {
 	float: right;
 }
 
+div#zoomIndicator {
+	font-weight: bold;
+	font-size: 300%;
+	position: absolute;
+	left: 50px;
+	top: 30px;
+	color: #fff;
+	display: none;
+}
+
 input#toggleSidebar {
 	width: 200px;
 	height: 47px;

lib/weltmeister/weltmeister.js

@@ -37,7 +37,7 @@ wm.Weltmeister = ig.Class.extend({
 
 	tilsetSelectDialog: null,
 	levelSavePathDialog: null,
-	rot: 0,
+	labelsStep: 32,
 
 	collisionSolid: 1,
 
@@ -55,6 +55,7 @@ wm.Weltmeister = ig.Class.extend({
 
 		ig.system.context.textBaseline = 'top';
 		ig.system.context.font = wm.config.labels.font;
+		this.labelsStep = wm.config.labels.step;
 
 
 
@@ -209,6 +210,50 @@ wm.Weltmeister = ig.Class.extend({
 	},
 
 
+	drag: function() {
+		this.screen.x -= ig.input.mouse.x - this.mouseLast.x;
+		this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
+		this._rscreen.x = Math.round(this.screen.x * ig.system.scale)/ig.system.scale;
+		this._rscreen.y = Math.round(this.screen.y * ig.system.scale)/ig.system.scale;
+		for( var i = 0; i < this.layers.length; i++ ) {
+			this.layers[i].setScreenPos( this.screen.x, this.screen.y );
+		}
+	},
+	
+	
+	zoom: function( delta ) {
+		var z = wm.config.view.zoom;
+		var mx = ig.input.mouse.x * z,
+			my = ig.input.mouse.y * z;
+		
+		if( z <= 1 ) {
+			if( delta < 0 ) {
+				z /= 2;
+			}
+			else {
+				z *= 2;
+			}
+		}
+		else {
+			z += delta;
+		}
+		
+		wm.config.view.zoom = z.limit( wm.config.view.zoomMin, wm.config.view.zoomMax );
+		wm.config.labels.step = Math.round( this.labelsStep / wm.config.view.zoom );
+		$('#zoomIndicator').text( wm.config.view.zoom + 'x' ).stop(true,true).show().delay(300).fadeOut();
+		
+		// Adjust mouse pos and screen coordinates
+		ig.input.mouse.x = mx / wm.config.view.zoom;
+		ig.input.mouse.y = my / wm.config.view.zoom;
+		this.drag();
+		
+		for( var i in ig.Image.cache ) {
+			ig.Image.cache[i].resize( wm.config.view.zoom );
+		}
+		
+		this.resize();
+	},
+	
 
 	// -------------------------------------------------------------------------
 	// Loading
@@ -531,6 +576,7 @@ wm.Weltmeister = ig.Class.extend({
 			this.collisionLayer = null;
 		}
 
+
 		this.activeLayer.setName( newName );
 		this.setModified();
 		this.draw();
@@ -586,13 +632,7 @@ wm.Weltmeister = ig.Class.extend({
 
 			// scroll map
 			if( ig.input.state('drag') ) {
-				this.screen.x -= ig.input.mouse.x - this.mouseLast.x;
-				this.screen.y -= ig.input.mouse.y - this.mouseLast.y;
-				this._rscreen.x = Math.round(this.screen.x * ig.system.scale)/ig.system.scale;
-				this._rscreen.y = Math.round(this.screen.y * ig.system.scale)/ig.system.scale;
-				for( var i = 0; i < this.layers.length; i++ ) {
-					this.layers[i].setScreenPos( this.screen.x, this.screen.y );
-				}
+				this.drag();
 			}
 
 			else if( ig.input.state('draw') ) {
@@ -700,6 +740,13 @@ wm.Weltmeister = ig.Class.extend({
 			}
 		}
 
+		else if( action == 'zoomin' ) {
+			this.zoom( 1 );
+		}
+		else if( action == 'zoomout' ) {
+			this.zoom( -1 );
+		}
+		
 
 		if( action == 'draw' ) {			
 			// select tile
@@ -846,6 +893,46 @@ wm.Weltmeister.getMaxHeight = function() {
 };
 
 
+// Custom ig.Image class for use in Weltmeister. To make the zoom function 
+// work, we need some additional scaling behavior:
+// Keep the original image, maintain a cache of scaled versions and use the 
+// default Canvas scaling (~bicubic) instead of nearest neighbor when 
+// zooming out.
+ig.Image.inject({
+	scaleCache: {},
+	resize: function( scale ) {
+		if( this.scaleCache['x'+scale] ) {
+			this.data = this.scaleCache['x'+scale];
+			this.width = this.data.width;
+			this.width = this.data.height;
+			return;
+		}
+		
+		// Retain the original image when scaling
+		this.origData = this.data = this.origData || this.data;
+		
+		this.width = this.data.width;
+		this.height = this.data.height;
+		
+		if( scale > 1 ) {
+			// Nearest neighbor when zooming in
+			this.parent( scale );
+		}
+		else {
+			// Otherwise blur
+			var scaled = ig.$new('canvas');
+			scaled.width = this.width * scale;
+			scaled.height = this.height * scale;
+			var scaledCtx = scaled.getContext('2d');
+			scaledCtx.drawImage( this.data, 0, 0, this.width, this.height, 0, 0, scaled.width, scaled.height );
+			this.data = scaled;
+		}
+		
+		this.scaleCache[scale] = this.data;
+	}
+});
+
+
 
 // Create a custom loader, to skip sound files and the run loop creation
 wm.Loader = ig.Loader.extend({

weltmeister.html

@@ -91,6 +91,8 @@ <h3 id="entityClass">EntityClassName</h3>
 		</div>
 	</div>
 
+	<div id="zoomIndicator">1x</div>
+	
 </div>
 </body>
 </html>