feat: support rotate

Author: paranoidjk

README.md

@@ -136,7 +136,7 @@ all callback funtion will one parammeter: `(gesture) => {}`
     </tbody>
 </table>
 
-#### Pan
+#### Pan (**Unsupported Yet*)
 <table class="table table-bordered table-striped">
     <thead>
     <tr>

examples/simple.tsx

@@ -1,4 +1,4 @@
-/* tslint:disable:no-console */
+/* tslint:disable:no-console no-unused-expression */
 
 import Gesture from '../src/index';
 import React, { Component } from 'react';
@@ -25,23 +25,45 @@ const style = `
 class Demo extends Component<any, any> {
   private root: any;
   private rootNode: any;
+  private _scale: number;
+  private _rotation: number;
 
   constructor(props) {
     super(props);
   }
 
   log = (type: string, keys?: string[]) => (...args) => {
-    console.log(type, ...args);
+    this.doTapOrPress(type, keys, ...args);
+    this.doTransform(type, ...args);
+  }
+  doTapOrPress = (type, keys, ...args) => {
+    if (['onTap', 'onPress', 'onPressUp'].indexOf(type) === -1) {
+      return;
+    }
     const extInfo = keys ? keys.map(key => `${key} = ${args[0][key]}`).join(', ') : '';
     const logEl = this.refs.log as any;
     logEl.innerHTML += `<p>${type} ${extInfo}</p>`;
     logEl.scrollTop = logEl.scrollHeight;
+  }
+  doTransform = (type, ...args) => {
     if (type === 'onPinch') {
       const { scale } = args[0];
-      this.rootNode = ReactDOM.findDOMNode(this.root);
-      this.rootNode.style.transform = `scale(${scale})`;
+      this._scale = scale;
     }
+    if (type === 'onRotate') {
+      const { rotation }  = args[0];
+      this._rotation = rotation;
+    }
+    let transform: any = [];
+    // console.log(type, ...args);    let transform: any = [];
+    this._scale && transform.push(`scale(${this._scale})`);
+    this._rotation && transform.push(`rotate(${this._rotation}deg)`);
+
+    transform = transform.join(' ');
+    this.rootNode = ReactDOM.findDOMNode(this.root);
+    this.rootNode.style.transform = transform;
   }
+
   render() {
     return (
       <div>

src/index.tsx

@@ -170,11 +170,14 @@ export default class Gesture extends Component<IGesture, any> {
     }
   }
   cleanGestureState = () => {
-    console.log('clean gesture state');
+    console.log('clean pre gesture state');
     delete this.gesture;
   }
   getTouches = (e) => {
-    return Array.prototype.slice.call(e.touches).map(item => ([item.pageX, item.pageY]));
+    return Array.prototype.slice.call(e.touches).map(item => ({
+      x: item.pageX,
+      y: item.pageY,
+    }));
   }
 
   _handleTouchStart = (e) => {
@@ -265,8 +268,6 @@ export default class Gesture extends Component<IGesture, any> {
       this.triggerCombineEvent('onPinch', 'move');
     }
     if (rotate) {
-      // Todo: wait to see if we can use below hammerjs way?
-      // https://github.com/hammerjs/hammer.js/blob/master/src/inputjs/get-rotation.js
       const rotation = calcRotation(startMutliFingerStatus, mutliFingerStatus);
       this.setGestureState({
         rotation,
@@ -331,9 +332,7 @@ export default class Gesture extends Component<IGesture, any> {
   }
 
   checkIfEndWithTapOrSwipe = () => {
-    const {
-      startTime, startTouches, moveStatus, pinch, rotate, press, time,
-    } = this.gesture;
+    const { moveStatus, pinch, rotate, press } = this.gesture;
 
     if (pinch || rotate) {
       return;

src/util.tsx

@@ -45,17 +45,10 @@ export function calcMoveStatus(startTouches, touches, time) {
   };
 }
 export function calcRotation(startMutliFingerStatus, mutliFingerStatus) {
-  const { x: startX, y: startY, z: startZ } = startMutliFingerStatus;
-  const { x, y, z } = mutliFingerStatus;
-  if (startZ === 0 || z === 0) {
-    return 0;
-  }
-  // https://en.wikipedia.org/wiki/Dot_product
-  let cosine = (startX * x + startY * y) / startZ * z;
-  if (cosine > 1) {
-    cosine = 1;
-  }
-  return Math.acos(cosine);
+  const { angle: startAngle } = startMutliFingerStatus;
+  const { angle } = mutliFingerStatus;
+
+  return angle - startAngle;
 }
 
 export function getEventName(prefix, status) {