Added feature enableLimits

README.md

@@ -32,7 +32,8 @@ This component accepts following props:
 * `enableScale` : false to disable scale. Default is true.
 * `enableTranslate` : false to disable translateX/Y. Default is true.
 * `maxScale` : a number. Default is 1.
-* `enableResistance`  : true to resist over pan. Defaul is false.
+* `enableResistance` : true to resist over pan. Default is false.
+* `enableLimits` : true so that the view cannot be moved out of its viewport. Default is false.
 * `maxOverScrollDistance` : a number used to determine final scroll position triggered by fling. Default is 20.
 * `onViewTransformed` : a callback called when transform changed, receiving current transform object, {scale: xxx, translateX: xxx, translateY: xxx}.
 * `onTransformGestureReleased` : a callback called when the transform gesture is released,  receiving current transform object, {scale: xxx, translateX: xxx, translateY: xxx}. Return true to abort further animations like bounce back.

library/transform/ViewTransformer.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import ReactNative, {
   View,
   Animated,
@@ -19,9 +20,10 @@ export default class ViewTransformer extends React.Component {
 
   constructor(props) {
     super(props);
+
     this.state = {
       //transform state
-      scale: 1,
+      scale: props.initialScale,
       translateX: 0,
       translateY: 0,
 
@@ -88,7 +90,10 @@ export default class ViewTransformer extends React.Component {
       onResponderGrant: this.onResponderGrant.bind(this),
       onResponderRelease: this.onResponderRelease.bind(this),
       onResponderTerminate: this.onResponderRelease.bind(this),
-      onResponderTerminationRequest: (evt, gestureState) => false //Do not allow parent view to intercept gesture
+      onResponderTerminationRequest: (evt, gestureState) => false, //Do not allow parent view to intercept gesture
+      onResponderSingleTapConfirmed: (evt, gestureState) => {
+        this.props.onSingleTapConfirmed && this.props.onSingleTapConfirmed();
+      }
     });
   }
 
@@ -133,7 +138,7 @@ export default class ViewTransformer extends React.Component {
 
   onLayout(e) {
     const {width, height} = e.nativeEvent.layout;
-    if(width !== this.state.width || height !== this.state.height) {
+    if (width !== this.state.width || height !== this.state.height) {
       this.setState({width, height});
     }
     this.measureLayout();
@@ -167,7 +172,12 @@ export default class ViewTransformer extends React.Component {
 
     let dx = gestureState.moveX - gestureState.previousMoveX;
     let dy = gestureState.moveY - gestureState.previousMoveY;
-    if (this.props.enableResistance) {
+
+    if (this.props.enableLimits) {
+      let d = this.applyLimits(dx, dy);
+      dx = d.dx;
+      dy = d.dy;
+    } else if (this.props.enableResistance) {
       let d = this.applyResistance(dx, dy);
       dx = d.dx;
       dy = d.dy;
@@ -184,13 +194,12 @@ export default class ViewTransformer extends React.Component {
       let pivotY = gestureState.moveY - this.state.pageY;
 
 
-      let rect = transformedRect(transformedRect(this.contentRect(), this.currentTransform()), new Transform(
-        scaleBy, dx, dy,
-        {
-          x: pivotX,
-          y: pivotY
-        }
-      ));
+      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)) {
@@ -241,11 +250,6 @@ export default class ViewTransformer extends React.Component {
     }
   }
 
-
-
-
-
-
   performFling(vx, vy) {
     let startX = 0;
     let startY = 0;
@@ -334,6 +338,69 @@ export default class ViewTransformer extends React.Component {
     }
   }
 
+  applyLimits(dx, dy) {
+    let availablePanDistance = availableTranslateSpace(
+      this.transformedContentRect(),
+      this.viewPortRect()
+    );
+
+    // Calculate until where can the view be moved
+    // This depends if the view is bigger / smaller than the viewport
+    if (this.transformedContentRect().width() < this.viewPortRect().width()) {
+      if (
+        dx < 0 &&
+        this.transformedContentRect().left + dx < this.viewPortRect().left
+      ) {
+          dx = availablePanDistance.left;
+      } else if (
+        dx > 0 &&
+        this.transformedContentRect().right + dx > this.viewPortRect().right
+      ) {
+          dx = -availablePanDistance.right;
+      }
+    } else {
+      if (
+        dx < 0 &&
+        this.transformedContentRect().right + dx < this.viewPortRect().right
+      ) {
+          dx = -availablePanDistance.right;
+      } else if (
+        dx > 0 &&
+        this.transformedContentRect().left + dx > this.viewPortRect().left
+      ) {
+          dx = availablePanDistance.left;
+      }
+    }
+
+    if (this.transformedContentRect().height() < this.viewPortRect().height()) {
+      if (
+        dy > 0 &&
+        this.transformedContentRect().bottom + dy > this.viewPortRect().bottom
+      ) {
+          dy = -availablePanDistance.bottom;
+      } else if (
+        dy < 0 &&
+        this.transformedContentRect().top + dy < this.viewPortRect().top
+      ) {
+          dy = availablePanDistance.top;
+      }
+    } else {
+      if (
+        dy > 0 &&
+        this.transformedContentRect().top + dy > this.viewPortRect().top
+      ) {
+          dy = availablePanDistance.top;
+      } else if (
+        dy < 0 &&
+        this.transformedContentRect().bottom + dy < this.viewPortRect().bottom
+      ) {
+          dy = -availablePanDistance.bottom;
+      }
+    }
+
+    return { dx, dy }
+  }
+
   cancelAnimation() {
     this.state.animator.stopAnimation();
   }
@@ -418,40 +485,44 @@ ViewTransformer.propTypes = {
   /**
    * Use false to disable transform. Default is true.
    */
-  enableTransform: React.PropTypes.bool,
+  enableTransform: PropTypes.bool,
 
   /**
    * Use false to disable scaling. Default is true.
    */
-  enableScale: React.PropTypes.bool,
+  enableScale: PropTypes.bool,
 
   /**
    * Use false to disable translateX/translateY. Default is true.
    */
-  enableTranslate: React.PropTypes.bool,
+  enableTranslate: PropTypes.bool,
 
   /**
    * Default is 20
    */
-  maxOverScrollDistance: React.PropTypes.number,
+  maxOverScrollDistance: PropTypes.number,
 
-  maxScale: React.PropTypes.number,
-  contentAspectRatio: React.PropTypes.number,
+  initialScale: PropTypes.number,
+  maxScale: PropTypes.number,
+  contentAspectRatio: PropTypes.number,
 
   /**
    * Use true to enable resistance effect on over pulling. Default is false.
    */
-  enableResistance: React.PropTypes.bool,
+  enableResistance: PropTypes.bool,
+  enableLimits: PropTypes.bool,
 
-  onViewTransformed: React.PropTypes.func,
+  onViewTransformed: PropTypes.func,
 
-  onTransformGestureReleased: React.PropTypes.func
+  onTransformGestureReleased: PropTypes.func
 };
 ViewTransformer.defaultProps = {
   maxOverScrollDistance: 20,
   enableScale: true,
   enableTranslate: true,
   enableTransform: true,
+  initialScale: 1,
   maxScale: 1,
-  enableResistance: false
-};
+  enableResistance: false,
+  enableLimits: false,
+};