refactoring and rotate support

Author: kiddkai

README.md

@@ -16,7 +16,7 @@ React Native Gestures
 Showcase
 --------
 
-![](http://i.imgur.com/qxzroIb.gif?1)
+![](http://imgur.com/6dCrcfL.gif)
 
 Getting Start
 --------------
@@ -52,16 +52,21 @@ export default React.createClass({
  },
  return (
  <View>
- <GestureView gestures={[drag]}>
- <Text>I can move</Text>
- </GestureView>
-
- <GestureView gestures={[pinch]}>
- <Text>I can do pinch</Text>
- </GestureView>
-
- <GestureView gestures={[pinch, drag]}>
- <Text>I can move and pinch</Text>
+ <GestureView
+ style={movable}
+ gestures={[drag, pinch]}
+ toStyle={(layout) => {
+ return {
+ top: layout.y,
+ left: layout.x,
+ width: layout.width,
+ height: layout.height,
+ transform: [{rotate: `${layout.rotate}deg`}]
+ }
+ }}
+ onError={console.error.bind(console)}>
+ <Text>HEHE</Text>
+ <Text>HEHE</Text>
  </GestureView>
  </View>
  );
@@ -82,6 +87,7 @@ There are few properties it accpets:
 * gestures - a `Array` of [gesture](#gestures)s 
 * onError - a `Function` will be called when anything bad happens
 * style - a `style` same as `<View>`'s `style` property
+* toStyle - a mapping function that allow you to pick the changes you want to css style
 * children - ... you know, just React children, nothing special
 
 Example:

dist/GestureView.js

@@ -8,13 +8,13 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _events = require('./events');
+var _mixinsEvents = require('./mixins/events');
 
-var _events2 = _interopRequireDefault(_events);
+var _mixinsEvents2 = _interopRequireDefault(_mixinsEvents);
 
-var _draggable = require('./draggable');
+var _mixinsDraggable = require('./mixins/draggable');
 
-var _draggable2 = _interopRequireDefault(_draggable);
+var _mixinsDraggable2 = _interopRequireDefault(_mixinsDraggable);
 
 var _reactNative = require('react-native');
 
@@ -23,11 +23,12 @@ var _reactNative2 = _interopRequireDefault(_reactNative);
 exports['default'] = _reactNative2['default'].createClass({
  displayName: 'GestureView',
 
- mixins: [(0, _events2['default'])(['onLayout']), (0, _draggable2['default'])()],
+ mixins: [(0, _mixinsEvents2['default'])(['onLayout']), (0, _mixinsDraggable2['default'])()],
 
  propTypes: {
  gestures: _reactNative.PropTypes.array.isRequired,
  onError: _reactNative.PropTypes.func.isRequired,
+ toStyle: _reactNative.PropTypes.func.isRequired,
  style: _reactNative.PropTypes.any,
  children: _reactNative.PropTypes.array
  },
@@ -37,12 +38,7 @@ exports['default'] = _reactNative2['default'].createClass({
 
  this.layoutStream.subscribe(function (layout) {
  return _this.container.setNativeProps({
- style: {
- height: layout.height,
- width: layout.width,
- top: layout.y,
- left: layout.x
- }
+ style: _this.props.toStyle(layout)
  });
  }, function (err) {
  return _this.props.onError(err);

dist/center.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, '__esModule', {
  value: true
 });
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 var _ramda = require('ramda');
 
-var _withSpecificPointerNumbers = require('./withSpecificPointerNumbers');
-
-var _withSpecificPointerNumbers2 = _interopRequireDefault(_withSpecificPointerNumbers);
-
-function createGesture(options, getInitialLayout, draggable) {
+function createGesture(responder, transducer, getInitialLayout, draggable) {
  return draggable.onDragStart.flatMap(function () {
- return (0, _withSpecificPointerNumbers2['default'])(options.GESTURE_NUMBER, draggable.onDragMove, getInitialLayout).transduce(options.calculate).takeUntil(draggable.onDragRelease);
+ return responder(draggable.onDragMove, getInitialLayout).transduce(transducer).takeUntil(draggable.onDragRelease);
  });
 };
 

dist/create.js

@@ -4,17 +4,24 @@ Object.defineProperty(exports, '__esModule', {
  value: true
 });
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 var _transducersJs = require('transducers.js');
 
-var calculate = (0, _transducersJs.map)(function (gesture) {
- var layout = gesture.get('initialLayout');
+var _responderOneFinger = require('./responder/oneFinger');
+
+var _responderOneFinger2 = _interopRequireDefault(_responderOneFinger);
+
+var responder = _responderOneFinger2['default'];
+
+exports.responder = responder;
+var transducer = (0, _transducersJs.map)(function (gesture) {
+ var layout = gesture.get('initialLayout').set('rotate', 0);
  var initialTouch = gesture.get('initialTouches').get(0);
  var currentTouch = gesture.get('touches').get(0);
+
  return layout.withMutations(function (l) {
  return l.set('x', l.get('x') + (currentTouch.get('pageX') - initialTouch.get('pageX'))).set('y', l.get('y') + (currentTouch.get('pageY') - initialTouch.get('pageY')));
  }).toJS();
 });
-
-exports.calculate = calculate;
-var GESTURE_NUMBER = 1;
-exports.GESTURE_NUMBER = GESTURE_NUMBER;
+exports.transducer = transducer;

dist/distance.js

@@ -4,6 +4,12 @@ module.exports = {
  drag: require('./drag'),
  pinch: require('./pinch'),
  create: require('./create'),
- draggable: require('./draggable'),
- GestureView: require('./GestureView')
+ draggable: require('./mixins/draggable'),
+ events: require('./mixins/events'),
+ GestureView: require('./GestureView'),
+ responders: {
+ general: require('./responder/general'),
+ oneFinger: require('./responder/oneFinger'),
+ twoFinger: require('./responder/twoFinger')
+ }
 };

dist/drag.js

@@ -11,12 +11,16 @@ var _rx = require('rx');
 
 var _rx2 = _interopRequireDefault(_rx);
 
-var _create = require('./create');
+var _create = require('../create');
 
 var _create2 = _interopRequireDefault(_create);
 
 var _reactNative = require('react-native');
 
+function yes() {
+ return true;
+}
+
 function draggableMixin(gestureDefs) {
  gestureDefs = gestureDefs || [];
 
@@ -37,7 +41,7 @@ function draggableMixin(gestureDefs) {
  var onDragRelease = new _rx2['default'].Subject();
 
  this.onLayout.take(1).subscribe(function (ev) {
- target = ev.target;
+ return target = ev.target;
  });
 
  this.onLayout.subscribe(function (ev) {
@@ -51,44 +55,30 @@ function draggableMixin(gestureDefs) {
  };
 
  this.gestureResponder = _reactNative.PanResponder.create({
- onStartShouldSetPanResponder: function onStartShouldSetPanResponder() {
- return true;
- },
- onStartShouldSetPanResponderCapture: function onStartShouldSetPanResponderCapture() {
- return true;
- },
- onMoveShouldSetPanResponder: function onMoveShouldSetPanResponder() {
- return true;
- },
- onMoveShouldSetPanResponderCapture: function onMoveShouldSetPanResponderCapture() {
- return true;
- },
+ onStartShouldSetPanResponder: yes,
+ onStartShouldSetPanResponderCapture: yes,
+ onMoveShouldSetPanResponder: yes,
+ onMoveShouldSetPanResponderCapture: yes,
  onPanResponderGrant: function onPanResponderGrant(evt) {
  return onDragStart.onNext(evt.nativeEvent);
  },
  onPanResponderMove: function onPanResponderMove(evt, gestureState) {
  return onDragMove.onNext(evt.nativeEvent);
  },
- onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
- return true;
- },
+ onPanResponderTerminationRequest: yes,
  onPanResponderRelease: function onPanResponderRelease(evt) {
  return onDragRelease.onNext(evt.nativeEvent);
  },
- onPanResponderTerminate: function onPanResponderTerminate() {
- return true;
- },
- onShouldBlockNativeResponder: function onShouldBlockNativeResponder() {
- return true;
- }
+ onPanResponderTerminate: yes,
+ onShouldBlockNativeResponder: yes
  });
 
  if (this.props && this.props.gestures) {
  gestureDefs = gestureDefs.concat(this.props.gestures);
  }
 
- this.layoutStream = _rx2['default'].Observable.merge(gestureDefs.map(function (options) {
- return (0, _create2['default'])(options, getInitialLayout, draggable);
+ this.layoutStream = _rx2['default'].Observable.merge(gestureDefs.map(function (def) {
+ return (0, _create2['default'])(def.responder, def.transducer, getInitialLayout, draggable);
  }));
  }
  };

dist/index.js

@@ -6,33 +6,16 @@ Object.defineProperty(exports, '__esModule', {
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _center = require('./center');
+var _responderTwoFinger = require('./responder/twoFinger');
 
-var _center2 = _interopRequireDefault(_center);
-
-var _distance = require('./distance');
-
-var _distance2 = _interopRequireDefault(_distance);
-
-var _immutable = require('immutable');
+var _responderTwoFinger2 = _interopRequireDefault(_responderTwoFinger);
 
 var _transducersJs = require('transducers.js');
 
-var calculate = (0, _transducersJs.compose)((0, _transducersJs.filter)(function (gesture) {
- return !(void 0 === gesture.get('touches').get(0) || void 0 === gesture.get('touches').get(1));
-}), (0, _transducersJs.map)(function (gesture) {
- return gesture.withMutations(function (g) {
- var initCenter = _center2['default'].ofTwoTouches(gesture.get('initialTouches'));
- var currentCenter = _center2['default'].ofTwoTouches(gesture.get('touches'));
- var initDistance = _distance2['default'].ofTwoTouches(gesture.get('initialTouches'));
- var currentDistance = _distance2['default'].ofTwoTouches(gesture.get('touches'));
-
- return g.set('increasedDistance', currentDistance - initDistance).set('centerDiff', (0, _immutable.Map)({
- x: initCenter.get('x') - currentCenter.get('x'),
- y: initCenter.get('y') - currentCenter.get('y')
- }));
- });
-}), (0, _transducersJs.map)(function (gesture) {
+var responder = _responderTwoFinger2['default'];
+
+exports.responder = responder;
+var transducer = (0, _transducersJs.map)(function (gesture) {
  var layout = gesture.get('initialLayout');
  var startX = layout.get('x');
  var startY = layout.get('y');
@@ -48,10 +31,8 @@ var calculate = (0, _transducersJs.compose)((0, _transducersJs.filter)(function
  x: startX - gesture.getIn(['centerDiff', 'x']) - xWidthDiff,
  y: startY - gesture.getIn(['centerDiff', 'y']) - yHeightDiff,
  width: newWidth,
- height: newHeight
+ height: newHeight,
+ rotate: gesture.get('angleChanged')
  };
-}));
-
-exports.calculate = calculate;
-var GESTURE_NUMBER = 2;
-exports.GESTURE_NUMBER = GESTURE_NUMBER;
+});
+exports.transducer = transducer;