Fixes playground and initial velocity when dragging

Author: arqex

playground/config/webpack.config.dev.js

@@ -150,7 +150,7 @@ module.exports = {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
       'react-native': 'react-native-web',
-      'react-native-interactable': path.join(__dirname, '../../index.js'),
+      'react-native-interactable': path.join(__dirname, '../src/interactable/index.js'),
       'assets': path.join(__dirname, '../src/assets'),
     },
     plugins: [

Animator.js playground/src/interactable/Animator.jsAnimator.js renamed to playground/src/interactable/Animator.js

@@ -56,12 +56,13 @@ export default class PhysicsAnimator {
 			hadMovement = true;
 		}
 
+		// console.log( {dx, dy} )
 		View.animate( dx, dy )
 
 		let cfwnm = hadMovement ? 0 : this.consecutiveFramesWithNoMovement + 1
 		this.consecutiveFramesWithNoMovement = cfwnm
 
-		if (cfwnm >= ANIMATOR_PAUSE_CONSECUTIVE_FRAMES && !this.isDragging) {
+		if (cfwnm >= ANIMATOR_PAUSE_CONSECUTIVE_FRAMES && !this.isDragging ) {
 			this.stopRunning();
 			this.animatorListener.onAnimatorPause();
 		}

Behaviors.js playground/src/interactable/Behaviors.jsBehaviors.js renamed to playground/src/interactable/Behaviors.js

@@ -75,7 +75,7 @@ export default {
 			strength: options.strength || 400,
 			falloff: options.falloff || 40,
 			damping: options.damping || 0,
-			influence: options.damping ? Utils.createAreaFromRadius( 1.4 * options.falloff || 40, anchor ) : Utils.createArea( options.influenceArea || {} ),
+			influence: options.damping ? Utils.createAreaFromRadius( 1.4 * options.falloff || 40, options ) : Utils.createArea( options.influenceArea || {} ),
 			isTemp,
 			priority: 1
 		}),
@@ -94,7 +94,7 @@ export default {
 			let ax = dx / dr * a;
 			let ay = dy / dr * a;
 
-			state.vx += deltaTime * ax,
+			state.vx += deltaTime * ax
 			state.vy += deltaTime * ay
 		}
 	},

InteractableView.js …und/src/interactable/InteractableView.jsInteractableView.js renamed to playground/src/interactable/InteractableView.js InteractableView.js renamed to playground/src/interactable/InteractableView.js

@@ -21,7 +21,7 @@ export default function injectDependencies( Animated, PanResponder ){
 			verticalOnly: PropTypes.bool,
 			dragWithSprings: PropTypes.bool,
 			dragEnabled: PropTypes.bool,
-			// animatedValueX: PropTypes.instanceOf(Animated.Value),
+			animatedValueX: PropTypes.instanceOf(Animated.Value),
 			// animatedValueY: PropTypes.instanceOf(Animated.Value),
 			onSnap: PropTypes.func,
 			onSnapStart: PropTypes.func,
@@ -86,6 +86,11 @@ export default function injectDependencies( Animated, PanResponder ){
 
 		render() {
 			let { x, y } = this.getAnimated()
+			console.log( x === this.lastX, y === this.lastY)
+			this.lastX = x
+			this.lastY= y
+
+	
 			let position = {
 				transform: [
 					{ translateX: x }, { translateY: y }
@@ -159,6 +164,7 @@ export default function injectDependencies( Animated, PanResponder ){
 				onPanResponderGrant: (e, {x0, y0}) => {				
 					let {x,y} = this.getAnimated()
 					let offset = {x: x._value, y: y._value}
+					this.lastEnd = offset
 					x.setOffset( offset.x )
 					y.setOffset( offset.y )
 					x.setValue( 0 )
@@ -206,6 +212,8 @@ export default function injectDependencies( Animated, PanResponder ){
 			this.dragStartLocation = { x: ev.x, y: ev.y }
 			this.animator.removeTempBehaviors();
 			this.animator.isDragging = true
+			this.animator.vx = 0
+			this.animator.vy = 0
 			this.addTempDragBehavior( this.props.dragWithSprings );
 		}
 
@@ -228,6 +236,7 @@ export default function injectDependencies( Animated, PanResponder ){
 				y: y + this.lastEnd.y + toss * velocity.y
 			};
 
+			console.log( 'pc', projectedCenter, velocity, this.lastEnd )
 			let snapPoint = Utils.findClosest(projectedCenter, this.props.snapPoints);
 			let targetSnapPointId = snapPoint && snapPoint.id || "";
 
@@ -318,6 +327,7 @@ export default function injectDependencies( Animated, PanResponder ){
 		}
 
 		componentDidUpdate( prevProps ){
+			console.log('updated')
 			this.setPropBehaviours( prevProps, this.props )
 		}
 

Utils.js playground/src/interactable/Utils.jsUtils.js renamed to playground/src/interactable/Utils.js

@@ -27,13 +27,16 @@ export default {
 	findClosest: function( origin, points ){
 		let minDistance = Infinity;
 		let closestPoint = null;
+		let distances = []
 		points.forEach( point => {
 			let distance = this.getDistance( point, origin );
+			distances.push( distance )
 			if (distance < minDistance) {
 				minDistance = distance;
 				closestPoint = point;
 			}
 		})
+		console.log( distances )
 		return closestPoint
 	},
 	getDistance( point, relative ){