diff --git a/TRACKING.md b/TRACKING.md index 366d27a80..9d577ebd0 100644 --- a/TRACKING.md +++ b/TRACKING.md @@ -144,6 +144,7 @@ - 2026-06-17 前端拆分第十九执行批次：新增 `useImageCanvasCanvasDropWorkflow`，把画布区域 drag over / drag leave / drop 分流从主视图抽出，覆盖素材库图片拖入画布、本地文件拖入画布、无关拖拽不拦截、默认文件夹选择和画布遮罩清理；主视图继续注入素材建层、文件上传、drop 点换算和素材移动高亮清理。新增 hook 单测覆盖拖拽入画布细节，主视图从 1452 行降至 1405 行。验证命令：`npm run test -- 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/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 登录态刷新后素材 / 画布 / 小地图和底部工具栏可见，真实鼠标拖拽素材库图片到画布时出现 `添加到画布` 遮罩，松手后画布图层数量从 4 增至 5；`画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；抓手工具可切回选择工具，登录后控制台无前端 error。 - 2026-06-17 前端拆分第二十执行批次：新增 `ImageCanvasMetadataModalView`，把图片信息弹窗从主视图抽出，承载图片类型、生成输入、参考图、模型、分辨率、Provider、Task 和 Object 信息渲染；主视图只保留 `metadataLayer` 状态和关闭回调。同步修复未登录进入编辑器时项目 / 素材接口抢跑 401、`重置画布视图` 点击事件误传给适合视图函数的问题。新增组件单测覆盖生成图 metadata、上传图 fallback 和关闭回调，新增 hook / 主视图测试覆盖未登录不请求受保护素材 / 工程数据和重置按钮回归；主视图从 1405 行降至 1337 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetLibrary.test.tsx src/components/image-editor/useImageCanvasProjectPersistence.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/image-editor/ImageCanvasMetadataModalView.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 清空会话后直接弹出 `账号入口`，且未登录状态下没有发起 `/api/editor/*` 请求；登录临时开发账号后 `重置画布视图` 无控制台错误，`画布背景设置` 保持 Lovart 式白色浮层，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)`，上传素材可加入画布，右上角图片信息按钮可打开不透明白底元数据弹窗，关闭后 `AI画布工具栏` 仍可见。 - 2026-06-17 前端拆分第二十一执行批次：新增 `useImageCanvasKeyboardShortcuts`，把 Ctrl / Cmd + Z 撤销、Ctrl / Cmd + Shift + Z 重做、Shift 状态、Backspace / Delete 删除、Escape 关闭临时面板和 Space 临时抓手从主视图抽出；主视图继续注入图层删除、生成对话框、快速编辑和 chrome 面板 setter。新增 hook 单测覆盖输入框忽略快捷键、删除选中图层、删除生成占位、Escape 保留生成中面板、Space 和 Shift；主视图从 1337 行降至 1250 行。验证命令：`npm run test -- 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`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10003/editor/canvas` 未登录直接弹出 `账号入口` 且未抢跑 `/api/editor/*`，登录后 `/api/editor/assets/library` 和 `/api/editor/projects/recent` 为 200，`AI画布工具栏` 与 `画布面板入口` 可见，viewport 背景为 `rgb(248, 250, 252)` 且 `background-image: none`；按住 Space 从 `文字工具` 临时切到 `抓手工具`，松开恢复 `文字工具`；`画布背景设置` 点击 `暖灰` 后背景变为 `rgb(243, 240, 234)`；点击 `生成工具` 后 `Image Generator` 占位框、`生成图片` 对话框和 `AI画布工具栏` 同时可见，登录后控制台无前端 error。 +- 2026-06-18 生成中占位图删除确认：画布生成占位框增加删除按钮，删除 `generating` 状态占位图时统一弹出 `删除生成中的占位图` 二次确认，并提示 `已消耗的泥点不会返还`；空闲占位仍直接删除。键盘 Backspace / Delete 删除生成占位也改走同一请求入口，避免绕过提示；确认删除后清理选中态、右键菜单并切回选择工具，已删除的生成任务即使后续返回结果也不会落图。验证命令：`npm run test -- src/components/image-editor/ImageCanvasWorldView.test.tsx src/components/image-editor/useImageCanvasKeyboardShortcuts.test.tsx src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：本地 Vite + Chrome CDP 打开 `/editor/canvas`，点击 `生成图片` 创建生成中占位，删除按钮弹出确认框，取消后占位保留，确认后占位移除且提示包含泥点不返还。 - 2026-06-17 前端拆分第二十二执行批次：新增 `useImageCanvasAssetPointerDragBridge`，把素材卡片 pointer 拖拽到画布 / 文件夹的全局监听、拖拽激活、画布 drop 提示、文件夹高亮、移动素材、加入画布和点击抑制从主视图抽出；主视图继续负责素材库事实、画布建层、历史和工程资源持久化。同步恢复 `账号入口` 认证弹窗 portal 渲染，避免全屏画布遮住登录弹窗；`画布背景设置` 调整为独立白色浮层，包含当前色、色域、色相、自定义颜色、预设网格、HEX 输入和恢复默认。验证命令：`npm run test -- 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 typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录打开直接显示 `账号入口`；登录临时开发账号后 `画布背景设置` 显示当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`；上传图片进入 `项目素材`，真实 pointer 拖拽素材到画布后图层数从 0 到 1 且 `AI画布工具栏` 保持可见；新建 `SmokeFolder` 后真实 pointer 拖拽素材到文件夹，`项目素材` 变 0、`SmokeFolder` 变 1，素材执行移动而非拷贝。控制台仅有未登录 refresh 401，登录后编辑器 API 均为 200。 - 2026-06-17 前端拆分第二十三执行批次：新增 `ImageCanvasOverlayModel`，把生成输入框锚定、图标素材生成面板宽度、选中图片工具栏边界、快速编辑面板和角色动画面板定位从主视图抽出为纯模型；主视图继续保留生成 / quick edit / 角色动画状态机和舞台编排。新增模型单测覆盖锚定优先级、生成中隐藏、icon 宽度、工具栏 clamp、quick edit / 角色动画边界和生成 dialog 模式识别；主视图从 1182 行降至 1133 行。验证命令：`npm run test -- src/components/image-editor/ImageCanvasOverlayModel.test.ts src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run test -- src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasEditorChrome.test.tsx src/components/image-editor/useImageCanvasGenerationWorkflow.test.tsx`、`npm run test -- 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/useImageCanvasGenerationWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx src/components/auth/PlatformAuthModalShell.test.tsx src/components/auth/AuthGate.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 未登录打开显示 `账号入口`，登录后 `画布背景设置` 点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，点击 `生成工具` 后 `Image Generator`、`生成图片` 对话框和 `AI画布工具栏` 均可见；素材库已有素材真实 pointer 拖入画布后图层数从 0 到 1，工具栏保持可见，截图留存于 `output/playwright/editor-overlay-model-regression-20260617.png`。 - 2026-06-17 前端拆分第二十四执行批次：新增 `useImageCanvasAssetCanvasBridge`，把删除素材清理画布图层、素材加入画布、素材 pointer 拖入画布 / 文件夹、画布 drag/drop 分流和文件拖入画布参数组装从主视图抽成素材到画布桥接 hook；主视图继续保留素材库事实、上传读取、工程资源持久化和历史触发。新增 hook 单测覆盖素材建层、pointer drop 入画布和删除素材清理关联图层 / 选中态；主视图从 1133 行降至 1086 行。验证命令：`npm run test -- src/components/image-editor/useImageCanvasAssetCanvasBridge.test.tsx src/components/image-editor/useImageCanvasAssetPointerDragBridge.test.tsx src/components/image-editor/useImageCanvasCanvasDropWorkflow.test.tsx src/components/image-editor/ImageCanvasEditorView.test.tsx`、`npm run typecheck`、`npm run check:encoding`、`git diff --check`；浏览器回归：`http://127.0.0.1:10007/editor/canvas` 清空会话后未登录直接显示 `账号入口`；登录临时开发账号后 `画布背景设置` 是完整设置面板，包含当前色、色域、色相、自定义颜色、预设、HEX 和恢复默认，点击 `暖灰` 后 viewport 背景为 `rgb(243, 240, 234)` 且 `background-image: none`，HEX 输入 `#ffffff` 后变为白色，按 Escape 关闭面板；登录后上传图片请求 `/api/editor/assets` 返回 200，素材库出现上传素材，`AI画布工具栏` 保持可见。 diff --git a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx index 2871ce2a0..5432b7a23 100644 --- a/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorGenerationIntegration.test.tsx @@ -497,6 +497,68 @@ describe('ImageCanvasEditorView generation integration', () => { ); }); + it('confirms before deleting a generating placeholder because mud points are not refunded', async () => { + let resolveGeneration!: (value: unknown) => void; + generateEditorImageMock.mockReturnValueOnce( + new Promise((resolve) => { + resolveGeneration = resolve; + }), + ); + render(); + + await waitFor(() => { + expect(loadOrCreateRecentEditorProjectMock).toHaveBeenCalled(); + }); + + fireEvent.click(screen.getByRole('button', { name: '生成图片' })); + fireEvent.change(screen.getByLabelText('生成提示词'), { + target: { value: '准备删除的生成中图片' }, + }); + fireEvent.click(screen.getByRole('button', { name: '生成' })); + + const frame = screen.getByLabelText('图像生成占位图'); + expect(frame.className).toContain( + 'image-canvas-editor__generation-frame--generating', + ); + + fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' }); + + const confirmDialog = screen.getByRole('dialog', { + name: '删除生成中的占位图', + }); + expect( + within(confirmDialog).getByText( + '删除后会停止在画布中显示这个生成任务，已消耗的泥点不会返还。', + ), + ).toBeTruthy(); + expect(screen.getByLabelText('图像生成占位图')).toBeTruthy(); + + fireEvent.click(within(confirmDialog).getByRole('button', { name: '取消' })); + expect(screen.queryByRole('dialog', { name: '删除生成中的占位图' })).toBeNull(); + expect(screen.getByLabelText('图像生成占位图')).toBeTruthy(); + + fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' }); + fireEvent.click(screen.getByRole('button', { name: '确认删除' })); + + expect(screen.queryByLabelText('图像生成占位图')).toBeNull(); + + await act(async () => { + resolveGeneration({ + imageSrc: 'data:image/png;base64,ZGVsZXRlZC1wbGFjZWhvbGRlcg==', + width: 1024, + height: 1024, + sourceType: 'generated', + prompt: '准备删除的生成中图片', + actualPrompt: '准备删除的生成中图片', + model: 'gpt-image-2', + provider: 'VectorEngine', + taskId: 'editor-deleted-placeholder-1', + }); + }); + + expect(screen.queryByAltText(/画布图片：生成图片/)).toBeNull(); + }); + it('hides the generation composer when selecting another image but keeps the placeholder', () => { render(); diff --git a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx index 27292fe9e..409bba246 100644 --- a/src/components/image-editor/ImageCanvasEditorShellView.test.tsx +++ b/src/components/image-editor/ImageCanvasEditorShellView.test.tsx @@ -159,6 +159,7 @@ function createStageProps(): ImageCanvasStageViewProps { onOpenLayerMetadata: vi.fn(), onGenerationFramePointerDown: vi.fn(), onActivateGenerationDialog: vi.fn(), + onDeleteGenerationDialog: vi.fn(), onOpenQuickEditPanel: vi.fn(), onOpenRedrawPanel: vi.fn(), onOpenCropExpandPanel: vi.fn(), diff --git a/src/components/image-editor/ImageCanvasEditorView.tsx b/src/components/image-editor/ImageCanvasEditorView.tsx index eff6791e1..9d7a9cd82 100644 --- a/src/components/image-editor/ImageCanvasEditorView.tsx +++ b/src/components/image-editor/ImageCanvasEditorView.tsx @@ -5,6 +5,7 @@ import { createEditorProjectResource, } from '../../services/image-editor/editorProjectClient'; import { useAuthUi } from '../auth/AuthUiContext'; +import { PlatformDangerConfirmDialog } from '../common/PlatformDangerConfirmDialog'; import { resolveContextMenuPosition } from './ImageCanvasEditorModel'; import { ImageCanvasEditorShellView } from './ImageCanvasEditorShellView'; import type { @@ -70,6 +71,8 @@ export function ImageCanvasEditorView() { const [selectedLayerIds, setSelectedLayerIds] = useState([]); const [hoveredLayerId, setHoveredLayerId] = useState(null); const [metadataLayer, setMetadataLayer] = useState(null); + const [pendingGenerationDeleteDialog, setPendingGenerationDeleteDialog] = + useState(null); const [imageContextMenu, setImageContextMenu] = useState(null); const [contextMenu, setContextMenu] = useState( @@ -664,6 +667,45 @@ export function ImageCanvasEditorView() { (layerId: string | null) => deleteLayerByIdRef.current(layerId), [], ); + const removeCanvasGenerationDialog = useCallback( + (dialogId: string) => { + captureCanvasHistory(); + removeCanvasGenerationDialogById(dialogId); + setSelectedLayerId(null); + setSelectedLayerIds([]); + setImageContextMenu(null); + setContextMenu(null); + setActiveTool('select'); + }, + [ + captureCanvasHistory, + removeCanvasGenerationDialogById, + setActiveTool, + setContextMenu, + setImageContextMenu, + setSelectedLayerId, + setSelectedLayerIds, + ], + ); + const requestRemoveCanvasGenerationDialog = useCallback( + (dialog: CanvasGenerationDialogState) => { + if (dialog.status === 'generating') { + activateCanvasGenerationDialog(dialog); + setPendingGenerationDeleteDialog(dialog); + return; + } + removeCanvasGenerationDialog(dialog.id); + }, + [activateCanvasGenerationDialog, removeCanvasGenerationDialog], + ); + const confirmRemoveGeneratingDialog = useCallback(() => { + const dialog = pendingGenerationDeleteDialog; + if (!dialog) { + return; + } + setPendingGenerationDeleteDialog(null); + removeCanvasGenerationDialog(dialog.id); + }, [pendingGenerationDeleteDialog, removeCanvasGenerationDialog]); useImageCanvasKeyboardShortcuts({ generateDialogRef, @@ -671,11 +713,7 @@ export function ImageCanvasEditorView() { redoCanvasChange, undoCanvasChange, deleteLayerById: deleteLayerByIdFromShortcut, - removeCanvasGenerationDialogById: (dialogId: string) => { - captureCanvasHistory(); - removeCanvasGenerationDialogById(dialogId); - setActiveTool('select'); - }, + requestRemoveCanvasGenerationDialog, setActiveTool, setGenerateDialog, setImageContextMenu, @@ -897,6 +935,7 @@ export function ImageCanvasEditorView() { }, onGenerationFramePointerDown: handleGenerationFramePointerDown, onActivateGenerationDialog: activateCanvasGenerationDialog, + onDeleteGenerationDialog: requestRemoveCanvasGenerationDialog, onOpenQuickEditPanel: openQuickEditPanel, onOpenRedrawPanel: openRedrawPanel, onOpenCropExpandPanel: openCropExpandPanel, @@ -936,20 +975,31 @@ export function ImageCanvasEditorView() { }; return ( - setMetadataLayer(null), - }} - /> + <> + setMetadataLayer(null), + }} + /> + setPendingGenerationDeleteDialog(null)} + onConfirm={confirmRemoveGeneratingDialog} + > + 删除后会停止在画布中显示这个生成任务，已消耗的泥点不会返还。 + + ); } diff --git a/src/components/image-editor/ImageCanvasStageView.tsx b/src/components/image-editor/ImageCanvasStageView.tsx index 80edbe4d0..43a5f0fba 100644 --- a/src/components/image-editor/ImageCanvasStageView.tsx +++ b/src/components/image-editor/ImageCanvasStageView.tsx @@ -90,6 +90,7 @@ export type ImageCanvasStageViewProps = { dialog: CanvasGenerationDialogState, ) => void; onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void; + onDeleteGenerationDialog: (dialog: CanvasGenerationDialogState) => void; onOpenQuickEditPanel: (layer: CanvasLayer) => void; onOpenRedrawPanel: (layer: CanvasLayer) => void; onOpenCropExpandPanel: (layer: CanvasLayer) => void; @@ -177,6 +178,7 @@ export function ImageCanvasStageView({ onOpenLayerMetadata, onGenerationFramePointerDown, onActivateGenerationDialog, + onDeleteGenerationDialog, onOpenQuickEditPanel, onOpenRedrawPanel, onOpenCropExpandPanel, @@ -256,6 +258,7 @@ export function ImageCanvasStageView({ onOpenLayerMetadata={onOpenLayerMetadata} onGenerationFramePointerDown={onGenerationFramePointerDown} onActivateGenerationDialog={onActivateGenerationDialog} + onDeleteGenerationDialog={onDeleteGenerationDialog} /> { fireEvent.pointerDown(frame); fireEvent.doubleClick(frame); + fireEvent.click( + within(frame).getByRole('button', { name: '删除图标素材生成占位图' }), + ); expect(props.onGenerationFramePointerDown).toHaveBeenCalledWith( expect.any(Object), dialog, ); expect(props.onActivateGenerationDialog).toHaveBeenCalledWith(dialog); + expect(props.onDeleteGenerationDialog).toHaveBeenCalledWith(dialog); expect(screen.queryByText('dialog-without-placeholder')).toBeNull(); }); diff --git a/src/components/image-editor/ImageCanvasWorldView.tsx b/src/components/image-editor/ImageCanvasWorldView.tsx index 904356ff7..f8107e53d 100644 --- a/src/components/image-editor/ImageCanvasWorldView.tsx +++ b/src/components/image-editor/ImageCanvasWorldView.tsx @@ -1,4 +1,12 @@ -import { Film, ImageIcon, Info, Music2, UserRound, Volume2 } from 'lucide-react'; +import { + Film, + ImageIcon, + Info, + Music2, + Trash2, + UserRound, + Volume2, +} from 'lucide-react'; import type { CSSProperties, MouseEvent as ReactMouseEvent, @@ -111,6 +119,7 @@ function buildInverseScaleStyle( '--image-canvas-editor-kind-offset': `calc(0.38rem * ${inverseScale})`, '--image-canvas-editor-beside-kind-offset': `calc(3.95rem * ${inverseScale})`, '--image-canvas-editor-frame-label-offset': `calc(-1.35rem * ${inverseScale})`, + '--image-canvas-editor-frame-action-offset': `calc(-0.75rem * ${inverseScale})`, }; } @@ -145,6 +154,7 @@ export type ImageCanvasWorldViewProps = { dialog: CanvasGenerationDialogState, ) => void; onActivateGenerationDialog: (dialog: CanvasGenerationDialogState) => void; + onDeleteGenerationDialog: (dialog: CanvasGenerationDialogState) => void; }; export function ImageCanvasWorldView({ @@ -166,6 +176,7 @@ export function ImageCanvasWorldView({ onOpenLayerMetadata, onGenerationFramePointerDown, onActivateGenerationDialog, + onDeleteGenerationDialog, }: ImageCanvasWorldViewProps) { const inverseScale = getInverseViewportScale(viewport); const inverseScaleStyle = buildInverseScaleStyle(inverseScale); @@ -382,6 +393,21 @@ export function ImageCanvasWorldView({ {getGenerationFrameLabel(dialog)} ) : null} + {showFocusedChrome ? ( + } + style={inverseScaleStyle} + onPointerDown={(event) => event.stopPropagation()} + onClick={(event) => { + event.preventDefault(); + event.stopPropagation(); + onDeleteGenerationDialog(dialog); + }} + /> + ) : null} {placeholderMeta.badgeLabel ? ( void; redoCanvasChange?: () => void; deleteLayerById?: (layerId: string | null) => void; - removeCanvasGenerationDialogById?: (dialogId: string) => void; + requestRemoveCanvasGenerationDialog?: ( + dialog: CanvasGenerationDialogState, + ) => void; closeEditorChromePanels?: () => void; }) { const [activeTool, setActiveTool] = useState(initialTool); @@ -110,7 +113,7 @@ function KeyboardShortcutsHarness({ redoCanvasChange, undoCanvasChange, deleteLayerById, - removeCanvasGenerationDialogById, + requestRemoveCanvasGenerationDialog, setActiveTool: (tool) => setActiveTool(tool), setGenerateDialog: (updater) => setGenerateDialogState((currentDialog) => @@ -229,13 +232,14 @@ describe('useImageCanvasKeyboardShortcuts', () => { expect(deleteLayerById).toHaveBeenCalledWith('layer-selected'); }); - it('removes editable generation placeholders with Backspace', () => { - const removeCanvasGenerationDialogById = vi.fn(); + it('requests deleting editable generation placeholders with Backspace', () => { + const requestRemoveCanvasGenerationDialog = vi.fn(); + const dialog = createPlaceholderDialog('character'); render( , ); @@ -243,7 +247,7 @@ describe('useImageCanvasKeyboardShortcuts', () => { fireEvent.keyDown(window, { key: 'Backspace', code: 'Backspace' }); }); - expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1'); + expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith(dialog); expect(screen.getByTestId('generate-dialog').textContent).toBe( 'character:idle:true', ); @@ -254,15 +258,15 @@ describe('useImageCanvasKeyboardShortcuts', () => { expect(screen.getByTestId('icon-picking').textContent).toBe('false'); }); - it('removes generating placeholders with Delete', () => { - const removeCanvasGenerationDialogById = vi.fn(); + it('requests deleting generating placeholders with Delete', () => { + const requestRemoveCanvasGenerationDialog = vi.fn(); const generatingDialog = createPlaceholderDialog('generate'); generatingDialog.status = 'generating'; render( , ); @@ -270,7 +274,9 @@ describe('useImageCanvasKeyboardShortcuts', () => { fireEvent.keyDown(window, { key: 'Delete', code: 'Delete' }); }); - expect(removeCanvasGenerationDialogById).toHaveBeenCalledWith('dialog-1'); + expect(requestRemoveCanvasGenerationDialog).toHaveBeenCalledWith( + generatingDialog, + ); expect(screen.getByTestId('active-tool').textContent).toBe('select'); }); diff --git a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts index 8815e7900..8e8d1c97c 100644 --- a/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts +++ b/src/components/image-editor/useImageCanvasKeyboardShortcuts.ts @@ -12,7 +12,9 @@ type UseImageCanvasKeyboardShortcutsOptions = { redoCanvasChange: () => void; undoCanvasChange: () => void; deleteLayerById: (layerId: string | null) => void; - removeCanvasGenerationDialogById?: (dialogId: string) => void; + requestRemoveCanvasGenerationDialog?: ( + dialog: CanvasGenerationDialogState, + ) => void; setActiveTool: (tool: 'select') => void; setGenerateDialog: ( updater: @@ -68,7 +70,9 @@ function isCanvasGenerationPlaceholderDialog( dialog?.mode === 'character' || dialog?.mode === 'icon' || dialog?.mode === 'ui-design' || - dialog?.mode === 'video') + dialog?.mode === 'video' || + dialog?.mode === 'audio-sound-effect' || + dialog?.mode === 'audio-background-music') ); } @@ -84,7 +88,7 @@ export function useImageCanvasKeyboardShortcuts({ redoCanvasChange, undoCanvasChange, deleteLayerById, - removeCanvasGenerationDialogById, + requestRemoveCanvasGenerationDialog, setActiveTool, setGenerateDialog, setImageContextMenu, @@ -182,9 +186,9 @@ export function useImageCanvasKeyboardShortcuts({ const currentDialog = generateDialogRef.current; if ( isCanvasGenerationDialogState(currentDialog) && - removeCanvasGenerationDialogById + requestRemoveCanvasGenerationDialog ) { - removeCanvasGenerationDialogById(currentDialog.id); + requestRemoveCanvasGenerationDialog(currentDialog); } else { setGenerateDialog(null); } @@ -233,7 +237,7 @@ export function useImageCanvasKeyboardShortcuts({ closeEditorChromePanels, deleteLayerById, generateDialogRef, - removeCanvasGenerationDialogById, + requestRemoveCanvasGenerationDialog, redoCanvasChange, selectedLayerIdRef, setActiveTool, diff --git a/src/index.css b/src/index.css index 8fe69b7d4..3db6ddfa1 100644 --- a/src/index.css +++ b/src/index.css @@ -4139,6 +4139,17 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock { transform-origin: bottom right; } +.image-canvas-editor__generation-frame-delete { + position: absolute; + right: var(--image-canvas-editor-frame-action-offset, -0.75rem); + top: var(--image-canvas-editor-frame-action-offset, -0.75rem); + z-index: 5; + width: 1.5rem; + height: 1.5rem; + transform: scale(var(--image-canvas-editor-inverse-scale, 1)); + transform-origin: top right; +} + .image-canvas-editor__generation-frame-icon { display: grid; place-items: center;