gavin/Tessellate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

click and drag panning

Browse Source
This commit is contained in:
Gavin McDonald
2016-02-24 17:38:51 -05:00
parent 4e06b756d8
commit e78cedda18
2 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/onTap.js
View File

@@ -58,6 +58,9 @@ export default class OnTap {
deltaY: event.pageY - this.state.clickStartY deltaY: event.pageY - this.state.clickStartY
}); });
this.state.moving = null;
this.state.lastX = null;
this.state.lastY = null;
this.state.clickStartX = null; this.state.clickStartX = null;
this.state.clickStartY = null; this.state.clickStartY = null;
this.state.clickStartTime = null; this.state.clickStartTime = null;
@@ -69,6 +72,26 @@ export default class OnTap {
mousemove(event) { mousemove(event) {
// console.log('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) { touchstart(event) {
@@ -89,6 +112,9 @@ export default class OnTap {
deltaY: event.pageY - this.state.clickStartY deltaY: event.pageY - this.state.clickStartY
}); });
this.state.moving = null;
this.state.lastX = null;
this.state.lastY = null;
this.state.clickStartX = null; this.state.clickStartX = null;
this.state.clickStartY = null; this.state.clickStartY = null;
this.state.clickStartTime = null; this.state.clickStartTime = null;
@@ -100,6 +126,26 @@ export default class OnTap {
touchmove(event) { touchmove(event) {
// console.log('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) { touchcancel(event) {

7
src/tessellate.js
View File

@@ -18,7 +18,7 @@ import ExWhyZee from './exWhyZee.js';
export default class Tessellate { export default class Tessellate {
constructor(settings) { 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.drawCB = settings.draw || utils.noop;
this.clickCB = settings.click || utils.noop; this.clickCB = settings.click || utils.noop;
@@ -32,6 +32,7 @@ export default class Tessellate {
this.onTap = new OnTap({ this.onTap = new OnTap({
element: this.element, element: this.element,
tap: this.tap, tap: this.tap,
move: this.move,
zoom: this.zoom zoom: this.zoom
}); });
@@ -50,6 +51,10 @@ export default class Tessellate {
this.clickCB(event); this.clickCB(event);
} }
move(event) {
this.xyz.move(event);
}
zoom(event) { zoom(event) {
this.xyz.zoom(event); this.xyz.zoom(event);
} }