react-native-view-transformer - npm Package Compare versions

Comparing version 0.0.20 to 0.0.21

library/transform/ViewTransformer.js

@@ -12,9 +12,5 @@ 'use strict';
 import {createResponder} from 'react-native-gesture-responder';
-
 import Scroller from 'react-native-scroller';
-
 import {Rect, Transform, transformedRect, availableTranslateSpace, fitCenterRect, alignedRect, getTransform} from './TransformUtils';
 
-const MIN_SCROLL_THRESHOLD = 10;
-
 export default class ViewTransformer extends React.Component {
@@ -27,3 +23,2 @@
     super(props);
-
     this.state = {
@@ -43,13 +38,5 @@ //transform state
       pageY: 0,
-
-      //responder grant
-      responderGranted: false
     };
-
     this._viewPortRect = new Rect();
 
-    this.handleScroll = this.handleScroll.bind(this);
-    this.handleMove = this.handleMove.bind(this);
-    this.handleRelease = this.handleRelease.bind(this);
-
     this.cancelAnimation = this.cancelAnimation.bind(this);
@@ -59,2 +46,14 @@ this.contentRect = this.contentRect.bind(this);
     this.animate = this.animate.bind(this);
+
+    this.scroller = new Scroller(true, (dx, dy, scroller) =>{
+      if (dx === 0 && dy === 0 && scroller.isFinished()) {
+        this.animateBounce();
+        return;
+      }
+
+      this.updateTransform({
+        translateX: this.state.translateX + dx / this.state.scale,
+        translateY: this.state.translateY + dy / this.state.scale
+      })
+    });
   }
@@ -87,2 +86,17 @@
 
+  componentWillMount() {
+    createResponder.enableDebugLog();
+
+    this.gestureResponder = createResponder({
+      onStartShouldSetResponder: (evt, gestureState) => true,
+      onMoveShouldSetResponderCapture: (evt, gestureState) => true,
+      //onMoveShouldSetResponder: this.handleMove,
+      onResponderMove: this.onResponderMove.bind(this),
+      onResponderGrant: this.onResponderGrant.bind(this),
+      onResponderRelease: this.onResponderRelease.bind(this),
+      onResponderTerminate: this.onResponderRelease.bind(this),
+      onResponderTerminationRequest: (evt, gestureState) => true
+    });
+  }
+
   render() {
@@ -101,2 +115,4 @@ let gestureResponder = this.gestureResponder;
           this.props.onLayout && this.props.onLayout(e);
+          const {width, height} = e.nativeEvent.layout;
+          this.setState({width, height});
           this.measureLayout();
@@ -119,19 +135,2 @@ }}>
 
-  componentWillMount() {
-    this.gestureResponder = createResponder({
-      onStartShouldSetResponder: (evt, gestureState) => {
-        //this.measureLayout();
-        return true;
-      },
-      onMoveShouldSetResponder: this.handleMove,
-      onResponderMove: this.onResponderMove.bind(this),
-      onResponderGrant: this.onResponderGrant.bind(this),
-      onResponderRelease: this.onResponderRelease.bind(this),
-      onResponderTerminate: this.handleRelease,
-      onResponderTerminationRequest: (evt, gestureState) => true
-    });
-
-    this.scroller = new Scroller(true, this.handleScroll);
-  }
-
   onResponderGrant(evt, gestureState) {
@@ -144,7 +143,78 @@ this.props.onTransformStart && this.props.onTransformStart();
   onResponderMove(evt, gestureState) {
-    this.handleMove(evt, gestureState);
+    this.cancelAnimation();
+
+    let dx = gestureState.moveX - gestureState.previousMoveX;
+    let dy = gestureState.moveY - gestureState.previousMoveY;
+    if (this.props.enableResistance) {
+      let d = this.applyResistance(dx, dy);
+      dx = d.dx;
+      dy = d.dy;
+    }
+
+    if(!this.props.enableTranslate) {
+      dx = dy = 0;
+    }
+
+    let transform = {};
+    if (gestureState.previousPinch && gestureState.pinch && this.props.enableScale) {
+      let scaleBy = gestureState.pinch / gestureState.previousPinch;
+      let pivotX = gestureState.moveX - this.state.pageX;
+      let pivotY = gestureState.moveY - this.state.pageY;
+
+
+      let rect = transformedRect(transformedRect(this.contentRect(), this.currentTransform()), new Transform(
+        scaleBy, dx, dy,
+        {
+          x: pivotX,
+          y: pivotY
+        }
+      ));
+      transform = getTransform(this.contentRect(), rect);
+    } else {
+      if (Math.abs(dx) > 2 * Math.abs(dy)) {
+        dy = 0;
+      } else if (Math.abs(dy) > 2 * Math.abs(dx)) {
+        dx = 0;
+      }
+      transform.translateX = this.state.translateX + dx / this.state.scale;
+      transform.translateY = this.state.translateY + dy / this.state.scale;
+    }
+
+    this.updateTransform(transform);
+    return true;
   }
 
   onResponderRelease(evt, gestureState) {
-    this.handleRelease(evt, gestureState);
+    let handled = this.props.onTransformGestureReleased && this.props.onTransformGestureReleased({
+        scale: this.state.scale,
+        translateX: this.state.translateX,
+        translateY: this.state.translateY
+      });
+    if (handled) {
+      return;
+    }
+
+
+    if (gestureState.doubleTapUp) {
+      if (!this.props.enableScale) {
+        this.animateBounce();
+        return;
+      }
+      let pivotX = 0, pivotY = 0;
+      if (gestureState.dx || gestureState.dy) {
+        pivotX = gestureState.moveX - this.state.pageX;
+        pivotY = gestureState.moveY - this.state.pageY;
+      } else {
+        pivotX = gestureState.x0 - this.state.pageX;
+        pivotY = gestureState.y0 - this.state.pageY;
+      }
+
+      this.performDoubleTapUp(pivotX, pivotY);
+    } else {
+      if(this.props.enableTranslate) {
+        this.performFling(gestureState.vx, gestureState.vy);
+      } else {
+        this.animateBounce();
+      }
+    }
   }
@@ -167,7 +237,7 @@
     NativeModules.UIManager.measure(handle, ((x, y, width, height, pageX, pageY) => {
-      console.log('measureLayout...width=' + width + ', height=' + height);
+      //on Android, width and height may be undefined here, so we don't use them here
 
       this.setState({
-        width: width,
-        height: height,
+        //width: width,
+        //height: height,
         pageX: pageX,
@@ -179,14 +249,2 @@ pageY: pageY
 
-  handleScroll(dx, dy, scroller:Scroller) {
-    if (dx === 0 && dy === 0 && scroller.isFinished()) {
-      this.animateBounce();
-      return;
-    }
-
-    this.updateTransform({
-      translateX: this.state.translateX + dx / this.state.scale,
-      translateY: this.state.translateY + dy / this.state.scale
-    })
-  }
-
   performFling(vx, vy) {
@@ -262,52 +320,2 @@ let startX = 0;
 
-  handleMove(e, gestureState) {
-    if (!this.state.responderGranted) {
-      if (Math.abs(gestureState.dx) >= MIN_SCROLL_THRESHOLD || Math.abs(gestureState.dy) >= MIN_SCROLL_THRESHOLD) {
-        console.log('handleMove...require responder');
-        return true;
-      } else {
-        return false;
-      }
-    }
-
-
-    this.cancelAnimation();
-
-    let dx = gestureState.moveX - gestureState.previousMoveX;
-    let dy = gestureState.moveY - gestureState.previousMoveY;
-    if (this.props.enableResistance) {
-      let d = this.applyResistance(dx, dy);
-      dx = d.dx;
-      dy = d.dy;
-    }
-
-    let transform = {};
-    if (gestureState.previousPinch && gestureState.pinch && this.props.enableScale) {
-      let scaleBy = gestureState.pinch / gestureState.previousPinch;
-      let pivotX = gestureState.moveX - this.state.pageX;
-      let pivotY = gestureState.moveY - this.state.pageY;
-
-
-      let rect = transformedRect(transformedRect(this.contentRect(), this.currentTransform()), new Transform(
-        scaleBy, dx, dy,
-        {
-          x: pivotX,
-          y: pivotY
-        }
-      ));
-      transform = getTransform(this.contentRect(), rect);
-    } else {
-      if (Math.abs(dx) > 2 * Math.abs(dy)) {
-        dy = 0;
-      } else if (Math.abs(dy) > 2 * Math.abs(dx)) {
-        dx = 0;
-      }
-      transform.translateX = this.state.translateX + dx / this.state.scale;
-      transform.translateY = this.state.translateY + dy / this.state.scale;
-    }
-
-    this.updateTransform(transform);
-    return true;
-  }
-
   applyResistance(dx, dy) {
@@ -331,38 +339,2 @@ let availablePanDistance = availableTranslateSpace(this.transformedContentRect(), this.viewPortRect());
 
-  handleRelease(e, gestureState) {
-    console.log('handleRelease...' + JSON.stringify(gestureState));
-    this.setState({
-      responderGranted: false
-    });
-
-    let handled = this.props.onTransformGestureReleased && this.props.onTransformGestureReleased({
-        scale: this.state.scale,
-        translateX: this.state.translateX,
-        translateY: this.state.translateY
-      });
-    if (handled) {
-      return;
-    }
-
-
-    if (gestureState.doubleTapUp) {
-      if (!this.props.enableScale) {
-        this.animateBounce();
-        return;
-      }
-      let pivotX = 0, pivotY = 0;
-      if (gestureState.dx || gestureState.dy) {
-        pivotX = gestureState.moveX - this.state.pageX;
-        pivotY = gestureState.moveY - this.state.pageY;
-      } else {
-        pivotX = gestureState.x0 - this.state.pageX;
-        pivotY = gestureState.y0 - this.state.pageY;
-      }
-
-      this.performDoubleTapUp(pivotX, pivotY);
-    } else {
-      this.performFling(gestureState.vx, gestureState.vy);
-    }
-  }
-
   cancelAnimation() {
@@ -460,2 +432,7 @@ this.state.animator.stopAnimation();
   /**
+   * Use false to disable translateX/translateY. Default is true.
+   */
+  enableTranslate: React.PropTypes.bool,
+
+  /**
    * Default is 20
@@ -479,2 +456,3 @@ */
   enableScale: true,
+  enableTranslate: true,
   enableTransform: true,
@@ -481,0 +459,0 @@ maxScale: 1,

package.json

 {
   "name": "react-native-view-transformer",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "description": "`react-native-view-transformer` is a pure JavaScript RN component that makes **ANY** views transformable using gestures like pinch, double tap or pull, as below shows:",
@@ -20,5 +20,5 @@ "main": "library/index.js",
   "dependencies": {
-    "react-native-gesture-responder": "0.0.5",
+    "react-native-gesture-responder": "0.0.8",
     "react-native-scroller": "0.0.5"
   }
 }

No alert changes

Worsened metrics

Total package byte prevSize

19602

decreased by-1.83%

Lines of code

570

decreased by-2.06%

Dependency changes

• + Addedreact-native-gesture-responder@0.0.8(transitive)

• - Removedreact-native-gesture-responder@0.0.5(transitive)

• Updatedreact-native-gesture-responder@0.0.8