From 839971a8c01f0192d62079c65c40e74234250d7c Mon Sep 17 00:00:00 2001 From: Gavin McDonald Date: Sat, 5 Mar 2016 20:48:18 -0500 Subject: [PATCH] report location of hex coordinate on tap --- src/main.js | 14 +++++++------- src/onTap.js | 26 ++++++++++---------------- src/tessellate.js | 13 +++++++++++-- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/src/main.js b/src/main.js index faf411d..9eb3ae2 100644 --- a/src/main.js +++ b/src/main.js @@ -7,13 +7,13 @@ import {Cell} from './tessellate.js'; class Demo { constructor() { - ['click', 'draw'].map(method => this[method] = this[method].bind(this)); + ['onTap', 'draw'].map(method => this[method] = this[method].bind(this)); this.map = []; let tessellate = new Tessellate({ element: '#container', - click: this.click, + tap: this.onTap, draw: this.draw }); @@ -25,16 +25,16 @@ class Demo { this.styles = ['filled', 'outline']; } - click(event) { - let x = event.pageX; - let y = event.pageY; + onTap(tap) { let scale = utils.random(10, 50); + console.log(tap.hex.getHex()); + this.map.push(new Cell({ tile: this.tiles[utils.random(this.tiles.length-1)], style: this.styles[utils.random(this.styles.length-1)], - x, - y, + x: tap.point.x, + y: tap.point.y, scale, pointyTop: utils.random(1) ? true : false, red: utils.random(255), diff --git a/src/onTap.js b/src/onTap.js index 76c0010..4e09a85 100644 --- a/src/onTap.js +++ b/src/onTap.js @@ -46,8 +46,6 @@ export default class OnTap { this.state.clickStartY = event.pageY; this.state.clickStartTime = event.timeStamp; } - - console.log('mousedown', event); } touchstart(event) { @@ -56,22 +54,19 @@ export default class OnTap { this.state.clickStartY = event.pageY; this.state.clickStartTime = event.timeStamp; } - - console.log('touchstart', event); } mouseup(event) { if (!this.state.moving) { - console.log('mouseup', event); this.actions.tap.callback(event); } else { - console.log({ - duration: event.timeStamp - this.state.clickStartTime, - deltaX: event.pageX - this.state.clickStartX, - deltaY: event.pageY - this.state.clickStartY - }); +// console.log({ +// duration: event.timeStamp - this.state.clickStartTime, +// deltaX: event.pageX - this.state.clickStartX, +// deltaY: event.pageY - this.state.clickStartY +// }); } this.state.moving = null; @@ -85,15 +80,14 @@ export default class OnTap { touchend(event) { if (!this.state.moving) { - console.log('touchend', event); this.actions.tap.callback(event); } else { - console.log({ - duration: event.timeStamp - this.state.clickStartTime, - deltaX: event.pageX - this.state.clickStartX, - deltaY: event.pageY - this.state.clickStartY - }); +// console.log({ +// duration: event.timeStamp - this.state.clickStartTime, +// deltaX: event.pageX - this.state.clickStartX, +// deltaY: event.pageY - this.state.clickStartY +// }); } this.state.moving = null; diff --git a/src/tessellate.js b/src/tessellate.js index 97028f4..b19a0f0 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -20,8 +20,8 @@ export default class Tessellate { constructor(settings) { ['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)}); + this.tapCB = settings.tap || utils.noop; this.drawCB = settings.draw || utils.noop; - this.clickCB = settings.click || utils.noop; this.element = document.querySelector(settings.element); this.sketch = new Sketch({ @@ -48,7 +48,16 @@ export default class Tessellate { } tap(event) { - this.clickCB(event); + let point = new Point(event.offsetX, event.offsetY); + let hex = this.xyz.pixelToHex(point); + + let tap = { + event, + point, + hex + }; + + this.tapCB(tap); } move(event) {