feat(M2.2): 获取选中文本坐标 (v0.1.2)

- selection.js 添加 getSelectionCoords() 函数
- 返回 {x, y, width, height, boundingX, ...}
- 支持单行和多行文本选择
- 坐标相对于视口
This commit is contained in:
李岩岩 2026-02-10 10:27:56 +08:00
parent d5639d2399
commit b789e5255c
6 changed files with 70 additions and 7 deletions

View File

@ -7,7 +7,7 @@
## 版本速查
### 当前版本
`0.1.1` → 下一目标 `0.1.2` ([M2.2](./M2.md))
`0.1.2` → 下一目标 `0.1.3` ([M2.3](./M2.md))
### 模块版本范围

View File

@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
## 当前状态
**当前版本**: `0.1.1`
**当前进度**: 6/97 (6%)
**下一任务**: [M2.2 获取选中文本坐标](./M2.md#m22-获取选中文本坐标--目标版本-0112)
**当前版本**: `0.1.2`
**当前进度**: 7/97 (7%)
**下一任务**: [M2.3 沙拉图标组件(基础)](./M2.md#m23-沙拉图标组件基础--目标版本-0113)
---

View File

@ -30,7 +30,7 @@
| 任务 | 版本 | 描述 | 状态 | 日期 |
|------|------|------|------|------|
| M2.1 | 0.1.1 | 文本选择检测 | ✅ | 2026-02-09 |
| M2.2 | 0.1.2 | 获取选中文本坐标 | ⬜ | - |
| M2.2 | 0.1.2 | 获取选中文本坐标 | ✅ | 2026-02-09 |
| M2.3 | 0.1.3 | 沙拉图标组件 | ⬜ | - |
| M2.4 | 0.1.4 | 图标定位显示 | ⬜ | - |
| M2.5 | 0.1.5 | 图标点击事件 | ⬜ | - |

View File

@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "沙拉查词",
"version": "0.1.1",
"version": "0.1.2",
"description": "聚合词典划词翻译",
"permissions": [
"storage",

View File

@ -1,6 +1,6 @@
{
"name": "salad-dict",
"version": "0.1.1",
"version": "0.1.2",
"description": "聚合词典划词翻译",
"private": true,
"type": "module",

View File

@ -14,6 +14,58 @@ export function getSelectedText() {
return selection ? selection.toString().trim() : '';
}
/**
* 获取选中文本的坐标信息
* @returns {Object|null} {x, y, width, height, left, top, right, bottom} null
*/
export function getSelectionCoords() {
const selection = window.getSelection();
if (!selection || selection.rangeCount === 0) {
return null;
}
const range = selection.getRangeAt(0);
const rects = range.getClientRects();
if (rects.length === 0) {
return null;
}
// 获取第一个矩形(单行)或整个选区的矩形(多行取首行)
const firstRect = rects[0];
// 计算整个选区的包围矩形
let minX = firstRect.left;
let minY = firstRect.top;
let maxX = firstRect.right;
let maxY = firstRect.bottom;
for (const rect of rects) {
minX = Math.min(minX, rect.left);
minY = Math.min(minY, rect.top);
maxX = Math.max(maxX, rect.right);
maxY = Math.max(maxY, rect.bottom);
}
return {
// 首行位置(用于图标定位)
x: firstRect.left,
y: firstRect.top,
width: firstRect.width,
height: firstRect.height,
left: firstRect.left,
top: firstRect.top,
right: firstRect.right,
bottom: firstRect.bottom,
// 整个选区的包围矩形
boundingX: minX,
boundingY: minY,
boundingWidth: maxX - minX,
boundingHeight: maxY - minY
};
}
/**
* 检查是否有有效文本被选中
* @returns {boolean}
@ -33,8 +85,19 @@ function handleMouseUp(event) {
const selectedText = getSelectedText();
if (selectedText.length > 0) {
const coords = getSelectionCoords();
logger.info('Text selected:', selectedText);
console.log('[SaladDict] Selected text:', selectedText);
if (coords) {
console.log('[SaladDict] Selection coords:', {
x: coords.x,
y: coords.y,
width: coords.width,
height: coords.height
});
}
}
}, 10);
}