diff --git a/src/cartographer.js b/src/cartographer.js index ab00808..ced8a73 100644 --- a/src/cartographer.js +++ b/src/cartographer.js @@ -18,8 +18,6 @@ export default class Cartographer { 'move', '_checkMove', - 'pinch', - 'zoom', ].map(method => this[method] = this[method].bind(this)); @@ -122,7 +120,7 @@ export default class Cartographer { } } - pinch(event) { + zoom(event) { const scaleOrig = this.scale; let scaleTemp = scaleOrig * event.scaleStep; @@ -130,34 +128,7 @@ export default class Cartographer { scaleTemp = Math.max(scaleTemp, this.scaleMin); scaleTemp = Math.min(scaleTemp, this.scaleMax); - if (scaleTemp !== scaleOrig) { - this.scale = scaleTemp; - - // zoom to the current mouse location - this.move({ - deltaX: (((event.offsetX - this.originX) / scaleOrig) * (scaleOrig - scaleTemp)), - deltaY: (((event.offsetY - this.originY) / scaleOrig) * (scaleOrig - scaleTemp)), - target: { - offsetWidth: event.target.offsetWidth, - offsetHeight: event.target.offsetHeight, - }, - }); - } - } - - zoom(event) { - const scaleOrig = this.scale; - - let scaleTemp = scaleOrig + (event.deltaY / -10); - - // make sure 'scale' doesn't get too small nor too big - if (scaleTemp < this.scaleMin) - scaleTemp = this.scaleMin; - else if (scaleTemp > this.scaleMax) - scaleTemp = this.scaleMax; - if (scaleOrig !== scaleTemp) { - this.scale = scaleTemp; // zoom to the current mouse location diff --git a/src/onTap.js b/src/onTap.js index 1d4c58c..2f53738 100644 --- a/src/onTap.js +++ b/src/onTap.js @@ -1,9 +1,14 @@ import {noop} from './utils.js'; +const DEFAULTS = { + element: document.body, + wheelFactor: -100, +}; + export default class OnTap { constructor(settings) { - this.element = settings.element || document.body; + this.settings = Object.assign({}, DEFAULTS, settings); this.debug = false; this.state = { @@ -22,9 +27,6 @@ export default class OnTap { threshold: settings.doubletapThreshold || 500, // less than in milliseconds callback: settings.doubletap || noop }, - pinch: { - callback: settings.pinch || noop - }, press: { threshold: settings.pressThreshold || 1000, // greater than or equal to in milliseconds callback: settings.press || noop @@ -47,7 +49,7 @@ export default class OnTap { 'wheel', ].map(method => { this[method] = this[method].bind(this); - this.element.addEventListener(method, this[method]); + this.settings.element.addEventListener(method, this[method]); }); } @@ -166,7 +168,7 @@ export default class OnTap { if (this.state.pinching) { event.scaleStep = event.scale / (this.state.lastPinch || 1); - this.actions.pinch.callback(event); + this.actions.zoom.callback(event); this.state.lastPinch = event.scale; } @@ -197,6 +199,8 @@ export default class OnTap { wheel(event) { if (this.debug) console.debug('onTap.wheel', event); + event.scaleStep = 1 + (event.deltaY / this.settings.wheelFactor); + this.actions.zoom.callback(event); } } diff --git a/src/tessellate.js b/src/tessellate.js index 4cd2438..8cfe009 100644 --- a/src/tessellate.js +++ b/src/tessellate.js @@ -73,7 +73,6 @@ export class Tessellate { 'checkSettings', 'tap', 'move', - 'pinch', 'zoom', 'pixelToTile', 'tileToPixel', @@ -94,7 +93,6 @@ export class Tessellate { doubletap: this.doubletap, hold: this.hold, move: this.move, - pinch: this.pinch, zoom: this.zoom, }); @@ -167,10 +165,6 @@ export class Tessellate { this.cartographer.move(event); } - pinch(event) { - this.cartographer.pinch(event); - } - zoom(event) { this.cartographer.zoom(event); }