cleaned up computation for hex bounding box

src/cartographerXYZ.js

@@ -1,6 +1,6 @@
 import Cartographer from './cartographer.js';
 
-import {sqrt3, extend} from './utils.js';
+import {extend, rangeInclusive, sqrt3} from './utils.js';
 
 import Hex from './hex.js';
 import Point from './point.js';
@@ -26,29 +26,6 @@ export default class CartographerXYZ extends Cartographer {
 			'pixelToTile',
 			'boundingBox',
 		].map(method => this[method] = this[method].bind(this));
-
-		this.pointyTop = settings.pointyTop;
-
-		// in pixels
-		this.originX = 0;
-		this.originY = 0;
-
-		// in pixels
-		this.scale = 25;
-		this.scaleMin = 10;
-		this.scaleMax = 250;
-
-		// in cells
-		this.width = 0;
-		this.height = 0;
-
-		extend(this, settings);
-
-		this.originX = parseInt(this.originX);
-		this.originY = parseInt(this.originY);
-
-		this.width = parseInt(this.width);
-		this.height = parseInt(this.height);
 	}
 
 	maxWidth() {
@@ -113,43 +90,36 @@ export default class CartographerXYZ extends Cartographer {
 		return new Hex(q, r);
 	}
 
-	boundingBox(upperLeftPoint, lowerRightPoint) {
-		let tiles = [];
-		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();
+	boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) {
+		const upperLeftTile = this.pixelToTile(upperLeftPoint);
+		const lowerLeftTile = this.pixelToTile(lowerLeftPoint);
+		const lowerRightTile = this.pixelToTile(lowerRightPoint);
+		const upperRightTile = this.pixelToTile(upperRightPoint);
 
 		if (this.pointyTop) {
-			for (let row = 0; row <= height; row++) {
-				tiles[row] = [];
-				let r = upperLeftTile.getR() + row;
-				let qOffset = upperLeftTile.getQ() - Math.floor(row / 2);
+			const rows = rangeInclusive(upperLeftTile.getR() -1 , lowerLeftTile.getR() + 1);
 
-				for (let q = qOffset; q <= qOffset + width; q++) {
-					tiles[row].push(new Hex(q, r));
-				}
-			}
+			const width = upperRightTile.getQ() - upperLeftTile.getQ();
+			return rows.map((r, index) => {
+				const left = upperLeftTile.getQ() - Math.floor(index / 2);
+				const right = left + width;
+				const columns = rangeInclusive(left, right + 1);
+
+				return columns.map(q => new Hex(q, r));
+			});
 		}
 		else {
-			for (let col = 0; col <= width; col++) {
-				tiles[col] = [];
-				let q = upperLeftTile.getQ() + col;
-				let rOffset = upperLeftTile.getR() - Math.floor(col / 2);
+			const columns = rangeInclusive(upperLeftTile.getQ() - 1, upperRightTile.getQ() + 1);
 
-				for (let r = rOffset; r <= rOffset + height; r++) {
-					tiles[col].push(new Hex(q, r));
-				}
-			}
+			const height = lowerRightTile.getR() - upperRightTile.getR();
+			return columns.map((q, index) => {
+				const top = upperLeftTile.getR() - Math.floor(index / 2);
+				const bottom = top + height;
+				const rows = rangeInclusive(top, bottom + 1);
+
+				return rows.map(r => new Hex(q, r));
+			});
 		}
-
-		return tiles;
 	}
 }
 

src/main.js

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

src/tessellate.js

@@ -145,9 +145,9 @@ export default class Tessellate {
 	drawMap(context) {
 		const scale = this.cartographer.getScale();
 
-		const upperLeft = new Point(0, 0);
+		const upperLeft =  new Point(0, 0);
 		const upperRight = new Point(context.canvas.width, 0);
-		const lowerLeft = new Point(0, context.canvas.height);
+		const lowerLeft =  new Point(0, context.canvas.height);
 		const lowerRight = new Point(context.canvas.width, context.canvas.height);
 
 		const tiles = this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight);