feat: tranbox hover trigger

src/config/i18n.js

@@ -827,4 +827,20 @@ export const I18N = {
     zh: `获取小牛翻译密钥`,
     en: `Get NiuTrans APIKey`,
   },
+  trigger_mode: {
+    zh: `触发方式`,
+    en: `Trigger Mode`,
+  },
+  trigger_click: {
+    zh: `点击触发`,
+    en: `Click Trigger`,
+  },
+  trigger_hover: {
+    zh: `鼠标悬停触发`,
+    en: `Hover Trigger`,
+  },
+  trigger_select: {
+    zh: `选中触发`,
+    en: `Select Trigger`,
+  },
 };

src/config/index.js

@@ -407,6 +407,14 @@ export const DEFAULT_INPUT_RULE = {
 };
 
 // 划词翻译
+export const OPT_TRANBOX_TRIGGER_CLICK = "click";
+export const OPT_TRANBOX_TRIGGER_HOVER = "hover";
+export const OPT_TRANBOX_TRIGGER_SELECT = "select";
+export const OPT_TRANBOX_TRIGGER_ALL = [
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_HOVER,
+  OPT_TRANBOX_TRIGGER_SELECT,
+];
 export const DEFAULT_TRANBOX_SHORTCUT = ["AltLeft", "KeyS"];
 export const DEFAULT_TRANBOX_SETTING = {
   transOpen: true,
@@ -418,8 +426,9 @@ export const DEFAULT_TRANBOX_SETTING = {
   btnOffsetX: 10,
   btnOffsetY: 10,
   hideTranBtn: false, // 是否隐藏翻译按钮
-  hideClickAway: false, // 默认是否点击外部关闭弹窗
+  hideClickAway: false, // 是否点击外部关闭弹窗
-  simpleStyle: false, // 默认是否简洁界面
+  simpleStyle: false, // 是否简洁界面
+  triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式
 };
 
 // 订阅列表

src/views/Options/Rules.js

@@ -366,7 +366,7 @@ function RuleFields({ rule, rules, setShow, setKeyword }) {
                     fullWidth
                     name="transTiming"
                     value={transTiming}
-                    label={i18n("translate_timing")}
+                    label={i18n("trigger_mode")}
                     disabled={disabled}
                     onChange={handleChange}
                   >

src/views/Options/Tranbox.js

@@ -3,7 +3,13 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import { useI18n } from "../../hooks/I18n";
-import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_ALL,
+} from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -52,6 +58,7 @@ export default function Tranbox() {
     hideTranBtn = false,
     hideClickAway = false,
     simpleStyle = false,
+    triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
   } = tranboxSetting;
 
   return (
@@ -186,6 +193,21 @@ export default function Tranbox() {
           <MenuItem value={true}>{i18n("enable")}</MenuItem>
         </TextField>
 
+        <TextField
+          select
+          size="small"
+          name="triggerMode"
+          value={triggerMode}
+          label={i18n("trigger_mode")}
+          onChange={handleChange}
+        >
+          {OPT_TRANBOX_TRIGGER_ALL.map((item) => (
+            <MenuItem key={item} value={item}>
+              {i18n(`trigger_${item}`)}
+            </MenuItem>
+          ))}
+        </TextField>
+
         {!isExt && (
           <ShortcutInput
             value={tranboxShortcut}

src/views/Selection/TranBtn.js

@@ -1,7 +1,12 @@
 import { isMobile } from "../../libs/mobile";
 import { limitNumber } from "../../libs/utils";
 
-export default function TranBtn({ onClick, position, tranboxSetting }) {
+export default function TranBtn({
+  onTrigger,
+  btnEvent,
+  position,
+  tranboxSetting,
+}) {
   const left = limitNumber(
     position.x + tranboxSetting.btnOffsetX,
     0,
@@ -13,14 +18,6 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
     window.innerHeight - 32
   );
 
-  const touchProps = isMobile
-    ? {
-        onTouchEnd: onClick,
-      }
-    : {
-        onMouseUp: onClick,
-      };
-
   return (
     <div
       style={{
@@ -31,7 +28,7 @@ export default function TranBtn({ onClick, position, tranboxSetting }) {
         top,
         zIndex: 2147483647,
       }}
-      {...touchProps}
+      {...{ [btnEvent]: onTrigger }}
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"

src/views/Selection/index.js

@@ -1,10 +1,16 @@
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
 import { sleep, limitNumber } from "../../libs/utils";
 import { isGm, isExt } from "../../libs/client";
-import { MSG_OPEN_TRANBOX, DEFAULT_TRANBOX_SHORTCUT } from "../../config";
+import {
+  MSG_OPEN_TRANBOX,
+  DEFAULT_TRANBOX_SHORTCUT,
+  OPT_TRANBOX_TRIGGER_CLICK,
+  OPT_TRANBOX_TRIGGER_HOVER,
+  OPT_TRANBOX_TRIGGER_SELECT,
+} from "../../config";
 import { isMobile } from "../../libs/mobile";
 import { kissLog } from "../../libs/log";
 
@@ -13,12 +19,20 @@ export default function Slection({
   tranboxSetting,
   transApis,
 }) {
+  const {
+    hideTranBtn = false,
+    simpleStyle: initSimpleStyle = false,
+    hideClickAway: initHideClickAway = false,
+    tranboxShortcut = DEFAULT_TRANBOX_SHORTCUT,
+    triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
+  } = tranboxSetting;
+
   const boxWidth =
-    isMobile || tranboxSetting.simpleStyle
+    isMobile || initSimpleStyle
       ? 300
       : limitNumber(window.innerWidth, 300, 600);
   const boxHeight =
-    isMobile || tranboxSetting.simpleStyle
+    isMobile || initSimpleStyle
       ? 200
       : limitNumber(window.innerHeight, 200, 400);
 
@@ -35,18 +49,17 @@ export default function Slection({
     x: (window.innerWidth - boxWidth) / 2,
     y: (window.innerHeight - boxHeight) / 2,
   });
-  const [simpleStyle, setSimpleStyle] = useState(!!tranboxSetting.simpleStyle);
+  const [simpleStyle, setSimpleStyle] = useState(initSimpleStyle);
-  const [hideClickAway, setHideClickAway] = useState(
+  const [hideClickAway, setHideClickAway] = useState(initHideClickAway);
-    !!tranboxSetting.hideClickAway
-  );
-
-  const handleClick = (e) => {
-    e.stopPropagation();
 
+  const handleTrigger = useCallback(
+    (text) => {
       setShowBtn(false);
-    setText(selectedText);
+      setText(text || selectedText);
       setShowBox(true);
-  };
+    },
+    [selectedText]
+  );
 
   const handleTranbox = useCallback(() => {
     setShowBtn(false);
@@ -62,10 +75,19 @@ export default function Slection({
     setShowBox(true);
   }, []);
 
+  const btnEvent = useMemo(() => {
+    if (isMobile) {
+      return "onTouchEnd";
+    } else if (triggerMode === OPT_TRANBOX_TRIGGER_HOVER) {
+      return "onMouseOver";
+    }
+    return "onMouseUp";
+  }, [triggerMode]);
+
   useEffect(() => {
     async function handleMouseup(e) {
       e.stopPropagation();
-      await sleep(100);
+      await sleep(200);
 
       const selectedText = window.getSelection()?.toString()?.trim() || "";
       setSelText(selectedText);
@@ -74,8 +96,13 @@ export default function Slection({
         return;
       }
 
+      if (triggerMode === OPT_TRANBOX_TRIGGER_SELECT) {
+        handleTrigger(selectedText);
+        return;
+      }
+
       const { clientX, clientY } = isMobile ? e.changedTouches[0] : e;
-      !tranboxSetting.hideTranBtn && setShowBtn(true);
+      setShowBtn(!hideTranBtn);
       // setPosition({ x: e.clientX, y: e.clientY });
       setPosition({ x: clientX, y: clientY });
     }
@@ -89,22 +116,17 @@ export default function Slection({
         handleMouseup
       );
     };
-  }, [tranboxSetting.hideTranBtn]);
+  }, [hideTranBtn, triggerMode, handleTrigger]);
 
   useEffect(() => {
     if (isExt) {
       return;
     }
-
+    const clearShortcut = shortcutRegister(tranboxShortcut, handleTranbox);
-    const clearShortcut = shortcutRegister(
-      tranboxSetting.tranboxShortcut || DEFAULT_TRANBOX_SHORTCUT,
-      handleTranbox
-    );
-
     return () => {
       clearShortcut();
     };
-  }, [tranboxSetting.tranboxShortcut, handleTranbox]);
+  }, [tranboxShortcut, handleTranbox]);
 
   useEffect(() => {
     window.addEventListener(MSG_OPEN_TRANBOX, handleTranbox);
@@ -178,7 +200,11 @@ export default function Slection({
         <TranBtn
           position={position}
           tranboxSetting={tranboxSetting}
-          onClick={handleClick}
+          btnEvent={btnEvent}
+          onTrigger={(e) => {
+            e.stopPropagation();
+            handleTrigger();
+          }}
         />
       )}
     </>