使用触摸屏选中文本时翻译按钮与Edge微型菜单冲突，且对自动隐藏适配不佳

hcfyapp / crx-selection-translate

一站式划词 / 截图 / 网页全文 / 音视频 AI 翻译扩展。

https://hcfy.ai

4.08k stars 540 forks source link

Open DrPeaboss opened 4 months ago

DrPeaboss commented 4 months ago

划词翻译按钮应该在选中文本状态下显示，直到取消选中文本或点击按钮，参考鼠标操作时的行为。

如果关闭Edge的微型菜单，但在启用自动隐藏的情况下，首次选中文本时会弹出划词翻译按钮，但修改选中文本过程中按钮消失，点击屏幕取消选中文本，此时翻译按钮又出现。

如果开启Edge的微型菜单，则选中文本后始终无法弹出翻译按钮。

关闭翻译按钮的自动隐藏，关闭Edge的微型菜单。

lmk123 commented 4 months ago

我开发的时候也考虑过触摸屏，用技术的角度讲，我监听的是 pointer event 而不是 mouse event，然后用开发者工具模拟手机试过，是没有问题的。

不过我没有真实的触摸屏设备，所以我感觉得等我买个 Surface 才能适配了 :joy:

DrPeaboss commented 4 months ago

除了Edge的微型菜单会导致翻译按钮不显示，我发现问题出在了自动隐藏这个选项。

在Edge长按选中单词（或者FireFox双击屏幕），然后拖动两侧的小东西修改选中的文本，这个过程如果时间超过了两秒翻译按钮就自己隐藏了。

合理的逻辑应该是像Edge的微型菜单一样，在拖动小东西时隐藏菜单，在结束后重新显示菜单。

目前关闭自动隐藏可以暂时解决在Edge（没有开启微型菜单）和FireFox的文本选择问题。

lmk123 commented 4 months ago

这个过程如果时间超过了两秒翻译按钮就自己隐藏了

确实是会这样，也许我可以做个改进，在拖动选中文本两侧的时候延长自动隐藏的时间，但是由于这一行为仅在触摸屏里才有，我得研究一下怎么判断用户是否在拖动两侧

目前关闭自动隐藏可以暂时解决在Edge（没有开启微型菜单）和FireFox的文本选择问题。

那也就是说其实是能正常使用的

DrPeaboss commented 4 months ago

不过Edge的微型菜单还是冲突的，开了那个就弹不出翻译按钮了，这个应该是目前剩下的主要问题了。

剩下的就是一些小细节了，比如拖动条的时候按钮的位置变化这种，可以参考微型菜单，不知道能不能集成到微型菜单里面。如果不行的话对于触屏弹出的翻译按钮，可以适当大一点点，这样不容易点歪。