Support viewport resizing (#16)

src/tessellate.js

@@ -76,7 +76,7 @@ export class Tessellate {
 	static get utils() {return utils}
 	static get funky() {return funky}
 
-	constructor(settings) {
+	constructor (settings) {
 		[
 			'checkSettings',
 			'tap',
@@ -88,14 +88,16 @@ export class Tessellate {
 			'pixelToTile',
 			'tileToPixel',
 			'getTilePoints',
-			'draw'
+			'draw',
+			'resize',
 		].map(method => {this[method] = this[method].bind(this)});
 
 		this.checkSettings(settings);
 
 		this.sketch = new Sketch({
 			element: this.settings.element,
-			draw: this.draw
+			draw: this.draw,
+			resize: this.resize,
 		});
 
 		this.onTap = new OnTap(Object.assign({
@@ -112,10 +114,10 @@ export class Tessellate {
 		this.cartographer = new cartographer(Object.assign({
 			canvasWidth: this.sketch.getContext().canvas.width,
 			canvasHeight: this.sketch.getContext().canvas.height,
-		}, funky.pick(this.settings, ['originX', 'originY', 'height', 'width', 'scale', 'negativeTiles'])));
+		}, funky.pick(this.settings, ['centerX', 'centerY', 'height', 'width', 'scale', 'negativeTiles'])));
 	}
 
-	checkSettings(settings) {
+	checkSettings (settings) {
 
 		this.settings = Object.assign({}, DEFAULTS, settings);
 		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
@@ -132,7 +134,7 @@ export class Tessellate {
 		}
 	}
 
-	tap(event) {
+	tap (event) {
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
 
@@ -145,7 +147,7 @@ export class Tessellate {
 		this.settings.tap(tap);
 	}
 
-	doubletap(event) {
+	doubletap (event) {
 		console.log('DOUBLETAP', event);
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
@@ -159,7 +161,7 @@ export class Tessellate {
 		console.log(tap);
 	}
 
-	pressStart(event) {
+	pressStart (event) {
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
 
@@ -172,7 +174,7 @@ export class Tessellate {
 		this.settings.pressStart(tap);
 	}
 
-	press(event) {
+	press (event) {
 		let point = new Point(event.offsetX, event.offsetY);
 		let tile = this.cartographer.pixelToTile(point);
 
@@ -185,23 +187,23 @@ export class Tessellate {
 		this.settings.press(tap);
 	}
 
-	move(event) {
-		this.cartographer.move(event);
+	move (event) {
+		return this.cartographer.move(event);
 	}
 
-	zoom(event) {
+	zoom (event) {
 		this.cartographer.zoom(event);
 	}
 
-	pixelToTile(x, y) {
+	pixelToTile (x, y) {
 		return this.cartographer.pixelToTile(x, y);
 	}
 
-	tileToPixel(x, y, z) {
+	tileToPixel (x, y, z) {
 		return this.cartographer.tileToPixel(x, y, z);
 	}
 
-	getTilePoints({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) {
+	getTilePoints ({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) {
 		const upperLeft =  new Point(upperLeftX, upperLeftY);
 		const upperRight = new Point(lowerRightX, 0);
 		const lowerLeft =  new Point(0, lowerRightY);
@@ -210,7 +212,7 @@ export class Tessellate {
 		return funky.flatten(this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight));
 	}
 
-	draw(context) {
+	draw (context) {
 		const canvas = context.canvas;
 		const width = canvas.width;
 		const height = canvas.height;
@@ -230,4 +232,34 @@ export class Tessellate {
 			}),
 		});
 	}
+
+	resize (event) {
+		const originX = this.cartographer.getOriginX();
+		const originY = this.cartographer.getOriginY();
+		const scaleOrig = this.cartographer.getScale();
+
+		const moveForResize = Object.assign({}, event, {
+			deltaX: event.deltaX / 2,
+			deltaY: event.deltaY / 2,
+		});
+
+		this.move(moveForResize);
+
+		this.cartographer.checkScale(event.height, event.width);
+
+		const centerX = event.width / 2;
+		const centerY = event.height / 2;
+		const scaleNew = this.cartographer.getScale();
+
+		const moveForScale = {
+			deltaX: (((centerX - originX) / scaleOrig) * (scaleOrig - scaleNew)),
+			deltaY: (((centerY - originY) / scaleOrig) * (scaleOrig - scaleNew)),
+			target: {
+				offsetWidth: event.width,
+				offsetHeight: event.height,
+			},
+		};
+
+		this.move(moveForScale);
+	}
 }