No Pinching! (#10)

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

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);
 	}
 }

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);
 	}