diff --git a/src/main.js b/src/main.js index 2072350..12a4b5d 100644 --- a/src/main.js +++ b/src/main.js @@ -270,7 +270,7 @@ class Demo { } } - draw({context, height, width, scale, locationSets, now, lastNow}) { + draw({context, height, width, scale, interacted, moved, locationSets, now, lastNow}) { this.counts = [ 0, // tiles 0, // pips @@ -310,6 +310,8 @@ class Demo { // }); this.fps.frame(now, lastNow, this.counts); + + return interacted || moved || this.ripples.length ? 0 : 100; } } diff --git a/src/sketch.js b/src/sketch.js index 66cc8d3..963c7f2 100644 --- a/src/sketch.js +++ b/src/sketch.js @@ -13,7 +13,6 @@ export default class Sketch { this.draw = settings.draw || noop; this.resize = settings.resize || noop; - this.drawDelay = settings.drawDelay; this.container = settings.element || document.body; window.addEventListener('resize', this.onResize); @@ -69,11 +68,11 @@ export default class Sketch { this.context.now = now; this.context.lastNow = this.lastNow; - this.draw(this.context); + const drawDelay = this.draw(this.context); this.lastNow = now; - if (this.drawDelay) setTimeout(() => requestAnimationFrame(this.render), this.drawDelay); + if (drawDelay) setTimeout(() => requestAnimationFrame(this.render), drawDelay); else requestAnimationFrame(this.render); } } diff --git a/src/tessellate.js b/src/tessellate.js index ce5c648..6e348ea 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -95,11 +95,11 @@ export class Tessellate { this.checkSettings(settings); - this.sketch = new Sketch(Object.assign({ + this.sketch = new Sketch({ element: this.settings.element, draw: this.draw, resize: this.resize, - }, funky.pick(this.settings, ['drawDelay']))); + }); this.onTap = new OnTap(Object.assign({ element: this.settings.element, @@ -152,6 +152,8 @@ export class Tessellate { const tile = this.cartographer.pixelToTile(point); const mapTile = this.cartographer.teleport(tile); + this.interacted = true; + this.settings.tap({ event, mapTile, @@ -166,6 +168,8 @@ export class Tessellate { const tile = this.cartographer.pixelToTile(point); const mapTile = this.cartographer.teleport(tile); + this.interacted = true; + let tap = { event, map, @@ -182,20 +186,7 @@ export class Tessellate { const tile = this.cartographer.pixelToTile(point); const mapTile = this.cartographer.teleport(tile); - let tap = { - event, - mapTile, - point, - tile - }; - - console.log(tap); - } - - pressStart (event) { - const point = new Point(event.offsetX, event.offsetY); - const tile = this.cartographer.pixelToTile(point); - const mapTile = this.cartographer.teleport(tile); + this.interacted = true; this.settings.pressStart({ event, @@ -210,6 +201,8 @@ export class Tessellate { const tile = this.cartographer.pixelToTile(point); const mapTile = this.cartographer.teleport(tile); + this.interacted = true; + this.settings.press({ event, mapTile, @@ -234,7 +227,25 @@ export class Tessellate { return this.cartographer.tileToPixel(tilePoint); } - getLocationSets ({upperLeftX, upperLeftY, lowerRightX, lowerRightY}) { + newLocation (corners) { + this.lastLocation = this.lastLocation || {}; + + const currentLocation = utils.extend({ + originX: this.cartographer.getOriginX(), + originY: this.cartographer.getOriginY(), + scaleOrig: this.cartographer.getScale(), + }, corners); + + const changed = funky.reduce(currentLocation, (same, val, key) => same || this.lastLocation[key] !== val, false); + + this.lastLocation = currentLocation; + + return changed; + } + + getLocationSets (corners) { + const {upperLeftX, upperLeftY, lowerRightX, lowerRightY} = corners; + const upperLeft = new Point(upperLeftX, upperLeftY); const upperRight = new Point(lowerRightX, 0); const lowerLeft = new Point(0, lowerRightY); @@ -255,9 +266,13 @@ export class Tessellate { lowerRightY: height }; - const locationSets = this.getLocationSets(corners); + const interacted = this.interacted; + this.interacted = false; - this.settings.draw({ + const moved = this.newLocation(corners); + this.locationSets = moved ? this.getLocationSets(corners) : this.locationSets; + + return this.settings.draw({ context, height, width, @@ -266,7 +281,9 @@ export class Tessellate { lastNow: context.lastUTC, now: context.utc, - locationSets, + interacted, + moved, + locationSets: this.locationSets, }); }