handle changes of board size

src/cartographer.js

@@ -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);
@@ -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({
+		this.cartographer = new cartographer(Object.assign(this.sketch.getSize(), funky.pick(this.settings, [
-			canvasWidth: this.sketch.getContext().canvas.width,
+			'centerX',
-			canvasHeight: this.sketch.getContext().canvas.height,
+			'centerY',
-		}, funky.pick(this.settings, ['centerX', 'centerY', 'height', 'width', 'scale', 'negativeTiles'])));
+			'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()));
+	}
 }