@mpxjs/webpack-plugin 2.10.15-4 → 2.10.15

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

@@ -10,11 +10,13 @@ import {
   RemoveProps,
   InnerRef,
   LayoutRef,
-  ExtendedNativeTouchEvent
+  ExtendedNativeTouchEvent,
+  GlobalEventState
 } from './types/getInnerListeners'
 
-const globalEventState = {
-  needPress: true
+const globalEventState: GlobalEventState = {
+  needPress: true,
+  identifier: null
 }
 
 const getTouchEvent = (
@@ -137,39 +139,54 @@ function checkIsNeedPress (e: ExtendedNativeTouchEvent, type: 'bubble' | 'captur
   }
 }
 
+function shouldHandleTapEvent (e: ExtendedNativeTouchEvent, eventConfig: EventConfig) {
+  const { identifier } = e.nativeEvent.changedTouches[0]
+  return eventConfig.tap && globalEventState.identifier === identifier
+}
+
 function handleTouchstart (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
-  // 阻止事件被释放放回对象池，导致对象复用 _stoppedEventTypes 状态被保留
   e.persist()
   const { innerRef } = eventConfig
-  globalEventState.needPress = true
-  innerRef.current.mpxPressInfo.detail = {
-    x: e.nativeEvent.changedTouches[0].pageX,
-    y: e.nativeEvent.changedTouches[0].pageY
+  const touch = e.nativeEvent.changedTouches[0]
+  const { identifier } = touch
+
+  const isSingle = e.nativeEvent.touches.length <= 1
+
+  if (isSingle) {
+    // 仅在 touchstart 记录第一个单指触摸点
+    globalEventState.identifier = identifier
+    globalEventState.needPress = true
+    innerRef.current.mpxPressInfo.detail = {
+      x: touch.pageX,
+      y: touch.pageY
+    }
   }
 
   handleEmitEvent('touchstart', e, type, eventConfig)
 
   if (eventConfig.longpress) {
-    if (e._stoppedEventTypes?.has('longpress')) {
-      return
-    }
-    if (eventConfig.longpress.hasCatch) {
-      e._stoppedEventTypes = e._stoppedEventTypes || new Set()
-      e._stoppedEventTypes.add('longpress')
+    // 只有单指触摸时才启动长按定时器
+    if (isSingle) {
+      if (e._stoppedEventTypes?.has('longpress')) {
+        return
+      }
+      if (eventConfig.longpress.hasCatch) {
+        e._stoppedEventTypes = e._stoppedEventTypes || new Set()
+        e._stoppedEventTypes.add('longpress')
+      }
+      innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
+      innerRef.current.startTimer[type] = setTimeout(() => {
+        globalEventState.needPress = false
+        handleEmitEvent('longpress', e, type, eventConfig)
+      }, 350)
     }
-    innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
-    innerRef.current.startTimer[type] = setTimeout(() => {
-      // 只要触发过longpress, 全局就不再触发tap
-      globalEventState.needPress = false
-      handleEmitEvent('longpress', e, type, eventConfig)
-    }, 350)
   }
 }
 
 function handleTouchmove (e: ExtendedNativeTouchEvent, type: EventType, eventConfig: EventConfig) {
   const { innerRef } = eventConfig
   handleEmitEvent('touchmove', e, type, eventConfig)
-  if (eventConfig.tap) {
+  if (shouldHandleTapEvent(e, eventConfig)) {
     checkIsNeedPress(e, type, innerRef)
   }
 }
@@ -178,7 +195,9 @@ function handleTouchend (e: ExtendedNativeTouchEvent, type: EventType, eventConf
   const { innerRef, disableTap } = eventConfig
   handleEmitEvent('touchend', e, type, eventConfig)
   innerRef.current.startTimer[type] && clearTimeout(innerRef.current.startTimer[type] as unknown as number)
-  if (eventConfig.tap) {
+
+  // 只有单指触摸结束时才触发 tap
+  if (shouldHandleTapEvent(e, eventConfig)) {
     checkIsNeedPress(e, type, innerRef)
     if (!globalEventState.needPress || (type === 'bubble' && disableTap) || e._stoppedEventTypes?.has('tap')) {
       return

package/lib/runtime/components/react/mpx-movable-view.tsx

@@ -4,8 +4,8 @@
  * ✔ out-of-bounds
  * ✔ x
  * ✔ y
- * ✘ damping
- * ✘ friction
+ * ✔ damping
+ * ✔ friction
  * ✔ disabled
  * ✘ scale
  * ✘ scale-min
@@ -27,13 +27,125 @@ import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, P
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
-  withDecay,
   runOnJS,
   runOnUI,
-  withSpring
+  withTiming,
+  Easing
 } from 'react-native-reanimated'
 import { collectDataset, noop } from '@mpxjs/utils'
 
+// 超出边界处理函数，参考微信小程序的超出边界衰减效果
+const applyBoundaryDecline = (
+  newValue: number,
+  range: [min: number, max: number]
+): number => {
+  'worklet'
+
+  const decline = (distance: number): number => {
+    'worklet'
+    return Math.sqrt(Math.abs(distance))
+  }
+
+  if (newValue < range[0]) {
+    const overDistance = range[0] - newValue
+    return range[0] - decline(overDistance)
+  } else if (newValue > range[1]) {
+    const overDistance = newValue - range[1]
+    return range[1] + decline(overDistance)
+  }
+  return newValue
+}
+
+// 参考微信小程序的弹簧阻尼系统实现
+const withWechatSpring = (
+  toValue: number,
+  dampingParam = 20,
+  callback?: () => void
+) => {
+  'worklet'
+
+  // 弹簧参数计算
+  const m = 1 // 质量
+  const k = 9 * Math.pow(dampingParam, 2) / 40 // 弹簧系数
+  const c = dampingParam // 阻尼系数
+
+  // 判别式：r = c² - 4mk
+  const discriminant = c * c - 4 * m * k
+
+  // 计算动画持续时间和缓动函数
+  let duration: number
+  let easingFunction: any
+
+  if (Math.abs(discriminant) < 0.01) {
+    // 临界阻尼 (discriminant ≈ 0)
+    // 使用cubic-out模拟临界阻尼的平滑过渡
+    duration = Math.max(350, Math.min(800, 2000 / dampingParam))
+    easingFunction = Easing.out(Easing.cubic)
+  } else if (discriminant > 0) {
+    // 过阻尼 (discriminant > 0)
+    // 使用指数缓动模拟过阻尼的缓慢收敛
+    duration = Math.max(450, Math.min(1000, 2500 / dampingParam))
+    easingFunction = Easing.out(Easing.exp)
+  } else {
+    // 欠阻尼 (discriminant < 0) - 会产生振荡
+    // 计算振荡频率和衰减率
+    const dampingRatio = c / (2 * Math.sqrt(m * k)) // 阻尼比
+
+    // 根据阻尼比调整动画参数
+    if (dampingRatio < 0.7) {
+      // 明显振荡
+      duration = Math.max(600, Math.min(1200, 3000 / dampingParam))
+      // 创建带振荡的贝塞尔曲线
+      easingFunction = Easing.bezier(0.175, 0.885, 0.32, 1.275)
+    } else {
+      // 轻微振荡
+      duration = Math.max(400, Math.min(800, 2000 / dampingParam))
+      easingFunction = Easing.bezier(0.25, 0.46, 0.45, 0.94)
+    }
+  }
+
+  return withTiming(toValue, {
+    duration,
+    easing: easingFunction
+  }, callback)
+}
+
+// 参考微信小程序friction的惯性动画
+const withWechatDecay = (
+  velocity: number,
+  currentPosition: number,
+  clampRange: [min: number, max: number],
+  frictionValue = 2,
+  callback?: () => void
+) => {
+  'worklet'
+
+  // 微信小程序friction算法: delta = -1.5 * v² / a, 其中 a = -f * v / |v|
+  // 如果friction小于等于0，设置为默认值2
+  const validFriction = frictionValue <= 0 ? 2 : frictionValue
+  const f = 1000 * validFriction
+  const acceleration = velocity !== 0 ? -f * velocity / Math.abs(velocity) : 0
+  const delta = acceleration !== 0 ? (-1.5 * velocity * velocity) / acceleration : 0
+
+  let finalPosition = currentPosition + delta
+
+  // 边界限制
+  if (finalPosition < clampRange[0]) {
+    finalPosition = clampRange[0]
+  } else if (finalPosition > clampRange[1]) {
+    finalPosition = clampRange[1]
+  }
+
+  // 计算动画时长
+  const distance = Math.abs(finalPosition - currentPosition)
+  const duration = Math.min(1500, Math.max(200, distance * 8))
+
+  return withTiming(finalPosition, {
+    duration,
+    easing: Easing.out(Easing.cubic)
+  }, callback)
+}
+
 interface MovableViewProps {
   children: ReactNode
   style?: Record<string, any>
@@ -42,6 +154,8 @@ interface MovableViewProps {
   y?: number
   disabled?: boolean
   animation?: boolean
+  damping?: number
+  friction?: number
   id?: string
   changeThrottleTime?:number
   bindchange?: (event: unknown) => void
@@ -95,6 +209,8 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
     inertia = false,
     disabled = false,
     animation = true,
+    damping = 20,
+    friction = 2,
     'out-of-bounds': outOfBounds = false,
     'enable-var': enableVar,
     'external-var-context': externalVarContext,
@@ -206,18 +322,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
         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
-            })
+            ? withWechatSpring(newX, damping)
             : newX
         }
         if (direction === 'vertical' || direction === 'all') {
           offsetY.value = animation
-            ? withSpring(newY, {
-              duration: 1500,
-              dampingRatio: 0.8
-            })
+            ? withWechatSpring(newY, damping)
             : newY
         }
         if (bindchange) {
@@ -404,7 +514,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
-  // 节流版本的 change 事件触发
+  // 节流版本的change事件触发
   const handleTriggerChangeThrottled = useCallback(({ x, y, type }: { x: number; y: number; type?: string }) => {
     'worklet'
     const now = Date.now()
@@ -468,7 +578,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             const { x } = checkBoundaryPosition({ positionX: newX, positionY: offsetY.value })
             offsetX.value = x
           } else {
-            offsetX.value = newX
+            offsetX.value = applyBoundaryDecline(newX, draggableXRange.value)
           }
         }
         if (direction === 'vertical' || direction === 'all') {
@@ -477,7 +587,7 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             const { y } = checkBoundaryPosition({ positionX: offsetX.value, positionY: newY })
             offsetY.value = y
           } else {
-            offsetY.value = newY
+            offsetY.value = applyBoundaryDecline(newY, draggableYRange.value)
           }
         }
         if (bindchange) {
@@ -506,18 +616,12 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
           if (x !== offsetX.value || y !== offsetY.value) {
             if (x !== offsetX.value) {
               offsetX.value = animation
-                ? withSpring(x, {
-                  duration: 1500,
-                  dampingRatio: 0.8
-                })
+                ? withWechatSpring(x, damping)
                 : x
             }
             if (y !== offsetY.value) {
               offsetY.value = animation
-                ? withSpring(y, {
-                  duration: 1500,
-                  dampingRatio: 0.8
-                })
+                ? withWechatSpring(y, damping)
                 : y
             }
             if (bindchange) {
@@ -528,38 +632,42 @@ const _MovableView = forwardRef<HandlerRef<View, MovableViewProps>, MovableViewP
             }
           }
         } else if (inertia) {
-          // 惯性处理
+          // 惯性处理 - 使用微信小程序friction算法
           if (direction === 'horizontal' || direction === 'all') {
             xInertialMotion.value = true
-            offsetX.value = withDecay({
-              velocity: e.velocityX / 10,
-              rubberBandEffect: outOfBounds,
-              clamp: draggableXRange.value
-            }, () => {
-              xInertialMotion.value = false
-              if (bindchange) {
-                runOnJS(runOnJSCallback)('handleTriggerChange', {
-                  x: offsetX.value,
-                  y: offsetY.value
-                })
+            offsetX.value = withWechatDecay(
+              e.velocityX / 10,
+              offsetX.value,
+              draggableXRange.value,
+              friction,
+              () => {
+                xInertialMotion.value = false
+                if (bindchange) {
+                  runOnJS(runOnJSCallback)('handleTriggerChange', {
+                    x: offsetX.value,
+                    y: offsetY.value
+                  })
+                }
               }
-            })
+            )
           }
           if (direction === 'vertical' || direction === 'all') {
             yInertialMotion.value = true
-            offsetY.value = withDecay({
-              velocity: e.velocityY / 10,
-              rubberBandEffect: outOfBounds,
-              clamp: draggableYRange.value
-            }, () => {
-              yInertialMotion.value = false
-              if (bindchange) {
-                runOnJS(runOnJSCallback)('handleTriggerChange', {
-                  x: offsetX.value,
-                  y: offsetY.value
-                })
+            offsetY.value = withWechatDecay(
+              e.velocityY / 10,
+              offsetY.value,
+              draggableYRange.value,
+              friction,
+              () => {
+                yInertialMotion.value = false
+                if (bindchange) {
+                  runOnJS(runOnJSCallback)('handleTriggerChange', {
+                    x: offsetX.value,
+                    y: offsetY.value
+                  })
+                }
               }
-            })
+            )
           }
         }
       })

package/lib/runtime/components/react/mpx-portal/portal-manager.tsx

@@ -1,5 +1,4 @@
-import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement } from 'react'
-import { View, StyleSheet } from 'react-native'
+import { useState, useCallback, forwardRef, ForwardedRef, useImperativeHandle, ReactNode, ReactElement, Fragment } from 'react'
 
 export type State = {
   portals: Array<{
@@ -48,13 +47,10 @@ const _PortalManager = forwardRef((props: PortalManagerProps, ref:ForwardedRef<u
 
   return (
     <>
-      {state.portals.map(({ key, children }, i) => (
-        <View
-          key={key}
-          collapsable={false} // Need collapsable=false here to clip the elevations
-          style={[StyleSheet.absoluteFill, { zIndex: 1000 + i, pointerEvents: 'box-none' }]}>
+      {state.portals.map(({ key, children }) => (
+        <Fragment key={key}>
           {children}
-        </View>
+        </Fragment>
       ))}
     </>
   )

package/lib/runtime/components/react/mpx-progress.tsx

@@ -0,0 +1,257 @@
+/**
+ * ✔ percent 进度百分比 0-100
+ * ✘ show-info 在进度条右侧显示百分比
+ * ✘ border-radius 圆角大小
+ * ✘ font-size 右侧百分比字体大小
+ * ✔ stroke-width 进度条线的宽度
+ * ✔ color 进度条颜色（请使用activeColor）
+ * ✔ activeColor 已选择的进度条的颜色
+ * ✔ backgroundColor 未选择的进度条的颜色
+ * ✔ active 进度条从左往右的动画
+ * ✔ active-mode backwards: 动画从头播；forwards：动画从上次结束点接着播
+ * ✔ duration 进度增加1%所需毫秒数
+ * ✔ bindactiveend 动画完成事件
+ */
+import {
+  JSX,
+  useRef,
+  forwardRef,
+  useEffect,
+  useState,
+  createElement,
+  ForwardedRef
+} from 'react'
+import {
+  View,
+  ViewStyle
+} from 'react-native'
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+  Easing,
+  runOnJS
+} from 'react-native-reanimated'
+
+import useInnerProps from './getInnerListeners'
+import useNodesRef, { HandlerRef } from './useNodesRef'
+import { useLayout, useTransformStyle, extendObject } from './utils'
+import Portal from './mpx-portal'
+
+export interface ProgressProps {
+  percent?: number
+  'stroke-width'?: number | string
+  color?: string
+  activeColor?: string
+  backgroundColor?: string
+  active?: boolean
+  'active-mode'?: 'backwards' | 'forwards'
+  duration?: number
+  bindactiveend?: (event: any) => void
+  style?: ViewStyle & Record<string, any>
+  'enable-offset'?: boolean
+  'enable-var'?: boolean
+  'external-var-context'?: Record<string, any>
+  'parent-font-size'?: number
+  'parent-width'?: number
+  'parent-height'?: number
+}
+
+const Progress = forwardRef<
+  HandlerRef<View, ProgressProps>,
+  ProgressProps
+>((props: ProgressProps, ref: ForwardedRef<HandlerRef<View, ProgressProps>>): JSX.Element => {
+  const {
+    percent = 0,
+    'stroke-width': strokeWidth = 6,
+    color,
+    activeColor = color || '#09BB07',
+    backgroundColor = '#EBEBEB',
+    active = false,
+    'active-mode': activeMode = 'backwards',
+    duration = 30,
+    bindactiveend,
+    style = {},
+    'enable-var': enableVar,
+    'external-var-context': externalVarContext,
+    'parent-font-size': parentFontSize,
+    'parent-width': parentWidth,
+    'parent-height': parentHeight
+  } = props
+
+  const nodeRef = useRef(null)
+  const propsRef = useRef({})
+  propsRef.current = props
+
+  // 进度值状态
+  const [lastPercent, setLastPercent] = useState(0)
+  const progressWidth = useSharedValue(0)
+
+  const {
+    normalStyle,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    hasPositionFixed
+  } = useTransformStyle(style, {
+    enableVar,
+    externalVarContext,
+    parentFontSize,
+    parentWidth,
+    parentHeight
+  })
+
+  const { layoutRef, layoutStyle, layoutProps } = useLayout({
+    props,
+    hasSelfPercent,
+    setWidth,
+    setHeight,
+    nodeRef
+  })
+
+  useNodesRef(props, ref, nodeRef, {
+    style: normalStyle
+  })
+
+  // 进度条动画函数
+  const startProgressAnimation = (targetPercent: number, startPercent: number, animationDuration: number, onFinished?: () => void) => {
+    // 根据 active-mode 设置起始位置
+    progressWidth.value = startPercent
+    progressWidth.value = withTiming(
+      targetPercent,
+      {
+        duration: animationDuration,
+        easing: Easing.linear
+      },
+      (finished) => {
+        if (finished && onFinished) {
+          // 在动画回调中，需要使用runOnJS回到主线程
+          runOnJS(onFinished)()
+        }
+      }
+    )
+  }
+
+  // 创建在主线程执行的事件回调函数
+  const triggerActiveEnd = (percent: number) => {
+    if (bindactiveend) {
+      bindactiveend({
+        type: 'activeend',
+        detail: {
+          percent: percent
+        }
+      })
+    }
+  }
+
+  // 进度变化时的动画效果
+  useEffect(() => {
+    const targetPercent = Math.max(0, Math.min(100, percent))
+    if (active) {
+      // 根据 active-mode 确定起始位置
+      let startPercent
+      if (activeMode === 'backwards') {
+        startPercent = 0
+      } else {
+        // forwards 模式：使用上次记录的百分比作为起始位置
+        startPercent = lastPercent
+      }
+
+      // 计算动画持续时间
+      const percentDiff = Math.abs(targetPercent - startPercent)
+      const animationDuration = percentDiff * duration
+
+      // 创建动画完成回调
+      const onAnimationFinished = () => {
+        triggerActiveEnd(targetPercent)
+      }
+
+      // 执行动画
+      startProgressAnimation(targetPercent, startPercent, animationDuration, onAnimationFinished)
+    } else {
+      progressWidth.value = targetPercent
+    }
+
+    setLastPercent(targetPercent)
+  }, [percent, active, activeMode, duration, bindactiveend])
+
+  // 初始化时设置进度值
+  useEffect(() => {
+    if (!active) {
+      progressWidth.value = Math.max(0, Math.min(100, percent))
+    }
+  }, [])
+
+  // 进度条动画样式
+  const animatedProgressStyle = useAnimatedStyle(() => {
+    return {
+      width: `${progressWidth.value}%`
+    }
+  })
+
+  // 确保数值类型正确
+  const strokeWidthNum = typeof strokeWidth === 'number' ? strokeWidth : parseInt(strokeWidth as string, 10) || 6
+
+  // 容器样式
+  const containerStyle: ViewStyle = extendObject({} as ViewStyle, {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    width: '100%',
+    minHeight: Math.max(strokeWidthNum, 20)
+  }, normalStyle, layoutStyle)
+
+  // 进度条背景样式
+  const progressBgStyle: ViewStyle = {
+    width: '100%',
+    height: strokeWidthNum,
+    backgroundColor,
+    overflow: 'hidden'
+  }
+
+  // 进度条填充样式
+  const progressFillStyle: ViewStyle = {
+    height: '100%',
+    backgroundColor: activeColor
+  }
+
+  const innerProps = useInnerProps(
+    extendObject({}, props, layoutProps, {
+      ref: nodeRef
+    }),
+    [
+      'percent',
+      'stroke-width',
+      'color',
+      'activeColor',
+      'backgroundColor',
+      'active',
+      'active-mode',
+      'duration',
+      'bindactiveend'
+    ],
+    { layoutRef }
+  )
+
+  const progressComponent = createElement(
+    View,
+    extendObject({}, innerProps, { style: containerStyle }),
+    // 进度条背景
+    createElement(
+      View,
+      { style: progressBgStyle },
+      // 进度条填充
+      createElement(Animated.View, {
+        style: [progressFillStyle, animatedProgressStyle]
+      })
+    )
+  )
+
+  if (hasPositionFixed) {
+    return createElement(Portal, null, progressComponent)
+  }
+
+  return progressComponent
+})
+
+Progress.displayName = 'MpxProgress'
+export default Progress