Center non-negative, finite, boards (#14)

This commit is contained in:
gavin
2018-08-23 02:03:06 +00:00
committed by Gitea
parent 77993e41e8
commit 90cf1723a8
4 changed files with 30 additions and 17 deletions

View File

@@ -17,6 +17,8 @@ export default class Cartographer {
'move', 'move',
'_checkMove', '_checkMove',
'_setOriginX',
'_setOriginY',
'zoom', 'zoom',
].map(method => this[method] = this[method].bind(this)); ].map(method => this[method] = this[method].bind(this));
@@ -25,13 +27,8 @@ export default class Cartographer {
this._checkScale(this.canvasHeight, this.canvasWidth); this._checkScale(this.canvasHeight, this.canvasWidth);
this.originX = has(this, 'originX') ? this.originX : this._setOriginX();
this.negativeTiles ? parseInt(this.canvasWidth / 2) : this._setOriginY();
this.tileWidth() / 2;
this.originY = has(this, 'originY') ? this.originY :
this.negativeTiles ? parseInt(this.canvasHeight / 2) :
this.canvasHeight - (this.tileHeight() / 2);
} }
getOriginX() {return this.originX;} getOriginX() {return this.originX;}
@@ -46,6 +43,22 @@ export default class Cartographer {
this.scale = this.scaleMin > this.scale ? this.scaleMin : this.scale; this.scale = this.scaleMin > this.scale ? this.scaleMin : this.scale;
} }
_setOriginX () {
this.originX = has(this, 'originX') ? this.originX :
this.negativeTiles ? parseInt(this.canvasWidth / 2) :
this.width ? ((this.width * this.tileWidth()) / -2) + (this.canvasWidth / 2) + (this.tileWidth() / 2) :
this.tileWidth() / 2;
}
_setOriginY () {
const boardHeight = this.height * this.tileHeight();
this.originY = has(this, 'originY') ? this.originY :
this.negativeTiles ? parseInt(this.canvasHeight / 2) :
this.height ? (boardHeight) - ((boardHeight - this.canvasHeight) / 2) - (this.tileHeight() / 2) :
this.canvasHeight - (this.tileHeight() / 2);
}
move(event) { move(event) {
if (event.deltaX) { if (event.deltaX) {

View File

@@ -12,7 +12,7 @@ export const BOARD_STYLES = {
export const FLAT = 'flat'; export const FLAT = 'flat';
export const POINTY = 'pointy'; export const POINTY = 'pointy';
export const TILE_ORIENTATIONS = { export const ORIENTATION_STYLES = {
FLAT, FLAT,
POINTY, POINTY,
}; };

View File

@@ -4,7 +4,7 @@ const PRESS_RIPPLE = ONE_SECOND / 3;
const DEFAULTS = { const DEFAULTS = {
board: Tessellate.BOARD_STYLES.HEX, board: Tessellate.BOARD_STYLES.HEX,
style: Tessellate.DRAW_STYLES.FILL, style: Tessellate.DRAW_STYLES.FILL,
orientation: Tessellate.TILE_ORIENTATIONS.FLAT, orientation: Tessellate.ORIENTATION_STYLES.FLAT,
tile: Tessellate.TILE_STYLES.HEX, tile: Tessellate.TILE_STYLES.HEX,
}; };
@@ -107,7 +107,7 @@ class Demo {
drawStyle: Tessellate.DRAW_STYLES.FILL, drawStyle: Tessellate.DRAW_STYLES.FILL,
tileStyle: Tessellate.TILE_STYLES.CIRCLE, tileStyle: Tessellate.TILE_STYLES.CIRCLE,
orientation: Tessellate.TILE_ORIENTATIONS.FLAT, orientation: Tessellate.ORIENTATION_STYLES.FLAT,
red: 255, red: 255,
green: 127, green: 127,

View File

@@ -22,7 +22,7 @@ import {
TILE_STYLES, TILE_STYLES,
BOARD_STYLES, BOARD_STYLES,
FLAT, POINTY, FLAT, POINTY,
TILE_ORIENTATIONS, ORIENTATION_STYLES,
FILL, OUTLINE, FILL, OUTLINE,
DRAW_STYLES, DRAW_STYLES,
} from './consts.js'; } from './consts.js';
@@ -64,13 +64,13 @@ function selectCartographer(board, orientation) {
} }
export class Tessellate { export class Tessellate {
static get TILE_STYLES() {return TILE_STYLES} static get TILE_STYLES() {return TILE_STYLES}
static get BOARD_STYLES() {return BOARD_STYLES} static get BOARD_STYLES() {return BOARD_STYLES}
static get TILE_ORIENTATIONS() {return TILE_ORIENTATIONS} // TODO: rename to ORIENTATION_STYLES static get ORIENTATION_STYLES() {return ORIENTATION_STYLES}
static get DRAW_STYLES() {return DRAW_STYLES} static get DRAW_STYLES() {return DRAW_STYLES}
static get TILES() {return TILES} static get TILES() {return TILES}
static get Cell() {return Cell} static get Cell() {return Cell}
static get Shapes() {return Shapes} static get Shapes() {return Shapes}
static get utils() {return utils} static get utils() {return utils}