Fixes double added delta in drag behavior

Author: arqex

playground/src/interactable/Animator.js

@@ -31,6 +31,20 @@ export default class PhysicsAnimator {
 		this.animatorListener.onAnimationFrame();
 		requestAnimationFrame( () => this.doFrame( Date.now() ) )
 	}
+
+	debugStart( behaviour ){
+		if( !this.debug ) return;
+		this.debugB = behaviour
+		this.debugInitialV = {...this.physicsObject}
+	}
+
+	debugEnd(){
+		if( !this.debug ) return;
+		console.log( `Debug ${this.debugB.type}`, {
+			dvx: this.physicsObject.vx - this.debugInitialV.vx,
+			dvy: this.physicsObject.vy - this.debugInitialV.vy,
+		})
+	}
 
 	animateFrameWithDeltaTime( deltaTime ) {
 		if( !deltaTime ) return;
@@ -40,7 +54,9 @@ export default class PhysicsAnimator {
 		let coords = View.getTranslation()
 
 		behaviors.forEach( behavior => {
+			this.debugStart( behavior )
 			Behaviors[ behavior.type ].doFrame( behavior, deltaTime, physicsObject, coords, View )
+			this.debugEnd()
 		})
 
 		let dx = 0;

playground/src/interactable/InteractableView.js

@@ -55,11 +55,14 @@ export default function injectDependencies( Animated, PanResponder ){
 		constructor(props) {
 			super(props)
 
+			let {x = 0, y = 0} = props.initialPosition
+
 			// In case animatedValueXY is not given
-			this.animated = new Animated.ValueXY(0,0)
+			this.animated = new Animated.ValueXY({x, y})
 
 			// This guy will apply all the physics
 			this.animator = this.createAnimator( props )
+			this.animator.debug = false
 
 			// Cache when the view is inside of an alert area
 			this.insideAlertAreas = {}
@@ -76,9 +79,11 @@ export default function injectDependencies( Animated, PanResponder ){
 			this.setPropBehaviours( {}, props )
 
 			// Set initial position
-			let {x,y} = this.getAnimated( props )
-			x.setValue( props.initialPosition.x )
-			y.setValue( props.initialPosition.y )
+			let animated = this.getAnimated( props )
+			animated.x.setValue( x )
+			animated.y.setValue( y )
+			animated.x._startingValue = x
+			animated.x._startingValue = y
 
 			// Save the last animation end position to report good coordinates in the events
 			this.lastEnd = {...this.initialPosition}
@@ -141,7 +146,7 @@ export default function injectDependencies( Animated, PanResponder ){
 		animate( dx, dy ){
 			if(!dx && !dy) return
 			let animated = this.getAnimated()
-			console.log( dx + animated.x._value + animated.x._offset )
+			console.log( dx + animated.x._value + animated.x._offset, this.animator.physicsObject )
 
 			let {x,y}  = this.getTranslation()
 			this.setTranslation( x + dx, y + dy ) 
@@ -228,11 +233,10 @@ export default function injectDependencies( Animated, PanResponder ){
 		}
 
 		onDragging({dx, dy}){
-			let pos = this.getTranslation()
-			let x = dx + pos.x
-			let y = dy + pos.y
-			
-			console.log( this.dragBoundaries.minPoint )
+			let x = dx + this.lastEnd.x
+			let y = dy + this.lastEnd.y
+
+			console.log('diff', dx, dy)
 
 			let {minPoint, maxPoint} = this.dragBoundaries
 			if( !this.props.verticalOnly ){
@@ -333,15 +337,11 @@ export default function injectDependencies( Animated, PanResponder ){
 			}
 		}
 
-		setInitialPosition( initialPosition ) {
-			this.initialPosition = initialPosition;
-			this.setTranslation( initialPosition )
-		}
-
 		setVelocity( velocity ) {
 			if ( this.dragBehavior ) return;
-			this.animator.vx = velocity.x
-			this.animator.vy = velocity.y
+			let { physicsObject } = this.animator
+			physicsObject.vx = velocity.x
+			physicsObject.vy = velocity.y
 			this.endDrag();
 		}
 
@@ -367,7 +367,7 @@ export default function injectDependencies( Animated, PanResponder ){
 		changePosition( position ) {
 			if ( this.dragBehavior ) return;
 
-			this.setTranslation( position )
+			this.setTranslation( position.x, position.y )
 			this.endDrag();
 		}
 

playground/src/real-life-examples/CollapsibleCalendar.js

@@ -4,8 +4,8 @@ import Interactable from 'react-native-interactable';
 
 const Screen = Dimensions.get('window');
 const Calendar = {
-  width: Screen.width - 16,
-  height: (Screen.width -16) / 944 * 793
+  width: 480 - 16,
+  height: (480 -16) / 944 * 793
 }
 
 export default class CollapsibleFilter extends Component {
@@ -98,14 +98,14 @@ const styles = StyleSheet.create({
   },
   top: {
     backgroundColor: 'white',
-    width: Screen.width,
+    width: Calendar.width,
     alignItems: 'center',
     zIndex: 1000
   },
   header: {
     marginTop: 15,
     height: 40,
-    width: Screen.width,
+    width: Calendar.width,
     paddingLeft: 20
   },
   month: {
@@ -116,8 +116,8 @@ const styles = StyleSheet.create({
     fontWeight: 'bold'
   },
   days: {
-    width: Screen.width - 16,
-    height: (Screen.width -16) / 944 * 65
+    width: Calendar.width - 16,
+    height: (Calendar.width -16) / 944 * 65
   },
   calendar: {
     width: Calendar.width,
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
   },
   row: {
     flexDirection: 'row',
-    width: Screen.width,
+    width: Calendar.width,
     borderBottomWidth: 1,
     borderColor: '#eeeeee',
     height: 80,

playground/src/real-life-examples/CollapsibleFilter.js

@@ -147,7 +147,7 @@ const styles = StyleSheet.create({
     color: 'white'
   },
   photo: {
-    width: Screen.width-40,
+    width: 480-40,
     height: 190,
     marginBottom: 20
   }

playground/src/real-life-examples/MapPanel.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, Dimensions, Image, Text, Animated, TouchableOpacity }
 import Interactable from 'react-native-interactable';
 
 const Screen = {
-  width: Dimensions.get('window').width,
+  width: 480,
   height: Dimensions.get('window').height - 75
 }
 

playground/src/real-life-examples/NotifPanel.js

@@ -3,7 +3,7 @@ import { StyleSheet, View, Dimensions, Image, Text, Platform } from 'react-nativ
 import Interactable from 'react-native-interactable';
 
 const Screen = {
-  width: Dimensions.get('window').width,
+  width: 480,
   height: Dimensions.get('window').height - 75
 }
 

playground/src/real-life-examples/NowCard.js

@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#efefef',
   },
   card: {
-    width: Screen.width - 40,
+    width: 480 - 40,
     backgroundColor: 'white',
     borderRadius: 6,
     marginHorizontal: 20,
@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
     elevation: 4
   },
   image: {
-    width: Screen.width - 40,
+    width: 480 - 40,
     height: Screen.height <= 500 ? 70 : 150
   },
   header: {
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
   playground: {
     marginTop: Screen.height <= 500 ? 10 : 40,
     padding: 20,
-    width: Screen.width - 40,
+    width: 480 - 40,
     backgroundColor: '#459FED',
     alignItems: 'stretch'
   },

playground/src/real-life-examples/RowActions1.js

@@ -240,7 +240,7 @@ const styles = StyleSheet.create({
   playground: {
     marginTop: Screen.height <= 500 ? 0 : 80,
     padding: 20,
-    width: Screen.width - 40,
+    width: 480 - 40,
     backgroundColor: '#459FED',
     alignItems: 'stretch',
     alignSelf: 'center'

playground/src/real-life-examples/RowActions2.js

@@ -2,7 +2,10 @@ import React, { Component } from 'react';
 import { StyleSheet, View, Image, Text, Animated, TouchableOpacity, Dimensions, Slider } from 'react-native';
 import Interactable from 'react-native-interactable';
 
-const Screen = Dimensions.get('window');
+const Screen = {
+  width: 480,
+  height: Dimensions.get('window')
+}
 
 export default class RowActions2 extends Component {
   constructor(props) {

playground/src/real-life-examples/TinderCard.js

@@ -2,7 +2,10 @@ import React, { Component } from 'react';
 import { StyleSheet, View, Dimensions, Image, Text, Animated } from 'react-native';
 import Interactable from 'react-native-interactable';
 
-const Screen = Dimensions.get('window');
+const Screen = {
+  width: 480,
+  height: Dimensions.get('window').height
+}
 
 export default class TinderCard extends Component {
   constructor(props) {