react-native-redash/lib/module/Interactable.js

Utility library for React Native Reanimated

import _extends from"@babel/runtime/helpers/extends";import _classCallCheck from"@babel/runtime/helpers/classCallCheck";import _createClass from"@babel/runtime/helpers/createClass";import _possibleConstructorReturn from"@babel/runtime/helpers/possibleConstructorReturn";import _getPrototypeOf from"@babel/runtime/helpers/getPrototypeOf";import _inherits from"@babel/runtime/helpers/inherits";import _objectSpread from"@babel/runtime/helpers/objectSpread";import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import _toConsumableArray from"@babel/runtime/helpers/toConsumableArray";var _jsxFileName="/home/circleci/repo/src/Interactable.tsx";import React from"react";import Animated from"react-native-reanimated";import{PanGestureHandler,State}from"react-native-gesture-handler";var add=Animated.add,cond=Animated.cond,diff=Animated.diff,divide=Animated.divide,eq=Animated.eq,event=Animated.event,exp=Animated.exp,lessThan=Animated.lessThan,and=Animated.and,call=Animated.call,block=Animated.block,multiply=Animated.multiply,pow=Animated.pow,set=Animated.set,abs=Animated.abs,clockRunning=Animated.clockRunning,greaterOrEq=Animated.greaterOrEq,lessOrEq=Animated.lessOrEq,sqrt=Animated.sqrt,startClock=Animated.startClock,stopClock=Animated.stopClock,sub=Animated.sub,Clock=Animated.Clock,Value=Animated.Value;var ANIMATOR_PAUSE_CONSECUTIVE_FRAMES=10;var ANIMATOR_PAUSE_ZERO_VELOCITY=1;var DEFAULT_SNAP_TENSION=300;var DEFAULT_SNAP_DAMPING=0.7;var DEFAULT_GRAVITY_STRENGTH=400;var DEFAULT_GRAVITY_FALLOF=40;function sq(x){return multiply(x,x);}function influenceAreaWithRadius(radius,anchor){return{left:(anchor.x||0)-radius,right:(anchor.x||0)+radius,top:(anchor.y||0)-radius,bottom:(anchor.y||0)+radius};}function snapTo(target,snapPoints,best,clb,dragClb){var dist=new Value(0);var snap=function snap(pt){return[set(best.tension,pt.tension||DEFAULT_SNAP_TENSION),set(best.damping,pt.damping||DEFAULT_SNAP_DAMPING),set(best.x,pt.x||0),set(best.y,pt.y||0)];};var snapDist=function snapDist(pt){return add(sq(sub(target.x,pt.x||0)),sq(sub(target.y,pt.y||0)));};return[set(dist,snapDist(snapPoints[0]))].concat(_toConsumableArray(snap(snapPoints[0])),_toConsumableArray(snapPoints.map(function(pt){var newDist=snapDist(pt);return cond(lessThan(newDist,dist),[set(dist,newDist)].concat(_toConsumableArray(snap(pt))));})),[(clb||dragClb)&&call([best.x,best.y,target.x,target.y],function(_ref){var _ref2=_slicedToArray(_ref,4),bx=_ref2[0],by=_ref2[1],x=_ref2[2],y=_ref2[3];snapPoints.forEach(function(pt,index){if((pt.x===undefined||pt.x===bx)&&(pt.y===undefined||pt.y===by)){if(clb){clb({nativeEvent:_objectSpread({},pt,{index:index})});}if(dragClb){dragClb({nativeEvent:{x:x,y:y,targetSnapPointId:pt.id,state:"end"}});}}});})]);}function springBehavior(dt,target,obj,anchor){var tension=arguments.length>4&&arguments[4]!==undefined?arguments[4]:300;var dx=sub(target.x,anchor.x);var ax=divide(multiply(-1,tension,dx),obj.mass);var dy=sub(target.y,anchor.y);var ay=divide(multiply(-1,tension,dy),obj.mass);return{x:set(obj.vx,add(obj.vx,multiply(dt,ax))),y:set(obj.vy,add(obj.vy,multiply(dt,ay)))};}function frictionBehavior(dt,obj){var damping=arguments.length>2&&arguments[2]!==undefined?arguments[2]:0.7;var friction=pow(damping,multiply(60,dt));return{x:set(obj.vx,multiply(obj.vx,friction)),y:set(obj.vy,multiply(obj.vy,friction))};}function anchorBehavior(dt,target,obj,anchor){var dx=sub(anchor.x,target.x);var dy=sub(anchor.y,target.y);return{x:set(obj.vx,divide(dx,dt)),y:set(obj.vy,divide(dy,dt))};}function gravityBehavior(dt,target,obj,anchor){var strength=arguments.length>4&&arguments[4]!==undefined?arguments[4]:DEFAULT_GRAVITY_STRENGTH;var falloff=arguments.length>5&&arguments[5]!==undefined?arguments[5]:DEFAULT_GRAVITY_FALLOF;var dx=sub(target.x,anchor.x);var dy=sub(target.y,anchor.y);var drsq=add(sq(dx),sq(dy));var dr=sqrt(drsq);var a=divide(multiply(-1,strength,dr,exp(divide(multiply(-0.5,drsq),sq(falloff)))),obj.mass);var div=divide(a,dr);return{x:cond(dr,set(obj.vx,add(obj.vx,multiply(dt,dx,div)))),y:cond(dr,set(obj.vy,add(obj.vy,multiply(dt,dy,div))))};}function bounceBehavior(target,obj,area){var bounce=arguments.length>3&&arguments[3]!==undefined?arguments[3]:0;var xnodes=[];var ynodes=[];var flipx=set(obj.vx,multiply(-1,obj.vx,bounce));var flipy=set(obj.vy,multiply(-1,obj.vy,bounce));if(area.left!==undefined){xnodes.push(cond(and(eq(target.x,area.left),lessThan(obj.vx,0)),flipx));}if(area.right!==undefined){xnodes.push(cond(and(eq(target.x,area.right),lessThan(0,obj.vx)),flipx));}if(area.top!==undefined){xnodes.push(cond(and(eq(target.y,area.top),lessThan(obj.vy,0)),flipy));}if(area.bottom!==undefined){xnodes.push(cond(and(eq(target.y,area.bottom),lessThan(0,obj.vy)),flipy));}return{x:xnodes,y:ynodes};}function withInfluence(area,target,behavior){if(!area){return behavior;}var testLeft=area.left===undefined||lessOrEq(area.left,target.x);var testRight=area.right===undefined||lessOrEq(target.x,area.right);var testTop=area.top===undefined||lessOrEq(area.top,target.y);var testBottom=area.bottom===undefined||lessOrEq(target.y,area.bottom);var testNodes=[testLeft,testRight,testTop,testBottom].filter(function(t){return t!==true;});var test=and.apply(void 0,[testNodes[0],testNodes[1]].concat(_toConsumableArray(testNodes.slice(2))));return{x:cond(test,behavior.x),y:cond(test,behavior.y)};}function withLimits(value,lowerBound,upperBound){var result=value;if(lowerBound!==undefined){result=cond(lessThan(value,lowerBound),lowerBound,result);}if(upperBound!==undefined){result=cond(lessThan(upperBound,value),upperBound,result);}return result;}var Interactable=function(_React$PureComponent){_inherits(Interactable,_React$PureComponent);function Interactable(props){var _this;_classCallCheck(this,Interactable);_this=_possibleConstructorReturn(this,_getPrototypeOf(Interactable).call(this,props));var gesture={x:new Value(0),y:new Value(0)};var state=new Value(-1);_this.onGestureEvent=event([{nativeEvent:{translationX:gesture.x,translationY:gesture.y,state:state}}]);var target={x:new Value(props.initialPosition.x||0),y:new Value(props.initialPosition.y||0)};var update={x:props.animatedValueX,y:props.animatedValueY};var clock=new Clock();var dt=divide(diff(clock),1000);var obj={vx:new Value(0),vy:new Value(0),mass:1};var tossedTarget={x:add(target.x,multiply(props.dragToss,obj.vx)),y:add(target.y,multiply(props.dragToss,obj.vy))};var permBuckets=[[],[],[]];var addSpring=function addSpring(anchor,tension,influence){var buckets=arguments.length>3&&arguments[3]!==undefined?arguments[3]:permBuckets;buckets[0].push(withInfluence(influence,target,springBehavior(dt,target,obj,anchor,tension)));};var addFriction=function addFriction(damping,influence){var buckets=arguments.length>2&&arguments[2]!==undefined?arguments[2]:permBuckets;buckets[1].push(withInfluence(influence,target,frictionBehavior(dt,obj,damping)));};var addGravity=function addGravity(anchor,strength,falloff,influence){var buckets=arguments.length>4&&arguments[4]!==undefined?arguments[4]:permBuckets;buckets[0].push(withInfluence(influence,target,gravityBehavior(dt,target,obj,anchor,strength,falloff)));};var dragAnchor={x:new Value(0),y:new Value(0)};var dragBuckets=[[],[],[]];if(props.dragWithSpring){var _props$dragWithSpring=props.dragWithSpring,tension=_props$dragWithSpring.tension,damping=_props$dragWithSpring.damping;addSpring(dragAnchor,tension,null,dragBuckets);addFriction(damping,null,dragBuckets);}else{dragBuckets[0].push(anchorBehavior(dt,target,obj,dragAnchor));}var handleStartDrag=props.onDrag&&call([target.x,target.y],function(_ref3){var _ref4=_slicedToArray(_ref3,2),x=_ref4[0],y=_ref4[1];return props.onDrag&&props.onDrag({nativeEvent:{x:x,y:y,state:"start"}});});var snapBuckets=[[],[],[]];var snapAnchor={x:new Value(props.initialPosition.x||0),y:new Value(props.initialPosition.y||0),tension:new Value(DEFAULT_SNAP_TENSION),damping:new Value(DEFAULT_SNAP_DAMPING)};var updateSnapTo=snapTo(tossedTarget,props.snapPoints,snapAnchor,props.onSnap,props.onDrag);addSpring(snapAnchor,snapAnchor.tension,null,snapBuckets);addFriction(snapAnchor.damping,null,snapBuckets);if(props.springPoints){props.springPoints.forEach(function(pt){addSpring(pt,pt.tension,pt.influenceArea);if(pt.damping){addFriction(pt.damping,pt.influenceArea);}});}if(props.gravityPoints){props.gravityPoints.forEach(function(pt){var falloff=pt.falloff||DEFAULT_GRAVITY_FALLOF;addGravity(pt,pt.strength,falloff,pt.influenceArea);if(pt.damping){var influenceArea=pt.influenceArea||influenceAreaWithRadius(1.4*falloff,pt);addFriction(pt.damping,influenceArea);}});}if(props.frictionAreas){props.frictionAreas.forEach(function(pt){addFriction(pt.damping,pt.influenceArea);});}if(props.boundaries){snapBuckets[0].push(bounceBehavior(target,obj,props.boundaries,props.boundaries.bounce));}var sortBuckets=function sortBuckets(specialBuckets){return{x:specialBuckets.map(function(b,idx){return[].concat(_toConsumableArray(permBuckets[idx]),_toConsumableArray(b)).reverse().map(function(b1){return b1.x;});}).reduce(function(acc,b2){return acc.concat(b2);},[]),y:specialBuckets.map(function(b,idx){return[].concat(_toConsumableArray(permBuckets[idx]),_toConsumableArray(b)).reverse().map(function(b1){return b1.y;});}).reduce(function(acc,b2){return acc.concat(b2);},[])};};var dragBehaviors=sortBuckets(dragBuckets);var snapBehaviors=sortBuckets(snapBuckets);var noMovementFrames={x:new Value(props.verticalOnly?ANIMATOR_PAUSE_CONSECUTIVE_FRAMES+1:0),y:new Value(props.horizontalOnly?ANIMATOR_PAUSE_CONSECUTIVE_FRAMES+1:0)};var stopWhenNeeded=cond(and(greaterOrEq(noMovementFrames.x,ANIMATOR_PAUSE_CONSECUTIVE_FRAMES),greaterOrEq(noMovementFrames.y,ANIMATOR_PAUSE_CONSECUTIVE_FRAMES)),block([props.onStop?cond(clockRunning(clock),call([target.x,target.y],function(_ref5){var _ref6=_slicedToArray(_ref5,2),x=_ref6[0],y=_ref6[1];return props.onStop&&props.onStop({nativeEvent:{x:x,y:y}});})):[],stopClock(clock)]),startClock(clock));var trans=function trans(axis,vaxis,lowerBound,upperBound){var dragging=new Value(0);var start=new Value(0);var x=target[axis];var vx=obj[vaxis];var anchor=dragAnchor[axis];var drag=gesture[axis];var advance=cond(lessThan(abs(vx),ANIMATOR_PAUSE_ZERO_VELOCITY),x,add(x,multiply(vx,dt)));if(props.boundaries){advance=withLimits(advance,props.boundaries[lowerBound],props.boundaries[upperBound]);}var last=new Value(Number.MAX_SAFE_INTEGER);var noMoveFrameCount=noMovementFrames[axis];var testMovementFrames=cond(eq(advance,last),set(noMoveFrameCount,add(noMoveFrameCount,1)),[set(last,advance),set(noMoveFrameCount,0)]);var step=cond(eq(state,State.ACTIVE),[cond(dragging,0,block([handleStartDrag||[],startClock(clock),set(dragging,1),set(start,x)])),set(anchor,add(start,drag)),cond(dt,dragBehaviors[axis])],[cond(clockRunning(clock),0,startClock(clock)),cond(dragging,[updateSnapTo,set(dragging,0)]),cond(dt,snapBehaviors[axis]),testMovementFrames,stopWhenNeeded]);var wrapStep=props.dragEnabled?cond(props.dragEnabled,step,[set(dragging,1),stopClock(clock)]):step;_this.dragging[axis]=dragging;_this.velocity[axis]=vx;var doUpdateAnReturn=update[axis]?set(update[axis],x):x;return block([wrapStep,set(x,advance),doUpdateAnReturn]);};_this.dragging={};_this.velocity={};_this.position=target;_this.snapAnchor=snapAnchor;_this.transX=trans("x","vx","left","right");_this.transY=trans("y","vy","top","bottom");return _this;}_createClass(Interactable,[{key:"setVelocity",value:function setVelocity(_ref7){var x=_ref7.x,y=_ref7.y;if(x!==undefined){this.dragging.x.setValue(1);this.velocity.x.setValue(x);}if(y!==undefined){this.dragging.y.setValue(1);this.velocity.y.setValue(y);}}},{key:"changePosition",value:function changePosition(_ref8){var x=_ref8.x,y=_ref8.y;if(x!==undefined){this.dragging.x.setValue(1);this.position.x.setValue(x);}if(y!==undefined){this.dragging.x.setValue(1);this.position.y.setValue(y);}}},{key:"render",value:function render(){var onGestureEvent=this.onGestureEvent;var _this$props=this.props,children=_this$props.children,style=_this$props.style,horizontalOnly=_this$props.horizontalOnly,verticalOnly=_this$props.verticalOnly,enabled=_this$props.dragEnabled;return React.createElement(PanGestureHandler,_extends({maxPointers:1,onHandlerStateChange:onGestureEvent},{onGestureEvent:onGestureEvent,enabled:enabled},{__source:{fileName:_jsxFileName,lineNumber:670}}),React.createElement(Animated.View,{style:[style,{transform:[{translateX:verticalOnly?0:this.transX,translateY:horizontalOnly?0:this.transY}]}],__source:{fileName:_jsxFileName,lineNumber:675}},children));}}]);return Interactable;}(React.PureComponent);Interactable.defaultProps={dragToss:0.1,dragEnabled:true,initialPosition:{x:0,y:0}};export{Interactable as default};
//# sourceMappingURL=Interactable.js.map