gavin/Tessellate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make sure Hex stuff still works

Browse Source
This commit is contained in:
Gavin McDonald
2018-06-24 14:58:31 -04:00
parent bf37910877
commit 3830419b72
4 changed files with 39 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/cartographer.js
View File

@@ -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) {

58
src/exWhyZee.js → src/cartographerXYZ.js
View File

@@ -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) {

2
src/main.js
View File

@@ -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,

32
src/tessellate.js
View File

@@ -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.hexagon = new DrawHexagon();
this.square = new DrawSquare();
this.cartographer = this.settings.board === HEX ? new CartographerXYZ(boardSettings) : new CartographerXY(boardSettings);
}
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());
//