feat: selection translation on mobile support

src/views/Selection/DraggableResizable.js

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import Paper from "@mui/material/Paper";
 import Box from "@mui/material/Box";
+import { isMobile } from "../../libs/mobile";
 
 function Pointer({
   direction,
@@ -16,21 +17,23 @@ function Pointer({
   const [origin, setOrigin] = useState(null);
 
   function handlePointerDown(e) {
-    e.target.setPointerCapture(e.pointerId);
+    !isMobile && e.target.setPointerCapture(e.pointerId);
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     setOrigin({
       x: position.x,
       y: position.y,
       w: size.w,
       h: size.h,
-      clientX: e.clientX,
-      clientY: e.clientY,
+      clientX,
+      clientY,
     });
   }
 
   function handlePointerMove(e) {
+    const { clientX, clientY } = isMobile ? e.targetTouches[0] : e;
     if (origin) {
-      const dx = e.clientX - origin.clientX;
-      const dy = e.clientY - origin.clientY;
+      const dx = clientX - origin.clientX;
+      const dy = clientY - origin.clientY;
       let x = position.x;
       let y = position.y;
       let w = size.w;
@@ -101,16 +104,24 @@ function Pointer({
   }
 
   function handlePointerUp(e) {
+    e.stopPropagation();
     setOrigin(null);
   }
 
+  const touchProps = isMobile
+    ? {
+        onTouchStart: handlePointerDown,
+        onTouchMove: handlePointerMove,
+        onTouchEnd: handlePointerUp,
+      }
+    : {
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+      };
+
   return (
-    <div
-      {...props}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={handlePointerUp}
-    >
+    <div {...props} {...touchProps}>
       {children}
     </div>
   );
@@ -162,6 +173,7 @@ export default function DraggableResizable({
   return (
     <Box
       style={{
+        touchAction: "none",
         position: "fixed",
         left: position.x,
         top: position.y,

src/views/Selection/TranBtn.js

@@ -1,11 +1,24 @@
+import { limitNumber } from "../../libs/utils";
+
 export default function TranBtn({ onClick, position, tranboxSetting }) {
+  const left = limitNumber(
+    position.x + tranboxSetting.btnOffsetX,
+    0,
+    window.innerWidth - 20
+  );
+  const top = limitNumber(
+    position.y + tranboxSetting.btnOffsetY,
+    0,
+    window.innerHeight - 20
+  );
+
   return (
     <div
       style={{
         cursor: "pointer",
         position: "absolute",
-        left: position.x + tranboxSetting.btnOffsetX,
-        top: position.y + tranboxSetting.btnOffsetY,
+        left,
+        top,
         zIndex: 2147483647,
       }}
       onClick={onClick}

src/views/Selection/index.js

@@ -2,20 +2,27 @@ import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
-import { sleep } from "../../libs/utils";
+import { sleep, limitNumber } from "../../libs/utils";
 import { isGm } from "../../libs/client";
 import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
+import { isMobile } from "../../libs/mobile";
 
 export default function Slection({ contextMenus, tranboxSetting, transApis }) {
+  const boxWidth = limitNumber(window.innerWidth, 300, 600);
+  const boxHeight = limitNumber(window.innerHeight, 200, 400);
+
   const [showBox, setShowBox] = useState(false);
   const [showBtn, setShowBtn] = useState(false);
   const [selectedText, setSelText] = useState("");
   const [text, setText] = useState("");
   const [position, setPosition] = useState({ x: 0, y: 0 });
-  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxSize, setBoxSize] = useState({
+    w: boxWidth,
+    h: boxHeight,
+  });
   const [boxPosition, setBoxPosition] = useState({
-    x: (window.innerWidth - 600) / 2,
-    y: (window.innerHeight - 400) / 2,
+    x: (window.innerWidth - boxWidth) / 2,
+    y: (window.innerHeight - boxHeight) / 2,
   });
 
   const handleClick = (e) => {
@@ -51,14 +58,18 @@ export default function Slection({ contextMenus, tranboxSetting, transApis }) {
         return;
       }
 
+      const { pageX, pageY } = isMobile ? e.changedTouches[0] : e;
       !tranboxSetting.hideTranBtn && setShowBtn(true);
       // setPosition({ x: e.clientX, y: e.clientY });
-      setPosition({ x: e.pageX, y: e.pageY });
+      setPosition({ x: pageX, y: pageY });
     }
 
-    window.addEventListener("mouseup", handleMouseup);
+    window.addEventListener(isMobile ? "touchend" : "mouseup", handleMouseup);
     return () => {
-      window.removeEventListener("mouseup", handleMouseup);
+      window.removeEventListener(
+        isMobile ? "touchend" : "mouseup",
+        handleMouseup
+      );
     };
   }, [tranboxSetting.hideTranBtn]);