diff --git a/src/config/i18n.js b/src/config/i18n.js index 6163727..1d8c4f8 100644 --- a/src/config/i18n.js +++ b/src/config/i18n.js @@ -861,4 +861,8 @@ export const I18N = { zh: `打开设置`, en: `Open Setting`, }, + follow_selection: { + zh: `翻译框跟随选中文本`, + en: `Transbox Follow Selection`, + }, }; diff --git a/src/config/index.js b/src/config/index.js index fc4a312..1001af6 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -434,6 +434,7 @@ export const DEFAULT_TRANBOX_SETTING = { hideTranBtn: false, // 是否隐藏翻译按钮 hideClickAway: false, // 是否点击外部关闭弹窗 simpleStyle: false, // 是否简洁界面 + followSelection: false, // 翻译框是否跟随选中文本 triggerMode: OPT_TRANBOX_TRIGGER_CLICK, // 触发翻译方式 extStyles: "", // 附加样式 }; diff --git a/src/views/Options/Tranbox.js b/src/views/Options/Tranbox.js index dacdf0d..f627b40 100644 --- a/src/views/Options/Tranbox.js +++ b/src/views/Options/Tranbox.js @@ -58,6 +58,7 @@ export default function Tranbox() { hideTranBtn = false, hideClickAway = false, simpleStyle = false, + followSelection = false, triggerMode = OPT_TRANBOX_TRIGGER_CLICK, extStyles = "", } = tranboxSetting; @@ -194,6 +195,18 @@ export default function Tranbox() { {i18n("enable")} + + {i18n("disable")} + {i18n("enable")} + + { - onChangeSize && onChangeSize(size); - }, [size, onChangeSize]); - - useEffect(() => { - onChangePosition && onChangePosition(position); - }, [position, onChangePosition]); - return ( {hideClickAway ? ( + + ) : ( + + )} + + { + setFollowSelection((pre) => !pre); + }} + > + {followSelection ? ( ) : ( @@ -243,14 +259,18 @@ export default function TranBox({ setSimpleStyle, hideClickAway, setHideClickAway, + followSelection, + setFollowSelection, extStyles, }) { return ( } - onChangeSize={setBoxSize} - onChangePosition={setBoxPosition} onClick={(e) => e.stopPropagation()} > { @@ -68,16 +70,25 @@ export default function Slection({ const handleTranbox = useCallback(() => { setShowBtn(false); - const selectedText = window.getSelection()?.toString()?.trim() || ""; + const selection = window.getSelection(); + const selectedText = selection?.toString()?.trim() || ""; if (!selectedText) { setShowBox((pre) => !pre); return; } + const rect = selection?.getRangeAt(0)?.getBoundingClientRect(); + if (rect && followSelection) { + setBoxPosition({ + x: limitNumber(rect.right, 0, window.innerWidth - 300), + y: limitNumber(rect.bottom, 0, window.innerHeight - 200), + }); + } + setSelText(selectedText); setText(selectedText); setShowBox(true); - }, []); + }, [followSelection]); const btnEvent = useMemo(() => { if (isMobile) { @@ -93,13 +104,22 @@ export default function Slection({ e.stopPropagation(); await sleep(200); - const selectedText = window.getSelection()?.toString()?.trim() || ""; + const selection = window.getSelection(); + const selectedText = selection?.toString()?.trim() || ""; setSelText(selectedText); if (!selectedText) { setShowBtn(false); return; } + const rect = selection?.getRangeAt(0)?.getBoundingClientRect(); + if (rect && followSelection) { + setBoxPosition({ + x: limitNumber(rect.right, 0, window.innerWidth - 300), + y: limitNumber(rect.bottom, 0, window.innerHeight - 200), + }); + } + if (triggerMode === OPT_TRANBOX_TRIGGER_SELECT) { handleTrigger(selectedText); return; @@ -119,7 +139,7 @@ export default function Slection({ handleMouseup ); }; - }, [hideTranBtn, triggerMode, handleTrigger]); + }, [hideTranBtn, triggerMode, followSelection, handleTrigger]); useEffect(() => { if (isExt) { @@ -196,6 +216,8 @@ export default function Slection({ setSimpleStyle={setSimpleStyle} hideClickAway={hideClickAway} setHideClickAway={setHideClickAway} + followSelection={followSelection} + setFollowSelection={setFollowSelection} extStyles={extStyles} /> )}