diff --git a/src/onTap.js b/src/onTap.js index d433c51..73c330f 100644 --- a/src/onTap.js +++ b/src/onTap.js @@ -58,6 +58,9 @@ export default class OnTap { deltaY: event.pageY - this.state.clickStartY }); + this.state.moving = null; + this.state.lastX = null; + this.state.lastY = null; this.state.clickStartX = null; this.state.clickStartY = null; this.state.clickStartTime = null; @@ -69,6 +72,26 @@ export default class OnTap { mousemove(event) { // console.log('mousemove', event); + + if (this.state.clickStartTime) { + if (!this.state.moving) { + if ((Math.abs(event.pageX - this.state.clickStartX) > this.actions.move.threshold) + || (Math.abs(event.pageY - this.state.clickStartY) > this.actions.move.threshold)) { + this.state.moving = true; + this.state.lastX = this.state.clickStartX; + this.state.lastY = this.state.clickStartY; + } + } + + if (this.state.moving) { + event.deltaX = event.pageX - this.state.lastX, + event.deltaY = event.pageY - this.state.lastY + this.actions.move.callback(event); + + this.state.lastX = event.pageX; + this.state.lastY = event.pageY; + } + } } touchstart(event) { @@ -89,6 +112,9 @@ export default class OnTap { deltaY: event.pageY - this.state.clickStartY }); + this.state.moving = null; + this.state.lastX = null; + this.state.lastY = null; this.state.clickStartX = null; this.state.clickStartY = null; this.state.clickStartTime = null; @@ -100,6 +126,26 @@ export default class OnTap { touchmove(event) { // console.log('touchmove', event); + + if (this.state.clickStartTime) { + if (!this.state.moving) { + if ((Math.abs(event.pageX - this.state.clickStartX) > this.actions.move.threshold) + || (Math.abs(event.pageY - this.state.clickStartY) > this.actions.move.threshold)) { + this.state.moving = true; + this.state.lastX = this.state.clickStartX; + this.state.lastY = this.state.clickStartY; + } + } + + if (this.state.moving) { + event.deltaX = event.pageX - this.state.lastX, + event.deltaY = event.pageY - this.state.lastY + this.actions.move.callback(event); + + this.state.lastX = event.pageX; + this.state.lastY = event.pageY; + } + } } touchcancel(event) { diff --git a/src/tessellate.js b/src/tessellate.js index eef5afd..97028f4 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -18,7 +18,7 @@ import ExWhyZee from './exWhyZee.js'; export default class Tessellate { constructor(settings) { - ['tap', 'draw', 'drawMap', 'zoom'].map(method => {this[method] = this[method].bind(this)}); + ['tap', 'draw', 'drawMap', 'move', 'zoom'].map(method => {this[method] = this[method].bind(this)}); this.drawCB = settings.draw || utils.noop; this.clickCB = settings.click || utils.noop; @@ -32,6 +32,7 @@ export default class Tessellate { this.onTap = new OnTap({ element: this.element, tap: this.tap, + move: this.move, zoom: this.zoom }); @@ -50,6 +51,10 @@ export default class Tessellate { this.clickCB(event); } + move(event) { + this.xyz.move(event); + } + zoom(event) { this.xyz.zoom(event); }