wrapping for pointyXY
This commit is contained in:
@@ -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;
|
||||||
|
|
||||||
|
|||||||
@@ -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 % this.width;
|
||||||
x = x % Math.ceil(this.width / 2);
|
y = y % this.height;
|
||||||
y = y % Math.ceil(this.height / 2);
|
|
||||||
}
|
x = x < 0 ? this.width + x : x;
|
||||||
else {
|
y = y < 0 ? this.height + y : 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);
|
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());
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user