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

package/lib/dependencies/RecordPageConfigsMapDependency.js

@@ -29,7 +29,7 @@ class RecordPageConfigMapDependency extends NullDependency {
 
   deserialize (context) {
     const { read } = context
-    this.pagePath = read()
+    this.resourcePath = read()
     this.jsonObj = read()
     super.deserialize(context)
   }

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);
     }