wrapping for pointyXY

This commit is contained in:
Gavin McDonald
2018-12-16 14:11:56 -05:00
parent 9b4f2e92ad
commit e631691289
4 changed files with 67 additions and 32 deletions

View File

@@ -21,6 +21,8 @@ export default class Cartographer {
'setOriginX', 'setOriginX',
'setOriginY', 'setOriginY',
'pixelToTile',
'zoom', 'zoom',
'remap', 'remap',
@@ -52,7 +54,9 @@ export default class Cartographer {
const widthMin = this.width ? this.calculateHorizontalScale(canvasWidth, this.width) : 0; const widthMin = this.width ? this.calculateHorizontalScale(canvasWidth, this.width) : 0;
this.scaleMax = this.settings.scaleMax; this.scaleMax = this.settings.scaleMax;
this.scaleMin = Math.max(this.settings.scaleMin, heightMin, widthMin); // this.scaleMin = Math.max(this.settings.scaleMin, heightMin, widthMin);
// this.scaleMin = this.wrap ? this.settings.scaleMin : Math.max(this.settings.scaleMin, heightMin, widthMin);
this.scaleMin = this.settings.scaleMin;
this.scale = this.scaleMin > this.settings.scale ? this.scaleMin : this.settings.scale; this.scale = this.scaleMin > this.settings.scale ? this.scaleMin : this.settings.scale;
} }
@@ -157,6 +161,11 @@ export default class Cartographer {
} }
} }
pixelToTile (point) {
const tile = this._pixelToTile(point);
return this.wrap ? this.teleport(tile) : tile;
}
zoom (event) { zoom (event) {
const scaleOrig = this.scale; const scaleOrig = this.scale;

View File

@@ -6,8 +6,7 @@ import {rangeInclusive, invSqrt2} from './utils.js';
import Point from './point.js'; import Point from './point.js';
import Square from './square.js'; import Square from './square.js';
const makeASquare = ({x, y}) => new Square(x, y); const tilePointToSquare = ({tilePoint, pixelPoint}) => ({tilePoint: new Square(tilePoint), pixelPoint});
const tilePointToSquare = ({tilePoint, pixelPoint}) => ({tilePoint: makeASquare(tilePoint), pixelPoint});
export default class CartographerFlatXY extends Cartographer { export default class CartographerFlatXY extends Cartographer {
constructor(settings) { constructor(settings) {
@@ -30,7 +29,7 @@ export default class CartographerFlatXY extends Cartographer {
'calculateVerticalScale', 'calculateVerticalScale',
'tileToPixel', 'tileToPixel',
'pixelToTile', '_pixelToTile',
'teleport', 'teleport',
'inBounds', 'inBounds',
@@ -88,7 +87,7 @@ export default class CartographerFlatXY extends Cartographer {
return new Point(x + this.originX, this.originY - y); return new Point(x + this.originX, this.originY - y);
} }
pixelToTile(point) { _pixelToTile (point) {
point = point instanceof Point ? point : new Point(...arguments); point = point instanceof Point ? point : new Point(...arguments);
const pixelX = point.getX() - this.originX; const pixelX = point.getX() - this.originX;
@@ -101,16 +100,11 @@ export default class CartographerFlatXY extends Cartographer {
} }
teleport ({x, y}) { teleport ({x, y}) {
if (this.negativeTiles) {
x = x % Math.ceil(this.width / 2);
y = y % Math.ceil(this.height / 2);
}
else {
x = x % this.width; x = x % this.width;
y = y % this.height; y = y % this.height;
x = x < 0 ? this.width + x : x; x = x < 0 ? this.width + x : x;
y = y < 0 ? this.height + y : y; y = y < 0 ? this.height + y : y;
}
return new Point(x, y); return new Point(x, y);
} }
@@ -133,9 +127,9 @@ export default class CartographerFlatXY extends Cartographer {
} }
boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) { 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 columns = rangeInclusive(upperLeftTile.getX(), upperRightTile.getX());
const rows = rangeInclusive(lowerRightTile.getY(), upperLeftTile.getY()); const rows = rangeInclusive(lowerRightTile.getY(), upperLeftTile.getY());

View File

@@ -1,10 +1,13 @@
import Cartographer from './cartographer.js'; import Cartographer from './cartographer.js';
import * as funky from './funky';
import {rangeInclusive, invSqrt2, sqrt2} from './utils.js'; import {rangeInclusive, invSqrt2, sqrt2} from './utils.js';
import Square from './square.js'; import Square from './square.js';
import Point from './point.js'; import Point from './point.js';
const tilePointToSquare = ({tilePoint, pixelPoint}) => ({tilePoint: new Square(tilePoint), pixelPoint});
export default class CartographerPointyXY extends Cartographer { export default class CartographerPointyXY extends Cartographer {
constructor(settings) { constructor(settings) {
super(settings); super(settings);
@@ -26,9 +29,11 @@ export default class CartographerPointyXY extends Cartographer {
'calculateVerticalScale', 'calculateVerticalScale',
'tileToPixel', 'tileToPixel',
'pixelToTile', '_pixelToTile',
'teleport',
'inBounds', 'inBounds',
'enforceBoundries',
'boundingBox', 'boundingBox',
].map(method => this[method] = this[method].bind(this)); ].map(method => this[method] = this[method].bind(this));
} }
@@ -86,7 +91,7 @@ export default class CartographerPointyXY extends Cartographer {
return new Point(pixelX + this.originX, this.originY - pixelY); return new Point(pixelX + this.originX, this.originY - pixelY);
} }
pixelToTile(point) { _pixelToTile (point) {
point = point instanceof Point ? point : new Point(...arguments); point = point instanceof Point ? point : new Point(...arguments);
const pixelX = point.getX() - this.originX; const pixelX = point.getX() - this.originX;
@@ -99,7 +104,17 @@ export default class CartographerPointyXY extends Cartographer {
return new Square(x, y); return new Square(x, y);
} }
inBounds (x, y) { teleport ({x, y}) {
x = x % this.width;
y = y % this.height;
x = x < 0 ? this.width + x : x;
y = y < 0 ? this.height + y : y;
return new Point(x, y);
}
inBounds ({x, y}) {
if (this.negativeTiles) { if (this.negativeTiles) {
return (!this.width || Math.abs(x) <= Math.floor(this.width / 2)) return (!this.width || Math.abs(x) <= Math.floor(this.width / 2))
&& (!this.height || Math.abs(y) <= Math.floor(this.height / 2)); && (!this.height || Math.abs(y) <= Math.floor(this.height / 2));
@@ -110,11 +125,17 @@ export default class CartographerPointyXY extends Cartographer {
} }
} }
enforceBoundries ({tilePoint, pixelPoint}) {
return this.wrap ? ({tilePoint: this.teleport(tilePoint), pixelPoint}) :
this.inBounds(tilePoint) ? ({tilePoint, pixelPoint}) :
null;
}
boundingBox(upperLeftPoint, upperRightPoint, lowerLeftPoint, lowerRightPoint) { 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()); const columns = rangeInclusive(lowerLeftTile.getX(), upperRightTile.getX());
@@ -128,7 +149,10 @@ export default class CartographerPointyXY extends Cartographer {
const midway = columns.length % 2 ? columns[aboutHalf] : const midway = columns.length % 2 ? columns[aboutHalf] :
(columns[aboutHalf - 1] + columns[aboutHalf]) / 2; (columns[aboutHalf - 1] + columns[aboutHalf]) / 2;
return columns.map(x => { const makeAPointPair = tilePoint => ({tilePoint, pixelPoint: this.tileToPixel(tilePoint)});
return funky.chain(columns)
.map(x => {
let top = x < midway ? upperLeftIntercept + x : upperRightIntercept - x; let top = x < midway ? upperLeftIntercept + x : upperRightIntercept - x;
let bottom = x < midway ? lowerRightIntercept - x : lowerLeftIntercept + x; let bottom = x < midway ? lowerRightIntercept - x : lowerLeftIntercept + x;
@@ -138,10 +162,17 @@ export default class CartographerPointyXY extends Cartographer {
// push out by 1 on either end to account for interlocking tiles // push out by 1 on either end to account for interlocking tiles
const rows = rangeInclusive(bottom - 1, top + 1); const rows = rangeInclusive(bottom - 1, top + 1);
return rows.map(y => ({x, y})) const makeAPoint = y => ({x, y});
.reduce((flat, list) => flat.concat(list), [])
.filter(({x, y}) => this.inBounds(x, y)) return funky.chain(rows)
.map(({x, y}) => new Square(x, y)); .map(makeAPoint)
}); .map(makeAPointPair)
.map(this.enforceBoundries)
.compact()
.map(tilePointToSquare)
.value();
})
.flatten()
.value();
} }
} }

View File

@@ -143,6 +143,7 @@ export class Tessellate {
tap (event) { tap (event) {
let point = new Point(event.offsetX, event.offsetY); let point = new Point(event.offsetX, event.offsetY);
let tile = this.cartographer.pixelToTile(point); let tile = this.cartographer.pixelToTile(point);
let tap = { let tap = {
@@ -216,7 +217,7 @@ export class Tessellate {
const lowerLeft = new Point(0, lowerRightY); const lowerLeft = new Point(0, lowerRightY);
const lowerRight = new Point(lowerRightX, lowerRightY); const lowerRight = new Point(lowerRightX, lowerRightY);
return funky.flatten(this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight)); return this.cartographer.boundingBox(upperLeft, upperRight, lowerLeft, lowerRight);
} }
draw (context) { draw (context) {