拆分图片画布舞台控制层

新增 ImageCanvasStageControllerModel 承载舞台派生状态和右键菜单模型

新增 useImageCanvasStageController 收口清空焦点和右键菜单处理

精简 ImageCanvasEditorView 的舞台控制胶水

更新图片画布拆分计划和 TRACKING 验证记录
This commit is contained in:
2026-06-17 13:39:48 +08:00
parent 015716945e
commit 1c92db19c1
7 changed files with 638 additions and 124 deletions

View File

@@ -205,16 +205,28 @@
- 承载素材库与画布之间的桥接工作流:删除素材时清理关联画布图层、素材加入画布创建图层、素材 pointer 拖入画布 / 文件夹、画布区域 drag over / leave / drop 分流,以及拖拽文件上传到画布的参数组装。
- 主视图继续掌握素材库事实、上传文件读取、工程资源持久化、历史捕获触发时机和实际 API 副作用;该 hook 只负责把已有素材 / 文件 drop 转成画布动作,不反向读取路由、登录态或项目数据。
- 该 hook 用独立单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态;原有 pointer drag 和 canvas drop hook 单测继续保留,主视图 DOM 测试继续覆盖真实素材库拖入画布路径。
- 本阶段主视图从 1133 行降至 1086 行;下一步可继续抽 `useImageCanvasStageController` 或顶栏视图,但应优先选择能收敛舞台派生状态和右键菜单胶水的深边界。
- 本阶段主视图从 1133 行降至 1086 行;下一步可继续抽顶栏视图或更高内聚的舞台控制层,但应优先选择能收敛真实状态规则的深边界。
## 第二十五阶段模块
- `ImageCanvasStageControllerModel.ts`
- 承载舞台派生状态和右键菜单模型:选中图层、生成对象锚点、生成输入框位置、选中浮动工具栏位置、图片菜单图层、右键菜单目标图层,以及显示 / 解锁菜单文案判断。
- 该模型复用既有图层命令模型与浮层定位模型,不重新实现坐标公式,避免拆分后出现第二套右键目标和浮层定位规则。
- 新增单测覆盖生成锚定、选中工具栏位置、右键目标集合、显示 / 解锁判断和菜单位置限制。
- `useImageCanvasStageController.ts`
- 承载舞台控制胶水:清空画布焦点、空白画布右键菜单和图层右键菜单处理。
- 主视图继续保留工具切换、上传 / 生成入口、图层命令、项目持久化和舞台 pointer 状态机,避免把跨工作流动作塞进单个 hook。
- 本阶段主视图从 1086 行降至 993 行;后续若继续拆分,应优先考虑顶栏 / 项目标题区域或把侧栏图层右键入口并入同一舞台菜单控制层。
## 后续阶段
- 后续可继续选择更高内聚的交互 workflow 或持久化边界,不再把生成链路继续拆成浅层 wrapper。
- 右键菜单定位、工程资源持久化、舞台派生状态和历史捕获仍在主视图编排,拆分前需要先确认不会破坏多生成对象同时存在、完成时读取最新占位框、素材拖拽上传位置和角色动画优先传 `objectKey` 的历史保护规则。
- 工程资源持久化、工具切换和历史捕获仍在主视图编排,拆分前需要先确认不会破坏多生成对象同时存在、完成时读取最新占位框、素材拖拽上传位置和角色动画优先传 `objectKey` 的历史保护规则。
## 验证计划
- `npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/useImageCanvasStageInteractions.test.tsx src/components/image-editor/useImageCanvasViewportControls.test.tsx src/components/image-editor/ImageCanvasInteractionModel.test.ts src/components/image-editor/useCanvasHistory.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`
- `npm run test -- src/components/image-editor/ImageCanvasStageControllerModel.test.ts src/components/image-editor/useImageCanvasStageController.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasUploadWorkflow.test.tsx src/routing/appPageRoutes.test.ts`
- `npm run typecheck`
- `npm run check:encoding`
- `git diff --check`