handle changes of board size

src/cartographer.js

@@ -9,7 +9,7 @@ const DEFAULTS = {
 };
 
 export default class Cartographer {
-	constructor(settings) {
+	constructor (settings) {
 		[
 			'getOriginX',
 			'getOriginY',
@@ -22,6 +22,8 @@ export default class Cartographer {
 			'setOriginY',
 
 			'zoom',
+
+			'remap',
 		].map(method => this[method] = this[method].bind(this));
 
 		this.settings = Object.assign({}, DEFAULTS, settings);
@@ -34,12 +36,12 @@ export default class Cartographer {
 		this.setOriginY(this.settings.canvasHeight, this.settings.centerY);
 	}
 
-	getOriginX() {return this.originX;}
-	getOriginY() {return this.originY;}
+	getOriginX () {return this.originX;}
+	getOriginY () {return this.originY;}
 
-	getScale() {return this.scale;}
+	getScale () {return this.scale;}
 
-	checkScale(canvasHeight, canvasWidth) {
+	checkScale (canvasHeight, canvasWidth) {
 		const heightMin = this.height ? this.calculateVerticalScale(canvasHeight, this.height) : 0;
 		const widthMin = this.width ? this.calculateHorizontalScale(canvasWidth, this.width) : 0;
 
@@ -81,7 +83,7 @@ export default class Cartographer {
 		return this.originX === newX && this.originY === newY;
 	}
 
-	_checkMove(event) {
+	_checkMove (event) {
 		if (this.negativeTiles) {
 			this._checkMoveNegativeTiles(event);
 		}
@@ -90,7 +92,7 @@ export default class Cartographer {
 		}
 	}
 
-	_checkMovePositiveTiles(event) {
+	_checkMovePositiveTiles (event) {
 		const canvasWidth = event.width;
 		const canvasHeight = event.height;
 
@@ -118,7 +120,7 @@ export default class Cartographer {
 		}
 	}
 
-	_checkMoveNegativeTiles(event) {
+	_checkMoveNegativeTiles (event) {
 		const colWidth = this.horizontalDistance();
 		const rowHeight = this.verticalDistance();
 
@@ -141,7 +143,7 @@ export default class Cartographer {
 		}
 	}
 
-	zoom(event) {
+	zoom (event) {
 		const scaleOrig = this.scale;
 
 		let scaleTemp = scaleOrig * event.scaleStep;
@@ -161,4 +163,13 @@ export default class Cartographer {
 			});
 		}
 	}
+
+	remap (config) {
+		Object.assign(this, pick(config, ['height', 'width', 'negativeTiles']));
+
+		this.checkScale(config.canvasHeight, config.canvasWidth);
+
+		this.setOriginX(config.canvasWidth, config.centerX);
+		this.setOriginY(config.canvasHeight, config.centerY);
+	}
 }

src/sketch.js

@@ -6,6 +6,7 @@ export default class Sketch {
 
 		[
 			'getContext',
+			'getSize',
 			'onResize',
 			'render',
 		].map(method => this[method] = this[method].bind(this));
@@ -32,6 +33,13 @@ export default class Sketch {
 		return this.context;
 	}
 
+	getSize () {
+		return {
+			canvasWidth: this.container.offsetWidth,
+			canvasHeight: this.container.offsetHeight,
+		}
+	}
+
 	onResize (event) {
 		const width = this.container.offsetWidth;
 		const height = this.container.offsetHeight;

src/tessellate.js

@@ -90,6 +90,7 @@ export class Tessellate {
 			'getTilePoints',
 			'draw',
 			'resize',
+			'remap',
 		].map(method => {this[method] = this[method].bind(this)});
 
 		this.checkSettings(settings);
@@ -111,10 +112,14 @@ export class Tessellate {
 		}, funky.pick(this.settings, ['desktopPress', 'moveThreshold', 'doubletapThreshold', 'pressThreshold', 'wheelFactor'])));
 
 		const cartographer = selectCartographer(this.settings.board, this.settings.orientation);
-		this.cartographer = new cartographer(Object.assign({
-			canvasWidth: this.sketch.getContext().canvas.width,
-			canvasHeight: this.sketch.getContext().canvas.height,
-		}, funky.pick(this.settings, ['centerX', 'centerY', 'height', 'width', 'scale', 'negativeTiles'])));
+		this.cartographer = new cartographer(Object.assign(this.sketch.getSize(), funky.pick(this.settings, [
+			'centerX',
+			'centerY',
+			'height',
+			'width',
+			'scale',
+			'negativeTiles',
+		])));
 	}
 
 	checkSettings (settings) {
@@ -262,4 +267,11 @@ export class Tessellate {
 
 		this.move(moveForScale);
 	}
+
+	remap ({height, width}) {
+		this.cartographer.remap(Object.assign({
+			height,
+			width,
+		}, this.sketch.getSize()));
+	}
 }