panzoom2 - npm Package Compare versions

Comparing version 1.0.0-beta.6 to 1.0.0-beta.7

dist/panzoom.js

@@ -754,3 +754,3 @@ (function (global, factory) {
         if (!(f instanceof Function)) throw new TypeError('event handler is not a function');
-        if (!(reject instanceof Function)) reject = f;
+
         listeners.push([eventName, f, reject]);
@@ -771,3 +771,3 @@ },
             } catch (error) {
-              listener[2](error);
+              if (listener[2]) listener[2](error);else console.error ? console.error(error) : console.log(error);
             }
@@ -924,2 +924,3 @@ }
       this.touches = event.touches;
+      this.viewport = event.viewport;
       this.page = event.page;
@@ -965,7 +966,7 @@ this.type = event.type;
         var event = {
-          touches: nativeEvent.touches ? map(function (t) {
+          viewport: nativeEvent.touches ? map(function (t) {
             return new Point({ x: t.clientX, y: t.clientY });
           }, nativeEvent.touches) : [new Point({ x: nativeEvent.clientX, y: nativeEvent.clientY })],
 
-          page: nativeEvent.touches ? map(function (t) {
+          touches: nativeEvent.touches ? map(function (t) {
             return new Point({ x: t.pageX, y: t.pageY });
@@ -1000,50 +1001,2 @@ }, nativeEvent.touches) : [new Point({ x: nativeEvent.pageX, y: nativeEvent.pageY })],
 
-  function percentToPixel(percentage) {
-    var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'width';
-
-    var box = this.el.getBoundingClientRect();
-    return box[side] * percentage * .01;
-  }
-
-  function percentToPixelMatrix() {
-    var box = this.el.getBoundingClientRect();
-    return {
-      tx: box.width * (this.tx * .01),
-      ty: box.height * (this.ty * .01),
-      tz: this.tz
-    };
-  }
-
-  function remToPixel(rem) {
-    var fontSize = window.getComputedStyle(documentElement).fontSize;
-    return rem * fontSize;
-  }
-
-  function emToPixel(em) {
-    var fontSize = window.getComputedStyle(this.el).fontSize;
-    return em * fontSize;
-  }
-
-  function cmToPixel(cm) {
-    return cm * 96 / 2.54;
-  }
-
-  function mmToPixel(mm) {
-    return cmToPixel(mm) / 10;
-  }
-
-  function getUnit(value) {
-    return String(value).indexOf('%') > -1 ? '%' : 'px';
-  }
-
-  var units = /*#__PURE__*/Object.freeze({
-    percentToPixel: percentToPixel,
-    percentToPixelMatrix: percentToPixelMatrix,
-    remToPixel: remToPixel,
-    emToPixel: emToPixel,
-    cmToPixel: cmToPixel,
-    mmToPixel: mmToPixel,
-    getUnit: getUnit
-  });
-
   /* detect passive option for event listeners */
@@ -1187,2 +1140,50 @@ var supportsPassiveOption = false;
 
+  function percentToPixel(percentage) {
+    var side = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'width';
+
+    var box = this.el.getBoundingClientRect();
+    return box[side] * percentage * .01;
+  }
+
+  function percentToPixelMatrix() {
+    var box = this.el.getBoundingClientRect();
+    return {
+      tx: box.width * (this.tx * .01),
+      ty: box.height * (this.ty * .01),
+      tz: this.tz
+    };
+  }
+
+  function remToPixel(rem) {
+    var fontSize = window.getComputedStyle(documentElement).fontSize;
+    return rem * fontSize;
+  }
+
+  function emToPixel(em) {
+    var fontSize = window.getComputedStyle(this.el).fontSize;
+    return em * fontSize;
+  }
+
+  function cmToPixel(cm) {
+    return cm * 96 / 2.54;
+  }
+
+  function mmToPixel(mm) {
+    return cmToPixel(mm) / 10;
+  }
+
+  function getUnit(value) {
+    return String(value).indexOf('%') > -1 ? '%' : 'px';
+  }
+
+  var units = /*#__PURE__*/Object.freeze({
+    percentToPixel: percentToPixel,
+    percentToPixelMatrix: percentToPixelMatrix,
+    remToPixel: remToPixel,
+    emToPixel: emToPixel,
+    cmToPixel: cmToPixel,
+    mmToPixel: mmToPixel,
+    getUnit: getUnit
+  });
+
   var FLOATING = '(\\-?[\\d\\.e]+)';
@@ -1255,5 +1256,7 @@ var COMMA_SPACE = '\\,?\\s*';
 
-  var lastTouches = null;
-  var eventNames = null;
+  var lastTouches = void 0;
+  var lastDistance = 0;
+  var eventNames = { move: null, end: null };
   var pinchStart = true;
+  // let fpsLastTime = 0
 
@@ -1270,8 +1273,7 @@ var Pinch = {
       this.on(this.options.preventDefault ? 'touchstart' : 'touchstart.passive', this.startHandler, { reject: errorHandler });
-
-      console.log('Pinch::listen');
+      //   console.log('Pinch::listen')
     },
     unlisten: function unlisten() {
       this.off(this.options.preventDefault ? 'touchstart' : 'touchstart.passive', this.startHandler, { reject: errorHandler });
-      console.log('Pinch::unlisten');
+      // console.log('Pinch::unlisten')
     },
@@ -1283,3 +1285,8 @@
       // console.log('Pinch::startHandler')
-      // KLUDGE: in Chrome we have to preventDefault already in touchStart since touchMove can be too late if the Chrome also initiates scrolling
+      if (event.touches.length < 2) {
+        console.log('aborting because only one finger is detected');
+        return;
+      }
+
+      // KLUDGE: in Chrome we have to preventDefault already in touchStart since touchMove can be too late if Chrome also initiates scroll
       if (this.options.preventDefault) event.preventDefault();
@@ -1290,9 +1297,2 @@
       eventNames = event.getEventTypeNames();
-
-      if (event.touches.length < 2) {
-        this.endHandler();
-        console.log('aborting because only one finger is detected');
-        return;
-      }
-
       lastTouches = event;
@@ -1304,3 +1304,2 @@
     moveHandler: function moveHandler(event) {
-      // TODO: use this to fire pinchend event after fps ellapsed time from last touchmove event
       // const now = Date.now()
@@ -1318,5 +1317,11 @@ // const fps = 1000 / (now - fpsLastTime)
       // distance between two first fingers
-      // const distanceBetweenTwoFingers = event.touches[0].distance(lastTouches.touches[1])
-      var distanceBetweenTwoFingers = event.touches[1].distance(lastTouches.touches[1]);
+      var distanceBetweenTwoFingers = event.touches[0].distance(lastTouches.touches[1]);
+      // const distanceBetweenTwoFingers = event.touches[1].distance(lastTouches.touches[1])
+      // const distanceBetweenTwoFingers = event.touches[0].distance(event.touches[1])
 
+      var pinchOutwards = lastDistance && distanceBetweenTwoFingers > lastDistance ? true : false;
+      console.log(pinchOutwards ? 'zoom in' : 'zoom out');
+
+      lastDistance = distanceBetweenTwoFingers;
+
       var scale = distanceFromFirstTouch / distanceBetweenTwoFingers;
@@ -1326,3 +1331,3 @@ // console.log('scale', scale)
       if (scale > this.options.pinchThreshold) {
-        // Focus formular ported from svg.panzoom.js - ask fuzzyma why it's like that - fuzzyma found the algorithm on SO
+        // The 2 focus formulars ported from svg.panzoom.js - ask fuzzyma why it's like that - fuzzyma found the algorithm on SO
         var currentFocus = new Point({
@@ -1340,5 +1345,5 @@ x: event.touches[0].x + 0.5 * (event.touches[1].x - event.touches[0].x),
         event.point = currentFocus;
-        event.scale = scale; //pinchOutwards ? scale : -scale,
+        event.scale = pinchOutwards ? scale : -scale; // scale
         event.focusAfterScale = new Point({ x: -lastFocus.x, y: -lastFocus.y });
-        event.lastTouches = lastTouches;
+        // event.lastTouches = lastTouches
 
@@ -1357,2 +1362,3 @@ if (pinchStart) {
       pinchStart = true;
+      this.fire('pinchend');
       this.listen();
@@ -1359,0 +1365,0 @@ }

package.json

 {
   "name": "panzoom2",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "description": "Work In Progess - Hopefully a panzoom lib you can finally depend on",
   "main": "dist/panzoom.js",
+  "files": [
+    "src",
+    "dist",
+    "!.babelrc"
+  ],
   "scripts": {
@@ -29,3 +34,3 @@ "test": "tap tests/*.test.*",
     "eslint": "^4.19.1",
-    "jsdom": "^11.10.0",
+    "jsdom": "^11.11.0",
     "parallelshell": "^3.0.2",
@@ -32,0 +37,0 @@ "rollup": "^0.59.2",

README.md

@@ -43,1 +43,2 @@ [![Build Status](https://travis-ci.org/dotnetCarpenter/panzoom2.svg?branch=master)](https://travis-ci.org/dotnetCarpenter/panzoom2)
 - [User-defined gestures for surface computing](https://faculty.washington.edu/wobbrock/pubs/chi-09.02.pdf)
+- [Algorithms for 2D Multi-Touch Rotate, Scale & Translate (RST) Gestures](http://www.erikpaluka.com/blog/rst/)

src/gestures/Pinch.js

 import Point from '../models/Point'
 
 let minDistance = ''
-let lastTouches = null
-let lastDistance = null
-let eventNames = null
+let lastTouches
+let lastDistance = 0
+let eventNames = { move: null, end: null }
 let pinchStart = true
-let fpsLastTime = 0
+// let fpsLastTime = 0
 
@@ -20,8 +20,8 @@ export default {
     this.on(this.options.preventDefault ? 'touchstart' : 'touchstart.passive', this.startHandler, { reject: errorHandler })
+  //   console.log('Pinch::listen')
+  },
 
-    console.log('Pinch::listen')
-  },
   unlisten () {
     this.off(this.options.preventDefault ? 'touchstart' : 'touchstart.passive', this.startHandler, { reject: errorHandler })
-    console.log('Pinch::unlisten')
+    // console.log('Pinch::unlisten')
   },
@@ -32,3 +32,8 @@
     // console.log('Pinch::startHandler')
-    // KLUDGE: in Chrome we have to preventDefault already in touchStart since touchMove can be too late if the Chrome also initiates scrolling
+    if (event.touches.length < 2) {
+      console.log('aborting because only one finger is detected')
+      return
+    }
+
+    // KLUDGE: in Chrome we have to preventDefault already in touchStart since touchMove can be too late if Chrome also initiates scroll
     if (this.options.preventDefault) event.preventDefault()
@@ -39,9 +44,2 @@
     eventNames = event.getEventTypeNames()
-
-    if (event.touches.length < 2) {
-      this.endHandler()
-      console.log('aborting because only one finger is detected')
-      return
-    }
-
     lastTouches = event
@@ -54,3 +52,2 @@
   moveHandler (event) {
-    // TODO: use this to fire pinchend event after fps ellapsed time from last touchmove event
     // const now = Date.now()
@@ -73,3 +70,3 @@ // const fps = 1000 / (now - fpsLastTime)
     const pinchOutwards = lastDistance && distanceBetweenTwoFingers > lastDistance ? true : false
-    // console.log(pinchOutwards ? 'zoom in' : 'zoom out')
+    console.log(pinchOutwards ? 'zoom in' : 'zoom out')
 
@@ -79,6 +76,6 @@ lastDistance = distanceBetweenTwoFingers
     const scale = distanceFromFirstTouch / distanceBetweenTwoFingers
-        // console.log('scale', scale)
+    // console.log('scale', scale)
 
     if (scale > this.options.pinchThreshold) {
-      // Focus formular ported from svg.panzoom.js - ask fuzzyma why it's like that - fuzzyma found the algorithm on SO
+      // The 2 focus formulars ported from svg.panzoom.js - ask fuzzyma why it's like that - fuzzyma found the algorithm on SO
       const currentFocus = new Point({
@@ -96,5 +93,5 @@ x: event.touches[0].x + 0.5 * (event.touches[1].x - event.touches[0].x),
       event.point = currentFocus
-      event.scale = scale //pinchOutwards ? scale : -scale,
+      event.scale = pinchOutwards ? scale : -scale // scale
       event.focusAfterScale = new Point({ x: -lastFocus.x, y: -lastFocus.y })
-      event.lastTouches = lastTouches
+      // event.lastTouches = lastTouches
 
@@ -113,2 +110,3 @@ if (pinchStart) {
     pinchStart = true
+    this.fire('pinchend')
     this.listen()
@@ -122,1 +120,5 @@ }
 }
+
+function addScale (gestureEvent) {
+
+}

src/mixins/NativeEvents.js

@@ -10,5 +10,3 @@ import Trait from 'traits.js'
 import { map, each, compose } from '../utils'
-import { remToPixel } from './LengthUnits';
 
-
 /* detect passive option for event listeners */
@@ -15,0 +13,0 @@ let supportsPassiveOption = false

src/mixins/Observer.js

@@ -14,3 +14,3 @@ import { compose, partial, each, filter, reduce, map } from '../utils'
       if (!(f instanceof Function)) throw new TypeError('event handler is not a function')
-      if (!(reject instanceof Function)) reject = f
+
       listeners.push([eventName, f, reject])
@@ -26,3 +26,4 @@ },
           } catch (error) {
-            listener[2](error)
+            if (listener[2]) listener[2](error)
+            else console.error ? console.error(error) : console.log(error)
           }
@@ -29,0 +30,0 @@ }

src/models/GestureEvent.js

@@ -8,2 +8,3 @@ import Point from './Point'
     this.touches = event.touches
+    this.viewport = event.viewport
     this.page = event.page
@@ -47,7 +48,7 @@ this.type = event.type
     const event = {
-      touches: nativeEvent.touches
+      viewport: nativeEvent.touches
         ? map(t => new Point({ x: t.clientX, y: t.clientY }), nativeEvent.touches)
         : [new Point({ x: nativeEvent.clientX, y: nativeEvent.clientY })]
       ,
-      page: nativeEvent.touches
+      touches: nativeEvent.touches
         ? map(t => new Point({ x: t.pageX, y: t.pageY }), nativeEvent.touches)
@@ -54,0 +55,0 @@ : [new Point({ x: nativeEvent.pageX, y: nativeEvent.pageY })],

No alert changes

Improved metrics

Number of lines in readme file

44

2.33%

Worsened metrics

Total package byte prevSize

184292

-84.74%

Number of package files

22

-56%

Lines of code

2449

-37.91%

No dependency changes