feat(canvas): 添加图像节点预览功能

- 在CanvasNode组件中添加onViewImage回调属性
- 实现图像节点点击时触发预览功能
- 修复事件冒泡问题,确保图像预览操作不会触发其他交互
This commit is contained in:
王鑫凯
2026-06-04 17:13:28 +08:00
parent 75d5af5d8c
commit 72024c8138
2 changed files with 8 additions and 0 deletions
@@ -2339,6 +2339,7 @@ function InfiniteCanvasPage() {
onSetBatchPrimary={setBatchPrimary}
onRetry={(node) => void handleRetryNode(node)}
onGenerateImage={generateImageFromTextNode}
onViewImage={(node) => setPreviewNodeId(node.id)}
onContextMenu={(event, id) => {
event.preventDefault();
event.stopPropagation();
@@ -45,6 +45,7 @@ type CanvasNodeProps = {
onSetBatchPrimary?: (node: CanvasNodeData) => void;
onRetry?: (node: CanvasNodeData) => void;
onGenerateImage?: (node: CanvasNodeData) => void;
onViewImage?: (node: CanvasNodeData) => void;
onContextMenu: (event: React.MouseEvent, nodeId: string) => void;
};
@@ -99,6 +100,7 @@ export const CanvasNode = React.memo(function CanvasNode({
onSetBatchPrimary,
onRetry,
onGenerateImage,
onViewImage,
onContextMenu,
}: CanvasNodeProps) {
const theme = canvasThemes[useThemeStore((state) => state.theme)];
@@ -269,6 +271,11 @@ export const CanvasNode = React.memo(function CanvasNode({
onToggleBatch?.(data.id);
return;
}
if (data.type === CanvasNodeType.Image && hasImageContent) {
event.stopPropagation();
onViewImage?.(data);
return;
}
if (data.type !== CanvasNodeType.Text) return;
event.stopPropagation();
setIsEditingContent(true);