Center non-negative, finite, boards (#14)

src/cartographer.js

@@ -17,6 +17,8 @@ export default class Cartographer {
 
 			'move',
 			'_checkMove',
+			'_setOriginX',
+			'_setOriginY',
 
 			'zoom',
 		].map(method => this[method] = this[method].bind(this));
@@ -25,13 +27,8 @@ export default class Cartographer {
 
 		this._checkScale(this.canvasHeight, this.canvasWidth);
 
-		this.originX = has(this, 'originX') ? this.originX :
-			this.negativeTiles ? parseInt(this.canvasWidth / 2) :
-			this.tileWidth() / 2;
-
-		this.originY = has(this, 'originY') ? this.originY :
-			this.negativeTiles ? parseInt(this.canvasHeight / 2) :
-			this.canvasHeight - (this.tileHeight() / 2);
+		this._setOriginX();
+		this._setOriginY();
 	}
 
 	getOriginX() {return this.originX;}
@@ -46,6 +43,22 @@ export default class Cartographer {
 		this.scale = this.scaleMin > this.scale ? this.scaleMin : this.scale;
 	}
 
+	_setOriginX () {
+		this.originX = has(this, 'originX') ? this.originX :
+			this.negativeTiles ? parseInt(this.canvasWidth / 2) :
+			this.width ? ((this.width * this.tileWidth()) / -2) + (this.canvasWidth / 2) + (this.tileWidth() / 2) :
+			this.tileWidth() / 2;
+	}
+
+	_setOriginY () {
+		const boardHeight = this.height * this.tileHeight();
+
+		this.originY = has(this, 'originY') ? this.originY :
+			this.negativeTiles ? parseInt(this.canvasHeight / 2) :
+			this.height ? (boardHeight) - ((boardHeight - this.canvasHeight) / 2) - (this.tileHeight() / 2) :
+			this.canvasHeight - (this.tileHeight() / 2);
+	}
+
 	move(event) {
 		if (event.deltaX) {
 

src/consts.js

@@ -12,7 +12,7 @@ export const BOARD_STYLES = {
 export const FLAT = 'flat';
 export const POINTY = 'pointy';
 
-export const TILE_ORIENTATIONS = {
+export const ORIENTATION_STYLES = {
 	FLAT,
 	POINTY,
 };

src/main.js

@@ -4,7 +4,7 @@ const PRESS_RIPPLE = ONE_SECOND / 3;
 const DEFAULTS = {
 	board:       Tessellate.BOARD_STYLES.HEX,
 	style:       Tessellate.DRAW_STYLES.FILL,
-	orientation: Tessellate.TILE_ORIENTATIONS.FLAT,
+	orientation: Tessellate.ORIENTATION_STYLES.FLAT,
 	tile:        Tessellate.TILE_STYLES.HEX,
 };
 
@@ -107,7 +107,7 @@ class Demo {
 
 				drawStyle: Tessellate.DRAW_STYLES.FILL,
 				tileStyle: Tessellate.TILE_STYLES.CIRCLE,
-				orientation: Tessellate.TILE_ORIENTATIONS.FLAT,
+				orientation: Tessellate.ORIENTATION_STYLES.FLAT,
 
 				red:   255,
 				green: 127,

src/tessellate.js

@@ -22,7 +22,7 @@ import {
 	TILE_STYLES,
 	BOARD_STYLES,
 	FLAT, POINTY,
-	TILE_ORIENTATIONS,
+	ORIENTATION_STYLES,
 	FILL, OUTLINE,
 	DRAW_STYLES,
 } from './consts.js';
@@ -66,7 +66,7 @@ function selectCartographer(board, orientation) {
 export class Tessellate {
 	static get TILE_STYLES()        {return TILE_STYLES}
 	static get BOARD_STYLES()       {return BOARD_STYLES}
-	static get TILE_ORIENTATIONS() {return TILE_ORIENTATIONS} // TODO: rename to ORIENTATION_STYLES
+	static get ORIENTATION_STYLES() {return ORIENTATION_STYLES}
 	static get DRAW_STYLES()        {return DRAW_STYLES}
 
 	static get TILES()  {return TILES}