diff --git a/src/cartographer.js b/src/cartographer.js index 787a759..76bdfef 100644 --- a/src/cartographer.js +++ b/src/cartographer.js @@ -9,7 +9,7 @@ const DEFAULTS = { }; export default class Cartographer { - constructor(settings) { + constructor (settings) { [ 'getOriginX', 'getOriginY', @@ -22,6 +22,8 @@ export default class Cartographer { 'setOriginY', 'zoom', + + 'remap', ].map(method => this[method] = this[method].bind(this)); this.settings = Object.assign({}, DEFAULTS, settings); @@ -34,12 +36,12 @@ export default class Cartographer { this.setOriginY(this.settings.canvasHeight, this.settings.centerY); } - getOriginX() {return this.originX;} - getOriginY() {return this.originY;} + getOriginX () {return this.originX;} + getOriginY () {return this.originY;} - getScale() {return this.scale;} + getScale () {return this.scale;} - checkScale(canvasHeight, canvasWidth) { + checkScale (canvasHeight, canvasWidth) { const heightMin = this.height ? this.calculateVerticalScale(canvasHeight, this.height) : 0; const widthMin = this.width ? this.calculateHorizontalScale(canvasWidth, this.width) : 0; @@ -81,7 +83,7 @@ export default class Cartographer { return this.originX === newX && this.originY === newY; } - _checkMove(event) { + _checkMove (event) { if (this.negativeTiles) { this._checkMoveNegativeTiles(event); } @@ -90,7 +92,7 @@ export default class Cartographer { } } - _checkMovePositiveTiles(event) { + _checkMovePositiveTiles (event) { const canvasWidth = event.width; const canvasHeight = event.height; @@ -118,7 +120,7 @@ export default class Cartographer { } } - _checkMoveNegativeTiles(event) { + _checkMoveNegativeTiles (event) { const colWidth = this.horizontalDistance(); const rowHeight = this.verticalDistance(); @@ -141,7 +143,7 @@ export default class Cartographer { } } - zoom(event) { + zoom (event) { const scaleOrig = this.scale; let scaleTemp = scaleOrig * event.scaleStep; @@ -161,4 +163,13 @@ export default class Cartographer { }); } } + + remap (config) { + Object.assign(this, pick(config, ['height', 'width', 'negativeTiles'])); + + this.checkScale(config.canvasHeight, config.canvasWidth); + + this.setOriginX(config.canvasWidth, config.centerX); + this.setOriginY(config.canvasHeight, config.centerY); + } } diff --git a/src/sketch.js b/src/sketch.js index 4a73a81..7688958 100644 --- a/src/sketch.js +++ b/src/sketch.js @@ -6,6 +6,7 @@ export default class Sketch { [ 'getContext', + 'getSize', 'onResize', 'render', ].map(method => this[method] = this[method].bind(this)); @@ -32,6 +33,13 @@ export default class Sketch { return this.context; } + getSize () { + return { + canvasWidth: this.container.offsetWidth, + canvasHeight: this.container.offsetHeight, + } + } + onResize (event) { const width = this.container.offsetWidth; const height = this.container.offsetHeight; diff --git a/src/tessellate.js b/src/tessellate.js index 54e7c26..bc89c99 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -90,6 +90,7 @@ export class Tessellate { 'getTilePoints', 'draw', 'resize', + 'remap', ].map(method => {this[method] = this[method].bind(this)}); this.checkSettings(settings); @@ -111,10 +112,14 @@ export class Tessellate { }, funky.pick(this.settings, ['desktopPress', 'moveThreshold', 'doubletapThreshold', 'pressThreshold', 'wheelFactor']))); const cartographer = selectCartographer(this.settings.board, this.settings.orientation); - this.cartographer = new cartographer(Object.assign({ - canvasWidth: this.sketch.getContext().canvas.width, - canvasHeight: this.sketch.getContext().canvas.height, - }, funky.pick(this.settings, ['centerX', 'centerY', 'height', 'width', 'scale', 'negativeTiles']))); + this.cartographer = new cartographer(Object.assign(this.sketch.getSize(), funky.pick(this.settings, [ + 'centerX', + 'centerY', + 'height', + 'width', + 'scale', + 'negativeTiles', + ]))); } checkSettings (settings) { @@ -262,4 +267,11 @@ export class Tessellate { this.move(moveForScale); } + + remap ({height, width}) { + this.cartographer.remap(Object.assign({ + height, + width, + }, this.sketch.getSize())); + } }