fix(nvue): movable

packages/uni-components/dist/components.js

@@ -709,32 +709,23 @@ var MovableArea = defineComponent({
     };
   }
 });
-const __event = {};
-function callback(type, $event) {
-  if (__event[type]) {
-    __event[type]($event);
+function useTouchtrack(method) {
+  const __event = {};
+  function callback(type, $event) {
+    if (__event[type]) {
+      __event[type]($event);
+    }
   }
-}
-function addListener(type, callback2) {
-  __event[type] = function($event) {
-    if (typeof callback2 === "function") {
-      $event.touches = $event.changedTouches;
-      if (callback2($event) === false) {
-        $event.stopPropagation();
+  function addListener(type, callback2) {
+    __event[type] = function($event) {
+      if (typeof callback2 === "function") {
+        $event.touches = $event.changedTouches;
+        if (callback2($event) === false) {
+          $event.stopPropagation();
+        }
       }
-    }
-  };
-}
-function touchstart($event) {
-  callback("touchstart", $event);
-}
-function touchmove($event) {
-  callback("touchmove", $event);
-}
-function touchend($event) {
-  callback("touchend", $event);
-}
-function useTouchtrack(method) {
+    };
+  }
   let x0 = 0;
   let y0 = 0;
   let x1 = 0;
@@ -783,6 +774,17 @@ function useTouchtrack(method) {
       return fn($event, "end", $event.changedTouches[0].pageX, $event.changedTouches[0].pageY);
     }
   });
+  return {
+    touchstart: function($event) {
+      callback("touchstart", $event);
+    },
+    touchmove: function($event) {
+      callback("touchmove", $event);
+    },
+    touchend: function($event) {
+      callback("touchend", $event);
+    }
+  };
 }
 function useCustomEvent(ref2, emit) {
   return (name, detail) => {
@@ -1215,8 +1217,8 @@ function _requestAnimationFrame(e2) {
     });
   }
 }
-function requestAnimationFrame(callback2) {
-  return setTimeout(callback2, 16);
+function requestAnimationFrame(callback) {
+  return setTimeout(callback, 16);
 }
 function cancelAnimationFrame(id) {
   clearTimeout(id);
@@ -1243,14 +1245,7 @@ var MovableView = defineComponent({
     const trigger = useCustomEvent(rootRef, emit);
     const setTouchMovableViewContext = inject("setTouchMovableViewContext", () => {
     });
-    useMovableViewState(props, trigger, rootRef);
-    const touchStart = () => {
-      setTouchMovableViewContext({
-        touchstart,
-        touchmove,
-        touchend
-      });
-    };
+    const touchStart = useMovableViewState(props, trigger, rootRef, setTouchMovableViewContext);
     return () => {
       const attrs = {
         preventGesture: true
@@ -1264,7 +1259,7 @@ var MovableView = defineComponent({
     };
   }
 });
-function useMovableViewState(props, trigger, rootRef) {
+function useMovableViewState(props, trigger, rootRef, setTouchMovableViewContext) {
   const _isMounted = inject("_isMounted", ref(false));
   const parentSize = inject("parentSize", {
     width: ref(0),
@@ -1276,6 +1271,14 @@ function useMovableViewState(props, trigger, rootRef) {
   });
   const removeMovableViewContext = inject("removeMovableViewContext", () => {
   });
+  let movableViewContext = {
+    touchstart: () => {
+    },
+    touchmove: () => {
+    },
+    touchend: () => {
+    }
+  };
   function _getPx(val) {
     return Number(val) || 0;
   }
@@ -1713,7 +1716,7 @@ function useMovableViewState(props, trigger, rootRef) {
     _setTransform(x, y, scale, "", true);
   }
   onMounted(() => {
-    useTouchtrack((event) => {
+    movableViewContext = useTouchtrack((event) => {
       switch (event.detail.state) {
         case "start":
           __handleTouchStart();
@@ -1743,6 +1746,10 @@ function useMovableViewState(props, trigger, rootRef) {
   onUnmounted(() => {
     FAandSFACancel();
   });
+  const touchStart = () => {
+    setTouchMovableViewContext(movableViewContext);
+  };
+  return touchStart;
 }
 var components = {
   Navigator,

packages/uni-components/src/nvue/movable-area/index.tsx

@@ -9,7 +9,7 @@ export interface MovableViewContext {
 export type AddMovableViewContext = (context: MovableViewContext) => void
 export type RemoveMovableViewContext = (context: MovableViewContext) => void
 
-interface TouchMovableViewContext {
+export interface TouchMovableViewContext {
   touchstart: (e: TouchtrackEvent) => void
   touchmove: (e: TouchtrackEvent) => void
   touchend: (e: TouchtrackEvent) => void

packages/uni-components/src/nvue/movable-view/index.tsx

@@ -8,13 +8,7 @@ import {
   inject,
   watch,
 } from 'vue'
-import {
-  useTouchtrack,
-  touchstart,
-  touchmove,
-  touchend,
-  TouchtrackEvent,
-} from './useTouchtrack'
+import { useTouchtrack, TouchtrackEvent } from './useTouchtrack'
 import {
   CustomEventTrigger,
   EmitEvent,
@@ -25,6 +19,7 @@ import {
   AddMovableViewContext,
   RemoveMovableViewContext,
   SetTouchMovableViewContext,
+  TouchMovableViewContext,
   parentSize,
 } from '../movable-area'
 import {
@@ -133,15 +128,12 @@ export default defineComponent({
       'setTouchMovableViewContext',
       () => {}
     )
-    useMovableViewState(props, trigger, rootRef)
-
-    const touchStart = () => {
-      setTouchMovableViewContext({
-        touchstart,
-        touchmove,
-        touchend,
-      })
-    }
+    const touchStart = useMovableViewState(
+      props,
+      trigger,
+      rootRef,
+      setTouchMovableViewContext
+    )
 
     return () => {
       const attrs = {
@@ -165,7 +157,8 @@ export default defineComponent({
 function useMovableViewState(
   props: Props,
   trigger: CustomEventTrigger,
-  rootRef: RootRef
+  rootRef: RootRef,
+  setTouchMovableViewContext: SetTouchMovableViewContext
 ) {
   const _isMounted: Ref<boolean> = inject('_isMounted', ref(false))
   const parentSize: parentSize = inject('parentSize', {
@@ -182,6 +175,11 @@ function useMovableViewState(
     'removeMovableViewContext',
     () => {}
   )
+  let movableViewContext: TouchMovableViewContext = {
+    touchstart: () => {},
+    touchmove: () => {},
+    touchend: () => {},
+  }
   function _getPx(val: string | number) {
     // if (/\d+[ur]px$/i.test(val)) {
     //   return uni.upx2px(parseFloat(val))
@@ -693,7 +691,7 @@ function useMovableViewState(
   }
 
   onMounted(() => {
-    useTouchtrack((event) => {
+    movableViewContext = useTouchtrack((event) => {
       switch (event.detail.state) {
         case 'start':
           __handleTouchStart()
@@ -729,4 +727,10 @@ function useMovableViewState(
   onUnmounted(() => {
     FAandSFACancel()
   })
+
+  const touchStart = () => {
+    setTouchMovableViewContext(movableViewContext)
+  }
+
+  return touchStart
 }

packages/uni-components/src/nvue/movable-view/useTouchtrack.ts

@@ -21,34 +21,26 @@ export interface TouchtrackEvent {
   detail: Detail
 }
 
-const __event: Record<string, Function> = {}
-function callback(type: CallbackType, $event: TouchtrackEvent) {
-  if (__event[type]) {
-    __event[type]($event)
+export function useTouchtrack(
+  method: (event: TouchtrackEvent) => boolean | void
+) {
+  const __event: Record<string, Function> = {}
+  function callback(type: CallbackType, $event: TouchtrackEvent) {
+    if (__event[type]) {
+      __event[type]($event)
+    }
   }
-}
-function addListener(type: CallbackType, callback: Function) {
-  __event[type] = function ($event: TouchtrackEvent) {
-    if (typeof callback === 'function') {
-      $event.touches = $event.changedTouches
-      if (callback($event) === false) {
-        $event.stopPropagation()
+  function addListener(type: CallbackType, callback: Function) {
+    __event[type] = function ($event: TouchtrackEvent) {
+      if (typeof callback === 'function') {
+        $event.touches = $event.changedTouches
+        if (callback($event) === false) {
+          $event.stopPropagation()
+        }
       }
     }
   }
-}
-export function touchstart($event: TouchtrackEvent) {
-  callback('touchstart', $event)
-}
-export function touchmove($event: TouchtrackEvent) {
-  callback('touchmove', $event)
-}
-export function touchend($event: TouchtrackEvent) {
-  callback('touchend', $event)
-}
-export function useTouchtrack(
-  method: (event: TouchtrackEvent) => boolean | void
-) {
+
   let x0 = 0
   let y0 = 0
   let x1 = 0
@@ -115,4 +107,16 @@ export function useTouchtrack(
       )
     }
   })
+
+  return {
+    touchstart: function ($event: TouchtrackEvent) {
+      callback('touchstart', $event)
+    },
+    touchmove: function ($event: TouchtrackEvent) {
+      callback('touchmove', $event)
+    },
+    touchend: function ($event: TouchtrackEvent) {
+      callback('touchend', $event)
+    },
+  }
 }