rendering a board of squares
This commit is contained in:
Gavin McDonald
189
src/cartographer.js
Normal file
189
src/cartographer.js
Normal file
@@ -0,0 +1,189 @@
|
||||
|
||||
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));
|
||||
|
||||
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() {
|
||||
// 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) {
|
||||
|
||||
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))
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user