805 lines
43 KiB
TypeScript
805 lines
43 KiB
TypeScript
import { useCallback, useEffect, useRef, useState, type ChangeEvent, type Dispatch, type DragEvent, type SetStateAction } from "react";
|
||
import { useQueryClient } from "@tanstack/react-query";
|
||
import { App } from "antd";
|
||
|
||
import { CANVAS_IMAGE_ASSET_DND_TYPE } from "@/components/canvas/canvas-asset-tray";
|
||
import type { InsertAssetPayload } from "@/components/canvas/asset-picker-modal";
|
||
import { CANVAS_PROJECT_CHAPTER_DND_TYPE, type CanvasProjectChapterPayload } from "@/components/canvas/canvas-project-sidebar";
|
||
import { NODE_DEFAULT_SIZE } from "@/constant/canvas";
|
||
import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils";
|
||
import { audioMetadata, imageMetadata, videoMetadata } from "@/lib/canvas/canvas-generation-task-sync";
|
||
import { createCanvasNode } from "@/lib/canvas/canvas-project-domain";
|
||
import { isAudioFile } from "@/lib/canvas/canvas-project-generation";
|
||
import { fitNodeSize, VIDEO_NODE_MAX_SIZE } from "@/lib/canvas/canvas-node-size";
|
||
import { uploadMediaFile } from "@/services/file-storage";
|
||
import { resolveImageUrl, uploadImage } from "@/services/image-storage";
|
||
import { getProjectUnit } from "@/services/api/projects";
|
||
import { ensureCanvasNodeAsset } from "@/services/project-asset-sync";
|
||
import { useAssetStore, type ImageAsset } from "@/stores/use-asset-store";
|
||
import { CanvasNodeType, type CanvasNodeData, type ContextMenuState, type Position } from "@/types/canvas";
|
||
import type { TimelineDirectMedia } from "@/types/timeline";
|
||
import type { CanvasUploadStatus } from "./canvas-project-feedback";
|
||
|
||
type UseCanvasUploadOptions = {
|
||
canvasId: string;
|
||
domainProjectId?: string;
|
||
nodesRef: { current: CanvasNodeData[] };
|
||
selectedNodeIdsRef: { current: Set<string> };
|
||
getCanvasCenter: () => Position;
|
||
screenToCanvas: (clientX: number, clientY: number) => Position;
|
||
setNodes: Dispatch<SetStateAction<CanvasNodeData[]>>;
|
||
setSelectedNodeIds: Dispatch<SetStateAction<Set<string>>>;
|
||
setSelectedConnectionId: Dispatch<SetStateAction<string | null>>;
|
||
setContextMenu: Dispatch<SetStateAction<ContextMenuState | null>>;
|
||
setDialogNodeId: Dispatch<SetStateAction<string | null>>;
|
||
};
|
||
|
||
export type StartCanvasUploadStatus = (title: string, detail: string, total?: number) => {
|
||
update: (detail: string, step: number) => void;
|
||
done: (detail?: string) => void;
|
||
fail: (detail?: string) => void;
|
||
};
|
||
|
||
const NODE_STATUS_SUCCESS = "success" as const;
|
||
const BATCH_UPLOAD_COLUMNS = 3;
|
||
const BATCH_UPLOAD_COLUMN_GAP = 380;
|
||
const BATCH_UPLOAD_ROW_GAP = 300;
|
||
|
||
export function useCanvasUpload({
|
||
canvasId,
|
||
domainProjectId,
|
||
nodesRef,
|
||
selectedNodeIdsRef,
|
||
getCanvasCenter,
|
||
screenToCanvas,
|
||
setNodes,
|
||
setSelectedNodeIds,
|
||
setSelectedConnectionId,
|
||
setContextMenu,
|
||
setDialogNodeId,
|
||
}: UseCanvasUploadOptions) {
|
||
const { message } = App.useApp();
|
||
const queryClient = useQueryClient();
|
||
const imageInputRef = useRef<HTMLInputElement>(null);
|
||
const uploadTargetRef = useRef<{ nodeId?: string; position?: Position } | null>(null);
|
||
const assetInsertPositionRef = useRef<Position | null>(null);
|
||
const uploadStatusIdRef = useRef(0);
|
||
const statusTimersRef = useRef<Set<number>>(new Set());
|
||
const fileDragDepthRef = useRef(0);
|
||
const [assetPickerOpen, setAssetPickerOpen] = useState(false);
|
||
const [uploadModalOpen, setUploadModalOpen] = useState(false);
|
||
const [uploadStatus, setUploadStatus] = useState<CanvasUploadStatus | null>(null);
|
||
const [fileDropActive, setFileDropActive] = useState(false);
|
||
|
||
useEffect(() => () => {
|
||
statusTimersRef.current.forEach((timer) => window.clearTimeout(timer));
|
||
}, []);
|
||
|
||
const startUploadStatus = useCallback<StartCanvasUploadStatus>((title, detail, total = 3) => {
|
||
const id = (uploadStatusIdRef.current += 1);
|
||
setUploadStatus({ id, title, detail, step: 1, total });
|
||
const dismiss = (delay: number) => {
|
||
const timer = window.setTimeout(() => {
|
||
statusTimersRef.current.delete(timer);
|
||
setUploadStatus((current) => (current?.id === id ? null : current));
|
||
}, delay);
|
||
statusTimersRef.current.add(timer);
|
||
};
|
||
return {
|
||
update: (nextDetail: string, step: number) => setUploadStatus((current) => (current?.id === id ? { ...current, detail: nextDetail, step: Math.min(Math.max(step, 1), total) } : current)),
|
||
done: (nextDetail = "处理完成") => {
|
||
setUploadStatus((current) => (current?.id === id ? { ...current, detail: nextDetail, step: total, done: true } : current));
|
||
dismiss(850);
|
||
},
|
||
fail: (nextDetail = "处理失败") => {
|
||
setUploadStatus((current) => (current?.id === id ? { ...current, detail: nextDetail, error: true } : current));
|
||
dismiss(1800);
|
||
},
|
||
};
|
||
}, []);
|
||
|
||
const selectInsertedNode = useCallback((nodeId: string, dialog: "open" | "close" | "preserve") => {
|
||
setSelectedNodeIds(new Set([nodeId]));
|
||
setSelectedConnectionId(null);
|
||
if (dialog !== "preserve") setDialogNodeId(dialog === "open" ? nodeId : null);
|
||
}, [setDialogNodeId, setSelectedConnectionId, setSelectedNodeIds]);
|
||
|
||
const persistMediaNode = useCallback(async (node: CanvasNodeData) => {
|
||
try {
|
||
const result = await ensureCanvasNodeAsset({ canvasId, domainProjectId, node, source: "canvas-upload" });
|
||
setNodes((current) => current.map((item) => item.id === node.id ? { ...item, metadata: { ...item.metadata, assetId: result.assetId } } : item));
|
||
if (domainProjectId) await queryClient.invalidateQueries({ queryKey: ["project", domainProjectId] });
|
||
return true;
|
||
} catch (error) {
|
||
message.warning(error instanceof Error ? `媒体已添加到画布，但素材同步失败：${error.message}` : "媒体已添加到画布，但素材同步失败");
|
||
return false;
|
||
}
|
||
}, [canvasId, domainProjectId, message, queryClient, setNodes]);
|
||
|
||
const createImageFileNode = useCallback(async (file: File, position: Position) => {
|
||
const progress = startUploadStatus("上传图片", "读取图片文件", domainProjectId ? 4 : 3);
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const image = await uploadImage(file);
|
||
progress.update("更新画布节点", 3);
|
||
const size = fitNodeSize(image.width, image.height);
|
||
const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const node: CanvasNodeData = {
|
||
id,
|
||
type: CanvasNodeType.Image,
|
||
title: file.name,
|
||
position: { x: position.x - size.width / 2, y: position.y - size.height / 2 },
|
||
width: size.width,
|
||
height: size.height,
|
||
metadata: imageMetadata(image),
|
||
};
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(id, "open");
|
||
if (domainProjectId) progress.update("写入项目资产", 4);
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "图片已添加到画布" : "图片已添加，项目资产待重试");
|
||
return id;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "图片上传失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return null;
|
||
}
|
||
}, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
|
||
|
||
const createImageAssetNode = useCallback(async (asset: ImageAsset, position?: Position) => {
|
||
try {
|
||
const content = asset.data.storageKey ? await resolveImageUrl(asset.data.storageKey, asset.data.dataUrl || asset.coverUrl) : asset.data.dataUrl || asset.coverUrl;
|
||
if (!content) {
|
||
message.error("素材图片不可用");
|
||
return;
|
||
}
|
||
const size = fitNodeSize(asset.data.width || NODE_DEFAULT_SIZE[CanvasNodeType.Image].width, asset.data.height || NODE_DEFAULT_SIZE[CanvasNodeType.Image].height);
|
||
const center = position || getCanvasCenter();
|
||
const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const node: CanvasNodeData = {
|
||
id,
|
||
type: CanvasNodeType.Image,
|
||
title: asset.title || "素材图片",
|
||
position: { x: center.x - size.width / 2, y: center.y - size.height / 2 },
|
||
width: size.width,
|
||
height: size.height,
|
||
metadata: {
|
||
content,
|
||
storageKey: asset.data.storageKey,
|
||
status: NODE_STATUS_SUCCESS,
|
||
naturalWidth: asset.data.width,
|
||
naturalHeight: asset.data.height,
|
||
bytes: asset.data.bytes || getDataUrlByteSize(content.startsWith("data:") ? content : ""),
|
||
mimeType: asset.data.mimeType || "image/png",
|
||
prompt: typeof asset.metadata?.prompt === "string" ? asset.metadata.prompt : asset.title,
|
||
assetId: asset.id,
|
||
assetTags: asset.tags || [],
|
||
},
|
||
};
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(id, "close");
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : "素材图片读取失败");
|
||
}
|
||
}, [getCanvasCenter, message, selectInsertedNode, setNodes]);
|
||
|
||
const createVideoFileNode = useCallback(async (file: File, position: Position) => {
|
||
const progress = startUploadStatus("上传视频", "读取视频文件", domainProjectId ? 4 : 3);
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const video = await uploadMediaFile(file, "video");
|
||
progress.update("更新画布节点", 3);
|
||
const size = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_SIZE.width, VIDEO_NODE_MAX_SIZE.height);
|
||
const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const node = { id, type: CanvasNodeType.Video, title: file.name, position: { x: position.x - size.width / 2, y: position.y - size.height / 2 }, width: size.width, height: size.height, metadata: videoMetadata(video) } satisfies CanvasNodeData;
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(id, "open");
|
||
if (domainProjectId) progress.update("写入项目资产", 4);
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "视频已添加到画布" : "视频已添加，项目资产待重试");
|
||
return id;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "视频上传失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return null;
|
||
}
|
||
}, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
|
||
|
||
const createAudioFileNode = useCallback(async (file: File, position: Position) => {
|
||
const progress = startUploadStatus("上传音频", "读取音频文件", domainProjectId ? 4 : 3);
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const audio = await uploadMediaFile(file, "audio");
|
||
progress.update("更新画布节点", 3);
|
||
const size = NODE_DEFAULT_SIZE[CanvasNodeType.Audio];
|
||
const id = `audio-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const node = { id, type: CanvasNodeType.Audio, title: file.name, position: { x: position.x - size.width / 2, y: position.y - size.height / 2 }, width: size.width, height: size.height, metadata: audioMetadata(audio) } satisfies CanvasNodeData;
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(id, "preserve");
|
||
if (domainProjectId) progress.update("写入项目资产", 4);
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "音频已添加到画布" : "音频已添加，项目资产待重试");
|
||
return id;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "音频上传失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return null;
|
||
}
|
||
}, [domainProjectId, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
|
||
|
||
const createTextNodeFromClipboard = useCallback((text: string, position?: Position) => {
|
||
const trimmed = text.trim();
|
||
if (!trimmed) return false;
|
||
const node = {
|
||
...createCanvasNode(CanvasNodeType.Text, position || getCanvasCenter(), { content: trimmed, status: NODE_STATUS_SUCCESS }),
|
||
title: trimmed.slice(0, 32) || "剪切板文本",
|
||
};
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(node.id, "open");
|
||
setContextMenu(null);
|
||
return true;
|
||
}, [getCanvasCenter, selectInsertedNode, setContextMenu, setNodes]);
|
||
|
||
const handleProjectChapterInsert = useCallback(async (chapter: CanvasProjectChapterPayload, position?: Position) => {
|
||
let sourceText = chapter.sourceText;
|
||
if (sourceText === undefined) {
|
||
try {
|
||
sourceText = (await getProjectUnit(chapter.projectId, chapter.id)).unit.sourceText;
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? `章节正文读取失败：${error.message}` : "章节正文读取失败");
|
||
return;
|
||
}
|
||
}
|
||
const content = htmlToPlainText(sourceText);
|
||
const node = createCanvasNode(CanvasNodeType.Text, position || getCanvasCenter(), {
|
||
content,
|
||
prompt: content,
|
||
status: NODE_STATUS_SUCCESS,
|
||
workflowKind: "free",
|
||
workflowTitle: "项目章节",
|
||
workflowDescription: `第 ${chapter.position + 1} 章`,
|
||
chapterId: chapter.id,
|
||
chapterTitle: chapter.title,
|
||
fontSize: 14,
|
||
});
|
||
node.title = `章节 · ${chapter.title}`;
|
||
node.width = 460;
|
||
node.height = 280;
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(node.id, "preserve");
|
||
setContextMenu(null);
|
||
message.success(`已添加“${chapter.title}”`);
|
||
}, [getCanvasCenter, message, selectInsertedNode, setContextMenu, setNodes]);
|
||
|
||
const handleUploadRequest = useCallback((nodeId?: string, position?: Position) => {
|
||
uploadTargetRef.current = { nodeId, position };
|
||
if (!nodeId) {
|
||
setUploadModalOpen(true);
|
||
return;
|
||
}
|
||
const target = nodeId ? nodesRef.current.find((node) => node.id === nodeId) : null;
|
||
if (imageInputRef.current) {
|
||
imageInputRef.current.accept = target?.type === CanvasNodeType.Image
|
||
? "image/*"
|
||
: target?.type === CanvasNodeType.Video
|
||
? "video/*"
|
||
: target?.type === CanvasNodeType.Audio
|
||
? "audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav"
|
||
: "image/*,video/*,audio/mpeg,audio/wav,audio/x-wav,.mp3,.wav";
|
||
}
|
||
imageInputRef.current?.click();
|
||
}, [nodesRef]);
|
||
|
||
const closeUploadModal = useCallback(() => {
|
||
uploadTargetRef.current = null;
|
||
setUploadModalOpen(false);
|
||
}, []);
|
||
|
||
const handleUploadFiles = useCallback(async (files: File[]) => {
|
||
const supportedFiles = files.filter((file) => file.type.startsWith("image/") || file.type.startsWith("video/") || isAudioFile(file));
|
||
if (!supportedFiles.length) {
|
||
message.warning("请选择图片、视频、MP3 或 WAV 文件");
|
||
return false;
|
||
}
|
||
const center = uploadTargetRef.current?.position || getCanvasCenter();
|
||
const columns = Math.min(BATCH_UPLOAD_COLUMNS, supportedFiles.length);
|
||
const originX = center.x - ((columns - 1) * BATCH_UPLOAD_COLUMN_GAP) / 2;
|
||
const createdIds: string[] = [];
|
||
for (let index = 0; index < supportedFiles.length; index += 1) {
|
||
const file = supportedFiles[index];
|
||
const position = {
|
||
x: originX + (index % columns) * BATCH_UPLOAD_COLUMN_GAP,
|
||
y: center.y + Math.floor(index / columns) * BATCH_UPLOAD_ROW_GAP,
|
||
};
|
||
const createdId = await (isAudioFile(file)
|
||
? createAudioFileNode(file, position)
|
||
: file.type.startsWith("video/")
|
||
? createVideoFileNode(file, position)
|
||
: createImageFileNode(file, position));
|
||
if (createdId) createdIds.push(createdId);
|
||
}
|
||
if (!createdIds.length) return false;
|
||
setSelectedNodeIds(new Set(createdIds));
|
||
setSelectedConnectionId(null);
|
||
setDialogNodeId(null);
|
||
const failedCount = supportedFiles.length - createdIds.length;
|
||
if (failedCount) message.warning(`已添加 ${createdIds.length} 个文件，${failedCount} 个上传失败`);
|
||
else message.success(`已添加 ${createdIds.length} 个文件到画布`);
|
||
return true;
|
||
}, [createAudioFileNode, createImageFileNode, createVideoFileNode, getCanvasCenter, message, setDialogNodeId, setSelectedConnectionId, setSelectedNodeIds]);
|
||
|
||
// 时间线专用：把本地音视频文件上传为直连媒体（仅时间线作用域，不创建画布节点），返回媒体描述数组。
|
||
const uploadTimelineMedia = useCallback(async (files: File[]): Promise<TimelineDirectMedia[]> => {
|
||
const supportedFiles = files.filter((file) => file.type.startsWith("video/") || isAudioFile(file));
|
||
if (!supportedFiles.length) {
|
||
message.warning("请选择视频、MP3 或 WAV 文件");
|
||
return [];
|
||
}
|
||
const created: TimelineDirectMedia[] = [];
|
||
for (const file of supportedFiles) {
|
||
try {
|
||
if (isAudioFile(file)) {
|
||
const audio = await uploadMediaFile(file, "audio");
|
||
created.push({
|
||
id: `audio-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||
kind: "audio",
|
||
title: file.name,
|
||
storageKey: audio.storageKey,
|
||
url: audio.url,
|
||
durationMs: audio.durationMs,
|
||
bytes: audio.bytes,
|
||
mimeType: audio.mimeType,
|
||
});
|
||
} else {
|
||
const video = await uploadMediaFile(file, "video");
|
||
created.push({
|
||
id: `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||
kind: "video",
|
||
title: file.name,
|
||
storageKey: video.storageKey,
|
||
url: video.url,
|
||
width: video.width,
|
||
height: video.height,
|
||
durationMs: video.durationMs,
|
||
bytes: video.bytes,
|
||
mimeType: video.mimeType,
|
||
});
|
||
}
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? `素材上传失败：${error.message}` : "素材上传失败");
|
||
}
|
||
}
|
||
if (created.length) message.success(`已上传 ${created.length} 个素材到时间线`);
|
||
return created;
|
||
}, [message]);
|
||
|
||
// 组装能力闭环：把时间线合成结果（MP4 Blob）上传并创建为新的视频节点放回画布，
|
||
// 复用上传/持久化/选中逻辑，新节点可继续编辑字幕与样式。
|
||
const createVideoNodeFromBlob = useCallback(async (blob: Blob, title: string): Promise<CanvasNodeData | null> => {
|
||
const progress = startUploadStatus("合成视频片段", "上传合成结果", domainProjectId ? 4 : 3);
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const video = await uploadMediaFile(blob, "video");
|
||
progress.update("更新画布节点", 3);
|
||
const size = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_SIZE.width, VIDEO_NODE_MAX_SIZE.height);
|
||
const center = getCanvasCenter();
|
||
const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const node = {
|
||
id,
|
||
type: CanvasNodeType.Video,
|
||
title,
|
||
position: { x: center.x - size.width / 2, y: center.y - size.height / 2 },
|
||
width: size.width,
|
||
height: size.height,
|
||
metadata: { ...videoMetadata(video), status: NODE_STATUS_SUCCESS },
|
||
} satisfies CanvasNodeData;
|
||
setNodes((current) => [...current, node]);
|
||
selectInsertedNode(id, "preserve");
|
||
if (domainProjectId) progress.update("写入项目资产", 4);
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "已生成新视频片段并加入项目资产" : "已生成新视频片段，项目资产待重试");
|
||
return node;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "合成视频片段失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return null;
|
||
}
|
||
}, [domainProjectId, getCanvasCenter, message, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
|
||
|
||
const replaceNodeMedia = useCallback(async (nodeId: string, file: File) => {
|
||
const currentNode = nodesRef.current.find((node) => node.id === nodeId);
|
||
if (!currentNode) return false;
|
||
if (isAudioFile(file)) {
|
||
const progress = startUploadStatus("替换音频", "读取音频文件");
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const audio = await uploadMediaFile(file, "audio");
|
||
progress.update("更新画布节点", 3);
|
||
const node = { ...currentNode, type: CanvasNodeType.Audio, title: file.name, metadata: { ...currentNode.metadata, ...audioMetadata(audio), assetId: undefined, taskId: undefined, errorDetails: undefined } } satisfies CanvasNodeData;
|
||
setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
|
||
selectInsertedNode(nodeId, "preserve");
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "音频已替换，可撤销恢复" : "音频已替换，项目资产待重试");
|
||
return true;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "音频替换失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return false;
|
||
}
|
||
}
|
||
if (file.type.startsWith("video/")) {
|
||
const progress = startUploadStatus("替换视频", "读取视频文件");
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const video = await uploadMediaFile(file, "video");
|
||
progress.update("更新画布节点", 3);
|
||
const node = { ...currentNode, type: CanvasNodeType.Video, title: file.name, metadata: { ...currentNode.metadata, ...videoMetadata(video), assetId: undefined, taskId: undefined, errorDetails: undefined } } satisfies CanvasNodeData;
|
||
setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
|
||
selectInsertedNode(nodeId, "open");
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "视频已替换，可撤销恢复" : "视频已替换，项目资产待重试");
|
||
return true;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "视频替换失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return false;
|
||
}
|
||
}
|
||
const progress = startUploadStatus("替换图片", "读取图片文件");
|
||
try {
|
||
progress.update("上传到服务器并同步资源", 2);
|
||
const image = await uploadImage(file);
|
||
progress.update("更新画布节点", 3);
|
||
const node = {
|
||
...currentNode,
|
||
type: CanvasNodeType.Image,
|
||
title: file.name,
|
||
metadata: {
|
||
...currentNode.metadata,
|
||
...imageMetadata(image),
|
||
assetId: undefined,
|
||
taskId: undefined,
|
||
errorDetails: undefined,
|
||
freeResize: false,
|
||
isBatchRoot: undefined,
|
||
batchRootId: undefined,
|
||
batchChildIds: undefined,
|
||
batchFailedCount: undefined,
|
||
batchUsesReferenceImages: undefined,
|
||
generationType: undefined,
|
||
model: undefined,
|
||
size: undefined,
|
||
quality: undefined,
|
||
transparentBackground: undefined,
|
||
count: undefined,
|
||
references: undefined,
|
||
primaryImageId: undefined,
|
||
imageBatchExpanded: undefined,
|
||
},
|
||
} satisfies CanvasNodeData;
|
||
setNodes((current) => current.map((item) => item.id === nodeId ? node : item));
|
||
selectInsertedNode(nodeId, "open");
|
||
const persisted = await persistMediaNode(node);
|
||
progress.done(persisted ? "图片已替换，可撤销恢复" : "图片已替换，项目资产待重试");
|
||
return true;
|
||
} catch (error) {
|
||
const details = error instanceof Error ? error.message : "图片替换失败";
|
||
progress.fail(details);
|
||
message.error(details);
|
||
return false;
|
||
}
|
||
}, [message, nodesRef, persistMediaNode, selectInsertedNode, setNodes, startUploadStatus]);
|
||
|
||
const pasteSystemClipboard = useCallback(async (position?: Position, clipboardEvent?: ClipboardEvent | null) => {
|
||
const isNodeMarker = (value: string) => {
|
||
const trimmed = value.trim();
|
||
return trimmed.startsWith("open-ai-canvas-nodes:") || trimmed.startsWith("open-ai-canvas-nodes-json:");
|
||
};
|
||
const pasteImageFile = async (file: File) => {
|
||
const selected = nodesRef.current.filter((node) => selectedNodeIdsRef.current.has(node.id));
|
||
if (selected.length === 1 && selected[0].type === CanvasNodeType.Image) {
|
||
if (await replaceNodeMedia(selected[0].id, file)) message.success("已用剪切板图片替换，可撤销恢复");
|
||
return true;
|
||
}
|
||
const inserted = await createImageFileNode(file, position || getCanvasCenter());
|
||
if (inserted) message.success("已从剪切板添加图片");
|
||
return Boolean(inserted);
|
||
};
|
||
|
||
// 1) paste 事件里的图片文件（截图/资源管理器复制）优先。
|
||
const filesFromEvent = clipboardEvent
|
||
? Array.from(clipboardEvent.clipboardData?.items || [])
|
||
.filter((item) => item.kind === "file" && item.type.startsWith("image/"))
|
||
.map((item) => item.getAsFile())
|
||
.filter((file): file is File => Boolean(file))
|
||
: [];
|
||
if (filesFromEvent.length) return pasteImageFile(filesFromEvent[0]);
|
||
|
||
// 2) 若系统文本是节点标记，说明最近一次复制是画布节点，不要再读旧图片。
|
||
const eventText = clipboardEvent?.clipboardData?.getData("text/plain") || "";
|
||
if (isNodeMarker(eventText)) return false;
|
||
|
||
// 3) 异步读系统剪贴板：有图片才导入；若文本是节点标记则让位给节点粘贴。
|
||
if (navigator.clipboard?.read) {
|
||
try {
|
||
const items = await navigator.clipboard.read();
|
||
const textItem = items.find((item) => item.types.includes("text/plain"));
|
||
if (textItem) {
|
||
const textBlob = await textItem.getType("text/plain");
|
||
const text = await textBlob.text();
|
||
if (isNodeMarker(text)) return false;
|
||
}
|
||
const imageItem = items.find((item) => item.types.some((type) => type.startsWith("image/")));
|
||
if (imageItem) {
|
||
const imageType = imageItem.types.find((type) => type.startsWith("image/"));
|
||
if (!imageType) return false;
|
||
const blob = await imageItem.getType(imageType);
|
||
return pasteImageFile(new File([blob], "clipboard-image.png", { type: imageType }));
|
||
}
|
||
} catch {
|
||
// 无权限时继续文本分支。
|
||
}
|
||
}
|
||
|
||
try {
|
||
const text = eventText || (navigator.clipboard?.readText ? await navigator.clipboard.readText() : "");
|
||
if (isNodeMarker(text)) return false;
|
||
if (createTextNodeFromClipboard(text, position)) {
|
||
message.success("已从剪切板添加文本");
|
||
return true;
|
||
}
|
||
} catch {
|
||
// ignore
|
||
}
|
||
return false;
|
||
}, [createImageFileNode, createTextNodeFromClipboard, getCanvasCenter, message, nodesRef, replaceNodeMedia, selectedNodeIdsRef]);
|
||
|
||
const handleImageInputChange = useCallback(async (event: ChangeEvent<HTMLInputElement>) => {
|
||
const file = event.target.files?.[0];
|
||
const target = uploadTargetRef.current;
|
||
try {
|
||
if (!file || (!file.type.startsWith("image/") && !file.type.startsWith("video/") && !isAudioFile(file))) return;
|
||
if (target?.nodeId) {
|
||
const targetNode = nodesRef.current.find((node) => node.id === target.nodeId);
|
||
const compatible = !targetNode
|
||
|| (targetNode.type === CanvasNodeType.Image && file.type.startsWith("image/"))
|
||
|| (targetNode.type === CanvasNodeType.Video && file.type.startsWith("video/"))
|
||
|| (targetNode.type === CanvasNodeType.Audio && isAudioFile(file))
|
||
|| (targetNode.type !== CanvasNodeType.Image && targetNode.type !== CanvasNodeType.Video && targetNode.type !== CanvasNodeType.Audio);
|
||
if (!compatible) {
|
||
message.warning("请选择与当前节点相同类型的媒体文件");
|
||
return;
|
||
}
|
||
await replaceNodeMedia(target.nodeId, file);
|
||
return;
|
||
}
|
||
const position = target?.position || getCanvasCenter();
|
||
await (isAudioFile(file) ? createAudioFileNode(file, position) : file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position));
|
||
} finally {
|
||
uploadTargetRef.current = null;
|
||
event.target.value = "";
|
||
}
|
||
}, [createAudioFileNode, createImageFileNode, createVideoFileNode, getCanvasCenter, message, nodesRef, replaceNodeMedia]);
|
||
|
||
const handleDrop = useCallback((event: DragEvent<HTMLDivElement>) => {
|
||
event.preventDefault();
|
||
fileDragDepthRef.current = 0;
|
||
setFileDropActive(false);
|
||
const chapterPayload = parseProjectChapterPayload(event.dataTransfer.getData(CANVAS_PROJECT_CHAPTER_DND_TYPE));
|
||
if (chapterPayload) {
|
||
void handleProjectChapterInsert(chapterPayload, screenToCanvas(event.clientX, event.clientY));
|
||
return;
|
||
}
|
||
const imageAssetId = event.dataTransfer.getData(CANVAS_IMAGE_ASSET_DND_TYPE);
|
||
if (imageAssetId) {
|
||
const asset = useAssetStore.getState().assets.find((item): item is ImageAsset => item.kind === "image" && item.id === imageAssetId);
|
||
if (!asset) {
|
||
message.warning("素材不存在");
|
||
return;
|
||
}
|
||
void createImageAssetNode(asset, screenToCanvas(event.clientX, event.clientY));
|
||
return;
|
||
}
|
||
const files = Array.from(event.dataTransfer.files).filter((item) => item.type.startsWith("image/") || item.type.startsWith("video/") || isAudioFile(item));
|
||
if (!files.length) return;
|
||
if (files.length > 1) {
|
||
void handleUploadFiles(files);
|
||
return;
|
||
}
|
||
const file = files[0];
|
||
const position = screenToCanvas(event.clientX, event.clientY);
|
||
const target = [...nodesRef.current].reverse().find((node) => {
|
||
const compatible = (node.type === CanvasNodeType.Image && file.type.startsWith("image/"))
|
||
|| (node.type === CanvasNodeType.Video && file.type.startsWith("video/"))
|
||
|| (node.type === CanvasNodeType.Audio && isAudioFile(file));
|
||
return compatible && position.x >= node.position.x && position.x <= node.position.x + node.width && position.y >= node.position.y && position.y <= node.position.y + node.height;
|
||
});
|
||
if (target) {
|
||
void replaceNodeMedia(target.id, file).then((replaced) => {
|
||
if (replaced) message.success("媒体已替换，可撤销恢复");
|
||
});
|
||
return;
|
||
}
|
||
void (isAudioFile(file) ? createAudioFileNode(file, position) : file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position));
|
||
}, [createAudioFileNode, createImageAssetNode, createImageFileNode, createVideoFileNode, handleProjectChapterInsert, handleUploadFiles, message, nodesRef, replaceNodeMedia, screenToCanvas]);
|
||
|
||
const handleFileDragEnter = useCallback((event: DragEvent<HTMLDivElement>) => {
|
||
if (!hasDraggedFiles(event)) return;
|
||
event.preventDefault();
|
||
fileDragDepthRef.current += 1;
|
||
setFileDropActive(true);
|
||
}, []);
|
||
|
||
const handleFileDragOver = useCallback((event: DragEvent<HTMLDivElement>) => {
|
||
if (!hasDraggedFiles(event) && !Array.from(event.dataTransfer.types).includes(CANVAS_PROJECT_CHAPTER_DND_TYPE)) return;
|
||
event.preventDefault();
|
||
event.dataTransfer.dropEffect = "copy";
|
||
}, []);
|
||
|
||
const handleFileDragLeave = useCallback((event: DragEvent<HTMLDivElement>) => {
|
||
if (!hasDraggedFiles(event)) return;
|
||
fileDragDepthRef.current = Math.max(0, fileDragDepthRef.current - 1);
|
||
if (fileDragDepthRef.current === 0) setFileDropActive(false);
|
||
}, []);
|
||
|
||
const pasteAssistantImage = useCallback((file: File) => {
|
||
void createImageFileNode(file, getCanvasCenter()).then((inserted) => {
|
||
if (inserted) message.success("已从剪切板添加图片");
|
||
});
|
||
}, [createImageFileNode, getCanvasCenter, message]);
|
||
|
||
const openAssetsAtPosition = useCallback((position?: Position) => {
|
||
assetInsertPositionRef.current = position || null;
|
||
setAssetPickerOpen(true);
|
||
}, []);
|
||
|
||
const closeAssetPicker = useCallback(() => {
|
||
assetInsertPositionRef.current = null;
|
||
setAssetPickerOpen(false);
|
||
}, []);
|
||
|
||
const createAssetPayloadNode = useCallback(async (payload: InsertAssetPayload, center: Position) => {
|
||
if (payload.kind === "character") {
|
||
const width = 320;
|
||
const height = 260;
|
||
return {
|
||
id: `character-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
|
||
type: CanvasNodeType.Text,
|
||
title: payload.title,
|
||
position: { x: center.x - width / 2, y: center.y - height / 2 },
|
||
width,
|
||
height,
|
||
metadata: {
|
||
workflowKind: "character",
|
||
characterAssetId: payload.assetId,
|
||
characterVersionId: payload.versionId,
|
||
characterVersionPolicy: "current",
|
||
characterName: payload.title,
|
||
characterPrompt: payload.prompt,
|
||
characterAliases: payload.aliases,
|
||
characterDefinition: payload.definition,
|
||
characterCoverUrl: payload.coverUrl,
|
||
characterVisualStatus: payload.visualStatus,
|
||
characterVoiceStatus: payload.voiceStatus,
|
||
characterVoiceName: payload.voiceName,
|
||
characterVoiceProfile: payload.voiceProfile,
|
||
characterVoiceInstructions: payload.voiceInstructions,
|
||
assetId: payload.assetId,
|
||
status: NODE_STATUS_SUCCESS,
|
||
fontSize: 14,
|
||
},
|
||
} satisfies CanvasNodeData;
|
||
}
|
||
if (payload.kind === "text") {
|
||
const node = { ...createCanvasNode(CanvasNodeType.Text, center, { content: payload.content, status: NODE_STATUS_SUCCESS, assetId: payload.assetId }), title: payload.content.slice(0, 32) || "Assistant Text" };
|
||
return node;
|
||
}
|
||
if (payload.kind === "audio") {
|
||
const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Audio];
|
||
const id = `audio-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
return { id, type: CanvasNodeType.Audio, title: payload.title, position: { x: center.x - spec.width / 2, y: center.y - spec.height / 2 }, width: spec.width, height: spec.height, metadata: { content: payload.url, storageKey: payload.storageKey, durationMs: payload.durationMs, bytes: payload.bytes, mimeType: payload.mimeType || "audio/mpeg", assetId: payload.assetId, status: NODE_STATUS_SUCCESS } } satisfies CanvasNodeData;
|
||
}
|
||
if (payload.kind === "video") {
|
||
const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Video];
|
||
const size = fitNodeSize(payload.width || spec.width, payload.height || spec.height, VIDEO_NODE_MAX_SIZE.width, VIDEO_NODE_MAX_SIZE.height);
|
||
const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
return { id, type: CanvasNodeType.Video, title: payload.title, position: { x: center.x - size.width / 2, y: center.y - size.height / 2 }, width: size.width, height: size.height, metadata: { content: payload.url, storageKey: payload.storageKey, status: NODE_STATUS_SUCCESS, naturalWidth: payload.width, naturalHeight: payload.height, durationMs: payload.durationMs, bytes: payload.bytes, mimeType: payload.mimeType || "video/mp4", assetId: payload.assetId } } satisfies CanvasNodeData;
|
||
}
|
||
const storedImage = payload.url
|
||
? { url: payload.url, storageKey: undefined, width: payload.width || 1, height: payload.height || 1, bytes: payload.bytes || 0, mimeType: payload.mimeType || "image/png" }
|
||
: payload.storageKey
|
||
? { url: payload.dataUrl, storageKey: payload.storageKey, width: payload.width || 1, height: payload.height || 1, bytes: payload.bytes || 0, mimeType: payload.mimeType || "image/png" }
|
||
: await uploadImage(payload.dataUrl);
|
||
const meta = !payload.storageKey && (!payload.width || !payload.height) ? await readImageMeta(storedImage.url) : storedImage;
|
||
const size = fitNodeSize(meta.width, meta.height);
|
||
const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
|
||
const metadata = storedImage.storageKey
|
||
? imageMetadata({ ...storedImage, storageKey: storedImage.storageKey, width: meta.width, height: meta.height })
|
||
: { content: storedImage.url, status: NODE_STATUS_SUCCESS, naturalWidth: meta.width, naturalHeight: meta.height, bytes: storedImage.bytes, mimeType: storedImage.mimeType };
|
||
return { id, type: CanvasNodeType.Image, title: payload.title.slice(0, 32) || "Generated Image", position: { x: center.x - size.width / 2, y: center.y - size.height / 2 }, width: size.width, height: size.height, metadata: { ...metadata, prompt: payload.title, assetId: payload.assetId } } satisfies CanvasNodeData;
|
||
}, []);
|
||
|
||
const insertAssetPayloads = useCallback(async (payloads: InsertAssetPayload[], origin: Position, successMessage: string, failureMessage: string): Promise<CanvasNodeData[]> => {
|
||
try {
|
||
const created = await Promise.all(payloads.map((payload, index) => createAssetPayloadNode(payload, {
|
||
x: origin.x + (index % BATCH_UPLOAD_COLUMNS) * BATCH_UPLOAD_COLUMN_GAP,
|
||
y: origin.y + Math.floor(index / BATCH_UPLOAD_COLUMNS) * BATCH_UPLOAD_ROW_GAP,
|
||
})));
|
||
setNodes((current) => [...current, ...created]);
|
||
setSelectedNodeIds(new Set(created.map((node) => node.id)));
|
||
setSelectedConnectionId(null);
|
||
setDialogNodeId(null);
|
||
message.success(successMessage);
|
||
return created;
|
||
} catch (error) {
|
||
message.error(error instanceof Error ? error.message : failureMessage);
|
||
throw error;
|
||
}
|
||
}, [createAssetPayloadNode, message, setDialogNodeId, setNodes, setSelectedConnectionId, setSelectedNodeIds]);
|
||
|
||
const handleAssetsInsert = useCallback(async (payloads: InsertAssetPayload[]): Promise<CanvasNodeData[]> => {
|
||
const origin = assetInsertPositionRef.current || getCanvasCenter();
|
||
return insertAssetPayloads(payloads, origin, `已插入 ${payloads.length} 项素材`, "素材插入失败");
|
||
}, [getCanvasCenter, insertAssetPayloads]);
|
||
|
||
const handleProjectAssetsInsert = useCallback(async (payloads: InsertAssetPayload[], position?: Position): Promise<CanvasNodeData[]> => {
|
||
const origin = position || getCanvasCenter();
|
||
return insertAssetPayloads(payloads, origin, `已引入 ${payloads.length} 项项目资产`, "项目资产引入失败");
|
||
}, [getCanvasCenter, insertAssetPayloads]);
|
||
|
||
return {
|
||
assetPickerOpen,
|
||
closeAssetPicker,
|
||
createVideoNodeFromBlob,
|
||
createAssetPayloadNode,
|
||
createImageAssetNode,
|
||
fileDropActive,
|
||
handleAssetsInsert,
|
||
handleDrop,
|
||
handleFileDragEnter,
|
||
handleFileDragLeave,
|
||
handleFileDragOver,
|
||
handleImageInputChange,
|
||
handleProjectAssetsInsert,
|
||
handleProjectChapterInsert,
|
||
handleUploadFiles,
|
||
handleUploadRequest,
|
||
imageInputRef,
|
||
closeUploadModal,
|
||
openAssetsAtPosition,
|
||
pasteAssistantImage,
|
||
pasteSystemClipboard,
|
||
startUploadStatus,
|
||
uploadModalOpen,
|
||
uploadStatus,
|
||
uploadTimelineMedia,
|
||
};
|
||
}
|
||
|
||
function hasDraggedFiles(event: DragEvent<HTMLElement>) {
|
||
return Array.from(event.dataTransfer.types).includes("Files");
|
||
}
|
||
|
||
function parseProjectChapterPayload(value: string): CanvasProjectChapterPayload | null {
|
||
if (!value) return null;
|
||
try {
|
||
const payload = JSON.parse(value) as Partial<CanvasProjectChapterPayload>;
|
||
const validSource = payload.sourceText === undefined || typeof payload.sourceText === "string";
|
||
return typeof payload.id === "string" && typeof payload.projectId === "string" && typeof payload.title === "string" && validSource && typeof payload.position === "number" ? payload as CanvasProjectChapterPayload : null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
function htmlToPlainText(value: string) {
|
||
if (!value) return "";
|
||
const document = new DOMParser().parseFromString(value, "text/html");
|
||
return document.body.textContent?.trim() || "";
|
||
}
|