Fixes defaults and influence areas

Author: arqex

playground/package-lock.json

@@ -41,6 +41,7 @@
     "postcss-safe-parser": "4.0.1",
     "react": "^16.6.3",
     "react-app-polyfill": "^0.1.3",
+    "react-art": "^16.6.3",
     "react-dev-utils": "^6.1.1",
     "react-dom": "^16.6.3",
     "react-native-web": "^0.9.7",

playground/package.json

@@ -126,8 +126,8 @@ export default class MoreChatHeads extends Component {
   }
 
   onStopInteraction(event) {
-    const x = event.nativeEvent.x;
-    const y = event.nativeEvent.y;
+    const x = event.x;
+    const y = event.y;
     console.log(`stopped at x=${x}, y=${y}`);
   }
 

playground/src/examples/MoreChatHeads.js

@@ -37,9 +37,17 @@ export default class PhysicsAnimator {
 
 		let { physicsObject, behaviors, View } = this
 		let hadMovement = false
+		let {x,y} = View.getAnimated()
+
+		let coords = {
+			x: x._value + x._offset,
+			y: y._value + y._offset,
+			dx: x._value,
+			dy: y._value
+		}
 
 		behaviors.forEach( behavior => {
-			Behaviors[ behavior.type ].doFrame( behavior, deltaTime, physicsObject, View )
+			Behaviors[ behavior.type ].doFrame( behavior, deltaTime, physicsObject, coords, View )
 		})
 
 		let dx = 0;
@@ -76,7 +84,7 @@ export default class PhysicsAnimator {
 		let behaviors = this.behaviors
 		let idx = 0
 
-		while (behaviors.length > idx && behaviors[idx].priority < behavior.priority) {
+		while (behaviors.length > idx && behaviors[idx].priority <= behavior.priority) {
 			++idx;
 		}
 		behaviors.splice( idx, 0, behavior )

playground/src/interactable/Animator.js

@@ -1,38 +1,39 @@
 import Utils from './Utils'
 
+function def( value, defaultValue ){
+	return value === undefined ? defaultValue : value
+}
+
 export default {
 	anchor: {
 		create: (options, isTemp = false) => (
-			{ x: options.x, y: options.y, priority: 1, isTemp, type: 'anchor' }
+			{ x0: options.x, y0: options.y, priority: 1, isTemp, type: 'anchor' }
 		),
-		doFrame: (options, deltaTime, state, target ) => {
-			let {x,y} = target.getTranslation()
-
+		doFrame: (options, deltaTime, state, coords ) => {
 			// Velocity = dx / deltaTime
-			state.vx = (options.x - x) / deltaTime
-			state.vy = (options.y - y) / deltaTime
+			state.vx = (options.x0 - coords.dx) / deltaTime
+			state.vy = (options.y0 - coords.dy) / deltaTime
 		}
 	},
 
 	bounce: {
 		create: (options, isTemp = false) => ({
 			type: 'bounce',
-			bounce: options.bounce || .5,
+			bounce: def(options.bounce, .5),
 			minPoint: options.influence.minPoint,
 			maxPoint: options.influence.maxPoint,
 			priority: 3,
 			isTemp
 		}),
-		doFrame: ({minPoint, maxPoint, bounce}, deltaTime, state, target ) => {
-			let {x,y} = target.getTranslation()
-			
+		doFrame: ({minPoint, maxPoint, bounce}, deltaTime, state, {x,y,dx,dy}, target ) => {
 			// Apply limits
 			if (minPoint.x > x) target.setTranslationX(minPoint.x);
 			if (minPoint.y > y) target.setTranslationY(minPoint.y);
 			if (maxPoint.x < x) target.setTranslationX(maxPoint.x);
 			if (maxPoint.y < y) target.setTranslationY(maxPoint.y);
 
 			let { vx, vy } = state
+			console.log( vx, vy, bounce )
 
 			if (minPoint.x >= x && vx < 0) {
 				state.vx = -vx * bounce
@@ -52,14 +53,13 @@ export default {
 	friction: {
 		create: ( options, isTemp = false ) => ({
 			type: 'friction',
-			damping: options.damping || .7,
+			damping: def(options.damping, .7),
 			influence: Utils.createArea( options.influenceArea || {} ),
 			priority: 2,
 			isTemp
 		}),
-		doFrame: (options, deltaTime, state, target) => {
-			let pos = target.getTranslation()
-			if( !Utils.isPointInArea( pos, options.influence) ) return;
+		doFrame: (options, deltaTime, state, coords) => {
+			if( !Utils.isPointInArea( coords, options.influence) ) return;
 
 			let pow = Math.pow(options.damping, 60.0 * deltaTime)
 			state.vx = pow * state.vx
@@ -70,26 +70,25 @@ export default {
 	gravity: {
 		create: ( options, isTemp = false ) => ({
 			type: 'gravity',
-			x: options.x || Infinity,
-			y: options.y || Infinity,
-			strength: options.strength || 400,
-			falloff: options.falloff || 40,
-			damping: options.damping || 0,
-			influence: options.damping ? Utils.createAreaFromRadius( 1.4 * options.falloff || 40, options ) : Utils.createArea( options.influenceArea || {} ),
+			x0: def(options.x, Infinity),
+			y0: def(options.y, Infinity),
+			strength: def(options.strength, 400),
+			falloff: def(options.falloff, 40),
+			damping: def(options.damping, 0),
+			influence: options.damping ? Utils.createAreaFromRadius( (1.4 * options.falloff) || 40, options ) : Utils.createArea( options.influenceArea || {} ),
 			isTemp,
 			priority: 1
 		}),
-		doFrame: (options, deltaTime, state, target) => {
-			let pos = target.getTranslation()
+		doFrame: (options, deltaTime, state, coords) => {
+			if( !Utils.isPointInArea( coords, options.influence) ) return;
 
-			if( !Utils.isPointInArea( pos, options.influence) ) return;
-			let {x, y, falloff, strength} = options
-			let dx = pos.x - x;
-			let dy = pos.y - y;
-			
+			let dx = coords.dx - options.x0;
+			let dy = coords.dy - options.y0;
 			let dr = Math.sqrt(dx * dx + dy * dy);
 			if (!dr) return;
 
+
+			let { falloff, strength } = options
 			let a = (-strength * dr * Math.exp(-0.5 * (dr * dr) / (falloff * falloff))) / state.mass;
 			let ax = dx / dr * a;
 			let ay = dy / dr * a;
@@ -102,23 +101,23 @@ export default {
 	spring: {
 		create: ( options, isTemp = false ) => ({
 			type: 'spring',
-			x: options.x || 0,
-			y: options.y || 0,
-			tension: options.tension || 300,
+			x0: def(options.x, 0),
+			y0: def(options.y, 0),
+			tension: def(options.tension, 300),
 			influence: Utils.createArea( options.influenceArea || {} ),
 			isTemp,
 			priority: 1
 		}),
-		doFrame: ( options, deltaTime, state, target) => {
-			let pos = target.getTranslation()
-			if( !Utils.isPointInArea( pos, options.influence) ) return;
+		doFrame: ( options, deltaTime, state, coords) => {
+			console.log( coords )
+			if( !Utils.isPointInArea( coords, options.influence) ) return;
 
-			let {x,y,tension} = options
+			let {tension} = options
 
-			let dx = pos.x - x;
+			let dx = coords.dx - options.x0;
 			let ax = (-tension * dx) / state.mass;
 
-			let dy = pos.y - y;
+			let dy = coords.dy - options.y0;
 			let ay = (-tension * dy) / state.mass;
 
 			state.vx = state.vx + deltaTime * ax

playground/src/interactable/Behaviors.js

@@ -19,10 +19,10 @@ export default function injectDependencies( Animated, PanResponder ){
 			gravityPoints: PropTypes.array,
 			horizontalOnly: PropTypes.bool,
 			verticalOnly: PropTypes.bool,
-			dragWithSprings: PropTypes.bool,
+			dragWithSpring: PropTypes.bool,
 			dragEnabled: PropTypes.bool,
 			animatedValueX: PropTypes.instanceOf(Animated.Value),
-			// animatedValueY: PropTypes.instanceOf(Animated.Value),
+			animatedValueY: PropTypes.instanceOf(Animated.Value),
 			onSnap: PropTypes.func,
 			onSnapStart: PropTypes.func,
 			onEnd: PropTypes.func,
@@ -40,7 +40,7 @@ export default function injectDependencies( Animated, PanResponder ){
 			boundaries: {},
 			initialPosition: {x: 0, y: 0},
 			dragToss: .1,
-			dragWithSprings: false,
+			dragWithSpring: false,
 			dragEnabled: true,
 			onSnap: function () { },
 			onSnapStart: function () { },
@@ -86,7 +86,6 @@ 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
 
@@ -113,6 +112,13 @@ export default function injectDependencies( Animated, PanResponder ){
 				y: animated.y._value
 			}
 		}
+		getAbsoluteTranslation(){
+			let {x,y} = this.getAnimated()
+			return {
+				x: x._value + x._offset,
+				y: y._value + y._offset
+			}
+		}
 
 		setTranslationX( tx ){
 			( this.props.animatedValueX || this.animated.x ).setValue( tx )
@@ -161,21 +167,12 @@ export default function injectDependencies( Animated, PanResponder ){
 				onMoveShouldSetResponderCapture: () => true,
 				onMoveShouldSetPanResponderCapture: () => true,
 
-				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 )
-					y.setValue( 0 )
-					
+				onPanResponderGrant: (e, {x0, y0}) => {	
 					this.startDrag( {x: x0, y: y0} )
 				},
 
-				onPanResponderMove: (evt, { dx, dy }) => {
-					!this.props.verticalOnly && (this.dragBehavior.x = dx);
-					!this.props.horizontalOnly && (this.dragBehavior.y = dy);
+				onPanResponderMove: (evt, gesture ) => {
+					this.onDragging( gesture )
 				},
 
 				onPanResponderRelease: () => {
@@ -207,14 +204,64 @@ export default function injectDependencies( Animated, PanResponder ){
 		}
 
 		startDrag( ev ){
+			// Prepare the animated
+			let {x,y} = this.getAnimated()
+			let offset = {x: x._value, y: y._value}
+			x.setOffset( offset.x )
+			y.setOffset( offset.y )
+			x.setValue( 0 )
+			y.setValue( 0 )
+
+			// Save the offset for triggering events with the right coordinates
+			this.lastEnd = 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 = {}
+			}
+
+			// Prepare the animation
 			let pos = this.getTranslation()
 			this.props.onDrag({state: 'start', x: pos.x + this.lastEnd.x, y: pos.y + this.lastEnd.y})
 			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 );
+			this.addTempDragBehavior( this.props.dragWithSpring );
+
+			// Stop text selection
+			if (document) {
+				let styles = document.body.style
+				this.userSelectCache = styles.userSelect
+				styles.userSelect = "none"
+			}
+		}
+
+		onDragging({dx, dy}){
+			let {minPoint, maxPoint} = this.dragBoundaries
+			if( !this.props.verticalOnly ){
+				if (minPoint) {
+					if (minPoint.x > dx) dx = minPoint.x
+					if (maxPoint.x < dx) dx = maxPoint.x
+				}
+				this.dragBehavior.x0 = dx
+			}
+
+			if (!this.props.horizontalOnly) {
+				if (minPoint) {
+					if (minPoint.y > dy) dy = minPoint.y
+					if (maxPoint.y < dy) dy = maxPoint.y
+				}
+				this.dragBehavior.y0 = dy
+			}
 		}
 
 		endDrag(){
@@ -244,6 +291,11 @@ export default function injectDependencies( Animated, PanResponder ){
 
 			this.addTempSnapToPointBehavior(snapPoint);
 			this.addTempBoundaries();
+
+			// Restore text selection
+			if (document) {
+				document.body.userSelect = this.userSelectCache || ''
+			}
 		}
 
 		addTempDragBehavior( drag ) {
@@ -277,7 +329,6 @@ export default function injectDependencies( Animated, PanResponder ){
 			}
 
 			this.addBehavior( 'spring', springOptions, true )
-
 		}
 
 		setDragEnabled( dragEnabled ) {
@@ -327,7 +378,6 @@ export default function injectDependencies( Animated, PanResponder ){
 		}
 
 		componentDidUpdate( prevProps ){
-			console.log('updated')
 			this.setPropBehaviours( prevProps, this.props )
 		}
 
@@ -355,7 +405,7 @@ export default function injectDependencies( Animated, PanResponder ){
 				this.animator.removeBehavior( this.oldBoundariesBehavior )
 				if( props.boundaries ){
 					let bounce = {
-						bounce: props.boundaries.bounce,
+						bounce: props.boundaries.bounce || 0,
 						influence: Utils.createArea( props.boundaries )
 					}
 					this.propAreas.boundaries = bounce