Restores absolute values for boundaries

Author: arqex

playground/src/examples/MoreChatHeads.js

@@ -111,7 +111,7 @@ export default class MoreChatHeads extends Component {
         <View style={styles.markerContainer}><View style={[styles.marker, {top:  140}]} /></View>
         <Interactable.View
           snapPoints={ snap }
-          dragWithSpring={{tension: 2000, damping: 0.5}}
+          // dragWithSpring={{tension: 2000, damping: 0.5}}
           gravityPoints={ gravity }
           onStop={this.onStopInteraction}
           initialPosition={{x: -140, y: -250}}>

playground/src/interactable/Animator.js

@@ -45,7 +45,7 @@ export default class PhysicsAnimator {
 
 		let dx = 0;
 		let {vx,vy} = physicsObject
-		console.log( physicsObject )
+		// console.log( physicsObject )
 
 		if ( Math.abs(vx) > ANIMATOR_PAUSE_ZERO_VELOCITY ) {
 			dx = deltaTime * vx;

playground/src/interactable/Behaviors.js

@@ -34,16 +34,16 @@ export default {
 
 			let { vx, vy } = state
 
-			if (minPoint.x >= x && vx < 0) {
+			if (minPoint.x > x && vx < 0) {
 				state.vx = -vx * bounce
 			}
-			if (minPoint.y >= y && vy < 0) {
+			if (minPoint.y > y && vy < 0) {
 				state.vy= -vy * bounce
 			}
-			if (maxPoint.x <= x && vx > 0) {
+			if (maxPoint.x < x && vx > 0) {
 				state.vx = -vx * bounce
 			}
-			if (maxPoint.y <= y && vy > 0) {
+			if (maxPoint.y < y && vy > 0) {
 				state.vy = -vy * bounce
 			}
 		}
@@ -81,8 +81,8 @@ export default {
 		doFrame: (options, deltaTime, state, coords) => {
 			if( !Utils.isPointInArea( coords, options.influence) ) return;
 
-			let dx = coords.dx - options.x0;
-			let dy = coords.dy - options.y0;
+			let dx = coords.x - options.x0;
+			let dy = coords.y - options.y0;
 			let dr = Math.sqrt(dx * dx + dy * dy);
 			if (!dr) return;
 

playground/src/interactable/InteractableView.js

@@ -207,20 +207,10 @@ export default function injectDependencies( Animated, PanResponder ){
 			this.lastEnd = offset
 			console.log( offset )
 
-			// Set relative boundaries to not to drag after them
-			if( this.propAreas.boundaries ){
-				let {minPoint, maxPoint} = this.propAreas.boundaries.influence
-				this.dragBoundaries = {
-					minPoint: { x: minPoint.x - offset.x, y: minPoint.y - offset.y },
-					maxPoint: { x: maxPoint.x - offset.x, y: maxPoint.y - offset.y }
-				}
-			}
-			else {
-				this.dragBoundaries = {}
-			}
+			// Set boundaries to fast access
+			this.dragBoundaries = this.propAreas.boundaries ? this.propAreas.boundaries.influence : {}
 
 			// Prepare the animation
-			let pos = {x: 0, y: 0}
 			this.props.onDrag({state: 'start', x: offset.x, y: offset.y})
 			this.dragStartLocation = { x: ev.x, y: ev.y }
 			this.animator.removeTempBehaviors();
@@ -238,9 +228,11 @@ export default function injectDependencies( Animated, PanResponder ){
 		}
 
 		onDragging({dx, dy}){
-			let animated = this.getAnimated()
-			let x = dx + animated.x._offset
-			let y = dy + animated.y._offset
+			let pos = this.getTranslation()
+			let x = dx + pos.x
+			let y = dy + pos.y
+			
+			console.log( this.dragBoundaries.minPoint )
 
 			let {minPoint, maxPoint} = this.dragBoundaries
 			if( !this.props.verticalOnly ){
@@ -267,14 +259,14 @@ export default function injectDependencies( Animated, PanResponder ){
 			this.dragBehavior = null;
 			this.animator.isDragging = false
 
-			let { animator, horizontalOnly, verticalOnly, dragWithSprings, boundaies } = this
+			let { animator, horizontalOnly, verticalOnly, dragWithSprings } = this
 
 
 			let velocity = animator.getVelocity();
 			if (horizontalOnly) velocity.y = 0;
 			if (verticalOnly) velocity.x = 0;
 
-			let toss = dragWithSprings && dragWithSprings.toss || this.props.dragToss;
+			let toss = (dragWithSprings && dragWithSprings.toss) || this.props.dragToss;
 			let {x,y} = this.getTranslation()
 			let projectedCenter = {
 				x: x + toss * velocity.x,
@@ -283,7 +275,7 @@ export default function injectDependencies( Animated, PanResponder ){
 
 			console.log( 'pc', projectedCenter, velocity)
 			let snapPoint = Utils.findClosest(projectedCenter, this.props.snapPoints);
-			let targetSnapPointId = snapPoint && snapPoint.id || "";
+			let targetSnapPointId = (snapPoint && snapPoint.id) || "";
 
 			this.props.onDrag({ state: 'end', x: x, y: y, targetSnapPointId })