make sure Hex stuff still works

src/cartographer.js

@@ -1,25 +1,13 @@
-
 import {extend} from './utils.js';
 
-//import Point from './point.js';
-
 export default class Cartographer {
 	constructor(settings) {
 		[
-//			'maxWidth',
-//			'minWidth',
-//			'maxDistance',
-//			'minDistance',
 			'getOriginX',
 			'getOriginY',
+
 			'getScale',
-//			'getCellWidth',
+
-//			'getCellHeight',
-//			'getHorzDistance',
-//			'getVertDistance',
-//			'tileToPixel',
-//			'pixelToTile',
-//			'boundingBox',
 			'move',
 			'zoom'
 		].map(method => this[method] = this[method].bind(this));
@@ -48,109 +36,10 @@ export default class Cartographer {
 		this.height = parseInt(this.height);
 	}
 
-//	maxWidth() {
-//		return this.scale * 2;
-//	}
-//
-//	minWidth() {
-//		return this.maxWidth() * sqrt3;
-//	}
-//
-//	maxDistance() {
-//		return this.maxWidth() * (3/4);
-//	}
-//
-//	minDistance() {
-//		return this.minWidth();
-//	}
-
 	getOriginX() {return this.originX;}
 	getOriginY() {return this.originY;}
 
 	getScale() {return this.scale;}
-//	getCellWidth() {return this.pointyTop ? this.minWidth() : this.maxWidth();}
-//	getCellHeight() {return this.pointyTop ? this.maxWidth() : this.minWidth();}
-//	getHorzDistance() {return this.pointyTop ? this.minDistance() : this.maxDistance();}
-//	getVertDistance() {return this.pointyTop ? this.maxDistance() : this.minDistance();}
-
-//	tileToPixel(tile) {
-//		let scale = this.scale;
-//
-//		function minWidth(a, b) {
-//			return scale * sqrt3 * (a + (b / 2))
-//		};
-//
-//		function maxWidth(a) {
-//			return scale * 3/2 * a
-//		};
-//
-//		let pixelX = this.pointyTop ? minWidth(tile.getQ(), tile.getR()) : maxWidth(tile.getQ());
-//		let pixelY = this.pointyTop ? maxWidth(tile.getR()) : minWidth(tile.getR(), tile.getQ());
-//
-//		pixelX += this.originX;
-//		pixelY += this.originY;
-//
-//		return new Point(pixelX, pixelY);
-//	}
-
-//	pixelToTile(point) {
-//		let scale = this.scale;
-//
-//		function radiusLong(a, b) {
-//			return ((a * (sqrt3 / 3)) - (b / 3)) / scale;
-//		};
-//
-//		function radiusShort(a) {
-//			return (a * (2 / 3)) / scale;
-//		};
-//
-//		let pixelX = point.getX() - this.originX;
-//		let pixelY = point.getY() - this.originY;
-//
-//		let q = this.pointyTop ? radiusLong(pixelX, pixelY) : radiusShort(pixelX);
-//		let r = this.pointyTop ? radiusShort(pixelY) : radiusLong(pixelY, pixelX);
-//
-//		return new Tile(q, r);
-//	}
-
-//	boundingBox(upperLeftPoint, lowerRightPoint) {
-//		let hexagons = [];
-//		let upperRightPoint = new Point(lowerRightPoint.getX(), upperLeftPoint.getY());
-//
-//		// push out by a 1 axially to account for interlocking hexagons
-//		// possibly return hexagons not within bounds
-//		let upperLeftTile = this.pixelToTile(upperLeftPoint).moveAxial({q: 0, r: -1});
-//		let lowerRightTile = this.pixelToTile(lowerRightPoint).moveAxial({q: 0, r: 1});
-//		let upperRightTile = this.pixelToTile(upperRightPoint).moveAxial({q: 1, r: -1});
-//
-//		let height = lowerRightTile.getR() - upperRightTile.getR();
-//		let width = upperRightTile.getQ() - upperLeftTile.getQ();
-//
-//		if (this.pointyTop) {
-//			for (let row = 0; row <= height; row++) {
-//				hexagons[row] = [];
-//				let r = upperLeftTile.getR() + row;
-//				let qOffset = upperLeftTile.getQ() - Math.floor(row / 2);
-//
-//				for (let q = qOffset; q <= qOffset + width; q++) {
-//					hexagons[row].push(new Tile(q, r));
-//				}
-//			}
-//		}
-//		else {
-//			for (let col = 0; col <= width; col++) {
-//				hexagons[col] = [];
-//				let q = upperLeftTile.getQ() + col;
-//				let rOffset = upperLeftTile.getR() - Math.floor(col / 2);
-//
-//				for (let r = rOffset; r <= rOffset + height; r++) {
-//					hexagons[col].push(new Tile(q, r));
-//				}
-//			}
-//		}
-//
-//		return hexagons;
-//	}
 
 	move(event) {
 		if (event.deltaX) {

src/cartographerXYZ.js

@@ -1,28 +1,30 @@
+import Cartographer from './cartographer.js';
 
 import {sqrt3, extend} from './utils.js';
 
 import Hex from './hex.js';
 import Point from './point.js';
 
-export default class ExWhyZee {
+export default class CartographerXYZ extends Cartographer {
 	constructor(settings) {
+		super(settings);
+
 		[
 			'maxWidth',
 			'minWidth',
+
 			'maxDistance',
 			'minDistance',
-			'getOriginX',
+
-			'getOriginY',
-			'getScale',
 			'getCellWidth',
 			'getCellHeight',
+
 			'getHorzDistance',
 			'getVertDistance',
-			'hexToPixel',
+
+			'tileToPixel',
 			'pixelToTile',
 			'boundingBox',
-			'move',
-			'zoom'
 		].map(method => this[method] = this[method].bind(this));
 
 		this.pointyTop = settings.pointyTop;
@@ -65,16 +67,13 @@ export default class ExWhyZee {
 		return this.minWidth();
 	}
 
-	getOriginX() {return this.originX;}
-	getOriginY() {return this.originY;}
-
-	getScale() {return this.scale;}
 	getCellWidth() {return this.pointyTop ? this.minWidth() : this.maxWidth();}
 	getCellHeight() {return this.pointyTop ? this.maxWidth() : this.minWidth();}
+
 	getHorzDistance() {return this.pointyTop ? this.minDistance() : this.maxDistance();}
 	getVertDistance() {return this.pointyTop ? this.maxDistance() : this.minDistance();}
 
-	hexToPixel(hex) {
+	tileToPixel(hex) {
 		let scale = this.scale;
 
 		function minWidth(a, b) {
@@ -152,41 +151,6 @@ export default class ExWhyZee {
 
 		return hexagons;
 	}
-
-	move(event) {
-		if (event.deltaX) {
-
-			this.originX = Math.floor((this.originX*1000) + (event.deltaX*1000)) / 1000;
-		}
-
-		if (event.deltaY) {
-
-			this.originY = Math.floor((this.originY*1000) + (event.deltaY*1000)) / 1000;
-		}
-	}
-
-	zoom(event) {
-		let scaleOrig = this.scale;
-
-		let scaleTemp = parseInt((scaleOrig + (event.deltaY / -10)) * 1000) / 1000;
-
-		// make sure 'scale' doesn't get too small nor too big
-		if (scaleTemp < this.scaleMin)
-			scaleTemp = this.scaleMin;
-		else if (scaleTemp > this.scaleMax)
-			scaleTemp = this.scaleMax;
-
-		if (scaleOrig != scaleTemp) {
-
-			this.scale = scaleTemp;
-
-			// zoom to the current mouse location
-			this.move({
-				deltaX: (((event.offsetX - this.originX) / scaleOrig) * (scaleOrig - scaleTemp)),
-				deltaY: (((event.offsetY - this.originY) / scaleOrig) * (scaleOrig - scaleTemp))
-			});
-		}
-	}
 }
 
 //	function getCoordinates(canvasX, canvasY) {

src/main.js

@@ -13,6 +13,8 @@ class Demo {
 
 		let tessellate = new Tessellate({
 			element: '#container',
+			board: Tessellate.BOARD_STYLES.HEX,
+			tile: Tessellate.TILE_STYLES.CIRCLE,
 			tap: this.onTap,
 			draw: this.draw,
 			pointyTop: false, //utils.random(1) ? true : false,

src/tessellate.js

@@ -14,17 +14,34 @@ export {DrawCircle, DrawHexagon, DrawSquare};
 import Cell from './cell.js';
 export {Cell};
 
-//import ExWhy from './exWhy.js';
-//import ExWhyZee from './exWhyZee.js';
 import CartographerXY from './cartographerXY.js';
+import CartographerXYZ from './cartographerXYZ.js';
+
+const HEX = 'hex';
+const CIRCLE = 'circle';
+const SQUARE = 'square';
+
+const TILE_STYLES = {HEX, CIRCLE, SQUARE};
+
+const TILES = {
+	[HEX]: new DrawHexagon(),
+	[CIRCLE]: new DrawCircle(),
+	[SQUARE]: new DrawSquare(),
+};
 
 const DEFAULTS = {
+	tile: HEX,
+	board: HEX,
 	tap: utils.noop,
 	draw: utils.noop,
 	pointyTop: false,
 };
 
 export default class Tessellate {
+	static get TILES () {return TILES}
+	static get TILE_STYLES () {return TILE_STYLES}
+	static get BOARD_STYLES () {return {HEX, SQUARE}}
+
 	constructor(settings) {
 		['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)});
 
@@ -45,15 +62,14 @@ export default class Tessellate {
 		});
 
 		this.map = [];
-		this.cartographer = new CartographerXY({
+
+		const boardSettings = {
 			pointyTop: this.settings.pointyTop,
 			originX: this.sketch.getContext().canvas.width / 2,
 			originY: this.sketch.getContext().canvas.height / 2
-		});
+		};
 
-		this.circle = new DrawCircle();
+		this.cartographer = this.settings.board === HEX ? new CartographerXYZ(boardSettings) : new CartographerXY(boardSettings);
-		this.hexagon = new DrawHexagon();
-		this.square = new DrawSquare();
 	}
 
 	tap(event) {
@@ -106,7 +122,7 @@ export default class Tessellate {
 					});
 				}
 
-				this.square.filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]);
+				TILES[this.settings.tile].filled(context, scale, tilePoint.getX(), tilePoint.getY(), this.map[tile.getX()][tile.getY()]);
 
 //				let cell = map.getXY(hex.getX(), hex.getY());
 //