Start at Zero (#6)

src/tessellate.js

@@ -1,4 +1,3 @@
-
 import * as utils from './utils';
 export {utils};
 
@@ -44,6 +43,7 @@ const DEFAULTS = {
 	tap: utils.noop,
 	draw: utils.noop,
 	orientation: FLAT,
+	negativeTiles: true,
 };
 
 function selectCartographer(board, orientation) {
@@ -70,18 +70,17 @@ export default class Tessellate {
 
 	constructor(settings) {
 		[
+			'checkSettings',
 			'tap',
 			'move',
 			'zoom',
 			'pixelToTile',
 			'tileToPixel',
 			'getTilePoints',
-			'draw']
-		.map(method => {this[method] = this[method].bind(this)});
+			'draw'
+		].map(method => {this[method] = this[method].bind(this)});
 
-		this.settings = Object.assign(DEFAULTS, settings);
-		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
-			document.querySelector(this.settings.element);
+		this.checkSettings(settings);
 
 		this.sketch = new Sketch({
 			element: this.settings.element,
@@ -96,17 +95,27 @@ export default class Tessellate {
 		});
 
 		const cartographer = selectCartographer(this.settings.board, this.settings.orientation);
-		this.cartographer = new cartographer({
-			height: this.settings.height,
-			width: this.settings.width,
-			scale: this.settings.scale,
-
+		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'])));
+	}
 
-			originX: this.settings.originX || this.sketch.getContext().canvas.width / 2,
-			originY: this.settings.originY || this.sketch.getContext().canvas.height / 2,
-		});
+	checkSettings(settings) {
+
+		this.settings = Object.assign({}, DEFAULTS, settings);
+		this.settings.element = this.settings.element instanceof HTMLElement ? this.settings.element :
+			document.querySelector(this.settings.element);
+
+		if (this.settings.negativeTiles) {
+			if (this.settings.height && (this.settings.height % 2 === 0)) {
+				this.settings.height++;
+			}
+
+			if (this.settings.width && (this.settings.width % 2 === 0)) {
+				this.settings.width++;
+			}
+		}
 	}
 
 	tap(event) {