mapbox-gl-multitouch - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "mapbox-gl-multitouch",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Two-finger panning for mapbox-gl-js",
   "main": "./dist/main.js",
   "scripts": {
-    "build": "babel ./src -d ./dist"
+    "build": "babel ./src -d ./dist",
+    "prepublishOnly": "npm version patch"
   },
@@ -9,0 +10,0 @@ "repository": {

README.md

@@ -1,2 +0,12 @@
-# mapbox-multitouch
-Two-finger panning for mapbox-gl-js
+# mapbox-gl-multitouch
+#### Two-finger panning for mapbox-gl-js
+
+Mapbox issue: [Support multitouch two-finger panning](https://github.com/mapbox/mapbox-gl-js/issues/2618)
+
+```javascript
+    import MultiTouch from 'mapbox-gl-multitouch';
+    
+    map.addControl(new MultiTouch());
+```
+
+Thanks to [@pea](https://github.com/pea) and [@northkode](https://github.com/northkode)

src/main.js

@@ -1,54 +0,67 @@
-const state = {
-  mapbox: null,
-  panStart: { x: 0, y: 0 },
-  scale: 1,
-};
+class MultiTouch {
+  constructor() {
+    this.state = {
+      panStart: { x: 0, y: 0 },
+      scale: 1,
+    };
+    this.touchStart = this.touchStart.bind(this);
+    this.touchMove = this.touchMove.bind(this);
+  }
 
-const touchStart = (event) => {
-  if (event.touches.length !== 2) return;
-  event.stopImmediatePropagation();
-  event.preventDefault();
+  touchStart(event) {
+    if (event.touches.length !== 2) return;
+    event.stopImmediatePropagation();
+    event.preventDefault();
 
-  let x = 0;
-  let y = 0;
+    let x = 0;
+    let y = 0;
 
-  [].forEach.call(event.touches, (touch) => {
-    x += touch.screenX;
-    y += touch.screenY;
-  });
+    [].forEach.call(event.touches, (touch) => {
+      x += touch.screenX;
+      y += touch.screenY;
+    });
 
-  state.panStart.x = x / event.touches.length;
-  state.panStart.y = y / event.touches.length;
-};
-
-const touchMove = (event) => {
-  if (event.touches.length !== 2) return;
-  if (state.scale === event.scale) {
-    event.stopImmediatePropagation();
-    event.preventDefault();
+    this.state.panStart.x = x / event.touches.length;
+    this.state.panStart.y = y / event.touches.length;
   }
 
-  state.scale = event.scale;
+  touchMove(event) {
+    if (event.touches.length !== 2) return;
+    if (this.state.scale === event.scale) {
+      event.stopImmediatePropagation();
+      event.preventDefault();
+    }
 
-  let x = 0;
-  let y = 0;
+    this.state.scale = event.scale;
 
-  [].forEach.call(event.touches, (touch) => {
-    x += touch.screenX;
-    y += touch.screenY;
-  });
+    let x = 0;
+    let y = 0;
 
-  const movex = (x / event.touches.length) - state.panStart.x;
-  const movey = (y / event.touches.length) - state.panStart.y;
+    [].forEach.call(event.touches, (touch) => {
+      x += touch.screenX;
+      y += touch.screenY;
+    });
 
-  state.panStart.x = x / event.touches.length;
-  state.panStart.y = y / event.touches.length;
-  state.mapbox.panBy([movex / -1, movey / -1], { animate: false });
-};
+    const movex = (x / event.touches.length) - this.state.panStart.x;
+    const movey = (y / event.touches.length) - this.state.panStart.y;
 
-export default (mapbox) => {
-  state.mapbox = mapbox;
-  state.mapbox.getContainer().addEventListener('touchstart', touchStart, false);
-  state.mapbox.getContainer().addEventListener('touchmove', touchMove, false);
-  if ('ontouchstart' in document.documentElement) state.mapbox.dragPan.disable();
-};
+    this.state.panStart.x = x / event.touches.length;
+    this.state.panStart.y = y / event.touches.length;
+    this.state.mapbox.panBy([movex / -1, movey / -1], { animate: false });
+  }
+
+  onAdd(map) {
+    this.map = map;
+    this.map.getContainer().addEventListener('touchstart', this.touchStart, false);
+    this.map.getContainer().addEventListener('touchmove', this.touchMove, false);
+    if ('ontouchstart' in document.documentElement) map.dragPan.disable();
+  }
+
+  onRemove() {
+    this.map.getContainer().removeEventListener('touchstart', this.touchStart);
+    this.map.getContainer().removeEventListener('touchmove', this.touchMove);
+    this.map = undefined;
+  }
+}
+
+export default MultiTouch;

No alert changes

Improved metrics

Total package byte prevSize

4539

21.27%

Lines of code

105

11.7%

Number of lines in readme file

13

333.33%

No dependency changes