From 91a455bf4d3f55b9088052aa462085bb36c3ac0b Mon Sep 17 00:00:00 2001
From: "wuhuanhuan.asltw" <wuhuanhuan.asltw@bytedance.com>
Date: Thu, 14 Nov 2024 20:47:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E8=A7=A6=E6=8E=A7?=
 =?UTF-8?q?=E8=BD=AC=E9=BC=A0=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 QuickStart/Web/README.md                      |  2 +
 QuickStart/Web/src/constant.js                | 21 +++++
 QuickStart/Web/src/features/index.js          |  1 +
 .../Web/src/features/touch-to-mouse-event.js  | 76 +++++++++++++++++++
 QuickStart/Web/src/main.js                    |  2 +
 5 files changed, 102 insertions(+)
 create mode 100644 QuickStart/Web/src/features/touch-to-mouse-event.js

diff --git a/QuickStart/Web/README.md b/QuickStart/Web/README.md
index 3dda2e4..543def8 100644
--- a/QuickStart/Web/README.md
+++ b/QuickStart/Web/README.md
@@ -20,6 +20,7 @@
 16. 虚拟键鼠
 17. 本地输入法显示中文合成过程
 18. 自动回收时长
+19. 触控转鼠标
 
 方便用户快速接入云游戏客户端 Web SDK。
 
@@ -57,6 +58,7 @@
 │   │   ├── sync-local-keyboard-close-status.js # 同步本地键盘状态到云端
 │   │   ├── update-video-scale.js # 更新画面放缩比
 │   │   ├── virtual-input-suite.js # 虚拟键鼠
+│   │   ├── touch-to-mouse-event.js # 触控转鼠标
 │   └── style.css # 样式文件
 └── vite.config.js # vite 配置文件
 └── .env #  Web SDK 启动需要的配置
diff --git a/QuickStart/Web/src/constant.js b/QuickStart/Web/src/constant.js
index c079a30..59525ea 100644
--- a/QuickStart/Web/src/constant.js
+++ b/QuickStart/Web/src/constant.js
@@ -142,3 +142,24 @@ export const veGamePadList = [
     value: veGamePad.DisableVibrate,
   },
 ];
+
+// 触控类型
+export const ACTION = {
+  DOWN: 0,
+  UP: 1,
+  MOVE: 2,
+  TOUCH_START: 0,
+  TOUCH_END: 1,
+  TOUCH_MOVE: 2,
+  WHEEL: 8,
+  PC_TOUCH_UP: 0,
+  PC_TOUCH_DOWN: 1,
+  PC_TOUCH_MOVE: 2,
+};
+
+// 鼠标按键
+export const MOUSE_BUTTON = {
+  LEFT: 0,
+  CENTER: 1,
+  RIGHT: 2,
+};
diff --git a/QuickStart/Web/src/features/index.js b/QuickStart/Web/src/features/index.js
index c551927..9febaa2 100644
--- a/QuickStart/Web/src/features/index.js
+++ b/QuickStart/Web/src/features/index.js
@@ -17,3 +17,4 @@ export { default as getUserProfilePath } from "./get-user-profile-path.js";
 export { default as setTouchToMouse } from "./set-touch-to-mouse.js";
 export { default as virtualInputSuite } from "./virtual-input-suite.js";
 export { default as gamePad } from "./game-pad.js";
+export { default as touchToMouseEvent } from "./touch-to-mouse-event.js";
diff --git a/QuickStart/Web/src/features/touch-to-mouse-event.js b/QuickStart/Web/src/features/touch-to-mouse-event.js
new file mode 100644
index 0000000..e717026
--- /dev/null
+++ b/QuickStart/Web/src/features/touch-to-mouse-event.js
@@ -0,0 +1,76 @@
+import { ACTION, MOUSE_BUTTON } from "../constant";
+
+export const mouseLeftClick = async (x, y, veGameSdkInstance) => {
+  await veGameSdkInstance.sendMouseMessage({
+    action: ACTION.MOVE,
+    x,
+    y,
+  });
+  await veGameSdkInstance.sendMouseMessage({
+    button: MOUSE_BUTTON.LEFT,
+    action: ACTION.DOWN,
+  });
+  await veGameSdkInstance.sendMouseMessage({
+    button: MOUSE_BUTTON.LEFT,
+    action: ACTION.UP,
+  });
+};
+
+const touchToMouseMoveEvent = (veGameSdkInstance) => {
+  let touchstartTs = 0; // 记录touchstart的时间戳
+  const clickInterval = 1000; // 如果间隔大于1s，则认为是鼠标滑动，否则认为是点击
+  // 在触摸移动事件中，检查从触摸开始到当前的时间间隔, 如果时间间隔大于 dragInterval，则将状态设置为拖拽，并发送鼠标按下的消息。
+  // 如果时间间隔小于 dragInterval，则继续处理为滑动。
+  const dragInterval = 200;
+  let inTouchMove = false;
+  let inDrag = false;
+
+  veGameSdkInstance.on("on-touch-event", async (touchList) => {
+    if (touchList.length !== 1) return;
+
+    const { action, x, y, movementX, movementY } = touchList.pop();
+    if (action === ACTION.TOUCH_START) {
+      touchstartTs = Date.now(); // 记录手指触屏的时间
+    }
+    if (action === ACTION.TOUCH_END) {
+      inTouchMove = false;
+      // 拖拽过程中，手指抬起离屏
+      if (inDrag) {
+        console.log("drag end");
+        inDrag = false;
+        veGameSdkInstance.sendMouseMessage({
+          button: MOUSE_BUTTON.LEFT,
+          action: ACTION.UP,
+        });
+        return;
+      }
+      if (Date.now() - touchstartTs < clickInterval) {
+        mouseLeftClick(x, y, veGameSdkInstance); // 如果触屏和离屏的时间小于某个阈值，则视为一次点击
+        return;
+      }
+      // 其他情况，滑动结束
+    }
+    if (action === ACTION.TOUCH_MOVE) {
+      if (!inTouchMove && Date.now() - touchstartTs > dragInterval) {
+        inDrag = true;
+        // 如果是拖拽效果，鼠标左键先按下
+        console.log("drag start");
+        veGameSdkInstance.sendMouseMessage({
+          button: MOUSE_BUTTON.LEFT,
+          action: ACTION.DOWN,
+        });
+      }
+      // 鼠标滑动
+      veGameSdkInstance.sendMouseMessage({
+        action: ACTION.MOVE,
+        x,
+        y,
+        movementX,
+        movementY,
+      });
+      inTouchMove = true;
+    }
+  });
+};
+
+export default touchToMouseMoveEvent;
diff --git a/QuickStart/Web/src/main.js b/QuickStart/Web/src/main.js
index abb6f10..e54e3e1 100644
--- a/QuickStart/Web/src/main.js
+++ b/QuickStart/Web/src/main.js
@@ -196,6 +196,8 @@ function bindEventListener(veGameSdkInstance, callback) {
             "com.pkg3",
           ]),
         },
+        // 关闭默认Touch事件
+        disableDefaultTouchEvent: true,
       });
       console.log("start success", startRes);