From 480079645dd05dcbd0ae8ac2557a6f1dbb56a15c Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Tue, 15 Feb 2022 17:33:43 +0800 Subject: [PATCH] fix(nvue): movable --- packages/uni-components/dist/components.js | 79 ++++++++++--------- .../src/nvue/movable-area/index.tsx | 2 +- .../src/nvue/movable-view/index.tsx | 40 +++++----- .../src/nvue/movable-view/useTouchtrack.ts | 52 ++++++------ 4 files changed, 94 insertions(+), 79 deletions(-) diff --git a/packages/uni-components/dist/components.js b/packages/uni-components/dist/components.js index 7ce457f56..4898f5eee 100644 --- a/packages/uni-components/dist/components.js +++ b/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, diff --git a/packages/uni-components/src/nvue/movable-area/index.tsx b/packages/uni-components/src/nvue/movable-area/index.tsx index 89bf50083..6a176e62b 100644 --- a/packages/uni-components/src/nvue/movable-area/index.tsx +++ b/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 diff --git a/packages/uni-components/src/nvue/movable-view/index.tsx b/packages/uni-components/src/nvue/movable-view/index.tsx index f4c6c665d..987a144a6 100644 --- a/packages/uni-components/src/nvue/movable-view/index.tsx +++ b/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 = 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 } diff --git a/packages/uni-components/src/nvue/movable-view/useTouchtrack.ts b/packages/uni-components/src/nvue/movable-view/useTouchtrack.ts index 14320af38..65329a211 100644 --- a/packages/uni-components/src/nvue/movable-view/useTouchtrack.ts +++ b/packages/uni-components/src/nvue/movable-view/useTouchtrack.ts @@ -21,34 +21,26 @@ export interface TouchtrackEvent { detail: Detail } -const __event: Record = {} -function callback(type: CallbackType, $event: TouchtrackEvent) { - if (__event[type]) { - __event[type]($event) +export function useTouchtrack( + method: (event: TouchtrackEvent) => boolean | void +) { + const __event: Record = {} + 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) + }, + } } -- GitLab