@mpxjs/webpack-plugin 2.9.65 → 2.9.67

package/lib/runtime/components/react/dist/mpx-movable-view.jsx

@@ -1,27 +1,30 @@
 /**
  * ✔ direction
- * ✘ inertia
- * ✘ out-of-bounds
+ * ✔ inertia
+ * ✔ out-of-bounds
  * ✔ x
  * ✔ y
  * ✘ damping
- * ✔ friction
+ * ✘ friction
  * ✔ disabled
- * ✔ scale
- * ✔ scale-min
- * ✔ scale-max
- * ✔ scale-value
+ * ✘ scale
+ * ✘ scale-min
+ * ✘ scale-max
+ * ✘ scale-value
  * ✘ animation
  * ✔ bindchange
- * ✔ bindscale
+ * ✘ bindscale
  * ✔ htouchmove
  * ✔ vtouchmove
  */
-import { useRef, useEffect, forwardRef, useContext, useState, useMemo } from 'react';
-import { StyleSheet, Animated, PanResponder } from 'react-native';
-import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import { useEffect, forwardRef, useContext, useCallback, useRef, useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
+import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture } from './utils';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, useAnimatedReaction, withSpring } from 'react-native-reanimated';
 const styles = StyleSheet.create({
     container: {
         position: 'absolute',
@@ -29,319 +32,400 @@ const styles = StyleSheet.create({
         top: 0
     }
 });
-const _MovableView = forwardRef((props, ref) => {
-    const { children, friction = 7, scale = false, direction = 'none', x = 0, y = 0, style = {}, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': originScaleValue = 1, bindscale, bindchange } = props;
-    const pan = useRef(new Animated.ValueXY());
-    const scaleValue = useRef(new Animated.Value(1));
-    const [transformOrigin, setTransformOrigin] = useState('0% 0%');
-    const propsRef = useRef({});
+const _MovableView = forwardRef((movableViewProps, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(movableViewProps);
+    const movableGestureRef = useRef();
     const layoutRef = useRef({});
-    const MovableAreaLayout = useContext(MovableAreaContext);
-    const movablePosition = useRef({
-        x: Number(x),
-        y: Number(y)
+    const changeSource = useRef('');
+    const hasLayoutRef = useRef(false);
+    const propsRef = useRef({});
+    propsRef.current = (props || {});
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
+    const prevWaitForHandlersRef = useRef(waitFor || []);
+    const gestureSwitch = useRef(false);
+    const { textStyle, innerStyle } = splitStyle(normalStyle);
+    const offsetX = useSharedValue(x);
+    const offsetY = useSharedValue(y);
+    const startPosition = useSharedValue({
+        x: 0,
+        y: 0
     });
+    const draggableXRange = useSharedValue([0, 0]);
+    const draggableYRange = useSharedValue([0, 0]);
+    const isMoving = useSharedValue(false);
+    const xInertialMotion = useSharedValue(false);
+    const yInertialMotion = useSharedValue(false);
+    const isFirstTouch = useSharedValue(true);
+    const touchEvent = useSharedValue('');
+    const MovableAreaLayout = useContext(MovableAreaContext);
+    const simultaneousHandlers = flatGesture(originSimultaneousHandlers);
+    const waitForHandlers = flatGesture(waitFor);
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, {
-        defaultStyle: styles.container
+        defaultStyle: styles.container,
+        gestureRef: movableGestureRef
     });
-    let panResponder = {};
-    const isFirstTouch = useRef(true);
-    const touchEvent = useRef('');
-    const initialDistance = useRef(0);
-    propsRef.current = props;
-    useEffect(() => {
-        if (scale && (scaleValue.current._value !== originScaleValue)) {
-            const clampedScale = Math.min(scaleMax, Math.max(scaleMin, originScaleValue));
-            Animated.spring(scaleValue.current, {
-                toValue: clampedScale,
-                friction,
-                useNativeDriver: false
-            }).start(() => {
-                bindscale && bindscale(getCustomEvent('scale', {}, {
-                    detail: {
-                        x: pan.current.x._value,
-                        y: pan.current.y._value,
-                        scale: clampedScale
-                    },
-                    layoutRef
-                }, props));
-            });
+    const hasSimultaneousHandlersChanged = prevSimultaneousHandlersRef.current.length !== (originSimultaneousHandlers?.length || 0) ||
+        (originSimultaneousHandlers || []).some((handler, index) => handler !== prevSimultaneousHandlersRef.current[index]);
+    const hasWaitForHandlersChanged = prevWaitForHandlersRef.current.length !== (waitFor?.length || 0) ||
+        (waitFor || []).some((handler, index) => handler !== prevWaitForHandlersRef.current[index]);
+    if (hasSimultaneousHandlersChanged || hasWaitForHandlersChanged) {
+        gestureSwitch.current = !gestureSwitch.current;
+    }
+    prevSimultaneousHandlersRef.current = originSimultaneousHandlers || [];
+    prevWaitForHandlersRef.current = waitFor || [];
+    const handleTriggerChange = useCallback(({ x, y, type }) => {
+        const { bindchange } = propsRef.current;
+        if (!bindchange)
+            return;
+        let source = '';
+        if (type !== 'setData') {
+            source = getTouchSource(x, y);
         }
-    }, [originScaleValue]);
-    useEffect(() => {
-        if (movablePosition.current.x !== Number(x) || movablePosition.current.y !== Number(y)) {
-            const { x: newX, y: newY } = checkBoundaryPosition({
-                clampedScale: scaleValue.current._value,
-                width: layoutRef.current.width,
-                height: layoutRef.current.height,
-                positionX: Number(x),
-                positionY: Number(y)
-            });
-            movablePosition.current = { x: newX, y: newY };
-            Animated.spring(pan.current, {
-                toValue: { x: newX, y: newY },
-                useNativeDriver: false,
-                friction
-            }).start(() => {
-                bindchange &&
-                    bindchange(getCustomEvent('change', {}, {
-                        detail: {
-                            x: newX,
-                            y: newY,
-                            source: ''
-                        },
-                        layoutRef
-                    }, props));
-            });
+        else {
+            changeSource.current = '';
         }
-    }, [x, y]);
-    const handlePanReleaseOrTerminate = () => {
-        pan.current.flattenOffset();
-        isFirstTouch.current = true;
-        initialDistance.current = 0;
-        const { x, y } = checkBoundaryPosition({
-            clampedScale: scaleValue.current._value,
-            width: layoutRef.current.width,
-            height: layoutRef.current.height,
-            positionX: pan.current.x._value,
-            positionY: pan.current.y._value
-        });
-        movablePosition.current = {
-            x,
-            y
-        };
-        const needChange = x !== pan.current.x._value || y !== pan.current.y._value;
-        Animated.spring(pan.current, {
-            toValue: { x, y },
-            friction: 7,
-            useNativeDriver: false
-        }).start(() => {
-            if (needChange) {
-                bindchange && bindchange(getCustomEvent('change', {}, {
-                    detail: {
-                        x,
-                        y,
-                        source: 'out-of-bounds'
-                    },
-                    layoutRef
-                }, propsRef.current));
-            }
-        });
-    };
-    panResponder = useMemo(() => {
-        return PanResponder.create({
-            onMoveShouldSetPanResponder: () => !propsRef.current.disabled,
-            onMoveShouldSetPanResponderCapture: () => !propsRef.current.disabled,
-            onPanResponderGrant: (e, gestureState) => {
-                if (gestureState.numberActiveTouches === 1) {
-                    setTransformOrigin('0% 0%');
-                    pan.current.setOffset({
-                        x: direction === 'all' || direction === 'horizontal' ? pan.current.x._value : 0,
-                        y: direction === 'all' || direction === 'vertical' ? pan.current.y._value : 0
-                    });
-                    pan.current.setValue({ x: 0, y: 0 });
-                }
-                else {
-                    initialDistance.current = 0;
-                    setTransformOrigin('50% 50%');
-                }
+        bindchange(getCustomEvent('change', {}, {
+            detail: {
+                x,
+                y,
+                source
             },
-            onPanResponderMove: (e, gestureState) => {
-                if (gestureState.numberActiveTouches === 2 && scale) {
-                    setTransformOrigin('50% 50%');
-                    const touch1 = e.nativeEvent.touches[0];
-                    const touch2 = e.nativeEvent.touches[1];
-                    const currentTouchDistance = Math.sqrt(Math.pow(touch1.pageX - touch2.pageX, 2) + Math.pow(touch1.pageY - touch2.pageY, 2));
-                    if (!initialDistance.current) {
-                        initialDistance.current = currentTouchDistance;
-                    }
-                    else {
-                        const newScale = currentTouchDistance / initialDistance.current;
-                        const clampedScale = Math.min(scaleMax, Math.max(scaleMin, newScale));
-                        Animated.spring(scaleValue.current, {
-                            toValue: clampedScale,
-                            friction: 7,
-                            useNativeDriver: false
-                        }).start();
-                        bindscale && bindscale(getCustomEvent('scale', e, {
-                            detail: {
-                                x: pan.current.x._value,
-                                y: pan.current.y._value,
-                                scale: clampedScale
-                            },
-                            layoutRef
-                        }, propsRef.current));
-                    }
+            layoutRef
+        }, propsRef.current));
+    }, []);
+    useEffect(() => {
+        runOnUI(() => {
+            if (offsetX.value !== x || offsetY.value !== y) {
+                const { x: newX, y: newY } = checkBoundaryPosition({ positionX: Number(x), positionY: Number(y) });
+                if (direction === 'horizontal' || direction === 'all') {
+                    offsetX.value = animation
+                        ? withSpring(newX, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : newX;
                 }
-                else if (gestureState.numberActiveTouches === 1) {
-                    if (initialDistance.current) {
-                        return; // Skip processing if it's switching from a double touch
-                    }
-                    setTransformOrigin('0% 0%');
-                    if (isFirstTouch.current) {
-                        touchEvent.current = Math.abs(gestureState.dx) > Math.abs(gestureState.dy) ? 'htouchmove' : 'vtouchmove';
-                        isFirstTouch.current = false;
-                    }
-                    Animated.event([
-                        null,
-                        {
-                            dx: direction === 'all' || direction === 'horizontal' ? pan.current.x : new Animated.Value(0),
-                            dy: direction === 'all' || direction === 'vertical' ? pan.current.y : new Animated.Value(0)
-                        }
-                    ], {
-                        useNativeDriver: false
-                    })(e, gestureState);
-                    movablePosition.current = {
-                        x: pan.current.x.__getValue(),
-                        y: pan.current.y.__getValue()
-                    };
-                    bindchange && bindchange(getCustomEvent('change', e, {
-                        detail: {
-                            x: movablePosition.current.x,
-                            y: movablePosition.current.y,
-                            source: 'touch'
-                        },
-                        layoutRef
-                    }, propsRef.current));
+                if (direction === 'vertical' || direction === 'all') {
+                    offsetY.value = animation
+                        ? withSpring(newY, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : newY;
                 }
-            },
-            onPanResponderRelease: () => {
-                handlePanReleaseOrTerminate();
-            },
-            onPanResponderTerminate: () => {
-                handlePanReleaseOrTerminate();
+                runOnJS(handleTriggerChange)({
+                    x: newX,
+                    y: newY,
+                    type: 'setData'
+                });
             }
+        })();
+    }, [x, y]);
+    useEffect(() => {
+        const { width, height } = layoutRef.current;
+        if (width && height) {
+            resetBoundaryAndCheck({ width, height });
+        }
+    }, [MovableAreaLayout.height, MovableAreaLayout.width]);
+    useAnimatedReaction(() => ({
+        offsetX: offsetX.value,
+        offsetY: offsetY.value
+    }), (currentValue) => {
+        const { offsetX, offsetY } = currentValue;
+        runOnJS(handleTriggerChange)({
+            x: offsetX,
+            y: offsetY
         });
-    }, [MovableAreaLayout.width, MovableAreaLayout.height]);
-    const onLayout = () => {
-        nodeRef.current?.measure((x, y, width, height) => {
-            layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 };
-            const clampedScale = Math.min(scaleMax, Math.max(scaleMin, originScaleValue));
-            const { x: newX, y: nexY } = checkBoundaryPosition({
-                clampedScale,
-                width,
-                height,
-                positionX: movablePosition.current.x,
-                positionY: movablePosition.current.y
-            });
-            Animated.spring(pan.current, {
-                toValue: { x: newX, y: nexY },
-                useNativeDriver: false,
-                friction
-            }).start(() => {
-                movablePosition.current = { x: newX, y: nexY };
-                bindchange &&
-                    bindchange(getCustomEvent('change', {}, {
-                        detail: {
-                            x: newX,
-                            y: nexY,
-                            source: ''
-                        },
-                        layoutRef
-                    }, props));
-            });
-        });
-    };
-    const onTouchMove = (e) => {
-        const { bindhtouchmove, bindvtouchmove, bindtouchmove } = props;
-        if (touchEvent.current === 'htouchmove') {
-            bindhtouchmove && bindhtouchmove(e);
+    });
+    const getTouchSource = useCallback((offsetX, offsetY) => {
+        const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
+            offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
+        let source = changeSource.current;
+        if (hasOverBoundary) {
+            if (isMoving.value) {
+                source = 'touch-out-of-bounds';
+            }
+            else {
+                source = 'out-of-bounds';
+            }
         }
-        else if (touchEvent.current === 'vtouchmove') {
-            bindvtouchmove && bindvtouchmove(e);
+        else {
+            if (isMoving.value) {
+                source = 'touch';
+            }
+            else if ((xInertialMotion.value || yInertialMotion.value) && (changeSource.current === 'touch' || changeSource.current === 'friction')) {
+                source = 'friction';
+            }
         }
-        bindtouchmove && bindtouchmove(e);
-    };
-    const onCatchTouchMove = (e) => {
-        const { catchhtouchmove, catchvtouchmove, catchtouchmove } = props;
-        if (touchEvent.current === 'htouchmove') {
-            catchhtouchmove && catchhtouchmove(e);
+        changeSource.current = source;
+        return source;
+    }, []);
+    const setBoundary = useCallback(({ width, height }) => {
+        const top = (style.position === 'absolute' && style.top) || 0;
+        const left = (style.position === 'absolute' && style.left) || 0;
+        const scaledWidth = width || 0;
+        const scaledHeight = height || 0;
+        const maxY = MovableAreaLayout.height - scaledHeight - top;
+        const maxX = MovableAreaLayout.width - scaledWidth - left;
+        let xRange;
+        let yRange;
+        if (MovableAreaLayout.width < scaledWidth) {
+            xRange = [maxX, 0];
         }
-        else if (touchEvent.current === 'vtouchmove') {
-            catchvtouchmove && catchvtouchmove(e);
+        else {
+            xRange = [left === 0 ? 0 : -left, maxX < 0 ? 0 : maxX];
         }
-        catchtouchmove && catchtouchmove(e);
-    };
-    const checkBoundaryPosition = ({ clampedScale, width, height, positionX, positionY }) => {
-        // Calculate scaled element size
-        const scaledWidth = width * clampedScale;
-        const scaledHeight = height * clampedScale;
-        // Calculate the boundary limits
+        if (MovableAreaLayout.height < scaledHeight) {
+            yRange = [maxY, 0];
+        }
+        else {
+            yRange = [top === 0 ? 0 : -top, maxY < 0 ? 0 : maxY];
+        }
+        draggableXRange.value = xRange;
+        draggableYRange.value = yRange;
+    }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
+    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+        'worklet';
         let x = positionX;
         let y = positionY;
-        // Correct y coordinate
-        if (scaledHeight > MovableAreaLayout.height) {
-            if (y >= 0) {
-                y = 0;
+        // 计算边界限制
+        if (x > draggableXRange.value[1]) {
+            x = draggableXRange.value[1];
+        }
+        else if (x < draggableXRange.value[0]) {
+            x = draggableXRange.value[0];
+        }
+        if (y > draggableYRange.value[1]) {
+            y = draggableYRange.value[1];
+        }
+        else if (y < draggableYRange.value[0]) {
+            y = draggableYRange.value[0];
+        }
+        return { x, y };
+    }, []);
+    const resetBoundaryAndCheck = ({ width, height }) => {
+        setBoundary({ width, height });
+        runOnUI(() => {
+            const positionX = offsetX.value;
+            const positionY = offsetY.value;
+            const { x: newX, y: newY } = checkBoundaryPosition({ positionX, positionY });
+            if (positionX !== newX) {
+                offsetX.value = newX;
             }
-            else if (y < MovableAreaLayout.height - scaledHeight) {
-                y = MovableAreaLayout.height - scaledHeight;
+            if (positionY !== newY) {
+                offsetY.value = newY;
             }
+        })();
+    };
+    const onLayout = (e) => {
+        hasLayoutRef.current = true;
+        if (hasSelfPercent) {
+            const { width, height } = e?.nativeEvent?.layout || {};
+            setWidth(width || 0);
+            setHeight(height || 0);
         }
-        else {
-            if (y < 0) {
-                y = 0;
+        nodeRef.current?.measure((x, y, width, height) => {
+            layoutRef.current = { x, y, width, height, offsetLeft: 0, offsetTop: 0 };
+            resetBoundaryAndCheck({ width, height });
+        });
+        props.onLayout && props.onLayout(e);
+    };
+    const extendEvent = useCallback((e) => {
+        'worklet';
+        const touchArr = [e.changedTouches, e.allTouches];
+        touchArr.forEach(touches => {
+            touches && touches.forEach((item) => {
+                item.pageX = item.absoluteX;
+                item.pageY = item.absoluteY;
+            });
+        });
+        e.touches = e.allTouches;
+    }, []);
+    const gesture = useMemo(() => {
+        const handleTriggerStart = (e) => {
+            'worklet';
+            extendEvent(e);
+            bindtouchstart && runOnJS(bindtouchstart)(e);
+            catchtouchstart && runOnJS(catchtouchstart)(e);
+        };
+        const handleTriggerMove = (e) => {
+            'worklet';
+            extendEvent(e);
+            const hasTouchmove = !!bindhtouchmove || !!bindvtouchmove || !!bindtouchmove;
+            const hasCatchTouchmove = !!catchhtouchmove || !!catchvtouchmove || !!catchtouchmove;
+            if (hasTouchmove) {
+                if (touchEvent.value === 'htouchmove') {
+                    bindhtouchmove && runOnJS(bindhtouchmove)(e);
+                }
+                else if (touchEvent.value === 'vtouchmove') {
+                    bindvtouchmove && runOnJS(bindvtouchmove)(e);
+                }
+                bindtouchmove && runOnJS(bindtouchmove)(e);
             }
-            else if (y > MovableAreaLayout.height - scaledHeight) {
-                y = MovableAreaLayout.height - scaledHeight;
+            if (hasCatchTouchmove) {
+                if (touchEvent.value === 'htouchmove') {
+                    catchhtouchmove && runOnJS(catchhtouchmove)(e);
+                }
+                else if (touchEvent.value === 'vtouchmove') {
+                    catchvtouchmove && runOnJS(catchvtouchmove)(e);
+                }
+                catchtouchmove && runOnJS(catchtouchmove)(e);
             }
-        }
-        // Correct x coordinate
-        if (scaledWidth > MovableAreaLayout.width) {
-            if (x >= 0) {
-                x = 0;
+        };
+        const handleTriggerEnd = (e) => {
+            'worklet';
+            extendEvent(e);
+            bindtouchend && runOnJS(bindtouchend)(e);
+            catchtouchend && runOnJS(catchtouchend)(e);
+        };
+        const gesturePan = Gesture.Pan()
+            .onTouchesDown((e) => {
+            'worklet';
+            const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            isMoving.value = false;
+            startPosition.value = {
+                x: changedTouches.x,
+                y: changedTouches.y
+            };
+            handleTriggerStart(e);
+        })
+            .onTouchesMove((e) => {
+            'worklet';
+            isMoving.value = true;
+            const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
+            if (isFirstTouch.value) {
+                touchEvent.value = Math.abs(changedTouches.x - startPosition.value.x) > Math.abs(changedTouches.y - startPosition.value.y) ? 'htouchmove' : 'vtouchmove';
+                isFirstTouch.value = false;
             }
-            else if (x < MovableAreaLayout.width - scaledWidth) {
-                x = MovableAreaLayout.width - scaledWidth;
+            handleTriggerMove(e);
+            if (disabled)
+                return;
+            const changeX = changedTouches.x - startPosition.value.x;
+            const changeY = changedTouches.y - startPosition.value.y;
+            if (direction === 'horizontal' || direction === 'all') {
+                const newX = offsetX.value + changeX;
+                if (!outOfBounds) {
+                    const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value });
+                    offsetX.value = x;
+                }
+                else {
+                    offsetX.value = newX;
+                }
             }
-        }
-        else {
-            if (x < 0) {
-                x = 0;
+            if (direction === 'vertical' || direction === 'all') {
+                const newY = offsetY.value + changeY;
+                if (!outOfBounds) {
+                    const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY });
+                    offsetY.value = y;
+                }
+                else {
+                    offsetY.value = newY;
+                }
             }
-            else if (x > MovableAreaLayout.width - scaledWidth) {
-                x = MovableAreaLayout.width - scaledWidth;
+        })
+            .onTouchesUp((e) => {
+            'worklet';
+            isFirstTouch.value = true;
+            isMoving.value = false;
+            handleTriggerEnd(e);
+            if (disabled)
+                return;
+            if (!inertia) {
+                const { x, y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: offsetY.value });
+                if (x !== offsetX.value) {
+                    offsetX.value = animation
+                        ? withSpring(x, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : x;
+                }
+                if (y !== offsetY.value) {
+                    offsetY.value = animation
+                        ? withSpring(y, {
+                            duration: 1500,
+                            dampingRatio: 0.8
+                        })
+                        : y;
+                }
+            }
+        })
+            .onFinalize((e) => {
+            'worklet';
+            if (!inertia || disabled || !animation)
+                return;
+            isMoving.value = false;
+            if (direction === 'horizontal' || direction === 'all') {
+                xInertialMotion.value = true;
+                offsetX.value = withDecay({
+                    velocity: e.velocityX / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableXRange.value
+                }, () => {
+                    xInertialMotion.value = false;
+                });
             }
+            if (direction === 'vertical' || direction === 'all') {
+                yInertialMotion.value = true;
+                offsetY.value = withDecay({
+                    velocity: e.velocityY / 10,
+                    rubberBandEffect: outOfBounds,
+                    clamp: draggableYRange.value
+                }, () => {
+                    yInertialMotion.value = false;
+                });
+            }
+        })
+            .withRef(movableGestureRef);
+        if (simultaneousHandlers && simultaneousHandlers.length) {
+            gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
+        }
+        if (waitForHandlers && waitForHandlers.length) {
+            gesturePan.requireExternalGestureToFail(...waitForHandlers);
         }
+        return gesturePan;
+    }, [disabled, direction, inertia, outOfBounds, gestureSwitch.current]);
+    const animatedStyles = useAnimatedStyle(() => {
         return {
-            x,
-            y
+            transform: [
+                { translateX: offsetX.value },
+                { translateY: offsetY.value }
+            ]
         };
+    });
+    const injectCatchEvent = (props) => {
+        const eventHandlers = {};
+        const catchEventList = [
+            { name: 'onTouchStart', value: ['catchtouchstart'] },
+            { name: 'onTouchMove', value: ['catchtouchmove', 'catchvtouchmove', 'catchhtouchmove'] },
+            { name: 'onTouchEnd', value: ['catchtouchend'] }
+        ];
+        catchEventList.forEach(event => {
+            event.value.forEach(name => {
+                if (props[name] && !eventHandlers[event.name]) {
+                    eventHandlers[event.name] = (e) => {
+                        e.stopPropagation();
+                    };
+                }
+            });
+        });
+        return eventHandlers;
     };
-    const [translateX, translateY] = [pan.current.x, pan.current.y];
-    const transformStyle = { transform: [{ translateX }, { translateY }, { scale: scaleValue.current }], transformOrigin: transformOrigin };
-    const hasTouchmove = () => !!props.bindhtouchmove || !!props.bindvtouchmove || !!props.bindtouchmove;
-    const hasCatchTouchmove = () => !!props.catchhtouchmove || !!props.catchvtouchmove || !!props.catchtouchmove;
-    const innerProps = useInnerProps(props, {
-        ref: nodeRef,
-        ...panResponder.panHandlers,
-        onLayout,
-        ...(hasTouchmove() ? { bindtouchmove: onTouchMove } : {}),
-        ...(hasCatchTouchmove() ? { catchtouchmove: onCatchTouchMove } : {})
-    }, [
-        'children',
-        'style',
-        'direction',
-        'x',
-        'y',
-        'scale',
-        'disabled',
-        'scale-value',
-        'scale-min',
-        'scale-max',
-        'bindchange',
-        'bindscale',
-        'htouchmove',
-        'vtouchmove'
-    ], { layoutRef });
-    return (<Animated.View {...innerProps} style={{
-            ...styles.container,
-            ...style,
-            ...transformStyle
-        }}>
-      {children}
-    </Animated.View>);
+    const catchEventHandlers = injectCatchEvent(props);
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
+    return (<GestureDetector gesture={gesture}>
+      <Animated.View ref={nodeRef} onLayout={onLayout} style={[innerStyle, animatedStyles, layoutStyle]} {...catchEventHandlers}>
+        {wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current,
+            textStyle,
+            textProps
+        })}
+      </Animated.View>
+    </GestureDetector>);
 });
-_MovableView.displayName = 'mpx-movable-view';
+_MovableView.displayName = 'MpxMovableView';
 export default _MovableView;