more straightforward approach to providing location data for wrapped maps

src/cartographer.js

@@ -23,8 +23,6 @@ export default class Cartographer {
 			'setOriginX',
 			'setOriginY',
 
-			'pixelToTile',
-
 			'zoom',
 
 			'remap',
@@ -157,11 +155,6 @@ export default class Cartographer {
 		}
 	}
 
-	pixelToTile (point) {
-		const tile = this._pixelToTile(point);
-		return this.wrap ? this.teleport(tile) : tile;
-	}
-
 	zoom (event) {
 		const scaleOrig = this.scale;
 

src/cartographerFlatXY.js

@@ -6,7 +6,11 @@ import {rangeInclusive, invSqrt2} from './utils.js';
 import Point from './point.js';
 import Square from './square.js';
 
-const tilePointToSquare = ({tilePoint, pixelPoint}) => ({tilePoint: new Square(tilePoint), pixelPoint});
+const tilePointToSquare = ({tilePoint, mapPoint, pixelPoint}) => ({
+	tilePoint: tilePoint instanceof Square ? tilePoint : new Square(tilePoint),
+	mapPoint: mapPoint instanceof Square ? mapPoint : new Square(mapPoint),
+	pixelPoint,
+});
 
 export default class CartographerFlatXY extends Cartographer {
 	constructor(settings) {
@@ -29,7 +33,7 @@ export default class CartographerFlatXY extends Cartographer {
 			'calculateVerticalScale',
 
 			'tileToPixel',
-			'_pixelToTile',
+			'pixelToTile',
 			'teleport',
 
 			'inBounds',
@@ -81,13 +85,13 @@ export default class CartographerFlatXY extends Cartographer {
 	tileToPixel(square) {
 		square = square instanceof Square ? square : new Square(...arguments);
 
-		const x = square.getX() * this.minWidth();
+		const x = (square.getX() * this.minWidth()) + this.originX;
-		const y = square.getY() * this.minWidth();
+		const y = this.originY - (square.getY() * this.minWidth());
 
-		return new Point(x + this.originX, this.originY - y);
+		return new Point(x, y);
 	}
 
-	_pixelToTile (point) {
+	pixelToTile (point) {
 		point = point instanceof Point ? point : new Point(...arguments);
 
 		const pixelX = point.getX() - this.originX;
@@ -100,6 +104,8 @@ export default class CartographerFlatXY extends Cartographer {
 	}
 
 	teleport ({x, y}) {
+		if (!this.wrap) return new Point(x, y);
+
 		x = x % this.width;
 		y = y % this.height;
 
@@ -121,15 +127,15 @@ export default class CartographerFlatXY extends Cartographer {
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {
-		return this.wrap ? ({tilePoint: this.teleport(tilePoint), pixelPoint}) :
+		return this.wrap ? {tilePoint, mapPoint: this.teleport(tilePoint), pixelPoint} :
-			this.inBounds(tilePoint) ? ({tilePoint, pixelPoint}) :
+			this.inBounds(tilePoint) ? {tilePoint, mapPoint: tilePoint, pixelPoint} :
-			null;
+			{tilePoint, mapPoint: null, pixelPoint};
 	}
 
 	boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) {
-		const upperLeftTile = this._pixelToTile(upperLeftPoint);
+		const upperLeftTile = this.pixelToTile(upperLeftPoint);
-		const lowerRightTile = this._pixelToTile(lowerRightPoint);
+		const lowerRightTile = this.pixelToTile(lowerRightPoint);
-		const upperRightTile = this._pixelToTile(upperRightPoint);
+		const upperRightTile = this.pixelToTile(upperRightPoint);
 
 		const columns = rangeInclusive(upperLeftTile.getX(), upperRightTile.getX());
 		const rows = rangeInclusive(lowerRightTile.getY(), upperLeftTile.getY());
@@ -142,7 +148,6 @@ export default class CartographerFlatXY extends Cartographer {
 		.flatten()
 		.map(makeAPointPair)
 		.map(this.enforceBoundries)
-		.compact()
 		.map(tilePointToSquare)
 		.value();
 	}

src/cartographerFlatXYZ.js

@@ -6,7 +6,11 @@ import {rangeInclusive, sqrt3} from './utils.js';
 import Hex from './hex.js';
 import Point from './point.js';
 
-const tilePointToHex = ({tilePoint, pixelPoint}) => ({tilePoint: new Hex(tilePoint), pixelPoint});
+const tilePointToHex = ({tilePoint, mapPoint, pixelPoint}) => ({
+	tilePoint: tilePoint instanceof Hex ? tilePoint : new Hex(tilePoint),
+	mapPoint: mapPoint instanceof Hex ? mapPoint : new Hex(mapPoint),
+	pixelPoint,
+});
 
 const zeroZeroZero = new Hex({x: 0, y: 0, z: 0});
 
@@ -31,7 +35,7 @@ export default class CartographerFlatXYZ extends Cartographer {
 			'calculateVerticalScale',
 
 			'tileToPixel',
-			'_pixelToTile',
+			'pixelToTile',
 			'teleport',
 
 			'inBounds',
@@ -118,13 +122,13 @@ export default class CartographerFlatXYZ extends Cartographer {
 	tileToPixel (hex) {
 		hex = hex instanceof Hex ? hex : new Hex(...arguments);
 
-		const pixelX = this.scale * 3/2 * hex.getQ();
+		const pixelX = this.scale * 3/2 * hex.getQ() + this.originX;
-		const pixelY = this.scale * sqrt3 * (hex.getR() + (hex.getQ() / 2));
+		const pixelY = this.scale * sqrt3 * (hex.getR() + (hex.getQ() / 2)) + this.originY;
 
-		return new Point(pixelX + this.originX, pixelY + this.originY);
+		return new Point(pixelX, pixelY);
 	}
 
-	_pixelToTile (point) {
+	pixelToTile (point) {
 		point = point instanceof Point ? point : new Point(...arguments);
 
 		const pixelX = point.getX() - this.originX;
@@ -137,6 +141,8 @@ export default class CartographerFlatXYZ extends Cartographer {
 	}
 
 	teleport (hex) {
+		if (!this.wrap) return hex;
+
 		hex  = hex instanceof Hex ? hex : new Hex(hex);
 
 		if (this.radius) {
@@ -207,16 +213,16 @@ export default class CartographerFlatXYZ extends Cartographer {
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {
-		return this.wrap ? ({tilePoint: this.teleport(tilePoint), pixelPoint}) :
+		return this.wrap ? {tilePoint, mapPoint: this.teleport(tilePoint), pixelPoint} :
-			this.inBounds(tilePoint) ? ({tilePoint, pixelPoint}) :
+			this.inBounds(tilePoint) ? {tilePoint, mapPoint: tilePoint, pixelPoint} :
-			null;
+			{tilePoint, mapPoint: null, pixelPoint};
 	}
 
 	boundingBox (upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) {
-		const upperLeftTile = this._pixelToTile(upperLeftPoint);
+		const upperLeftTile = this.pixelToTile(upperLeftPoint);
-		const lowerLeftTile = this._pixelToTile(lowerLeftPoint);
+		const lowerLeftTile = this.pixelToTile(lowerLeftPoint);
-		const lowerRightTile = this._pixelToTile(lowerRightPoint);
+		const lowerRightTile = this.pixelToTile(lowerRightPoint);
-		const upperRightTile = this._pixelToTile(upperRightPoint);
+		const upperRightTile = this.pixelToTile(upperRightPoint);
 
 		const columns = rangeInclusive(upperLeftTile.getQ() - 1, upperRightTile.getQ() + 1);
 
@@ -235,7 +241,6 @@ export default class CartographerFlatXYZ extends Cartographer {
 			.map(makeAPoint)
 			.map(makeAPointPair)
 			.map(this.enforceBoundries)
-			.compact()
 			.map(tilePointToHex)
 			.value();
 		};

src/cartographerPointyXY.js

@@ -6,7 +6,11 @@ import {rangeInclusive, invSqrt2, sqrt2} from './utils.js';
 import Square from './square.js';
 import Point from './point.js';
 
-const tilePointToSquare = ({tilePoint, pixelPoint}) => ({tilePoint: new Square(tilePoint), pixelPoint});
+const tilePointToSquare = ({tilePoint, mapPoint, pixelPoint}) => ({
+	tilePoint: tilePoint instanceof Square ? tilePoint : new Square(tilePoint),
+	mapPoint: mapPoint instanceof Square ? mapPoint : new Square(mapPoint),
+	pixelPoint,
+});
 
 export default class CartographerPointyXY extends Cartographer {
 	constructor(settings) {
@@ -29,7 +33,7 @@ export default class CartographerPointyXY extends Cartographer {
 			'calculateVerticalScale',
 
 			'tileToPixel',
-			'_pixelToTile',
+			'pixelToTile',
 			'teleport',
 
 			'inBounds',
@@ -85,13 +89,13 @@ export default class CartographerPointyXY extends Cartographer {
 		const y = square.getY();
 
 		// (above/below axis) * (distance from axis) / (size)
-		let pixelX =  (x < y ? -1 : 1)  *  (Math.abs(y - x) / sqrt2)  *  this.minWidth();
+		const pixelX =  (x < y ? -1 : 1)  *  (Math.abs(y - x) / sqrt2)  *  this.minWidth() + this.originX;
-		let pixelY = (-x < y ? 1 : -1)  *  (Math.abs(x + y) / sqrt2)  *  this.minWidth();
+		const pixelY = this.originY - (-x < y ? 1 : -1)  *  (Math.abs(x + y) / sqrt2)  *  this.minWidth();
 
-		return new Point(pixelX + this.originX, this.originY - pixelY);
+		return new Point(pixelX, pixelY);
 	}
 
-	_pixelToTile (point) {
+	pixelToTile (point) {
 		point = point instanceof Point ? point : new Point(...arguments);
 
 		const pixelX = point.getX() - this.originX;
@@ -105,6 +109,8 @@ export default class CartographerPointyXY extends Cartographer {
 	}
 
 	teleport ({x, y}) {
+		if (!this.wrap) return new Point(x, y);
+
 		x = x % this.width;
 		y = y % this.height;
 
@@ -126,16 +132,16 @@ export default class CartographerPointyXY extends Cartographer {
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {
-		return this.wrap ? ({tilePoint: this.teleport(tilePoint), pixelPoint}) :
+		return this.wrap ? {tilePoint, mapPoint: this.teleport(tilePoint), pixelPoint} :
-			this.inBounds(tilePoint) ? ({tilePoint, pixelPoint}) :
+			this.inBounds(tilePoint) ? {tilePoint, mapPoint: tilePoint, pixelPoint} :
-			null;
+			{tilePoint, mapPoint: null, pixelPoint};
 	}
 
 	boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) {
-		const upperLeftTile = this._pixelToTile(upperLeftPoint);
+		const upperLeftTile = this.pixelToTile(upperLeftPoint);
-		const lowerRightTile = this._pixelToTile(lowerRightPoint);
+		const lowerRightTile = this.pixelToTile(lowerRightPoint);
-		const upperRightTile = this._pixelToTile(upperRightPoint);
+		const upperRightTile = this.pixelToTile(upperRightPoint);
-		const lowerLeftTile = this._pixelToTile(lowerLeftPoint);
+		const lowerLeftTile = this.pixelToTile(lowerLeftPoint);
 
 		const columns = rangeInclusive(lowerLeftTile.getX(), upperRightTile.getX());
 
@@ -167,7 +173,6 @@ export default class CartographerPointyXY extends Cartographer {
 			.map(makeAPoint)
 			.map(makeAPointPair)
 			.map(this.enforceBoundries)
-			.compact()
 			.map(tilePointToSquare)
 			.value();
 		};

src/cartographerPointyXYZ.js

@@ -6,7 +6,11 @@ import {rangeInclusive, sqrt3} from './utils.js';
 import Hex from './hex.js';
 import Point from './point.js';
 
-const tilePointToHex = ({tilePoint, pixelPoint}) => ({tilePoint: new Hex(tilePoint), pixelPoint});
+const tilePointToHex = ({tilePoint, mapPoint, pixelPoint}) => ({
+	tilePoint: tilePoint instanceof Hex ? tilePoint : new Hex(tilePoint),
+	mapPoint: mapPoint instanceof Hex ? mapPoint : new Hex(mapPoint),
+	pixelPoint,
+});
 
 const zeroZeroZero = new Hex({x: 0, y: 0, z: 0});
 
@@ -31,7 +35,7 @@ export default class CartographerPointyXYZ extends Cartographer {
 			'calculateVerticalScale',
 
 			'tileToPixel',
-			'_pixelToTile',
+			'pixelToTile',
 			'teleport',
 
 			'inBounds',
@@ -124,7 +128,7 @@ export default class CartographerPointyXYZ extends Cartographer {
 		return new Point(pixelX + this.originX, pixelY + this.originY);
 	}
 
-	_pixelToTile (point) {
+	pixelToTile (point) {
 		point = point instanceof Point ? point : new Point(...arguments);
 
 		const pixelX = point.getX() - this.originX;
@@ -137,6 +141,8 @@ export default class CartographerPointyXYZ extends Cartographer {
 	}
 
 	teleport (hex) {
+		if (!this.wrap) return hex;
+
 		hex  = hex instanceof Hex ? hex : new Hex(hex);
 
 		if (this.radius) {
@@ -209,16 +215,16 @@ export default class CartographerPointyXYZ extends Cartographer {
 	}
 
 	enforceBoundries ({tilePoint, pixelPoint}) {
-		return this.wrap ? ({tilePoint: this.teleport(tilePoint), pixelPoint}) :
+		return this.wrap ? {tilePoint, mapPoint: this.teleport(tilePoint), pixelPoint} :
-			this.inBounds(tilePoint) ? ({tilePoint, pixelPoint}) :
+			this.inBounds(tilePoint) ? {tilePoint, mapPoint: tilePoint, pixelPoint} :
-			null;
+			{tilePoint, mapPoint: null, pixelPoint};
 	}
 
 	boundingBox (upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) {
-		const upperLeftTile = this._pixelToTile(upperLeftPoint);
+		const upperLeftTile = this.pixelToTile(upperLeftPoint);
-		const lowerLeftTile = this._pixelToTile(lowerLeftPoint);
+		const lowerLeftTile = this.pixelToTile(lowerLeftPoint);
-		const lowerRightTile = this._pixelToTile(lowerRightPoint);
+		const lowerRightTile = this.pixelToTile(lowerRightPoint);
-		const upperRightTile = this._pixelToTile(upperRightPoint);
+		const upperRightTile = this.pixelToTile(upperRightPoint);
 
 		const rows = rangeInclusive(upperLeftTile.getR() -1 , lowerLeftTile.getR() + 1);
 
@@ -237,7 +243,6 @@ export default class CartographerPointyXYZ extends Cartographer {
 			.map(makeAPoint)
 			.map(makeAPointPair)
 			.map(this.enforceBoundries)
-			.compact()
 			.map(tilePointToHex)
 			.value();
 		};

src/main.js

@@ -10,6 +10,8 @@ const DEFAULTS = {
 	tile:        Tessellate.TILE_STYLES.HEX,
 };
 
+const keyTemplate = ({x, y, z}) => `${ x },${ z != null ? z : y }`;
+
 const pressRipple = function() {
 	const sinStart = 2 * Math.PI;
 	const halfPi = Math.PI / 2;
@@ -125,16 +127,14 @@ class Demo {
 	}
 
 	tap(tap) {
-		const {x, y, z} = tap.tile.getPoint();
+		const key = keyTemplate(tap.mapTile);
-
-		const key = `${ x },${ z != null ? z : y }`;
 
 		const pipMax = this.settings.tile === Tessellate.TILE_STYLES.HEX ? 7 : 9;
 
 		if (this.map[key]) {
 			this.map[key].pips = Tessellate.utils.random(1, pipMax);
 
-			console.log(`{${ x }, ${ y }${ z != null ? `, ${ z }` : ''}}`);
+			console.log(tap.mapTile.getPoint());
 		}
 		else {
 			console.log('ERROR - no tile', key);
@@ -165,19 +165,18 @@ class Demo {
 		});
 
 		if (tap.event.mobile) {
-			this.togglemine(tap.tile)
+			this.togglemine(tap.mapTile)
 		}
 	}
 
 	press(tap) {
 		if (!tap.event.mobile) {
-			this.togglemine(tap.tile)
+			this.togglemine(tap.mapTile)
 		}
 	}
 
 	togglemine(tile) {
-		const {x, y, z} = tile.getPoint();
+		const key = keyTemplate(tile);
-		const key = `${ x },${ z != null ? z : y }`;
 
 		if (this.mines[key]) {
 			delete this.mines[key];
@@ -227,16 +226,16 @@ class Demo {
 	}
 
 	drawTile(pointGroup, context, scale) {
-		const {x, y, z} = pointGroup.tilePoint;
 		const pixelX = pointGroup.pixelPoint.getX();
 		const pixelY = pointGroup.pixelPoint.getY();
 
 		this.counts[0] += 1;
 
-		const key = `${ x },${ z != null ? z : y }`;
+		const key = keyTemplate(pointGroup.mapPoint);
 
 		this.map[key] = this.map[key] || this.createTile({
-			x, y,
+			x: pointGroup.mapPoint.x,
+			y: pointGroup.mapPoint.y,
 			drawStyle: this.settings.style,
 			tileStyle: this.settings.tile,
 			orientation: this.settings.orientation,
@@ -249,7 +248,7 @@ class Demo {
 
 		Tessellate.TILES[tile.tileStyle][tile.drawStyle](context, scale, pixelX, pixelY, tile);
 
-		if (this.mined) {
+		if (this.mined || this.mines[key]) {
 			this.counts[2] += 1;
 			Tessellate.Shapes.mine(context, scale, pixelX, pixelY);
 		}
@@ -284,7 +283,9 @@ class Demo {
 			blue: 128,
 		});
 
-		pointGroups.forEach(pointGroup => this.drawTile(pointGroup, context, scale));
+		pointGroups
+		.filter(pointGroup => pointGroup.mapPoint)
+		.forEach(pointGroup => this.drawTile(pointGroup, context, scale));
 
 		this.ripples.forEach(({timestamp, cell}) => {
 			const pressFactor = Math.min((now - timestamp) / PRESS_RIPPLE, 1);
@@ -292,21 +293,21 @@ class Demo {
 			Object.assign(cell, {scale: pressRipple(pressFactor)});
 			Object.assign(cell.color, {alpha: pressFade(pressFactor)});
 
-			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
+			const pixelPoint = this.tessellate.tileToPixel(cell);
 			Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);
 		});
 		this.ripples = this.ripples.filter(ripple => (ripple.timestamp + PRESS_RIPPLE) > now);
 
 		this.taps.forEach(cell => {
-			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
+			const pixelPoint = this.tessellate.tileToPixel(cell);
 			Tessellate.TILES[cell.tileStyle][cell.drawStyle](context, scale, pixelPoint.getX(), pixelPoint.getY(), cell);
 		});
 
-		Tessellate.funky.forEach(this.mines, cell => {
+//		Tessellate.funky.forEach(this.mines, cell => {
-			this.counts[2] += 1;
+//			this.counts[2] += 1;
-			const pixelPoint = this.tessellate.tileToPixel(cell.x, cell.y);
+//			const pixelPoint = this.tessellate.tileToPixel(cell);
-			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
+//			Tessellate.Shapes.mine(context, scale, pixelPoint.getX(), pixelPoint.getY());
-		});
+//		});
 
 		this.fps.frame(now, lastNow, this.counts);
 	}

src/tessellate.js

@@ -148,26 +148,28 @@ export class Tessellate {
 	}
 
 	tap (event) {
-		let point = new Point(event.offsetX, event.offsetY);
+		const point = new Point(event.offsetX, event.offsetY);
+		const tile = this.cartographer.pixelToTile(point);
+		const mapTile = this.cartographer.teleport(tile);
 
-		let tile = this.cartographer.pixelToTile(point);
+		this.settings.tap({
-
-		let tap = {
 			event,
+			mapTile,
 			point,
-			tile
+			tile,
-		};
+		});
-
-		this.settings.tap(tap);
 	}
 
 	doubletap (event) {
 		console.log('DOUBLETAP', event);
-		let point = new Point(event.offsetX, event.offsetY);
+		const point = new Point(event.offsetX, event.offsetY);
-		let tile = this.cartographer.pixelToTile(point);
+		const tile = this.cartographer.pixelToTile(point);
+		const mapTile = this.cartographer.teleport(tile);
 
 		let tap = {
 			event,
+			map,
+			mapTile,
 			point,
 			tile
 		};
@@ -176,29 +178,44 @@ export class Tessellate {
 	}
 
 	pressStart (event) {
-		let point = new Point(event.offsetX, event.offsetY);
+		const point = new Point(event.offsetX, event.offsetY);
-		let tile = this.cartographer.pixelToTile(point);
+		const tile = this.cartographer.pixelToTile(point);
+		const mapTile = this.cartographer.teleport(tile);
 
 		let tap = {
 			event,
+			mapTile,
 			point,
 			tile
 		};
 
-		this.settings.pressStart(tap);
+		console.log(tap);
+	}
+
+	pressStart (event) {
+		const point = new Point(event.offsetX, event.offsetY);
+		const tile = this.cartographer.pixelToTile(point);
+		const mapTile = this.cartographer.teleport(tile);
+
+		this.settings.pressStart({
+			event,
+			mapTile,
+			point,
+			tile,
+		});
 	}
 
 	press (event) {
-		let point = new Point(event.offsetX, event.offsetY);
+		const point = new Point(event.offsetX, event.offsetY);
-		let tile = this.cartographer.pixelToTile(point);
+		const tile = this.cartographer.pixelToTile(point);
+		const mapTile = this.cartographer.teleport(tile);
 
-		let tap = {
+		this.settings.press({
 			event,
+			mapTile,
 			point,
-			tile
+			tile,
-		};
+		});
-
-		this.settings.press(tap);
 	}
 
 	move (event) {
@@ -213,8 +230,8 @@ export class Tessellate {
 		return this.cartographer.pixelToTile(x, y);
 	}
 
-	tileToPixel (x, y, z) {
+	tileToPixel (tilePoint) {
-		return this.cartographer.tileToPixel(x, y, z);
+		return this.cartographer.tileToPixel(tilePoint);
 	}
 
 	getTilePoints ({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) {