refactor: 将手势触摸事件统一交给 useSwipeGesture 处理

Author: FreecellRaid

src/composables/interaction/useSwipeGesture.ts

@@ -15,59 +15,84 @@ interface TouchOrigin {
     timestamp: number;
 }
 
-export function useSwipeGesture(options: SwipeGestureOptions) {
-    let origin: TouchOrigin | null = null;
+interface SwipeGestureState {
+    options: SwipeGestureOptions;
+    origin: TouchOrigin | null;
+}
+
+export function useSwipeGesture(
+    options: SwipeGestureOptions | SwipeGestureOptions[],
+) {
+    const states: SwipeGestureState[] = (
+        Array.isArray(options) ? options : [options]
+    ).map((gestureOptions) => ({
+        options: gestureOptions,
+        origin: null,
+    }));
 
     function onTouchStart(event: TouchEvent) {
-        if (event.touches.length !== 1 || options.canStart?.(event) === false) {
-            origin = null;
-            return;
-        }
+        for (const state of states) {
+            if (
+                event.touches.length !== 1 ||
+                state.options.canStart?.(event) === false
+            ) {
+                state.origin = null;
+                continue;
+            }
 
-        const touch = event.touches[0];
-        origin = {
-            x: touch.clientX,
-            y: touch.clientY,
-            timestamp: Date.now(),
-        };
+            const touch = event.touches[0];
+            state.origin = {
+                x: touch.clientX,
+                y: touch.clientY,
+                timestamp: Date.now(),
+            };
+        }
     }
 
     function onTouchEnd(event: TouchEvent) {
-        if (!origin || event.changedTouches.length !== 1) {
-            origin = null;
-            return;
-        }
+        for (const state of states) {
+            if (!state.origin || event.changedTouches.length !== 1) {
+                state.origin = null;
+                continue;
+            }
 
-        const start = origin;
-        const touch = event.changedTouches[0];
-        origin = null;
+            const start = state.origin;
+            const touch = event.changedTouches[0];
+            state.origin = null;
 
-        if (Date.now() - start.timestamp > (options.maxDuration ?? 700)) return;
+            if (
+                Date.now() - start.timestamp >
+                (state.options.maxDuration ?? 700)
+            )
+                continue;
 
-        const deltaX = touch.clientX - start.x;
-        const deltaY = touch.clientY - start.y;
-        const minDistance = options.minDistance ?? 64;
-        const axisRatio = options.axisRatio ?? 1.25;
-        const horizontal = Math.abs(deltaX) > Math.abs(deltaY) * axisRatio;
-        const vertical = Math.abs(deltaY) > Math.abs(deltaX) * axisRatio;
+            const deltaX = touch.clientX - start.x;
+            const deltaY = touch.clientY - start.y;
+            const minDistance = state.options.minDistance ?? 64;
+            const axisRatio = state.options.axisRatio ?? 1.25;
+            const horizontal = Math.abs(deltaX) > Math.abs(deltaY) * axisRatio;
+            const vertical = Math.abs(deltaY) > Math.abs(deltaX) * axisRatio;
 
-        const matched =
-            (options.direction === 'left' &&
-                horizontal &&
-                deltaX <= -minDistance) ||
-            (options.direction === 'right' &&
-                horizontal &&
-                deltaX >= minDistance) ||
-            (options.direction === 'up' &&
-                vertical &&
-                deltaY <= -minDistance) ||
-            (options.direction === 'down' && vertical && deltaY >= minDistance);
+            const matched =
+                (state.options.direction === 'left' &&
+                    horizontal &&
+                    deltaX <= -minDistance) ||
+                (state.options.direction === 'right' &&
+                    horizontal &&
+                    deltaX >= minDistance) ||
+                (state.options.direction === 'up' &&
+                    vertical &&
+                    deltaY <= -minDistance) ||
+                (state.options.direction === 'down' &&
+                    vertical &&
+                    deltaY >= minDistance);
 
-        if (matched) options.onSwipe();
+            if (matched) state.options.onSwipe();
+        }
     }
 
     function onTouchCancel() {
-        origin = null;
+        for (const state of states) state.origin = null;
     }
 
     return { onTouchStart, onTouchEnd, onTouchCancel };

src/views/MobileEditor.vue

@@ -1,9 +1,9 @@
 <template>
     <div
         class="mobile-editor"
-        @touchstart="handleTouchStart"
-        @touchend="handleTouchEnd"
-        @touchcancel="handleTouchCancel"
+        @touchstart="editorGesture.onTouchStart"
+        @touchend="editorGesture.onTouchEnd"
+        @touchcancel="editorGesture.onTouchCancel"
     >
         <HelpDocument v-if="windowStore.isHelpOpen" />
         <MobileTopBar />
@@ -59,46 +59,34 @@ const bottomPanelNames: MobileBottomPanelName[] = [
     'exportFormat',
 ];
 
-const openLeftDrawerGesture = useSwipeGesture({
-    direction: 'right',
-    canStart: (event) => !hasOpenOverlay() && event.touches[0].clientX <= 24,
-    onSwipe: mobileUiStore.openLeftDrawer,
-});
-const openBottomDrawerGesture = useSwipeGesture({
-    direction: 'up',
-    canStart: (event) =>
-        !hasOpenOverlay() &&
-        event.touches[0].clientY >= window.innerHeight - 72,
-    onSwipe: () => {
-        const activePanel = windowStore.activeLeftPanelName;
-        const panel = bottomPanelNames.includes(
-            activePanel as MobileBottomPanelName,
-        )
-            ? (activePanel as MobileBottomPanelName)
-            : 'chunkList';
-        windowStore.setLeftPanel(panel, { revealSidebar: false });
-        mobileUiStore.openBottomPanel();
+const editorGesture = useSwipeGesture([
+    {
+        direction: 'right',
+        canStart: (event) =>
+            !hasOpenOverlay() && event.touches[0].clientX <= 24,
+        onSwipe: mobileUiStore.openLeftDrawer,
     },
-});
+    {
+        direction: 'up',
+        canStart: (event) =>
+            !hasOpenOverlay() &&
+            event.touches[0].clientY >= window.innerHeight - 72,
+        onSwipe: () => {
+            const activePanel = windowStore.activeLeftPanelName;
+            const panel = bottomPanelNames.includes(
+                activePanel as MobileBottomPanelName,
+            )
+                ? (activePanel as MobileBottomPanelName)
+                : 'chunkList';
+            windowStore.setLeftPanel(panel, { revealSidebar: false });
+            mobileUiStore.openBottomPanel();
+        },
+    },
+]);
 
 function hasOpenOverlay() {
     return Boolean(mobileUiStore.activeOverlay || windowStore.isHelpOpen);
 }
 
-function handleTouchStart(event: TouchEvent) {
-    openLeftDrawerGesture.onTouchStart(event);
-    openBottomDrawerGesture.onTouchStart(event);
-}
-
-function handleTouchEnd(event: TouchEvent) {
-    openLeftDrawerGesture.onTouchEnd(event);
-    openBottomDrawerGesture.onTouchEnd(event);
-}
-
-function handleTouchCancel() {
-    openLeftDrawerGesture.onTouchCancel();
-    openBottomDrawerGesture.onTouchCancel();
-}
-
 onUnmounted(mobileUiStore.reset);
 </script>