@mpxjs/webpack-plugin 2.10.7-beta.8 → 2.10.7-beta.9

package/lib/platform/style/wx/index.js

@@ -285,6 +285,13 @@ module.exports = function getSpec ({ warn, error }) {
 
   // line-height
   const formatLineHeight = ({ prop, value, selector }) => {
+    // line-height 0 直接返回
+    if (+value === 0) {
+      return {
+        prop,
+        value
+      }
+    }
     return verifyValues({ prop, value, selector }) && ({
       prop,
       value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value

package/lib/platform/template/wx/component-config/movable-view.js

@@ -2,9 +2,6 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
-  const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
@@ -36,7 +33,7 @@ module.exports = function ({ print }) {
         harmony: harmonyPropLog
       },
       {
-        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
+        test: /^(damping|friction)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog
@@ -46,12 +43,6 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
-      },
-      {
-        test: /^(bindscale)$/,
-        ios: iosEventLog,
-        android: androidEventLog,
-        harmony: harmonyEventLog
       }
     ]
   }

package/lib/runtime/components/react/context.ts

@@ -51,14 +51,24 @@ export interface RouteContextValue {
   pageId: number
   navigation: Record<string, any>
 }
+export interface MovableAreaContextValue {
+  width: number
+  height: number
+  scaleArea: boolean
+  onAreaScale?: (scaleInfo: { scale: number }) => void
+  registerMovableView?: (id: string, callbacks: {
+    onScale: (scaleInfo: { scale: number }) => void
+    onScaleEnd?: () => void
+  }) => void
+  unregisterMovableView?: (id: string) => void
+}
 
+export const MovableAreaContext = createContext<MovableAreaContextValue>({ width: 0, height: 0, scaleArea: false })
 export interface StickyContextValue {
   registerStickyHeader: Function,
   unregisterStickyHeader: Function
 }
 
-export const MovableAreaContext = createContext({ width: 0, height: 0 })
-
 export const FormContext = createContext<FormContextValue | null>(null)
 
 export const CheckboxGroupContext = createContext<GroupContextValue | null>(null)

package/lib/runtime/components/react/dist/context.js

@@ -1,7 +1,7 @@
 import { createContext } from 'react';
 import { Animated } from 'react-native';
 import { noop } from '@mpxjs/utils';
-export const MovableAreaContext = createContext({ width: 0, height: 0 });
+export const MovableAreaContext = createContext({ width: 0, height: 0, scaleArea: false });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
 export const RadioGroupContext = createContext(null);

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

@@ -1,33 +1,87 @@
 /**
- * ✘ scale-area
+ * ✔ scale-area
  */
 import { View } from 'react-native';
-import { forwardRef, useRef, useMemo, createElement } from 'react';
+import { forwardRef, useRef, useMemo, useCallback, createElement } from 'react';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import { useSharedValue } from 'react-native-reanimated';
 import useNodesRef from './useNodesRef';
 import useInnerProps from './getInnerListeners';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
 import Portal from './mpx-portal';
 const _MovableArea = forwardRef((props, ref) => {
-    const { style = {}, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const { style = {}, 'scale-area': scaleArea = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
     const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, hasPositionFixed, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
-    const movableViewRef = useRef(null);
-    useNodesRef(props, ref, movableViewRef, {
+    const movableAreaRef = useRef(null);
+    const movableViewsValue = useSharedValue({});
+    useNodesRef(props, ref, movableAreaRef, {
         style: normalStyle
     });
+    // 注册/注销 MovableView 的回调
+    const registerMovableView = useCallback((id, callbacks) => {
+        movableViewsValue.value = extendObject(movableViewsValue.value, { [id]: callbacks });
+    }, []);
+    const unregisterMovableView = useCallback((id) => {
+        delete movableViewsValue.value[id];
+    }, []);
+    // 处理区域缩放手势
+    const handleAreaScale = useCallback((scaleInfo) => {
+        'worklet';
+        if (scaleArea) {
+            // 将缩放信息广播给所有注册的 MovableView
+            Object.values(movableViewsValue.value).forEach((callbacks) => {
+                callbacks.onScale && callbacks.onScale(scaleInfo);
+            });
+        }
+    }, [scaleArea]);
+    // 处理区域缩放结束
+    const handleAreaScaleEnd = useCallback(() => {
+        'worklet';
+        if (scaleArea) {
+            // 通知所有注册的 MovableView 缩放结束
+            Object.values(movableViewsValue.value).forEach((callbacks) => {
+                callbacks.onScaleEnd && callbacks.onScaleEnd();
+            });
+        }
+    }, [scaleArea]);
     const contextValue = useMemo(() => ({
         height: normalStyle.height || 10,
-        width: normalStyle.width || 10
-    }), [normalStyle.width, normalStyle.height]);
-    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableViewRef });
+        width: normalStyle.width || 10,
+        scaleArea,
+        registerMovableView,
+        unregisterMovableView
+    }), [normalStyle.width, normalStyle.height, scaleArea]);
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: movableAreaRef });
+    // 创建缩放手势
+    const scaleGesture = useMemo(() => {
+        if (!scaleArea)
+            return null;
+        return Gesture.Pinch()
+            .onUpdate((e) => {
+            'worklet';
+            handleAreaScale(e);
+        })
+            .onEnd(() => {
+            'worklet';
+            handleAreaScaleEnd();
+        });
+    }, [scaleArea]);
     const innerProps = useInnerProps(extendObject({}, props, layoutProps, {
         style: extendObject({ height: contextValue.height, width: contextValue.width }, normalStyle, layoutStyle),
-        ref: movableViewRef
+        ref: movableAreaRef
     }), [], { layoutRef });
     let movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(View, innerProps, wrapChildren(props, {
         hasVarDec,
         varContext: varContextRef.current
     })));
+    // 如果启用了 scale-area，包装一个 GestureDetector
+    if (scaleArea && scaleGesture) {
+        movableComponent = createElement(MovableAreaContext.Provider, { value: contextValue }, createElement(GestureDetector, { gesture: scaleGesture }, createElement(View, innerProps, wrapChildren(props, {
+            hasVarDec,
+            varContext: varContextRef.current
+        }))));
+    }
     if (hasPositionFixed) {
         movableComponent = createElement(Portal, null, movableComponent);
     }

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

@@ -7,13 +7,13 @@
  * ✘ damping
  * ✘ friction
  * ✔ disabled
- * ✘ scale
- * ✘ scale-min
- * ✘ scale-max
- * ✘ scale-value
+ * ✔ scale
+ * ✔ scale-min
+ * ✔ scale-max
+ * ✔ scale-value
  * ✔ animation
  * ✔ bindchange
- * ✘ bindscale
+ * ✔ bindscale
  * ✔ htouchmove
  * ✔ vtouchmove
  */
@@ -24,7 +24,7 @@ import useNodesRef from './useNodesRef';
 import { MovableAreaContext } from './context';
 import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, flatGesture, extendObject, omit, useNavigation } from './utils';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
-import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, withDecay, runOnJS, runOnUI, withSpring, withTiming } from 'react-native-reanimated';
 import { collectDataset, noop } from '@mpxjs/utils';
 const styles = StyleSheet.create({
     container: {
@@ -41,8 +41,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     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 = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindchange } = props;
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, style, styles.container), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { x = 0, y = 0, inertia = false, disabled = false, animation = true, scale = false, 'scale-min': scaleMin = 0.1, 'scale-max': scaleMax = 10, 'scale-value': scaleValue = 1, 'out-of-bounds': outOfBounds = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, direction = 'none', 'disable-event-passthrough': disableEventPassthrough = false, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, changeThrottleTime = 60, bindtouchstart, catchtouchstart, bindhtouchmove, bindvtouchmove, bindtouchmove, catchhtouchmove, catchvtouchmove, catchtouchmove, bindtouchend, catchtouchend, bindscale, bindchange, onLayout: propsOnLayout } = props;
+    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(Object.assign({}, styles.container, style), { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const navigation = useNavigation();
     const prevSimultaneousHandlersRef = useRef(originSimultaneousHandlers || []);
     const prevWaitForHandlersRef = useRef(waitFor || []);
@@ -50,6 +50,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const { textStyle, innerStyle } = splitStyle(normalStyle);
     const offsetX = useSharedValue(x);
     const offsetY = useSharedValue(y);
+    const currentScale = useSharedValue(1);
+    const layoutValue = useSharedValue({});
     const startPosition = useSharedValue({
         x: 0,
         y: 0
@@ -100,6 +102,38 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             layoutRef
         }, propsRef.current));
     }, []);
+    const handleTriggerScale = useCallback(({ x, y, scale }) => {
+        const { bindscale } = propsRef.current;
+        if (!bindscale)
+            return;
+        bindscale(getCustomEvent('scale', {}, {
+            detail: {
+                x,
+                y,
+                scale
+            },
+            layoutRef
+        }, propsRef.current));
+    }, []);
+    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+        'worklet';
+        let x = positionX;
+        let y = positionY;
+        // 计算边界限制
+        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 };
+    }, []);
     // 节流版本的 change 事件触发
     const handleTriggerChangeThrottled = useCallback(({ x, y, type }) => {
         'worklet';
@@ -139,12 +173,193 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         })();
     }, [x, y]);
-    useEffect(() => {
-        const { width, height } = layoutRef.current;
-        if (width && height) {
-            resetBoundaryAndCheck({ width, height });
+    // 提取通用的缩放边界计算函数
+    const calculateScaleBoundaryPosition = useCallback(({ currentOffsetX, currentOffsetY, newScale, width, height }) => {
+        'worklet';
+        const prevScale = currentScale.value;
+        // 计算元素当前中心点（在屏幕上的位置）
+        const currentCenterX = currentOffsetX + (width * prevScale) / 2;
+        const currentCenterY = currentOffsetY + (height * prevScale) / 2;
+        // 实现中心缩放：保持元素中心点不变
+        // 计算缩放后为了保持中心点不变需要的新offset位置
+        let newOffsetX = currentCenterX - (width * newScale) / 2;
+        let newOffsetY = currentCenterY - (height * newScale) / 2;
+        // 缩放过程中实时边界检测
+        // 计算新的边界范围
+        const top = (style.position === 'absolute' && style.top) || 0;
+        const left = (style.position === 'absolute' && style.left) || 0;
+        const scaledWidth = width * newScale;
+        const scaledHeight = height * newScale;
+        // 计算新缩放值下的边界限制
+        const maxOffsetY = MovableAreaLayout.height - scaledHeight - top;
+        const maxOffsetX = MovableAreaLayout.width - scaledWidth - left;
+        let xMin, xMax, yMin, yMax;
+        if (MovableAreaLayout.width < scaledWidth) {
+            xMin = maxOffsetX;
+            xMax = -left;
+        }
+        else {
+            xMin = -left;
+            xMax = maxOffsetX < 0 ? -left : maxOffsetX;
+        }
+        if (MovableAreaLayout.height < scaledHeight) {
+            yMin = maxOffsetY;
+            yMax = -top;
+        }
+        else {
+            yMin = -top;
+            yMax = maxOffsetY < 0 ? -top : maxOffsetY;
+        }
+        // 应用边界限制
+        if (newOffsetX > xMax) {
+            newOffsetX = xMax;
+        }
+        else if (newOffsetX < xMin) {
+            newOffsetX = xMin;
+        }
+        if (newOffsetY > yMax) {
+            newOffsetY = yMax;
+        }
+        else if (newOffsetY < yMin) {
+            newOffsetY = yMin;
+        }
+        return { x: newOffsetX, y: newOffsetY };
+    }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
+    // 提取通用的缩放处理函数
+    const handleScaleUpdate = useCallback((scaleInfo) => {
+        'worklet';
+        if (disabled)
+            return;
+        // 判断缩放方向并计算新的缩放值
+        const isZoomingIn = scaleInfo.scale > 1;
+        const isZoomingOut = scaleInfo.scale < 1;
+        let newScale;
+        if (isZoomingIn) {
+            // 放大：增加缩放值
+            newScale = currentScale.value + (scaleInfo.scale - 1) * 0.5;
+        }
+        else if (isZoomingOut) {
+            // 缩小：减少缩放值
+            newScale = currentScale.value - (1 - scaleInfo.scale) * 0.5;
+        }
+        else {
+            // 没有缩放变化
+            newScale = currentScale.value;
+        }
+        // 限制缩放值在 scaleMin 和 scaleMax 之间
+        newScale = Math.max(scaleMin, Math.min(scaleMax, newScale));
+        // 只有当缩放值真正改变时才调整位置
+        if (Math.abs(newScale - currentScale.value) > 0.01) {
+            // 获取元素尺寸
+            const { width = 0, height = 0 } = layoutValue.value;
+            if (width > 0 && height > 0) {
+                // 使用通用的边界计算函数
+                const { x: newOffsetX, y: newOffsetY } = calculateScaleBoundaryPosition({
+                    currentOffsetX: offsetX.value,
+                    currentOffsetY: offsetY.value,
+                    newScale,
+                    width,
+                    height
+                });
+                offsetX.value = newOffsetX;
+                offsetY.value = newOffsetY;
+                // 更新缩放值
+                currentScale.value = newScale;
+            }
         }
+        else {
+            currentScale.value = newScale;
+        }
+        if (bindscale) {
+            runOnJS(handleTriggerScale)({
+                x: offsetX.value,
+                y: offsetY.value,
+                scale: newScale
+            });
+        }
+    }, [disabled, scaleMin, scaleMax, bindscale, handleTriggerScale, calculateScaleBoundaryPosition, style.position, style.top, style.left, MovableAreaLayout.height, MovableAreaLayout.width]);
+    useEffect(() => {
+        runOnUI(() => {
+            if (currentScale.value !== scaleValue) {
+                // 限制缩放值在 scaleMin 和 scaleMax 之间
+                const clampedScale = Math.max(scaleMin, Math.min(scaleMax, scaleValue));
+                // 实现中心缩放的位置补偿
+                const { width = 0, height = 0 } = layoutValue.value;
+                if (width > 0 && height > 0) {
+                    // 使用通用的边界计算函数
+                    const { x: newOffsetX, y: newOffsetY } = calculateScaleBoundaryPosition({
+                        currentOffsetX: offsetX.value,
+                        currentOffsetY: offsetY.value,
+                        newScale: clampedScale,
+                        width,
+                        height
+                    });
+                    // 同时更新缩放值和位置
+                    if (animation) {
+                        currentScale.value = withTiming(clampedScale, {
+                            duration: 1000
+                        }, () => {
+                            handleRestBoundaryAndCheck();
+                        });
+                        offsetX.value = withTiming(newOffsetX, { duration: 1000 });
+                        offsetY.value = withTiming(newOffsetY, { duration: 1000 });
+                    }
+                    else {
+                        currentScale.value = clampedScale;
+                        offsetX.value = newOffsetX;
+                        offsetY.value = newOffsetY;
+                        handleRestBoundaryAndCheck();
+                    }
+                }
+                else {
+                    // 如果还没有尺寸信息，只更新缩放值
+                    if (animation) {
+                        currentScale.value = withTiming(clampedScale, {
+                            duration: 1000
+                        }, () => {
+                            handleRestBoundaryAndCheck();
+                        });
+                    }
+                    else {
+                        currentScale.value = clampedScale;
+                        handleRestBoundaryAndCheck();
+                    }
+                }
+                if (bindscale) {
+                    runOnJS(handleTriggerScale)({
+                        x: offsetX.value,
+                        y: offsetY.value,
+                        scale: clampedScale
+                    });
+                }
+            }
+        })();
+    }, [scaleValue, scaleMin, scaleMax, animation]);
+    useEffect(() => {
+        runOnUI(handleRestBoundaryAndCheck)();
     }, [MovableAreaLayout.height, MovableAreaLayout.width]);
+    // 生成唯一 ID
+    const viewId = useMemo(() => `movable-view-${Date.now()}-${Math.random()}`, []);
+    // 注册到 MovableArea（如果启用了 scale-area）
+    useEffect(() => {
+        if (MovableAreaLayout.scaleArea && MovableAreaLayout.registerMovableView && MovableAreaLayout.unregisterMovableView) {
+            const handleAreaScale = (scaleInfo) => {
+                'worklet';
+                handleScaleUpdate({ scale: scaleInfo.scale });
+            };
+            const handleAreaScaleEnd = () => {
+                'worklet';
+                handleRestBoundaryAndCheck();
+            };
+            MovableAreaLayout.registerMovableView?.(viewId, {
+                onScale: scale ? handleAreaScale : noop,
+                onScaleEnd: scale ? handleAreaScaleEnd : noop
+            });
+            return () => {
+                MovableAreaLayout.unregisterMovableView?.(viewId);
+            };
+        }
+    }, [MovableAreaLayout.scaleArea, viewId, scale, handleScaleUpdate]);
     const getTouchSource = useCallback((offsetX, offsetY) => {
         const hasOverBoundary = offsetX < draggableXRange.value[0] || offsetX > draggableXRange.value[1] ||
             offsetY < draggableYRange.value[0] || offsetY > draggableYRange.value[1];
@@ -169,61 +384,45 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         return source;
     }, []);
     const setBoundary = useCallback(({ width, height }) => {
+        'worklet';
         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;
+        // 使用左上角缩放，计算offset位置的边界范围
+        const currentScaleVal = currentScale.value;
+        const scaledWidth = (width || 0) * currentScaleVal;
+        const scaledHeight = (height || 0) * currentScaleVal;
+        // offset位置的边界：左上角可以移动的范围
+        const maxOffsetY = MovableAreaLayout.height - scaledHeight - top;
+        const maxOffsetX = MovableAreaLayout.width - scaledWidth - left;
         let xRange;
         let yRange;
         if (MovableAreaLayout.width < scaledWidth) {
-            xRange = [maxX, 0];
+            xRange = [maxOffsetX, -left];
         }
         else {
-            xRange = [left === 0 ? 0 : -left, maxX < 0 ? 0 : maxX];
+            xRange = [-left, maxOffsetX < 0 ? -left : maxOffsetX];
         }
         if (MovableAreaLayout.height < scaledHeight) {
-            yRange = [maxY, 0];
+            yRange = [maxOffsetY, -top];
         }
         else {
-            yRange = [top === 0 ? 0 : -top, maxY < 0 ? 0 : maxY];
+            yRange = [-top, maxOffsetY < 0 ? -top : maxOffsetY];
         }
         draggableXRange.value = xRange;
         draggableYRange.value = yRange;
     }, [MovableAreaLayout.height, MovableAreaLayout.width, style.position, style.top, style.left]);
-    const checkBoundaryPosition = useCallback(({ positionX, positionY }) => {
+    const resetBoundaryAndCheck = ({ width, height }) => {
         'worklet';
-        let x = positionX;
-        let y = positionY;
-        // 计算边界限制
-        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];
+        setBoundary({ width, height });
+        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 < draggableYRange.value[0]) {
-            y = draggableYRange.value[0];
+        if (positionY !== newY) {
+            offsetY.value = newY;
         }
-        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;
-            }
-            if (positionY !== newY) {
-                offsetY.value = newY;
-            }
-        })();
     };
     const onLayout = (e) => {
         hasLayoutRef.current = true;
@@ -235,13 +434,18 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         nodeRef.current?.measure((x, y, width, height) => {
             const { y: navigationY = 0 } = navigation?.layout || {};
             layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft: 0, offsetTop: 0 };
-            resetBoundaryAndCheck({ width, height });
+            // 同时更新 layoutValue，供缩放逻辑使用
+            runOnUI(() => {
+                layoutValue.value = { width, height };
+                resetBoundaryAndCheck({ width: width, height: height });
+            })();
         });
-        props.onLayout && props.onLayout(e);
+        propsOnLayout && propsOnLayout(e);
     };
     const extendEvent = useCallback((e, type) => {
         const { y: navigationY = 0 } = navigation?.layout || {};
         const touchArr = [e.changedTouches, e.allTouches];
+        const currentProps = propsRef.current;
         touchArr.forEach(touches => {
             touches && touches.forEach((item) => {
                 item.pageX = item.absoluteX;
@@ -253,8 +457,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         Object.assign(e, {
             touches: type === 'end' ? [] : e.allTouches,
             currentTarget: {
-                id: props.id || '',
-                dataset: collectDataset(props),
+                id: currentProps.id || '',
+                dataset: collectDataset(currentProps),
                 offsetLeft: 0,
                 offsetTop: 0
             },
@@ -295,6 +499,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         bindtouchend && bindtouchend(e);
         catchtouchend && catchtouchend(e);
     };
+    const handleRestBoundaryAndCheck = () => {
+        'worklet';
+        const { width, height } = layoutValue.value;
+        if (width && height) {
+            resetBoundaryAndCheck({ width, height });
+        }
+    };
     const gesture = useMemo(() => {
         const handleTriggerMove = (e) => {
             'worklet';
@@ -310,6 +521,8 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         };
         const gesturePan = Gesture.Pan()
+            .minPointers(1)
+            .maxPointers(1)
             .onTouchesDown((e) => {
             'worklet';
             const changedTouches = e.changedTouches[0] || { x: 0, y: 0 };
@@ -449,11 +662,13 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
             }
         })
             .withRef(movableGestureRef);
-        if (direction === 'horizontal') {
-            gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
-        }
-        else if (direction === 'vertical') {
-            gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+        if (!disableEventPassthrough) {
+            if (direction === 'horizontal') {
+                gesturePan.activeOffsetX([-5, 5]).failOffsetY([-5, 5]);
+            }
+            else if (direction === 'vertical') {
+                gesturePan.activeOffsetY([-5, 5]).failOffsetX([-5, 5]);
+            }
         }
         if (simultaneousHandlers && simultaneousHandlers.length) {
             gesturePan.simultaneousWithExternalGesture(...simultaneousHandlers);
@@ -461,13 +676,43 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
         if (waitForHandlers && waitForHandlers.length) {
             gesturePan.requireExternalGestureToFail(...waitForHandlers);
         }
+        // 添加缩放手势支持
+        if (scale && !MovableAreaLayout.scaleArea) {
+            const gesturePinch = Gesture.Pinch()
+                .onUpdate((e) => {
+                'worklet';
+                handleScaleUpdate({ scale: e.scale });
+            })
+                .onEnd((e) => {
+                'worklet';
+                if (disabled)
+                    return;
+                // 确保最终缩放值在有效范围内
+                const finalScale = Math.max(scaleMin, Math.min(scaleMax, currentScale.value));
+                if (finalScale !== currentScale.value) {
+                    currentScale.value = finalScale;
+                    if (bindscale) {
+                        runOnJS(handleTriggerScale)({
+                            x: offsetX.value,
+                            y: offsetY.value,
+                            scale: finalScale
+                        });
+                    }
+                }
+                // 缩放结束后重新检查边界
+                handleRestBoundaryAndCheck();
+            });
+            // 根据手指数量自动区分手势：一指移动，两指缩放
+            return Gesture.Exclusive(gesturePan, gesturePinch);
+        }
         return gesturePan;
-    }, [disabled, direction, inertia, outOfBounds, gestureSwitch.current]);
+    }, [disabled, direction, inertia, outOfBounds, scale, scaleMin, scaleMax, animation, gestureSwitch.current, handleScaleUpdate, MovableAreaLayout.scaleArea]);
     const animatedStyles = useAnimatedStyle(() => {
         return {
             transform: [
                 { translateX: offsetX.value },
-                { translateY: offsetY.value }
+                { translateY: offsetY.value },
+                { scale: currentScale.value }
             ]
         };
     });
@@ -504,7 +749,7 @@ const _MovableView = forwardRef((movableViewProps, ref) => {
     const innerProps = useInnerProps(extendObject({}, filterProps, {
         ref: nodeRef,
         onLayout: onLayout,
-        style: [innerStyle, animatedStyles, layoutStyle]
+        style: [{ transformOrigin: 'top left' }, innerStyle, animatedStyles, layoutStyle]
     }, rewriteCatchEvent()));
     return createElement(GestureDetector, { gesture: gesture }, createElement(Animated.View, innerProps, wrapChildren(props, {
         hasVarDec,