102 lines
3.7 KiB
Markdown
102 lines
3.7 KiB
Markdown
# 画布图片选中状态锁定优化经验
|
||
|
||
## 问题描述
|
||
|
||
当用户在画布中选中一张图片并在对话框中编辑修改提示词时，如果此时有其他之前生成失败的图片刚好生成完成并自动插入画布，选中的图片会被意外切换为刚插入的图片。这导致用户可能在发送修改提示词时，实际修改的是另一张图片。
|
||
|
||
## 根本原因
|
||
|
||
在 `insertImageFromUrl` 函数中，图片插入后会自动选中新插入的图片：
|
||
|
||
```typescript
|
||
const newElement = board.children[childrenCountBefore];
|
||
if (newElement) {
|
||
clearSelectedElement(board);
|
||
addSelectedElement(board, newElement);
|
||
}
|
||
```
|
||
|
||
这种行为在自动插入场景（如 AI 生成完成后自动插入）会覆盖用户当前的选中状态。
|
||
|
||
## 解决方案
|
||
|
||
### 方案设计
|
||
|
||
在 `insertImageFromUrl` 函数中添加 `skipSelect` 参数，控制插入后是否自动选中新图片：
|
||
|
||
| 参数 | 类型 | 默认值 | 说明 |
|
||
|------|------|--------|------|
|
||
| `skipSelect` | `boolean` | `false` | 如果为 `true`，插入图片后不自动选中，避免覆盖用户当前选中状态 |
|
||
|
||
### 修改的文件
|
||
|
||
1. **`packages/drawnix/src/data/image.ts`**
|
||
- 在 `insertImageFromUrl` 函数中添加 `skipSelect` 参数
|
||
- 插入图片后，仅当 `skipSelect` 为 `false` 时才选中新图片
|
||
|
||
2. **自动插入场景调用处**（传入 `skipSelect: true`）：
|
||
- `packages/drawnix/src/services/canvas-operations/canvas-insertion.ts` - 批量插入场景
|
||
- `packages/drawnix/src/mcp/tools/canvas-insertion.ts` - MCP 批量插入场景
|
||
- `packages/drawnix/src/hooks/useWorkflowSubmission.ts` - 工作流自动插入场景
|
||
- `packages/drawnix/src/services/sw-capabilities/handler.ts` - Service Worker 自动插入场景
|
||
|
||
### 保持原有行为的场景
|
||
|
||
以下用户主动操作场景保持原有行为（插入后选中新图片）：
|
||
|
||
- 剪贴板粘贴图片
|
||
- 用户从工具栏插入图片
|
||
- 用户从媒体库选择图片
|
||
- 用户在媒体预览里点击「插入到画布」
|
||
- 用户从任务队列点击插入按钮
|
||
|
||
## 架构变更说明
|
||
|
||
### 变更类型
|
||
|
||
**非破坏性变更** - 添加新参数，默认行为保持不变
|
||
|
||
### 影响范围
|
||
|
||
- **新增**：`insertImageFromUrl` 函数新增 `skipSelect` 参数
|
||
- **修改**：4 处自动插入场景调用点传入 `skipSelect: true`
|
||
- **兼容**：所有现有调用不受影响（默认选中新图片）
|
||
|
||
### 设计原则
|
||
|
||
1. **最小侵入性**：仅添加一个可选参数，不修改现有函数签名
|
||
2. **向后兼容**：默认行为保持不变，不影响现有功能
|
||
3. **场景分离**：区分自动插入和用户主动操作场景，分别处理
|
||
|
||
## 测试验证
|
||
|
||
### 测试场景
|
||
|
||
1. **选中图片后自动插入不应切换选中**：
|
||
- 选中画布中的图片 A
|
||
- 在对话框中编辑提示词
|
||
- 触发另一张图片 B 的自动插入
|
||
- 预期：图片 A 保持选中状态
|
||
|
||
2. **用户主动插入仍应选中新图片**：
|
||
- 从媒体库选择图片插入
|
||
- 预期：新插入的图片被选中
|
||
|
||
3. **批量插入不应影响选中状态**：
|
||
- 选中图片 A
|
||
- 触发批量图片生成
|
||
- 预期：图片 A 保持选中状态
|
||
|
||
## 经验总结
|
||
|
||
1. **状态隔离原则**：自动操作不应干扰用户当前的交互状态
|
||
2. **参数化控制**：通过可选参数提供灵活的行为控制
|
||
3. **场景区分**：区分自动操作和用户主动操作，提供不同的默认行为
|
||
4. **最小变更**：在解决问题的同时，尽量减少对现有代码的影响
|
||
|
||
## 相关文件
|
||
|
||
- `packages/drawnix/src/data/image.ts` - 核心图片插入逻辑
|
||
- `packages/drawnix/src/services/canvas-operations/canvas-insertion.ts` - 批量插入服务
|
||
- `packages/drawnix/src/hooks/useWorkflowSubmission.ts` - 工作流提交钩子
|