"use client"; import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"; import type { ChangeEvent as ReactChangeEvent, DragEvent as ReactDragEvent, MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react"; import { useParams, useRouter } from "next/navigation"; import { Home, ImageIcon, Images, List, Menu, MessageSquare, Music2, Plus, Redo2, Settings2, Trash2, Undo2, Upload, Video } from "lucide-react"; import { saveAs } from "file-saver"; import { requestEdit, requestGeneration, requestImageQuestion } from "@/services/api/image"; import { requestVideoGeneration, storeGeneratedVideo } from "@/services/api/video"; import { defaultConfig, type AiConfig, useConfigStore, useEffectiveConfig } from "@/stores/use-config-store"; import { resolveImageUrl, uploadImage, type UploadedImage } from "@/services/image-storage"; import { resolveMediaUrl, uploadMediaFile, type UploadedFile } from "@/services/file-storage"; import { nanoid } from "nanoid"; import { getDataUrlByteSize, readImageMeta } from "@/lib/image-utils"; import { canvasThemes, type CanvasBackgroundMode } from "@/lib/canvas-theme"; import { UserStatusActions } from "@/components/layout/user-status-actions"; import { useAssetStore } from "@/stores/use-asset-store"; import { useThemeStore } from "@/stores/use-theme-store"; import { cropDataUrl } from "../utils/canvas-image-data"; import { fitNodeSize, nodeSizeFromRatio } from "../utils/canvas-node-size"; import { App, Button, Dropdown, Modal } from "antd"; import { NODE_DEFAULT_SIZE, getNodeSpec } from "../constants"; import { ActiveConnectionPath, ConnectionPath } from "../components/canvas-connections"; import { CanvasConfigNodePanel } from "../components/canvas-config-node-panel"; import { CanvasAssistantPanel } from "../components/canvas-assistant-panel"; import { CanvasNodeContextMenu } from "../components/canvas-context-menu"; import { CanvasNodeAngleDialog, type CanvasImageAngleParams } from "../components/canvas-node-angle-dialog"; import { CanvasNodeCropDialog, type CanvasImageCropRect } from "../components/canvas-node-crop-dialog"; import { buildNodeChatMessages, buildNodeGenerationContext, buildNodeGenerationInputs, hydrateNodeGenerationContext, type NodeGenerationInput } from "../components/canvas-node-generation"; import { CanvasNodeHoverToolbar, CanvasNodeInfoModal } from "../components/canvas-node-hover-toolbar"; import { InfiniteCanvas } from "../components/infinite-canvas"; import { Minimap } from "../components/canvas-mini-map"; import { CanvasNode } from "../components/canvas-node"; import { CanvasNodePromptPanel, type CanvasNodeGenerationMode } from "../components/canvas-node-prompt-panel"; import { CanvasToolbar } from "../components/canvas-toolbar"; import { AssetPickerModal, type AssetPickerTab, type InsertAssetPayload } from "../components/asset-picker-modal"; import { CanvasZoomControls } from "../components/canvas-zoom-controls"; import { useCanvasStore } from "../stores/use-canvas-store"; import { CanvasNodeType, type CanvasAssistantImage, type CanvasAssistantSession, type CanvasConnection, type CanvasImageGenerationType, type CanvasNodeData, type CanvasNodeMetadata, type ConnectionHandle, type ContextMenuState, type Position, type SelectionBox, type ViewportTransform, } from "../types"; import type { ReferenceImage } from "@/types/image"; import type { ReferenceAudio } from "@/types/media"; type CanvasClipboard = { nodes: CanvasNodeData[]; connections: CanvasConnection[]; }; type PendingConnectionCreate = { connection: ConnectionHandle; position: Position; }; type CanvasHistoryEntry = Pick & { chatSessions: CanvasAssistantSession[]; activeChatId: string | null; backgroundMode: CanvasBackgroundMode; showImageInfo: boolean; }; const VIDEO_NODE_MAX_WIDTH = 420; const VIDEO_NODE_MAX_HEIGHT = 420; const NODE_STATUS_LOADING = "loading" as const; const NODE_STATUS_SUCCESS = "success" as const; const NODE_STATUS_ERROR = "error" as const; function createCanvasNode(type: CanvasNodeType, position: Position, metadata?: CanvasNodeMetadata): CanvasNodeData { const spec = getNodeSpec(type); const id = `${type}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; return { id, type, title: spec.title, position: { x: position.x - spec.width / 2, y: position.y - spec.height / 2, }, width: spec.width, height: spec.height, metadata: { ...spec.metadata, ...metadata }, }; } export default function CanvasPage() { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return ; return ; } function CanvasRefreshShell() { return (
); } function ConnectionCreateMenu({ pending, onCreate, onClose }: { pending: PendingConnectionCreate; onCreate: (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config | CanvasNodeType.Video | CanvasNodeType.Audio) => void; onClose: () => void }) { const theme = canvasThemes[useThemeStore((state) => state.theme)]; return (
event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} >
引用该节点生成
} title="文本生成" description="脚本、广告词、品牌文案" onClick={() => onCreate(CanvasNodeType.Text)} /> } title="图片生成" onClick={() => onCreate(CanvasNodeType.Image)} /> } title="视频生成" onClick={() => onCreate(CanvasNodeType.Video)} /> } title="音频参考" onClick={() => onCreate(CanvasNodeType.Audio)} /> } title="配置节点" description="模型、尺寸、数量和输入顺序" onClick={() => onCreate(CanvasNodeType.Config)} />
); } function ConnectionCreateOption({ theme, icon, title, description, onClick }: { theme: (typeof canvasThemes)[keyof typeof canvasThemes]; icon: React.ReactNode; title: string; description?: string; onClick?: () => void }) { return ( ); } function InfiniteCanvasPage() { const { message } = App.useApp(); const params = useParams<{ id: string }>(); const router = useRouter(); const projectId = params.id; const containerRef = useRef(null); const imageInputRef = useRef(null); const uploadTargetRef = useRef<{ nodeId?: string; position?: Position } | null>(null); const clipboardRef = useRef(null); const historyRef = useRef<{ past: CanvasHistoryEntry[]; future: CanvasHistoryEntry[] }>({ past: [], future: [] }); const lastHistoryRef = useRef(null); const historyCommitTimerRef = useRef | null>(null); const viewportSaveTimerRef = useRef | null>(null); const applyingHistoryRef = useRef(false); const historyPausedRef = useRef(false); const didInitialCenterRef = useRef(false); const rafRef = useRef(null); const toolbarHideTimerRef = useRef | null>(null); const nodeDraggingRef = useRef(false); const dragRef = useRef<{ isDraggingNode: boolean; hasMoved: boolean; startX: number; startY: number; initialSelectedNodes: { id: string; x: number; y: number }[]; }>({ isDraggingNode: false, hasMoved: false, startX: 0, startY: 0, initialSelectedNodes: [], }); const config = useConfigStore((state) => state.config); const effectiveConfig = useEffectiveConfig(); const isAiConfigReady = useConfigStore((state) => state.isAiConfigReady); const openConfigDialog = useConfigStore((state) => state.openConfigDialog); const addAsset = useAssetStore((state) => state.addAsset); const cleanupAssetImages = useAssetStore((state) => state.cleanupImages); const hydrated = useCanvasStore((state) => state.hydrated); const createProject = useCanvasStore((state) => state.createProject); const openProject = useCanvasStore((state) => state.openProject); const updateProject = useCanvasStore((state) => state.updateProject); const renameProject = useCanvasStore((state) => state.renameProject); const deleteProjects = useCanvasStore((state) => state.deleteProjects); const currentProject = useCanvasStore((state) => state.projects.find((project) => project.id === projectId)); const theme = canvasThemes[useThemeStore((state) => state.theme)]; const [nodes, setNodes] = useState([]); const [connections, setConnections] = useState([]); const [chatSessions, setChatSessions] = useState([]); const [activeChatId, setActiveChatId] = useState(null); const [viewport, setViewport] = useState({ x: 0, y: 0, k: 1 }); const [size, setSize] = useState({ width: 1200, height: 720 }); const [selectedNodeIds, setSelectedNodeIds] = useState>(new Set()); const [selectedConnectionId, setSelectedConnectionId] = useState(null); const [hoveredNodeId, setHoveredNodeId] = useState(null); const [connectingParams, setConnectingParams] = useState(null); const [connectionTargetNodeId, setConnectionTargetNodeId] = useState(null); const [pendingConnectionCreate, setPendingConnectionCreate] = useState(null); const [mouseWorld, setMouseWorld] = useState({ x: 0, y: 0 }); const [selectionBox, setSelectionBox] = useState(null); const [contextMenu, setContextMenu] = useState(null); const [runningNodeId, setRunningNodeId] = useState(null); const [isMiniMapOpen, setIsMiniMapOpen] = useState(false); const [backgroundMode, setBackgroundMode] = useState("lines"); const [showImageInfo, setShowImageInfo] = useState(false); const [clearConfirmOpen, setClearConfirmOpen] = useState(false); const [assetPickerOpen, setAssetPickerOpen] = useState(false); const [assetPickerTab, setAssetPickerTab] = useState("my-assets"); const [projectLoaded, setProjectLoaded] = useState(false); const [toolbarNodeId, setToolbarNodeId] = useState(null); const [nodeImageSettingsOpen, setNodeImageSettingsOpen] = useState(false); const [dialogNodeId, setDialogNodeId] = useState(null); const [editingNodeId, setEditingNodeId] = useState(null); const [editRequestNonce, setEditRequestNonce] = useState(0); const [infoNodeId, setInfoNodeId] = useState(null); const [cropNodeId, setCropNodeId] = useState(null); const [angleNodeId, setAngleNodeId] = useState(null); const [previewNodeId, setPreviewNodeId] = useState(null); const [assistantCollapsed, setAssistantCollapsed] = useState(true); const [assistantMounted, setAssistantMounted] = useState(false); const [titleEditing, setTitleEditing] = useState(false); const [titleDraft, setTitleDraft] = useState(""); const [historyState, setHistoryState] = useState({ canUndo: false, canRedo: false }); const [collapsingBatchIds, setCollapsingBatchIds] = useState>(new Set()); const [openingBatchIds, setOpeningBatchIds] = useState>(new Set()); const [isNodeDragging, setIsNodeDragging] = useState(false); const nodesRef = useRef(nodes); const connectionsRef = useRef(connections); const selectedNodeIdsRef = useRef(selectedNodeIds); const viewportRef = useRef(viewport); const connectingParamsRef = useRef(connectingParams); const connectionTargetNodeIdRef = useRef(connectionTargetNodeId); const selectionBoxRef = useRef(selectionBox); const pendingConnectionCreateRef = useRef(pendingConnectionCreate); const createHistoryEntry = useCallback( (): CanvasHistoryEntry => ({ nodes: nodesRef.current, connections: connectionsRef.current, chatSessions, activeChatId, backgroundMode, showImageInfo, }), [activeChatId, backgroundMode, chatSessions, showImageInfo], ); const cleanupCanvasFiles = useCallback( (extra?: unknown) => { cleanupAssetImages({ extra, history: historyRef.current, lastHistory: lastHistoryRef.current }); }, [cleanupAssetImages], ); useEffect(() => { if (!hydrated) return; setProjectLoaded(false); const project = openProject(projectId); if (!project) { router.replace("/canvas"); return; } const restore = async () => { const restoredNodes = await hydrateCanvasImages(resetInterruptedGeneration(project.nodes)); const restoredSessions = await hydrateAssistantImages(project.chatSessions || []); setNodes(restoredNodes); setConnections(project.connections); setChatSessions(restoredSessions); setActiveChatId(project.activeChatId || null); setBackgroundMode(project.backgroundMode); setShowImageInfo(project.showImageInfo || false); setViewport(project.viewport); historyRef.current = { past: [], future: [] }; if (historyCommitTimerRef.current) { clearTimeout(historyCommitTimerRef.current); historyCommitTimerRef.current = null; } lastHistoryRef.current = { nodes: restoredNodes, connections: project.connections, chatSessions: restoredSessions, activeChatId: project.activeChatId || null, backgroundMode: project.backgroundMode, showImageInfo: project.showImageInfo || false, }; setHistoryState({ canUndo: false, canRedo: false }); setProjectLoaded(true); }; void restore(); }, [hydrated, openProject, projectId, router]); useEffect(() => { if (!projectLoaded || applyingHistoryRef.current || historyPausedRef.current) return; const next = createHistoryEntry(); const previous = lastHistoryRef.current; if (previous?.nodes === next.nodes && previous.connections === next.connections && previous.chatSessions === next.chatSessions && previous.activeChatId === next.activeChatId && previous.backgroundMode === next.backgroundMode && previous.showImageInfo === next.showImageInfo) return; if (historyCommitTimerRef.current) clearTimeout(historyCommitTimerRef.current); historyCommitTimerRef.current = setTimeout(() => { const current = createHistoryEntry(); const last = lastHistoryRef.current; if (!last) return; historyRef.current.past = [...historyRef.current.past.slice(-49), last]; historyRef.current.future = []; setHistoryState({ canUndo: true, canRedo: false }); lastHistoryRef.current = current; historyCommitTimerRef.current = null; }, 180); return () => { if (historyCommitTimerRef.current) { clearTimeout(historyCommitTimerRef.current); historyCommitTimerRef.current = null; } }; }, [activeChatId, backgroundMode, chatSessions, connections, createHistoryEntry, nodes, projectLoaded, showImageInfo]); useEffect(() => { if (!projectLoaded || historyPausedRef.current) return; updateProject(projectId, { nodes, connections, chatSessions, activeChatId, backgroundMode, showImageInfo }); }, [activeChatId, backgroundMode, chatSessions, connections, nodes, projectId, projectLoaded, showImageInfo, updateProject]); useEffect(() => { if (!dialogNodeId) setNodeImageSettingsOpen(false); }, [dialogNodeId]); useEffect(() => { if (!projectLoaded) return; if (viewportSaveTimerRef.current) clearTimeout(viewportSaveTimerRef.current); viewportSaveTimerRef.current = setTimeout(() => { updateProject(projectId, { viewport: viewportRef.current }); viewportSaveTimerRef.current = null; }, 500); return () => { if (viewportSaveTimerRef.current) clearTimeout(viewportSaveTimerRef.current); }; }, [projectId, projectLoaded, updateProject, viewport]); useLayoutEffect(() => { nodesRef.current = nodes; connectionsRef.current = connections; selectedNodeIdsRef.current = selectedNodeIds; viewportRef.current = viewport; connectingParamsRef.current = connectingParams; connectionTargetNodeIdRef.current = connectionTargetNodeId; pendingConnectionCreateRef.current = pendingConnectionCreate; }, [nodes, connections, selectedNodeIds, viewport, connectingParams, connectionTargetNodeId, pendingConnectionCreate]); useLayoutEffect(() => { selectionBoxRef.current = selectionBox; }, [selectionBox]); useEffect(() => { const el = containerRef.current; if (!el) return; const updateSize = () => { const rect = el.getBoundingClientRect(); setSize({ width: rect.width, height: rect.height }); if (!didInitialCenterRef.current) { didInitialCenterRef.current = true; setViewport({ x: rect.width / 2, y: rect.height / 2, k: 1 }); } }; updateSize(); const resizeObserver = new ResizeObserver(updateSize); resizeObserver.observe(el); return () => resizeObserver.disconnect(); }, []); const screenToCanvas = useCallback((clientX: number, clientY: number) => { const rect = containerRef.current?.getBoundingClientRect(); const currentViewport = viewportRef.current; const localX = clientX - (rect?.left || 0); const localY = clientY - (rect?.top || 0); return { x: (localX - currentViewport.x) / currentViewport.k, y: (localY - currentViewport.y) / currentViewport.k, }; }, []); const getCanvasCenter = useCallback(() => { const rect = containerRef.current?.getBoundingClientRect(); return screenToCanvas((rect?.left || 0) + (rect?.width || size.width) / 2, (rect?.top || 0) + (rect?.height || size.height) / 2); }, [screenToCanvas, size.height, size.width]); const setConnecting = useCallback((next: ConnectionHandle | null) => { connectingParamsRef.current = next; setConnectingParams(next); if (!next) { connectionTargetNodeIdRef.current = null; setConnectionTargetNodeId(null); } }, []); const keepNodeToolbar = useCallback( (nodeId: string) => { if (nodeDraggingRef.current || nodeImageSettingsOpen) return; if (toolbarHideTimerRef.current) { clearTimeout(toolbarHideTimerRef.current); toolbarHideTimerRef.current = null; } setToolbarNodeId(nodeId); }, [nodeImageSettingsOpen], ); const hideNodeToolbar = useCallback(() => { if (toolbarHideTimerRef.current) clearTimeout(toolbarHideTimerRef.current); toolbarHideTimerRef.current = setTimeout(() => { setToolbarNodeId(null); toolbarHideTimerRef.current = null; }, 120); }, []); const connectNodes = useCallback( (current: ConnectionHandle, targetNodeId: string) => { if (current.nodeId === targetNodeId) return; const connection = normalizeConnection(current.nodeId, targetNodeId, nodesRef.current, current.handleType); if (!connection) { message.warning("配置节点之间不能连接"); return; } const { fromNodeId, toNodeId } = connection; const exists = connectionsRef.current.some((conn) => conn.fromNodeId === fromNodeId && conn.toNodeId === toNodeId); if (!exists) { setConnections((prev) => [...prev, { id: `conn-${Date.now()}`, fromNodeId, toNodeId }]); } setContextMenu(null); }, [message], ); const createConnectedNode = useCallback( (type: CanvasNodeType.Image | CanvasNodeType.Text | CanvasNodeType.Config | CanvasNodeType.Video | CanvasNodeType.Audio, pending: PendingConnectionCreate) => { const metadata = type === CanvasNodeType.Config ? { model: effectiveConfig.imageModel || effectiveConfig.model, size: effectiveConfig.size, count: 3 } : undefined; const newNode = createCanvasNode(type, pending.position, metadata); const connection = normalizeConnection(pending.connection.nodeId, newNode.id, [...nodesRef.current, newNode], pending.connection.handleType); if (!connection) { message.warning("配置节点之间不能连接"); return; } setNodes((prev) => [...prev, newNode]); setConnections((prev) => [...prev, { id: nanoid(), ...connection }]); setSelectedNodeIds(new Set([newNode.id])); setSelectedConnectionId(null); if (type !== CanvasNodeType.Text && type !== CanvasNodeType.Audio) setDialogNodeId(newNode.id); setPendingConnectionCreate(null); setConnecting(null); }, [effectiveConfig.imageModel, effectiveConfig.model, effectiveConfig.size, message, setConnecting], ); const cancelPendingConnectionCreate = useCallback(() => { setPendingConnectionCreate(null); setConnecting(null); }, [setConnecting]); const getConnectableNodeAtPoint = useCallback( (clientX: number, clientY: number, current: ConnectionHandle) => { const world = screenToCanvas(clientX, clientY); return ( [...nodesRef.current] .filter((node) => !isHiddenBatchChild(node, nodesRef.current)) .reverse() .find( (node) => node.id !== current.nodeId && Boolean(normalizeConnection(current.nodeId, node.id, nodesRef.current, current.handleType)) && world.x >= node.position.x && world.x <= node.position.x + node.width && world.y >= node.position.y && world.y <= node.position.y + node.height, )?.id || null ); }, [screenToCanvas], ); const visibleNodes = useMemo(() => { const padding = 280; const rect = containerRef.current?.getBoundingClientRect(); const width = rect?.width || size.width; const height = rect?.height || size.height; const viewLeft = -viewport.x / viewport.k - padding; const viewTop = -viewport.y / viewport.k - padding; const viewRight = viewLeft + width / viewport.k + padding * 2; const viewBottom = viewTop + height / viewport.k + padding * 2; return nodes.filter((node) => !isHiddenBatchChild(node, nodes, collapsingBatchIds) && node.position.x + node.width > viewLeft && node.position.x < viewRight && node.position.y + node.height > viewTop && node.position.y < viewBottom); }, [collapsingBatchIds, nodes, size.height, size.width, viewport.k, viewport.x, viewport.y]); const nodeById = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]); const toolbarNode = toolbarNodeId ? nodeById.get(toolbarNodeId) || null : null; const infoNode = infoNodeId ? nodeById.get(infoNodeId) || null : null; const cropNode = cropNodeId ? nodeById.get(cropNodeId) || null : null; const angleNode = angleNodeId ? nodeById.get(angleNodeId) || null : null; const previewNode = previewNodeId ? nodeById.get(previewNodeId) || null : null; const hasMultipleSelectedNodes = selectedNodeIds.size > 1; const activeNodeId = hasMultipleSelectedNodes ? null : hoveredNodeId || (selectedNodeIds.size === 1 ? Array.from(selectedNodeIds)[0] : null); const batchChildCountById = useMemo(() => { const map = new Map(); nodes.forEach((node) => { if (node.metadata?.isBatchRoot) map.set(node.id, node.metadata.batchChildIds?.length || 0); }); return map; }, [nodes]); const batchMotionById = useMemo(() => { const map = new Map(); nodes.forEach((node) => { const rootId = node.metadata?.batchRootId; if (!rootId) return; const root = nodeById.get(rootId); const index = root?.metadata?.batchChildIds?.indexOf(node.id) ?? 0; const stackX = root ? root.position.x + 34 + index * 14 : node.position.x; const stackY = root ? root.position.y + 14 + index * 8 : node.position.y; map.set(node.id, { x: stackX - node.position.x, y: stackY - node.position.y, index: Math.max(index, 0) }); }); return map; }, [nodeById, nodes]); const relatedHighlight = useMemo(() => { const nodeIds = new Set(); const connectionIds = new Set(); if (!activeNodeId) return { nodeIds, connectionIds }; nodeIds.add(activeNodeId); connections.forEach((connection) => { if (connection.fromNodeId !== activeNodeId && connection.toNodeId !== activeNodeId) return; connectionIds.add(connection.id); nodeIds.add(connection.fromNodeId); nodeIds.add(connection.toNodeId); }); return { nodeIds, connectionIds }; }, [activeNodeId, connections]); const configInputsById = useMemo(() => { const map = new Map(); nodes.forEach((node) => { if (node.type !== CanvasNodeType.Config) return; map.set(node.id, buildNodeGenerationInputs(node.id, nodes, connections)); }); return map; }, [connections, nodes]); const createNode = useCallback( (type: CanvasNodeType, position?: Position) => { const targetPosition = position || getCanvasCenter(); const configMetadata = type === CanvasNodeType.Config ? { model: effectiveConfig.imageModel || effectiveConfig.model, size: effectiveConfig.size, count: 3, } : undefined; const newNode = createCanvasNode(type, targetPosition, configMetadata); setNodes((prev) => [...prev, newNode]); setSelectedNodeIds(new Set([newNode.id])); setSelectedConnectionId(null); if (type !== CanvasNodeType.Text && type !== CanvasNodeType.Audio) setDialogNodeId(newNode.id); }, [effectiveConfig.imageModel, effectiveConfig.model, effectiveConfig.size, getCanvasCenter], ); const deleteNodes = useCallback( (ids: Set) => { if (!ids.size) return; const allIds = new Set(ids); nodesRef.current.forEach((node) => { if (ids.has(node.id)) node.metadata?.batchChildIds?.forEach((childId) => allIds.add(childId)); }); setNodes((prev) => { const next = prev.filter((node) => !allIds.has(node.id)); return next.map((node) => { const childIds = node.metadata?.batchChildIds?.filter((childId) => !allIds.has(childId)); if (!node.metadata?.isBatchRoot || childIds?.length === node.metadata.batchChildIds?.length) return node; const primaryImageId = childIds?.includes(node.metadata.primaryImageId || "") ? node.metadata.primaryImageId : childIds?.[0]; const primaryNode = next.find((item) => item.id === primaryImageId); return { ...node, metadata: { ...node.metadata, batchChildIds: childIds, primaryImageId, content: primaryNode?.metadata?.content || node.metadata.content, naturalWidth: primaryNode?.metadata?.naturalWidth || node.metadata.naturalWidth, naturalHeight: primaryNode?.metadata?.naturalHeight || node.metadata.naturalHeight, }, }; }); }); setConnections((prev) => prev.filter((conn) => !allIds.has(conn.fromNodeId) && !allIds.has(conn.toNodeId))); setSelectedNodeIds(new Set()); setSelectedConnectionId(null); setHoveredNodeId((current) => (current && allIds.has(current) ? null : current)); setToolbarNodeId((current) => (current && allIds.has(current) ? null : current)); setDialogNodeId((current) => (current && allIds.has(current) ? null : current)); setEditingNodeId((current) => (current && allIds.has(current) ? null : current)); setInfoNodeId((current) => (current && allIds.has(current) ? null : current)); setCropNodeId((current) => (current && allIds.has(current) ? null : current)); setAngleNodeId((current) => (current && allIds.has(current) ? null : current)); setPreviewNodeId((current) => (current && allIds.has(current) ? null : current)); setRunningNodeId((current) => (current && allIds.has(current) ? null : current)); setContextMenu((current) => (current && allIds.has(current.nodeId) ? null : current)); cleanupCanvasFiles({ projectId, nodes: nodesRef.current.filter((node) => !allIds.has(node.id)), chatSessions }); }, [chatSessions, cleanupCanvasFiles, projectId], ); const deselectCanvas = useCallback(() => { cancelPendingConnectionCreate(); setSelectedNodeIds(new Set()); setSelectedConnectionId(null); setContextMenu(null); setSelectionBox(null); setHoveredNodeId(null); setToolbarNodeId(null); setDialogNodeId(null); setEditingNodeId(null); }, [cancelPendingConnectionCreate]); const clearCanvas = useCallback(() => { setNodes([]); setConnections([]); setInfoNodeId(null); setCropNodeId(null); setAngleNodeId(null); setPreviewNodeId(null); setRunningNodeId(null); deselectCanvas(); setClearConfirmOpen(false); cleanupCanvasFiles({ projectId, nodes: [], chatSessions: [] }); }, [cleanupCanvasFiles, deselectCanvas, projectId]); const duplicateNode = useCallback((nodeId: string) => { const source = nodesRef.current.find((node) => node.id === nodeId); if (!source) return; const id = `${source.type}-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; const next: CanvasNodeData = { ...source, id, title: `${source.title} Copy`, position: { x: source.position.x + 36, y: source.position.y + 36 }, }; setNodes((prev) => [...prev, next]); setSelectedNodeIds(new Set([id])); setSelectedConnectionId(null); setDialogNodeId(id); }, []); const copySelectedNodes = useCallback(() => { const selectedIds = selectedNodeIdsRef.current; if (!selectedIds.size) return; const copiedNodes = nodesRef.current .filter((node) => selectedIds.has(node.id)) .map((node) => ({ ...node, position: { ...node.position }, metadata: node.metadata ? { ...node.metadata } : undefined, })); if (!copiedNodes.length) return; clipboardRef.current = { nodes: copiedNodes, connections: connectionsRef.current.filter((connection) => selectedIds.has(connection.fromNodeId) && selectedIds.has(connection.toNodeId)).map((connection) => ({ ...connection })), }; }, []); const pasteCopiedNodes = useCallback(() => { const clipboard = clipboardRef.current; if (!clipboard?.nodes.length) return false; const center = getCanvasCenter(); const bounds = clipboard.nodes.reduce( (acc, node) => ({ left: Math.min(acc.left, node.position.x), top: Math.min(acc.top, node.position.y), right: Math.max(acc.right, node.position.x + node.width), bottom: Math.max(acc.bottom, node.position.y + node.height), }), { left: Infinity, top: Infinity, right: -Infinity, bottom: -Infinity }, ); const dx = center.x - (bounds.left + bounds.right) / 2; const dy = center.y - (bounds.top + bounds.bottom) / 2; const idMap = new Map(); const nextNodes = clipboard.nodes.map((node, index) => { const id = `${node.type}-${Date.now()}-${index}-${Math.random().toString(36).slice(2, 7)}`; idMap.set(node.id, id); return { ...node, id, title: node.title.endsWith(" Copy") ? node.title : `${node.title} Copy`, position: { x: node.position.x + dx, y: node.position.y + dy, }, metadata: node.metadata ? { ...node.metadata } : undefined, }; }); const nextConnections = clipboard.connections.flatMap((connection, index) => { const fromNodeId = idMap.get(connection.fromNodeId); const toNodeId = idMap.get(connection.toNodeId); if (!fromNodeId || !toNodeId) return []; return [ { ...connection, id: `conn-${Date.now()}-${index}-${Math.random().toString(36).slice(2, 7)}`, fromNodeId, toNodeId, }, ]; }); setNodes((prev) => [...prev, ...nextNodes]); setConnections((prev) => [...prev, ...nextConnections]); setSelectedNodeIds(new Set(nextNodes.map((node) => node.id))); setSelectedConnectionId(null); setContextMenu(null); setDialogNodeId(nextNodes[0]?.id || null); return true; }, [getCanvasCenter]); const resetViewport = useCallback(() => { setViewport({ x: size.width / 2, y: size.height / 2, k: 1 }); setContextMenu(null); }, [size.height, size.width]); const setZoomScale = useCallback( (scale: number) => { const nextScale = Math.min(Math.max(scale, 0.05), 5); setViewport((prev) => ({ x: size.width / 2 - ((size.width / 2 - prev.x) / prev.k) * nextScale, y: size.height / 2 - ((size.height / 2 - prev.y) / prev.k) * nextScale, k: nextScale, })); setContextMenu(null); }, [size.height, size.width], ); const applyHistory = useCallback((entry: CanvasHistoryEntry) => { if (historyCommitTimerRef.current) { clearTimeout(historyCommitTimerRef.current); historyCommitTimerRef.current = null; } applyingHistoryRef.current = true; setNodes(entry.nodes); setConnections(entry.connections); setChatSessions(entry.chatSessions); setActiveChatId(entry.activeChatId); setBackgroundMode(entry.backgroundMode); setShowImageInfo(entry.showImageInfo); setSelectedNodeIds(new Set()); setSelectedConnectionId(null); setContextMenu(null); setTimeout(() => { lastHistoryRef.current = entry; applyingHistoryRef.current = false; setHistoryState({ canUndo: historyRef.current.past.length > 0, canRedo: historyRef.current.future.length > 0 }); }); }, []); const undoCanvas = useCallback(() => { const previous = historyRef.current.past.pop(); const current = lastHistoryRef.current; if (!previous || !current) return; historyRef.current.future.push(current); applyHistory(previous); }, [applyHistory]); const redoCanvas = useCallback(() => { const next = historyRef.current.future.pop(); const current = lastHistoryRef.current; if (!next || !current) return; historyRef.current.past.push(current); applyHistory(next); }, [applyHistory]); const createAndOpenProject = useCallback(() => { const id = createProject(`无限画布 ${useCanvasStore.getState().projects.length + 1}`); router.push(`/canvas/${id}`); }, [createProject, router]); const deleteCurrentProject = useCallback(() => { deleteProjects([projectId]); cleanupAssetImages(); router.push("/canvas"); }, [cleanupAssetImages, deleteProjects, projectId, router]); const handleCanvasMouseDown = useCallback( (event: ReactPointerEvent) => { setContextMenu(null); if (pendingConnectionCreateRef.current) cancelPendingConnectionCreate(); if (event.button !== 0) return; if (!event.ctrlKey && !event.metaKey) { setSelectionBox(null); setSelectedNodeIds(new Set()); setSelectedConnectionId(null); return; } const world = screenToCanvas(event.clientX, event.clientY); const nextSelectionBox = { startWorldX: world.x, startWorldY: world.y, currentWorldX: world.x, currentWorldY: world.y, additive: event.shiftKey, initialSelectedNodeIds: event.shiftKey ? Array.from(selectedNodeIdsRef.current) : [], }; selectionBoxRef.current = nextSelectionBox; setSelectionBox(nextSelectionBox); if (!event.shiftKey) { setSelectedNodeIds(new Set()); } setSelectedConnectionId(null); }, [cancelPendingConnectionCreate, screenToCanvas], ); const handleNodeMouseDown = useCallback((event: ReactMouseEvent, nodeId: string) => { event.stopPropagation(); setContextMenu(null); setHoveredNodeId(null); setToolbarNodeId(null); setSelectedConnectionId(null); const currentSelected = selectedNodeIdsRef.current; const currentNodes = nodesRef.current; const nextSelected = new Set(currentSelected); if (event.shiftKey || event.metaKey || event.ctrlKey) { if (nextSelected.has(nodeId)) { nextSelected.delete(nodeId); } else { nextSelected.add(nodeId); } } else if (!nextSelected.has(nodeId)) { nextSelected.clear(); nextSelected.add(nodeId); } setSelectedNodeIds(nextSelected); const dragIds = new Set(nextSelected); currentNodes.forEach((node) => { if (nextSelected.has(node.id)) node.metadata?.batchChildIds?.forEach((childId) => dragIds.add(childId)); }); dragRef.current = { isDraggingNode: true, hasMoved: false, startX: event.clientX, startY: event.clientY, initialSelectedNodes: currentNodes.filter((node) => dragIds.has(node.id)).map((node) => ({ id: node.id, x: node.position.x, y: node.position.y })), }; historyPausedRef.current = true; nodeDraggingRef.current = true; setIsNodeDragging(true); }, []); const finishNodeDrag = useCallback((clientX?: number, clientY?: number) => { if (rafRef.current) { cancelAnimationFrame(rafRef.current); rafRef.current = null; } if (!dragRef.current.isDraggingNode) return; const wasClick = !dragRef.current.hasMoved && dragRef.current.initialSelectedNodes.length === 1; const clickedNodeId = dragRef.current.initialSelectedNodes[0]?.id; const currentViewport = viewportRef.current; const dx = clientX == null ? 0 : (clientX - dragRef.current.startX) / currentViewport.k; const dy = clientY == null ? 0 : (clientY - dragRef.current.startY) / currentViewport.k; const initialPositions = dragRef.current.initialSelectedNodes; historyPausedRef.current = false; nodeDraggingRef.current = false; setIsNodeDragging(false); if (dragRef.current.hasMoved && clientX != null && clientY != null) { setNodes((prev) => prev.map((node) => { const initial = initialPositions.find((item) => item.id === node.id); if (!initial) return node; return { ...node, position: { x: initial.x + dx, y: initial.y + dy } }; }), ); } dragRef.current.isDraggingNode = false; dragRef.current.hasMoved = false; dragRef.current.initialSelectedNodes = []; if (wasClick && clickedNodeId) { const clickedNode = nodesRef.current.find((node) => node.id === clickedNodeId); if (clickedNode?.type === CanvasNodeType.Text) { setDialogNodeId((current) => (current === clickedNodeId ? current : null)); } else { setDialogNodeId(clickedNodeId); } } }, []); const handleGlobalMouseMove = useCallback( (event: MouseEvent) => { const currentViewport = viewportRef.current; if (dragRef.current.isDraggingNode) { const dx = (event.clientX - dragRef.current.startX) / currentViewport.k; const dy = (event.clientY - dragRef.current.startY) / currentViewport.k; const initialPositions = dragRef.current.initialSelectedNodes; if (Math.abs(event.clientX - dragRef.current.startX) > 3 || Math.abs(event.clientY - dragRef.current.startY) > 3) { dragRef.current.hasMoved = true; } if (rafRef.current) cancelAnimationFrame(rafRef.current); rafRef.current = requestAnimationFrame(() => { setNodes((prev) => prev.map((node) => { const initial = initialPositions.find((item) => item.id === node.id); return initial ? { ...node, position: { x: initial.x + dx, y: initial.y + dy } } : node; }), ); rafRef.current = null; }); return; } if (connectingParamsRef.current && !pendingConnectionCreateRef.current) { const targetNodeId = getConnectableNodeAtPoint(event.clientX, event.clientY, connectingParamsRef.current); connectionTargetNodeIdRef.current = targetNodeId; setConnectionTargetNodeId(targetNodeId); setMouseWorld(screenToCanvas(event.clientX, event.clientY)); } }, [finishNodeDrag, getConnectableNodeAtPoint, screenToCanvas], ); const handleGlobalPointerMove = useCallback( (event: PointerEvent) => { const currentSelection = selectionBoxRef.current; if (!currentSelection) return; if (event.buttons === 0) { selectionBoxRef.current = null; setSelectionBox(null); return; } const world = screenToCanvas(event.clientX, event.clientY); const rectX = Math.min(currentSelection.startWorldX, world.x); const rectY = Math.min(currentSelection.startWorldY, world.y); const rectW = Math.abs(world.x - currentSelection.startWorldX); const rectH = Math.abs(world.y - currentSelection.startWorldY); const nextSelected = new Set(currentSelection.additive ? currentSelection.initialSelectedNodeIds : []); nodesRef.current .filter((node) => !isHiddenBatchChild(node, nodesRef.current)) .forEach((node) => { const intersects = rectX < node.position.x + node.width && rectX + rectW > node.position.x && rectY < node.position.y + node.height && rectY + rectH > node.position.y; if (intersects) nextSelected.add(node.id); }); const nextSelectionBox = { ...currentSelection, currentWorldX: world.x, currentWorldY: world.y }; selectionBoxRef.current = nextSelectionBox; setSelectionBox(nextSelectionBox); setSelectedNodeIds(nextSelected); }, [screenToCanvas], ); const handleGlobalMouseUp = useCallback( (event: MouseEvent) => { finishNodeDrag(event.clientX, event.clientY); selectionBoxRef.current = null; setSelectionBox(null); if (pendingConnectionCreateRef.current) return; const currentConnection = connectingParamsRef.current; if (currentConnection) { const targetNodeId = getConnectableNodeAtPoint(event.clientX, event.clientY, currentConnection) || connectionTargetNodeIdRef.current; if (targetNodeId) { connectNodes(currentConnection, targetNodeId); setConnecting(null); } else { setMouseWorld(screenToCanvas(event.clientX, event.clientY)); setPendingConnectionCreate({ connection: currentConnection, position: screenToCanvas(event.clientX, event.clientY) }); } } }, [connectNodes, finishNodeDrag, getConnectableNodeAtPoint, screenToCanvas, setConnecting], ); useEffect(() => { const handlePointerUp = (event: PointerEvent) => finishNodeDrag(event.clientX, event.clientY); const cancelNodeDrag = () => finishNodeDrag(); window.addEventListener("mousemove", handleGlobalMouseMove); window.addEventListener("mouseup", handleGlobalMouseUp); window.addEventListener("pointerup", handlePointerUp); window.addEventListener("pointercancel", cancelNodeDrag); window.addEventListener("blur", cancelNodeDrag); window.addEventListener("pointermove", handleGlobalPointerMove); return () => { window.removeEventListener("mousemove", handleGlobalMouseMove); window.removeEventListener("mouseup", handleGlobalMouseUp); window.removeEventListener("pointerup", handlePointerUp); window.removeEventListener("pointercancel", cancelNodeDrag); window.removeEventListener("blur", cancelNodeDrag); window.removeEventListener("pointermove", handleGlobalPointerMove); }; }, [finishNodeDrag, handleGlobalMouseMove, handleGlobalMouseUp, handleGlobalPointerMove]); const createImageFileNode = useCallback(async (file: File, position: Position) => { const image = await uploadImage(file); const size = fitNodeSize(image.width, image.height); const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; const newNode: 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((prev) => [...prev, newNode]); setSelectedNodeIds(new Set([id])); setSelectedConnectionId(null); setDialogNodeId(id); }, []); const createVideoFileNode = useCallback(async (file: File, position: Position) => { const video = await uploadMediaFile(file, "video"); const size = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT); const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; setNodes((prev) => [ ...prev, { 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), }, ]); setSelectedNodeIds(new Set([id])); setSelectedConnectionId(null); setDialogNodeId(id); }, []); const createAudioFileNode = useCallback(async (file: File, position: Position) => { const audio = await uploadMediaFile(file, "audio"); const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Audio]; const id = `audio-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; setNodes((prev) => [ ...prev, { id, type: CanvasNodeType.Audio, title: file.name, position: { x: position.x - spec.width / 2, y: position.y - spec.height / 2 }, width: spec.width, height: spec.height, metadata: audioMetadata(audio), }, ]); setSelectedNodeIds(new Set([id])); setSelectedConnectionId(null); }, []); const createTextNodeFromClipboard = useCallback( (text: string) => { const trimmed = text.trim(); if (!trimmed) return false; const node = { ...createCanvasNode(CanvasNodeType.Text, getCanvasCenter(), { content: trimmed, status: NODE_STATUS_SUCCESS }), title: trimmed.slice(0, 32) || "剪切板文本", }; setNodes((prev) => [...prev, node]); setSelectedNodeIds(new Set([node.id])); setSelectedConnectionId(null); setContextMenu(null); setDialogNodeId(node.id); return true; }, [getCanvasCenter], ); const pasteSystemClipboard = useCallback(async () => { if (!navigator.clipboard) return; const items = await navigator.clipboard.read(); 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; const blob = await imageItem.getType(imageType); const file = new File([blob], "clipboard-image.png", { type: imageType }); void createImageFileNode(file, getCanvasCenter()); message.success("已从剪切板添加图片"); return; } const text = await navigator.clipboard.readText(); if (createTextNodeFromClipboard(text)) message.success("已从剪切板添加文本"); }, [createImageFileNode, createTextNodeFromClipboard, getCanvasCenter, message]); useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement || event.target instanceof HTMLSelectElement) return; const key = event.key.toLowerCase(); const isModifierShortcut = event.metaKey || event.ctrlKey; if (isModifierShortcut && !event.altKey && key === "z") { event.preventDefault(); if (event.shiftKey) redoCanvas(); else undoCanvas(); return; } if (isModifierShortcut && !event.altKey && key === "y") { event.preventDefault(); redoCanvas(); return; } if (isModifierShortcut && !event.altKey && key === "a") { event.preventDefault(); setSelectedNodeIds(new Set(nodesRef.current.map((node) => node.id))); setSelectedConnectionId(null); setContextMenu(null); setSelectionBox(null); return; } if (isModifierShortcut && !event.altKey && key === "c") { event.preventDefault(); copySelectedNodes(); return; } if (isModifierShortcut && !event.altKey && key === "v") { event.preventDefault(); if (!pasteCopiedNodes()) void pasteSystemClipboard(); return; } if (event.key === "Delete" || event.key === "Backspace") { if (selectedNodeIdsRef.current.size) { deleteNodes(new Set(selectedNodeIdsRef.current)); } else if (selectedConnectionId) { setConnections((prev) => prev.filter((conn) => conn.id !== selectedConnectionId)); setSelectedConnectionId(null); } } if (event.key === "Escape") { setSelectedNodeIds(new Set()); setSelectedConnectionId(null); setContextMenu(null); setSelectionBox(null); setConnecting(null); setHoveredNodeId(null); setToolbarNodeId(null); setDialogNodeId(null); setEditingNodeId(null); setInfoNodeId(null); setCropNodeId(null); setPendingConnectionCreate(null); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [copySelectedNodes, deleteNodes, pasteCopiedNodes, pasteSystemClipboard, redoCanvas, selectedConnectionId, setConnecting, undoCanvas]); const handleConnectStart = useCallback( (event: ReactMouseEvent, nodeId: string, handleType: "source" | "target") => { event.stopPropagation(); setMouseWorld(screenToCanvas(event.clientX, event.clientY)); setConnecting({ nodeId, handleType }); connectionTargetNodeIdRef.current = null; setConnectionTargetNodeId(null); setSelectedConnectionId(null); }, [screenToCanvas, setConnecting], ); const handleNodeResize = useCallback((nodeId: string, width: number, height: number, position?: Position) => { setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, width, height, position: position || node.position } : node))); }, []); const toggleNodeFreeResize = useCallback((nodeId: string) => { setNodes((prev) => prev.map((node) => { if (node.id !== nodeId) return node; const freeResize = !node.metadata?.freeResize; if (freeResize || node.type !== CanvasNodeType.Image) return { ...node, metadata: { ...node.metadata, freeResize } }; const ratio = (node.metadata?.naturalWidth || node.width) / (node.metadata?.naturalHeight || node.height || 1); const height = node.width / ratio; return { ...node, height, position: { x: node.position.x, y: node.position.y + node.height / 2 - height / 2 }, metadata: { ...node.metadata, freeResize } }; }), ); }, []); const handleNodeContentChange = useCallback((nodeId: string, content: string) => { setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, content } } : node))); }, []); const toggleBatchExpanded = useCallback((nodeId: string) => { const isExpanded = Boolean(nodesRef.current.find((node) => node.id === nodeId)?.metadata?.imageBatchExpanded); if (isExpanded) { setCollapsingBatchIds((prev) => new Set(prev).add(nodeId)); window.setTimeout(() => { setCollapsingBatchIds((prev) => { const next = new Set(prev); next.delete(nodeId); return next; }); }, 320); } else { setOpeningBatchIds((prev) => new Set(prev).add(nodeId)); window.setTimeout(() => { setOpeningBatchIds((prev) => { const next = new Set(prev); next.delete(nodeId); return next; }); }, 260); } setNodes((prev) => prev.map((node) => { if (node.id !== nodeId) return node; return { ...node, metadata: { ...node.metadata, imageBatchExpanded: !node.metadata?.imageBatchExpanded } }; }), ); }, []); const setBatchPrimary = useCallback((child: CanvasNodeData) => { const rootId = child.metadata?.batchRootId; if (!rootId || !child.metadata?.content) return; setNodes((prev) => prev.map((node) => node.id === rootId ? { ...node, width: child.width, height: child.height, metadata: { ...node.metadata, content: child.metadata?.content, primaryImageId: child.id, naturalWidth: child.metadata?.naturalWidth, naturalHeight: child.metadata?.naturalHeight, freeResize: child.metadata?.freeResize, }, } : node, ), ); }, []); const openTextEditor = useCallback((node: CanvasNodeData) => { if (node.type !== CanvasNodeType.Text) return; setSelectedNodeIds(new Set([node.id])); setSelectedConnectionId(null); setDialogNodeId(node.id); setEditingNodeId(node.id); setEditRequestNonce((value) => value + 1); }, []); const handleNodePromptChange = useCallback((nodeId: string, prompt: string) => { setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, prompt } } : node))); }, []); const handleConfigNodeChange = useCallback((nodeId: string, patch: Partial) => { setNodes((prev) => prev.map((node) => (node.id === nodeId ? applyNodeConfigPatch(node, patch) : node))); }, []); const downloadNodeImage = useCallback((node: CanvasNodeData) => { if ((node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video && node.type !== CanvasNodeType.Audio) || !node.metadata?.content) return; saveAs(node.metadata.content, `canvas-${node.type}-${node.id}.${node.type === CanvasNodeType.Video ? "mp4" : node.type === CanvasNodeType.Audio ? audioExtension(node.metadata.mimeType) : imageExtension(node.metadata.content)}`); }, []); const saveNodeAsset = useCallback( async (node: CanvasNodeData) => { if (node.type === CanvasNodeType.Text) { const content = node.metadata?.content?.trim(); if (!content) return message.error("没有可保存的文本"); addAsset({ kind: "text", title: node.metadata?.prompt?.slice(0, 24) || "画布文本", coverUrl: "", tags: [], source: "Canvas", data: { content }, metadata: { source: "canvas", nodeId: node.id } }); message.success("已加入我的素材"); return; } if (node.type === CanvasNodeType.Video) { if (!node.metadata?.content) return message.error("没有可保存的视频"); addAsset({ kind: "video", title: node.metadata?.prompt?.slice(0, 24) || "画布视频", coverUrl: "", tags: [], source: "Canvas", data: { url: node.metadata.content, storageKey: node.metadata.storageKey, width: node.width, height: node.height, bytes: node.metadata.bytes || 0, mimeType: node.metadata.mimeType || "video/mp4" }, metadata: { source: "canvas", nodeId: node.id, prompt: node.metadata?.prompt } }); message.success("已加入我的素材"); return; } if (!node.metadata?.content) return message.error("没有可保存的图片"); const dataUrl = node.metadata.storageKey ? "" : node.metadata.content; addAsset({ kind: "image", title: node.metadata?.prompt?.slice(0, 24) || "画布图片", coverUrl: node.metadata.content, tags: [], source: "Canvas", data: { dataUrl, storageKey: node.metadata.storageKey, width: node.metadata.naturalWidth || node.width, height: node.metadata.naturalHeight || node.height, bytes: node.metadata.bytes || getDataUrlByteSize(dataUrl), mimeType: node.metadata.mimeType || "image/png", }, metadata: { source: "canvas", nodeId: node.id, prompt: node.metadata?.prompt }, }); message.success("已加入我的素材"); }, [addAsset, message], ); const cropImageNode = useCallback(async (node: CanvasNodeData, crop: CanvasImageCropRect) => { if (!node.metadata?.content) return; const cropped = await cropDataUrl(node.metadata.content, crop); const image = await uploadImage(cropped); const width = Math.min(node.width, Math.max(220, image.width)); const childId = nanoid(); const child: CanvasNodeData = { id: childId, type: CanvasNodeType.Image, title: "Cropped Image", position: { x: node.position.x + node.width + 96, y: node.position.y }, width, height: width * (image.height / image.width), metadata: { ...imageMetadata(image), prompt: node.metadata?.prompt, }, }; setNodes((prev) => [...prev, child]); setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: node.id, toNodeId: childId }]); setSelectedNodeIds(new Set([childId])); setDialogNodeId(childId); setCropNodeId(null); }, []); const generateAngleNode = useCallback( async (node: CanvasNodeData, params: CanvasImageAngleParams) => { if (!node.metadata?.content) return; const generationConfig = { ...buildGenerationConfig(effectiveConfig, node, "image"), count: "1" }; if (!isAiConfigReady(generationConfig, generationConfig.model)) { openConfigDialog(true); return; } const childId = nanoid(); const imageConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Image]; const title = buildAngleLabel(params); const prompt = buildAnglePrompt(params); const generationMetadata = buildImageGenerationMetadata("edit", generationConfig, 1, [ { id: node.id, name: `${node.title || node.id}.png`, type: node.metadata.mimeType || "image/png", dataUrl: node.metadata.content, storageKey: node.metadata.storageKey }, ]); setAngleNodeId(null); setRunningNodeId(childId); setNodes((prev) => [ ...prev, { id: childId, type: CanvasNodeType.Image, title, position: { x: node.position.x + node.width + 96, y: node.position.y }, width: imageConfig.width, height: imageConfig.height, metadata: { prompt, status: NODE_STATUS_LOADING, ...generationMetadata }, }, ]); setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: node.id, toNodeId: childId }]); setSelectedNodeIds(new Set([childId])); setDialogNodeId(childId); try { const image = await requestEdit(generationConfig, prompt, [{ id: node.id, name: `${node.title || node.id}.png`, type: node.metadata.mimeType || "image/png", dataUrl: node.metadata.content, storageKey: node.metadata.storageKey }]).then( (items) => items[0], ); const uploaded = await uploadImage(image.dataUrl); const size = fitNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height); setNodes((prev) => prev.map((item) => (item.id === childId ? { ...item, width: size.width, height: size.height, metadata: { ...item.metadata, ...imageMetadata(uploaded), prompt, ...generationMetadata } } : item))); } catch (error) { const errorDetails = error instanceof Error ? error.message : "生成失败"; setNodes((prev) => prev.map((item) => (item.id === childId ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails } } : item))); } finally { setRunningNodeId(null); } }, [effectiveConfig, openConfigDialog], ); const handleFontSizeChange = useCallback((nodeId: string, fontSize: number) => { setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, fontSize } } : node))); }, []); const handleUploadRequest = useCallback((nodeId?: string, position?: Position) => { uploadTargetRef.current = { nodeId, position }; imageInputRef.current?.click(); }, []); const handleImageInputChange = useCallback( async (event: ReactChangeEvent) => { const file = event.target.files?.[0]; const target = uploadTargetRef.current; if (!file || (!file.type.startsWith("image/") && !file.type.startsWith("video/") && !isAudioFile(file))) return; if (target?.nodeId) { if (isAudioFile(file)) { const audio = await uploadMediaFile(file, "audio"); const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Audio]; setNodes((prev) => prev.map((node) => (node.id === target.nodeId ? { ...node, type: CanvasNodeType.Audio, title: file.name, position: { x: node.position.x + node.width / 2 - spec.width / 2, y: node.position.y + node.height / 2 - spec.height / 2 }, width: spec.width, height: spec.height, metadata: { ...node.metadata, ...audioMetadata(audio), errorDetails: undefined } } : node))); setSelectedNodeIds(new Set([target.nodeId])); setSelectedConnectionId(null); uploadTargetRef.current = null; event.target.value = ""; return; } if (file.type.startsWith("video/")) { const video = await uploadMediaFile(file, "video"); const nextSize = fitNodeSize(video.width || 1280, video.height || 720, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT); setNodes((prev) => prev.map((node) => (node.id === target.nodeId ? { ...node, type: CanvasNodeType.Video, title: file.name, position: { x: node.position.x + node.width / 2 - nextSize.width / 2, y: node.position.y + node.height / 2 - nextSize.height / 2 }, width: nextSize.width, height: nextSize.height, metadata: { ...node.metadata, ...videoMetadata(video), errorDetails: undefined } } : node))); setSelectedNodeIds(new Set([target.nodeId])); setSelectedConnectionId(null); setDialogNodeId(target.nodeId); uploadTargetRef.current = null; event.target.value = ""; return; } const image = await uploadImage(file); const size = fitNodeSize(image.width, image.height); setNodes((prev) => prev.map((node) => node.id === target.nodeId ? { ...node, type: CanvasNodeType.Image, title: file.name, width: size.width, height: size.height, metadata: { ...node.metadata, ...imageMetadata(image), errorDetails: undefined, freeResize: false, isBatchRoot: undefined, batchRootId: undefined, batchChildIds: undefined, batchUsesReferenceImages: undefined, generationType: undefined, model: undefined, size: undefined, quality: undefined, count: undefined, references: undefined, primaryImageId: undefined, imageBatchExpanded: undefined, }, } : node, ), ); setSelectedNodeIds(new Set([target.nodeId])); setSelectedConnectionId(null); setDialogNodeId(target.nodeId); } else { const position = target?.position || screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2); void (isAudioFile(file) ? createAudioFileNode(file, position) : file.type.startsWith("video/") ? createVideoFileNode(file, position) : createImageFileNode(file, position)); } uploadTargetRef.current = null; event.target.value = ""; }, [createAudioFileNode, createImageFileNode, createVideoFileNode, screenToCanvas, size.height, size.width], ); const handleDrop = useCallback( (event: ReactDragEvent) => { event.preventDefault(); const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/") || item.type.startsWith("video/") || isAudioFile(item)); if (!file) return; const pos = screenToCanvas(event.clientX, event.clientY); void (isAudioFile(file) ? createAudioFileNode(file, pos) : file.type.startsWith("video/") ? createVideoFileNode(file, pos) : createImageFileNode(file, pos)); }, [createAudioFileNode, createImageFileNode, createVideoFileNode, screenToCanvas], ); const pasteAssistantImage = useCallback( (file: File) => { const position = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2); void createImageFileNode(file, position); message.success("已从剪切板添加图片"); }, [createImageFileNode, message, screenToCanvas, size.height, size.width], ); const handleAssistantSessionsChange = useCallback((sessions: CanvasAssistantSession[], activeId: string | null) => { setChatSessions(sessions); setActiveChatId(activeId); }, []); const startTitleEditing = useCallback(() => { setTitleDraft(currentProject?.title || "未命名画布"); setTitleEditing(true); }, [currentProject?.title]); const finishTitleEditing = useCallback(() => { const nextTitle = titleDraft.trim(); if (nextTitle) renameProject(projectId, nextTitle); setTitleEditing(false); }, [projectId, renameProject, titleDraft]); const preventCanvasContextMenu = useCallback((event: ReactMouseEvent) => { if ((event.target as HTMLElement).closest("[data-node-id]")) return; event.preventDefault(); setContextMenu(null); }, []); const handleGenerateNode = useCallback( async (nodeId: string, mode: CanvasNodeGenerationMode, prompt: string) => { const sourceNode = nodesRef.current.find((node) => node.id === nodeId); const generationConfig = buildGenerationConfig(effectiveConfig, sourceNode, mode); if (!isAiConfigReady(generationConfig, generationConfig.model)) { openConfigDialog(true); return; } setRunningNodeId(nodeId); const sourceTextContent = sourceNode?.type === CanvasNodeType.Text ? sourceNode.metadata?.content?.trim() || "" : ""; const editingTextNode = mode === "text" && Boolean(sourceTextContent); const generationContext = await hydrateNodeGenerationContext( buildNodeGenerationContext(nodeId, nodesRef.current, connectionsRef.current, editingTextNode ? `请根据要求修改以下文本。\n\n原文：\n${sourceTextContent}\n\n修改要求：\n${prompt}` : prompt), ); const effectivePrompt = generationContext.prompt.trim(); const markSourceStatus = sourceNode?.type !== CanvasNodeType.Image && !editingTextNode; if (!effectivePrompt && mode === "text") { setRunningNodeId(null); return; } let pendingChildIds: string[] = []; if (markSourceStatus) setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, prompt, status: NODE_STATUS_LOADING, errorDetails: undefined } } : node))); try { if (mode === "image") { const count = getGenerationCount(generationConfig.count); const isConfigNode = sourceNode?.type === CanvasNodeType.Config; const isImageNode = sourceNode?.type === CanvasNodeType.Image; const isEmptyImageNode = isImageNode && !sourceNode?.metadata?.content; const sourceReference = isImageNode && sourceNode?.metadata?.content ? [{ id: sourceNode.id, name: `${sourceNode.title || sourceNode.id}.png`, type: sourceNode.metadata.mimeType || "image/png", dataUrl: sourceNode.metadata.content, storageKey: sourceNode.metadata.storageKey }] : []; const referenceImages = sourceReference.length ? sourceReference : generationContext.referenceImages; const generationType = referenceImages.length ? ("edit" as const) : ("generation" as const); const generationMetadata = buildImageGenerationMetadata(generationType, generationConfig, count, referenceImages); const parentConfig = NODE_DEFAULT_SIZE[isConfigNode ? CanvasNodeType.Config : isImageNode ? CanvasNodeType.Image : CanvasNodeType.Text]; const imageConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Image]; const parentPosition = sourceNode?.position || { x: 0, y: 0 }; const gap = 96; const rowGap = 36; const rootId = isEmptyImageNode ? nodeId : nanoid(); const childIds = count > 1 ? Array.from({ length: count }, () => nanoid()) : []; const targetIds = count > 1 ? childIds : [rootId]; pendingChildIds = isEmptyImageNode ? childIds : [rootId, ...childIds]; const rootNode: CanvasNodeData = { id: rootId, type: CanvasNodeType.Image, title: effectivePrompt.slice(0, 32) || "Generated Image", position: { x: isEmptyImageNode ? parentPosition.x : parentPosition.x + parentConfig.width + gap, y: parentPosition.y + parentConfig.height / 2 - imageConfig.height / 2, }, width: isEmptyImageNode ? sourceNode?.width || imageConfig.width : imageConfig.width, height: isEmptyImageNode ? sourceNode?.height || imageConfig.height : imageConfig.height, metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, isBatchRoot: count > 1, batchChildIds: count > 1 ? childIds : undefined, batchUsesReferenceImages: referenceImages.length > 0, ...generationMetadata, imageBatchExpanded: count > 1 ? true : undefined, }, }; const childNodes: CanvasNodeData[] = childIds.map((id, index) => ({ id, type: CanvasNodeType.Image, title: effectivePrompt.slice(0, 32) || "Generated Image", position: { x: rootNode.position.x + rootNode.width + 120 + (index % 2) * (imageConfig.width + 36), y: rootNode.position.y + Math.floor(index / 2) * (imageConfig.height + rowGap), }, width: imageConfig.width, height: imageConfig.height, metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, batchRootId: count > 1 ? rootId : undefined, ...generationMetadata }, })); const batchConnections = [...(isEmptyImageNode ? [] : [{ id: nanoid(), fromNodeId: nodeId, toNodeId: rootId }]), ...childIds.map((childId) => ({ id: nanoid(), fromNodeId: rootId, toNodeId: childId }))]; setNodes((prev) => [ ...prev.map((node) => node.id === nodeId ? isConfigNode ? { ...node, metadata: { ...node.metadata, prompt, status: NODE_STATUS_LOADING, errorDetails: undefined }, } : isEmptyImageNode ? { ...node, position: rootNode.position, width: rootNode.width, height: rootNode.height, title: rootNode.title, metadata: { ...node.metadata, ...rootNode.metadata, errorDetails: undefined }, } : isImageNode ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS, errorDetails: undefined }, } : { ...node, type: CanvasNodeType.Text, title: prompt.slice(0, 32) || "Prompt", width: parentConfig.width, height: parentConfig.height, metadata: { ...node.metadata, content: prompt, prompt, status: NODE_STATUS_SUCCESS, fontSize: 14, errorDetails: undefined }, } : node, ), ...(isEmptyImageNode ? [] : [rootNode]), ...childNodes, ]); setConnections((prev) => [...prev, ...batchConnections]); setSelectedNodeIds(new Set([nodeId])); setSelectedConnectionId(null); setDialogNodeId(nodeId); let hasSuccess = false; let hasFailure = false; await Promise.all( targetIds.map(async (targetId) => { try { const image = referenceImages.length ? await requestEdit({ ...generationConfig, count: "1" }, effectivePrompt, referenceImages).then((items) => items[0]) : await requestGeneration({ ...generationConfig, count: "1" }, effectivePrompt).then((items) => items[0]); const uploaded = await uploadImage(image.dataUrl); const imageSize = fitNodeSize(uploaded.width, uploaded.height, imageConfig.width, imageConfig.height); setNodes((prev) => { const root = prev.find((node) => node.id === rootId); return prev.map((node) => { if (node.id !== targetId && node.id !== rootId) return node; const center = { x: node.position.x + node.width / 2, y: node.position.y + node.height / 2 }; if (node.id === rootId && (targetId === rootId || !root?.metadata?.primaryImageId)) return { ...node, position: { x: center.x - imageSize.width / 2, y: center.y - imageSize.height / 2 }, width: imageSize.width, height: imageSize.height, metadata: { ...node.metadata, ...imageMetadata(uploaded), primaryImageId: targetId }, }; if (node.id === targetId) return { ...node, position: { x: center.x - imageSize.width / 2, y: center.y - imageSize.height / 2 }, width: imageSize.width, height: imageSize.height, metadata: { ...node.metadata, ...imageMetadata(uploaded) }, }; return node; }); }); hasSuccess = true; if (isConfigNode) setNodes((prev) => prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS, errorDetails: undefined } } : node))); return true; } catch (error) { const errorDetails = error instanceof Error ? error.message : "生成失败"; hasFailure = true; setNodes((prev) => prev.map((node) => (node.id === targetId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_ERROR, errorDetails } } : node))); return false; } }), ); if (hasFailure) message.error(hasSuccess ? "部分图片生成失败" : "全部图片生成失败"); setNodes((prev) => prev.map((node) => node.id === nodeId && isConfigNode ? { ...node, metadata: { ...node.metadata, status: hasSuccess ? NODE_STATUS_SUCCESS : NODE_STATUS_ERROR, errorDetails: hasSuccess ? undefined : "全部图片生成失败" } } : node.id === nodeId && isEmptyImageNode ? { ...node, metadata: { ...node.metadata, status: hasSuccess ? NODE_STATUS_SUCCESS : NODE_STATUS_ERROR, errorDetails: hasSuccess ? undefined : "全部图片生成失败" } } : node.id === rootId && !hasSuccess ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_ERROR, errorDetails: "全部图片生成失败" } } : node, ), ); return; } if (mode === "video") { const spec = nodeSizeFromRatio(generationConfig.size, NODE_DEFAULT_SIZE[CanvasNodeType.Video].width, NODE_DEFAULT_SIZE[CanvasNodeType.Video].height) || NODE_DEFAULT_SIZE[CanvasNodeType.Video]; const isEmptyVideoNode = sourceNode?.type === CanvasNodeType.Video && !sourceNode.metadata?.content; const videoId = isEmptyVideoNode ? nodeId : nanoid(); const parent = sourceNode?.position || { x: 0, y: 0 }; const videoNode: CanvasNodeData = { id: videoId, type: CanvasNodeType.Video, title: effectivePrompt.slice(0, 32) || "Generated Video", position: isEmptyVideoNode ? sourceNode.position : { x: parent.x + (sourceNode?.width || spec.width) + 96, y: parent.y }, width: isEmptyVideoNode ? sourceNode.width : spec.width, height: isEmptyVideoNode ? sourceNode.height : spec.height, metadata: { prompt: effectivePrompt, status: NODE_STATUS_LOADING, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality, generateAudio: generationConfig.videoGenerateAudio, watermark: generationConfig.videoWatermark, references: generationReferenceUrls(generationContext) }, }; pendingChildIds = [videoId]; setNodes((prev) => (isEmptyVideoNode ? prev.map((node) => (node.id === nodeId ? { ...node, ...videoNode } : node)) : [...prev.map((node) => (node.id === nodeId ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS } } : node)), videoNode])); if (!isEmptyVideoNode) setConnections((prev) => [...prev, { id: nanoid(), fromNodeId: nodeId, toNodeId: videoId }]); const video = await storeGeneratedVideo(await requestVideoGeneration(generationConfig, effectivePrompt, generationContext.referenceImages, generationContext.referenceVideos, generationContext.referenceAudios)); const videoSize = fitNodeSize(video.width || spec.width, video.height || spec.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT); setNodes((prev) => prev.map((node) => (node.id === videoId ? { ...node, width: videoSize.width, height: videoSize.height, position: { x: node.position.x + node.width / 2 - videoSize.width / 2, y: node.position.y + node.height / 2 - videoSize.height / 2 }, metadata: { ...node.metadata, ...videoMetadata(video), prompt: effectivePrompt, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality, generateAudio: generationConfig.videoGenerateAudio, watermark: generationConfig.videoWatermark, references: generationReferenceUrls(generationContext) } } : node))); return; } let streamed = ""; const isConfigNode = sourceNode?.type === CanvasNodeType.Config; const textCount = isConfigNode ? getGenerationCount(generationConfig.count) : 1; const parentConfig = NODE_DEFAULT_SIZE[isConfigNode ? CanvasNodeType.Config : CanvasNodeType.Text]; const textConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Text]; const parentPosition = sourceNode?.position || { x: 0, y: 0 }; const childIds = isConfigNode || editingTextNode ? Array.from({ length: textCount }, () => nanoid()) : []; pendingChildIds = childIds; if (isConfigNode || editingTextNode) { const childNodes: CanvasNodeData[] = childIds.map((id, index) => ({ id, type: CanvasNodeType.Text, title: prompt.slice(0, 32) || "Generated Text", position: { x: parentPosition.x + parentConfig.width + 96, y: parentPosition.y + parentConfig.height / 2 - textConfig.height / 2 + (index - (textCount - 1) / 2) * (textConfig.height + 36), }, width: textConfig.width, height: textConfig.height, metadata: { prompt, status: NODE_STATUS_LOADING, fontSize: 14 }, })); setNodes((prev) => [...prev.map((node) => (node.id === nodeId && isConfigNode ? { ...node, metadata: { ...node.metadata, prompt, status: NODE_STATUS_LOADING, errorDetails: undefined } } : node)), ...childNodes]); setConnections((prev) => [...prev, ...childIds.map((childId) => ({ id: nanoid(), fromNodeId: nodeId, toNodeId: childId }))]); } const answers = await Promise.all( (childIds.length ? childIds : [nodeId]).map((targetNodeId) => { let localStreamed = ""; return requestImageQuestion(generationConfig, buildNodeChatMessages({ ...generationContext, prompt: effectivePrompt }), (text) => { localStreamed = text; streamed = text; if (isConfigNode) return; setNodes((prev) => prev.map((node) => (node.id === targetNodeId ? { ...node, type: CanvasNodeType.Text, metadata: { ...node.metadata, content: text, status: NODE_STATUS_LOADING } } : node))); }).then((answer) => ({ nodeId: targetNodeId, content: answer || localStreamed })); }), ); const answerByNodeId = new Map(answers.map((item) => [item.nodeId, item.content])); setNodes((prev) => prev.map((node) => childIds.includes(node.id) ? { ...node, metadata: { ...node.metadata, content: answerByNodeId.get(node.id) || streamed, status: NODE_STATUS_SUCCESS } } : node.id === nodeId && isConfigNode ? { ...node, metadata: { ...node.metadata, status: NODE_STATUS_SUCCESS } } : node.id === nodeId && !editingTextNode ? { ...node, type: CanvasNodeType.Text, title: prompt.slice(0, 32) || "Generated Text", metadata: { ...node.metadata, content: answerByNodeId.get(node.id) || streamed, status: NODE_STATUS_SUCCESS } } : node, ), ); } catch (error) { const errorDetails = error instanceof Error ? error.message : "生成失败"; message.error(errorDetails); setNodes((prev) => prev.map((node) => (node.id === nodeId || pendingChildIds.includes(node.id) ? (node.id === nodeId && !markSourceStatus ? node : { ...node, metadata: { ...node.metadata, status: NODE_STATUS_ERROR, errorDetails } }) : node)), ); } finally { setRunningNodeId(null); } }, [effectiveConfig, openConfigDialog], ); const handleRetryNode = useCallback( async (node: CanvasNodeData) => { const sourceNode = findRetrySourceNode(node.id, nodesRef.current, connectionsRef.current) || node; const batchRoot = node.metadata?.batchRootId ? nodesRef.current.find((item) => item.id === node.metadata?.batchRootId) : null; const savedImageMetadata = node.type === CanvasNodeType.Image ? { ...batchRoot?.metadata, ...node.metadata } : undefined; const hasSavedImageMetadata = Boolean(savedImageMetadata?.generationType); const generationConfig = hasSavedImageMetadata && savedImageMetadata ? { ...effectiveConfig, model: savedImageMetadata.model || effectiveConfig.imageModel || effectiveConfig.model, quality: savedImageMetadata.quality || effectiveConfig.quality, size: savedImageMetadata.size || effectiveConfig.size, count: "1", } : { ...buildGenerationConfig(effectiveConfig, sourceNode, node.type === CanvasNodeType.Text ? "text" : node.type === CanvasNodeType.Video ? "video" : "image"), count: "1" }; if (!isAiConfigReady(generationConfig, generationConfig.model)) { openConfigDialog(true); return; } const context = hasSavedImageMetadata ? null : await hydrateNodeGenerationContext(buildNodeGenerationContext(sourceNode.id, nodesRef.current, connectionsRef.current, sourceNode.metadata?.prompt || node.metadata?.prompt || "")); const prompt = (savedImageMetadata?.prompt || context?.prompt || "").trim(); if (!prompt) { message.warning("找不到提示词，无法重试"); return; } const generationType = savedImageMetadata?.generationType; const useReferenceImages = generationType ? generationType === "edit" : Boolean(context?.referenceImages.length); const retryReferenceImages = hasSavedImageMetadata && savedImageMetadata ? await resolveMetadataReferences(savedImageMetadata) : useReferenceImages ? (context?.referenceImages.length ? context.referenceImages : sourceNodeReferenceImages(batchRoot || sourceNode)) : []; if (useReferenceImages && !retryReferenceImages) { message.error("参考图片已丢失，无法继续重试"); setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails: "参考图片已丢失，无法继续重试" } } : item))); return; } const retryImages = retryReferenceImages || []; setRunningNodeId(node.id); setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_LOADING, errorDetails: undefined } } : item))); try { if (node.type === CanvasNodeType.Text) { if (!context) return; let streamed = ""; const answer = await requestImageQuestion(generationConfig, buildNodeChatMessages({ ...context, prompt }), (text) => { streamed = text; setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, type: CanvasNodeType.Text, metadata: { ...item.metadata, content: text, status: NODE_STATUS_LOADING } } : item))); }); setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, type: CanvasNodeType.Text, metadata: { ...item.metadata, content: answer || streamed, prompt, status: NODE_STATUS_SUCCESS } } : item))); return; } if (node.type === CanvasNodeType.Video) { const video = await storeGeneratedVideo(await requestVideoGeneration(generationConfig, prompt, retryImages, context?.referenceVideos || [], context?.referenceAudios || [])); const videoSize = fitNodeSize(video.width || node.width, video.height || node.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT); setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, width: videoSize.width, height: videoSize.height, position: { x: item.position.x + item.width / 2 - videoSize.width / 2, y: item.position.y + item.height / 2 - videoSize.height / 2 }, metadata: { ...item.metadata, ...videoMetadata(video), prompt, model: generationConfig.model, size: generationConfig.size, seconds: generationConfig.videoSeconds, vquality: generationConfig.vquality, generateAudio: generationConfig.videoGenerateAudio, watermark: generationConfig.videoWatermark } } : item))); return; } const image = useReferenceImages ? await requestEdit(generationConfig, prompt, retryImages).then((items) => items[0]) : await requestGeneration(generationConfig, prompt).then((items) => items[0]); const uploadedImage = await uploadImage(image.dataUrl); const imageConfig = NODE_DEFAULT_SIZE[CanvasNodeType.Image]; const imageSize = fitNodeSize(uploadedImage.width, uploadedImage.height, imageConfig.width, imageConfig.height); const generationMetadata = savedImageMetadata?.generationType ? { generationType: savedImageMetadata.generationType, model: generationConfig.model, size: generationConfig.size, quality: generationConfig.quality, count: savedImageMetadata.count || 1, references: savedImageMetadata.references } : buildImageGenerationMetadata(useReferenceImages ? "edit" : "generation", generationConfig, 1, retryImages); setNodes((prev) => prev.map((item) => item.id === node.id ? { ...item, type: CanvasNodeType.Image, width: imageSize.width, height: imageSize.height, metadata: { ...item.metadata, ...imageMetadata(uploadedImage), prompt, ...generationMetadata }, } : item, ), ); } catch (error) { const errorDetails = error instanceof Error ? error.message : "生成失败"; message.error(errorDetails); setNodes((prev) => prev.map((item) => (item.id === node.id ? { ...item, metadata: { ...item.metadata, status: NODE_STATUS_ERROR, errorDetails } } : item))); } finally { setRunningNodeId(null); } }, [effectiveConfig, message, openConfigDialog], ); const generateImageFromTextNode = useCallback( (node: CanvasNodeData) => { const prompt = (node.metadata?.content || node.metadata?.prompt || "").trim(); if (!prompt) { message.warning("文本节点为空，无法生图"); return; } const sourceNode = nodesRef.current.find((item) => item.id === node.id); if (!sourceNode) return; const nodeSize = getNodeSpec(CanvasNodeType.Config); const configNode = createCanvasNode( CanvasNodeType.Config, { x: sourceNode.position.x + sourceNode.width + 96 + nodeSize.width / 2, y: sourceNode.position.y + sourceNode.height / 2, }, { prompt: "", model: effectiveConfig.imageModel || effectiveConfig.model, size: effectiveConfig.size, count: 3, }, ); const connection = { id: nanoid(), fromNodeId: sourceNode.id, toNodeId: configNode.id }; const nextNodes = nodesRef.current.map((item) => (item.id === sourceNode.id ? { ...item, metadata: { ...item.metadata, content: prompt, prompt, status: NODE_STATUS_SUCCESS } } : item)).concat(configNode); const nextConnections = [...connectionsRef.current, connection]; nodesRef.current = nextNodes; connectionsRef.current = nextConnections; setNodes(nextNodes); setConnections(nextConnections); setSelectedNodeIds(new Set([configNode.id])); setSelectedConnectionId(null); setDialogNodeId(configNode.id); }, [effectiveConfig.imageModel, effectiveConfig.model, effectiveConfig.size, message], ); const insertAssistantImage = useCallback( async (image: CanvasAssistantImage) => { const storedImage = image.storageKey ? { url: image.dataUrl, storageKey: image.storageKey, width: 1, height: 1, bytes: 0, mimeType: "image/png" } : await uploadImage(image.dataUrl); const meta = storedImage.width === 1 && storedImage.height === 1 ? await readImageMeta(storedImage.url) : storedImage; const config = fitNodeSize(meta.width, meta.height); const center = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2); const id = `image-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; const node: CanvasNodeData = { id, type: CanvasNodeType.Image, title: image.prompt.slice(0, 32) || "Generated Image", position: { x: center.x - config.width / 2, y: center.y - config.height / 2 }, width: config.width, height: config.height, metadata: { ...imageMetadata({ ...storedImage, width: meta.width, height: meta.height }), prompt: image.prompt }, }; setNodes((prev) => [...prev, node]); setSelectedNodeIds(new Set([id])); setSelectedConnectionId(null); setDialogNodeId(id); }, [screenToCanvas, size.height, size.width], ); const insertAssistantText = useCallback( (text: string) => { const center = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2); const node = { ...createCanvasNode(CanvasNodeType.Text, center, { content: text, status: NODE_STATUS_SUCCESS }), title: text.slice(0, 32) || "Assistant Text", }; setNodes((prev) => [...prev, node]); setSelectedNodeIds(new Set([node.id])); setSelectedConnectionId(null); }, [screenToCanvas, size.height, size.width], ); const handleAssetInsert = useCallback( (payload: InsertAssetPayload) => { if (payload.kind === "text") { insertAssistantText(payload.content); } else if (payload.kind === "video") { const spec = NODE_DEFAULT_SIZE[CanvasNodeType.Video]; const center = screenToCanvas((containerRef.current?.getBoundingClientRect().left || 0) + size.width / 2, (containerRef.current?.getBoundingClientRect().top || 0) + size.height / 2); const id = `video-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`; const nextSize = fitNodeSize(payload.width || spec.width, payload.height || spec.height, VIDEO_NODE_MAX_WIDTH, VIDEO_NODE_MAX_HEIGHT); setNodes((prev) => [...prev, { id, type: CanvasNodeType.Video, title: payload.title, position: { x: center.x - nextSize.width / 2, y: center.y - nextSize.height / 2 }, width: nextSize.width, height: nextSize.height, metadata: { content: payload.url, storageKey: payload.storageKey, status: NODE_STATUS_SUCCESS, naturalWidth: payload.width, naturalHeight: payload.height } }]); setSelectedNodeIds(new Set([id])); } else { insertAssistantImage({ id: `asset-${Date.now()}`, prompt: payload.title, dataUrl: payload.dataUrl, storageKey: payload.storageKey }); } setAssetPickerOpen(false); }, [insertAssistantImage, insertAssistantText, screenToCanvas, size.height, size.width], ); if (!projectLoaded) return ; return (
setTitleEditing(false)} canUndo={historyState.canUndo} canRedo={historyState.canRedo} onHome={() => router.push("/")} onProjects={() => router.push("/canvas")} onCreateProject={createAndOpenProject} onDeleteProject={deleteCurrentProject} onImportImage={() => handleUploadRequest()} onUndo={undoCanvas} onRedo={redoCanvas} assistantCollapsed={assistantCollapsed} onExpandAssistant={() => { setAssistantMounted(true); setAssistantCollapsed(false); }} /> { setViewport(next); setContextMenu(null); }} onCanvasMouseDown={handleCanvasMouseDown} onCanvasDeselect={deselectCanvas} onContextMenu={preventCanvasContextMenu} onDrop={handleDrop} > {connections .filter((connection) => { const from = nodeById.get(connection.fromNodeId); const to = nodeById.get(connection.toNodeId); return Boolean(from && to && !isHiddenBatchConnectionEndpoint(from, nodes) && !isHiddenBatchConnectionEndpoint(to, nodes)); }) .map((connection) => { const from = nodeById.get(connection.fromNodeId); const to = nodeById.get(connection.toNodeId); if (!from || !to) return null; return ( { setSelectedConnectionId(connection.id); setSelectedNodeIds(new Set()); setContextMenu(null); }} /> ); })} {connectingParams ? : null} {visibleNodes.map((node) => ( ( { setNodeImageSettingsOpen(open); if (open) setToolbarNodeId(null); }} /> )} renderNodeContent={(contentNode) => ( { const target = nodesRef.current.find((item) => item.id === nodeId); void handleGenerateNode(nodeId, target?.metadata?.generationMode || "image", target?.metadata?.prompt || ""); }} /> )} onMouseDown={handleNodeMouseDown} onHoverStart={(nodeId) => { if (nodeDraggingRef.current) return; setHoveredNodeId(nodeId); keepNodeToolbar(nodeId); }} onHoverEnd={(nodeId) => { setHoveredNodeId((current) => (current === nodeId ? null : current)); hideNodeToolbar(); }} onConnectStart={handleConnectStart} onResize={handleNodeResize} onContentChange={handleNodeContentChange} onToggleBatch={toggleBatchExpanded} onSetBatchPrimary={setBatchPrimary} onRetry={(node) => void handleRetryNode(node)} onGenerateImage={generateImageFromTextNode} onContextMenu={(event, id) => { event.preventDefault(); event.stopPropagation(); setContextMenu({ type: "node", x: event.clientX, y: event.clientY, nodeId: id }); }} /> ))} {selectionBox ? (
) : null} {pendingConnectionCreate ? createConnectedNode(type, pendingConnectionCreate)} onClose={cancelPendingConnectionCreate} /> : null} setInfoNodeId(node.id)} onEditText={openTextEditor} onDecreaseFont={(node) => handleFontSizeChange(node.id, Math.max(10, (node.metadata?.fontSize || 14) - 2))} onIncreaseFont={(node) => handleFontSizeChange(node.id, Math.min(32, (node.metadata?.fontSize || 14) + 2))} onToggleDialog={(node) => setDialogNodeId((current) => (current === node.id ? null : node.id))} onGenerateImage={generateImageFromTextNode} onUpload={(node) => handleUploadRequest(node.id)} onDownload={downloadNodeImage} onSaveAsset={(node) => void saveNodeAsset(node)} onCrop={(node) => setCropNodeId(node.id)} onAngle={(node) => setAngleNodeId(node.id)} onViewImage={(node) => setPreviewNodeId(node.id)} onRetry={(node) => void handleRetryNode(node)} onToggleFreeResize={(node) => toggleNodeFreeResize(node.id)} onDelete={(node) => deleteNodes(new Set([node.id]))} /> createNode(CanvasNodeType.Image)} onAddVideo={() => createNode(CanvasNodeType.Video)} onAddAudio={() => createNode(CanvasNodeType.Audio)} onAddText={() => createNode(CanvasNodeType.Text)} onAddConfig={() => createNode(CanvasNodeType.Config)} onUndo={undoCanvas} onRedo={redoCanvas} onUpload={() => handleUploadRequest()} onDelete={() => deleteNodes(new Set(selectedNodeIds))} onClear={() => setClearConfirmOpen(true)} onDeselect={deselectCanvas} onBackgroundModeChange={setBackgroundMode} onShowImageInfoChange={setShowImageInfo} onOpenAssetLibrary={() => { setAssetPickerTab("library"); setAssetPickerOpen(true); }} onOpenMyAssets={() => { setAssetPickerTab("my-assets"); setAssetPickerOpen(true); }} /> {isMiniMapOpen ? : null} setIsMiniMapOpen((value) => !value)} /> {contextMenu ? ( setContextMenu(null)} onDuplicate={() => { duplicateNode(contextMenu.nodeId); setContextMenu(null); }} onDelete={() => { deleteNodes(new Set([contextMenu.nodeId])); setContextMenu(null); }} /> ) : null} setInfoNodeId(null)} /> {cropNode?.metadata?.content ? setCropNodeId(null)} onConfirm={(crop) => void cropImageNode(cropNode!, crop)} /> : null} {angleNode?.metadata?.content ? setAngleNodeId(null)} onConfirm={(params) => void generateAngleNode(angleNode!, params)} /> : null} setPreviewNodeId(null)} footer={null} width="auto" styles={{ body: { padding: 0, display: "flex", justifyContent: "center", alignItems: "center", maxHeight: "80vh" } }} > {previewNode?.metadata?.content ? ( {previewNode.title ) : null} setClearConfirmOpen(false)} footer={ <> } >

这会删除当前画布上的所有节点和连线。

 setAssetPickerOpen(false)} />
{assistantMounted ? ( setAssistantCollapsed(true)} onCollapse={() => setAssistantMounted(false)} /> ) : null}
); } function CanvasTopBar({ title, titleDraft, isTitleEditing, onTitleDraftChange, onStartTitleEditing, onFinishTitleEditing, onCancelTitleEditing, canUndo, canRedo, onHome, onProjects, onCreateProject, onDeleteProject, onImportImage, onUndo, onRedo, assistantCollapsed, onExpandAssistant, }: { title: string; titleDraft: string; isTitleEditing: boolean; onTitleDraftChange: (value: string) => void; onStartTitleEditing: () => void; onFinishTitleEditing: () => void; onCancelTitleEditing: () => void; canUndo: boolean; canRedo: boolean; onHome: () => void; onProjects: () => void; onCreateProject: () => void; onDeleteProject: () => void; onImportImage: () => void; onUndo: () => void; onRedo: () => void; assistantCollapsed: boolean; onExpandAssistant: () => void; }) { const colorTheme = useThemeStore((state) => state.theme); const theme = canvasThemes[colorTheme]; const titleRef = useRef(null); const accountRef = useRef(null); const [shortcutsOpen, setShortcutsOpen] = useState(false); const [accountOpen, setAccountOpen] = useState(false); useEffect(() => { if (!isTitleEditing) return; const close = (event: PointerEvent) => { if (!titleRef.current?.contains(event.target as Node)) onFinishTitleEditing(); }; document.addEventListener("pointerdown", close, true); return () => document.removeEventListener("pointerdown", close, true); }, [isTitleEditing, onFinishTitleEditing]); useEffect(() => { if (!accountOpen) return; const close = (event: PointerEvent) => { if (!accountRef.current?.contains(event.target as Node)) setAccountOpen(false); }; document.addEventListener("pointerdown", close, true); return () => document.removeEventListener("pointerdown", close, true); }, [accountOpen]); return ( <>
, label: "主页", onClick: onHome }, { key: "projects", icon: , label: "我的画布", onClick: onProjects }, { type: "divider" }, { key: "new", icon: , label: "新建画布", onClick: onCreateProject }, { key: "delete", danger: true, icon: , label: "删除当前画布", onClick: onDeleteProject }, { type: "divider" }, { key: "import", icon: , label: "导入素材", onClick: onImportImage }, { type: "divider" }, { key: "undo", disabled: !canUndo, icon: , label: , onClick: onUndo }, { key: "redo", disabled: !canRedo, icon: , label: , onClick: onRedo }, ], }} >
{isTitleEditing ? ( onTitleDraftChange(event.target.value)} onBlur={onFinishTitleEditing} onKeyDown={(event) => { if (event.key === "Enter") onFinishTitleEditing(); if (event.key === "Escape") onCancelTitleEditing(); }} className="max-w-[280px] bg-transparent p-0 text-left text-lg font-semibold tracking-normal outline-none" style={{ color: theme.node.text }} /> ) : ( )}
node.parentElement || document.body} onOpenShortcuts={() => { setShortcutsOpen(true); setAccountOpen(false); }} /> {assistantCollapsed ? ( <> ) : null}
setShortcutsOpen(false)} footer={null} centered>
); } function MenuLabel({ text, shortcut }: { text: string; shortcut: string }) { return ( {text} {shortcut} ); } function Shortcut({ keys, value }: { keys: string[]; value: string }) { return (
{keys.map((key, index) => ( {index ? + : null} {key} ))} {value}
); } function imageExtension(dataUrl: string) { return dataUrl.match(/^data:image[/]([^;]+)/)?.[1] || dataUrl.match(/image[/]([^;]+)/)?.[1] || "png"; } function audioExtension(mimeType?: string) { return mimeType?.includes("wav") ? "wav" : "mp3"; } function imageMetadata(image: UploadedImage): CanvasNodeMetadata { return { content: image.url, storageKey: image.storageKey, status: "success", naturalWidth: image.width, naturalHeight: image.height, bytes: image.bytes, mimeType: image.mimeType }; } function videoMetadata(video: UploadedFile): CanvasNodeMetadata { return { content: video.url, storageKey: video.storageKey, status: "success", naturalWidth: video.width, naturalHeight: video.height, bytes: video.bytes, mimeType: video.mimeType || "video/mp4", durationMs: video.durationMs }; } function audioMetadata(audio: UploadedFile): CanvasNodeMetadata { return { content: audio.url, storageKey: audio.storageKey, status: "success", bytes: audio.bytes, mimeType: audio.mimeType || "audio/mpeg", durationMs: audio.durationMs }; } function buildImageGenerationMetadata(type: CanvasImageGenerationType, config: AiConfig, count: number, references: ReferenceImage[]): CanvasNodeMetadata { return { generationType: type, model: config.model, size: config.size, quality: config.quality, count, references: references.map(referenceUrl).filter((url): url is string => Boolean(url)), }; } function referenceUrl(image: ReferenceImage) { return image.storageKey || image.url || (!image.dataUrl.startsWith("data:") ? image.dataUrl : undefined); } function generationReferenceUrls(context: { referenceImages: ReferenceImage[]; referenceVideos: Array<{ storageKey?: string; url?: string }>; referenceAudios?: Array<{ storageKey?: string; url?: string }> }) { return [ ...context.referenceImages.map(referenceUrl).filter((url): url is string => Boolean(url)), ...context.referenceVideos.map((video) => video.storageKey || video.url).filter((url): url is string => Boolean(url)), ...(context.referenceAudios || []).map((audio) => audio.storageKey || audio.url).filter((url): url is string => Boolean(url)), ]; } async function resolveMetadataReferences(metadata: CanvasNodeMetadata) { if (metadata.generationType !== "edit") return []; if (!metadata.references?.length) return null; const references = await Promise.all( metadata.references.map(async (url, index) => { const dataUrl = url.startsWith("image:") ? await resolveImageUrl(url, "") : url; return dataUrl ? { id: `${index}`, name: `reference-${index}.png`, type: "image/png", dataUrl, storageKey: url.startsWith("image:") ? url : undefined } : null; }), ); return references.every(Boolean) ? (references as ReferenceImage[]) : null; } async function hydrateCanvasImages(nodes: CanvasNodeData[]) { return Promise.all( nodes.map(async (node) => { const content = node.metadata?.content; if ((node.type === CanvasNodeType.Video || node.type === CanvasNodeType.Audio) && node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveMediaUrl(node.metadata.storageKey, content) } }; if (node.type !== CanvasNodeType.Image || !content) return node; if (node.metadata?.storageKey) return { ...node, metadata: { ...node.metadata, content: await resolveImageUrl(node.metadata.storageKey, content) } }; if (!content.startsWith("data:image/")) return node; return { ...node, metadata: { ...node.metadata, ...imageMetadata(await uploadImage(content)) } }; }), ); } async function hydrateAssistantImages(sessions: CanvasAssistantSession[]) { const hydrateItem = async (item: T) => { if (item.storageKey) return { ...item, dataUrl: await resolveImageUrl(item.storageKey, item.dataUrl) }; if (item.dataUrl?.startsWith("data:image/")) { const image = await uploadImage(item.dataUrl); return { ...item, dataUrl: image.url, storageKey: image.storageKey }; } return item; }; return Promise.all( sessions.map(async (session) => ({ ...session, messages: await Promise.all( session.messages.map(async (message) => ({ ...message, references: await Promise.all((message.references || []).map(hydrateItem)), images: await Promise.all((message.images || []).map(hydrateItem)), })), ), })), ); } function getGenerationCount(count: string) { return Math.max(1, Math.min(15, Math.floor(Math.abs(Number(count)) || 1))); } function applyNodeConfigPatch(node: CanvasNodeData, patch: Partial) { const safePatch = patch || {}; const next = { ...node, metadata: { ...node.metadata, ...safePatch } }; const spec = node.type === CanvasNodeType.Video ? NODE_DEFAULT_SIZE[CanvasNodeType.Video] : NODE_DEFAULT_SIZE[CanvasNodeType.Image]; const size = typeof safePatch.size === "string" && !node.metadata?.content ? nodeSizeFromRatio(safePatch.size, spec.width, spec.height) : null; return size && (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Video) ? { ...next, ...size, position: { x: node.position.x + node.width / 2 - size.width / 2, y: node.position.y + node.height / 2 - size.height / 2 } } : next; } function normalizeConnection(firstNodeId: string, secondNodeId: string, nodes: CanvasNodeData[], firstHandleType: "source" | "target") { const first = nodes.find((node) => node.id === firstNodeId); const second = nodes.find((node) => node.id === secondNodeId); if (!first || !second || first.id === second.id) return null; if (first.type === CanvasNodeType.Config && second.type === CanvasNodeType.Config) return null; if (second.type === CanvasNodeType.Config) return { fromNodeId: first.id, toNodeId: second.id }; if (first.type === CanvasNodeType.Config && firstHandleType === "target") return { fromNodeId: second.id, toNodeId: first.id }; if (first.type === CanvasNodeType.Config) return { fromNodeId: first.id, toNodeId: second.id }; return { fromNodeId: first.id, toNodeId: second.id }; } function getInputSummary(inputs: NodeGenerationInput[]) { return { textCount: inputs.filter((input) => input.type === "text").length, imageCount: inputs.filter((input) => input.type === "image").length, videoCount: inputs.filter((input) => input.type === "video").length, audioCount: inputs.filter((input) => input.type === "audio").length, }; } function buildGenerationConfig(config: AiConfig, node: CanvasNodeData | undefined, mode: CanvasNodeGenerationMode): AiConfig { const defaultModel = mode === "image" ? config.imageModel : mode === "video" ? config.videoModel : config.textModel; return { ...config, model: node?.metadata?.model || defaultModel || config.model || defaultConfig.model, quality: node?.metadata?.quality || config.quality || defaultConfig.quality, size: node?.metadata?.size || config.size || defaultConfig.size, videoSeconds: node?.metadata?.seconds || config.videoSeconds || defaultConfig.videoSeconds, vquality: node?.metadata?.vquality || config.vquality || defaultConfig.vquality, videoGenerateAudio: node?.metadata?.generateAudio || config.videoGenerateAudio || defaultConfig.videoGenerateAudio, videoWatermark: node?.metadata?.watermark || config.videoWatermark || defaultConfig.videoWatermark, count: String(node?.metadata?.count || (mode === "image" ? 3 : config.count) || defaultConfig.count), }; } function resetInterruptedGeneration(nodes: CanvasNodeData[]) { return nodes.map((node) => (node.metadata?.status === "loading" ? { ...node, metadata: { ...node.metadata, status: "error" as const, errorDetails: "页面刷新后生成已中断，请重新生成。" } } : node)); } function findRetrySourceNode(nodeId: string, nodes: CanvasNodeData[], connections: CanvasConnection[]) { const queue = connections.filter((connection) => connection.toNodeId === nodeId).map((connection) => connection.fromNodeId); const visited = new Set(); while (queue.length) { const id = queue.shift()!; if (visited.has(id)) continue; visited.add(id); const node = nodes.find((item) => item.id === id); if (node?.type === CanvasNodeType.Config) return node; connections.filter((connection) => connection.toNodeId === id).forEach((connection) => queue.push(connection.fromNodeId)); } return null; } function sourceNodeReferenceImages(node: CanvasNodeData | null) { if (!node || node.type !== CanvasNodeType.Image || !node.metadata?.content) return []; return [ { id: node.id, name: `${node.title || node.id}.png`, type: node.metadata.mimeType || "image/png", dataUrl: node.metadata.content, storageKey: node.metadata.storageKey, }, ]; } function isAudioFile(file: File) { return file.type.startsWith("audio/") || /\.(mp3|wav)$/i.test(file.name); } function isHiddenBatchChild(node: CanvasNodeData, nodes: CanvasNodeData[], collapsingBatchIds?: Set) { const rootId = node.metadata?.batchRootId; if (!rootId) return false; const root = nodes.find((item) => item.id === rootId); if (root && collapsingBatchIds?.has(rootId)) return false; return Boolean(root && !root.metadata?.imageBatchExpanded); } function isHiddenBatchConnectionEndpoint(node: CanvasNodeData, nodes: CanvasNodeData[]) { const rootId = node.metadata?.batchRootId; if (!rootId) return false; const root = nodes.find((item) => item.id === rootId); return Boolean(root && !root.metadata?.imageBatchExpanded); } function buildAngleLabel(params: CanvasImageAngleParams) { const horizontal = params.horizontalAngle === 0 ? "正面视角" : params.horizontalAngle > 0 ? `向右旋转 ${params.horizontalAngle} 度` : `向左旋转 ${Math.abs(params.horizontalAngle)} 度`; const pitch = params.pitchAngle === 0 ? "水平视角" : params.pitchAngle > 0 ? `俯视 ${params.pitchAngle} 度` : `仰视 ${Math.abs(params.pitchAngle)} 度`; return `AI 多角度：${horizontal}，${pitch}，镜头距离 ${params.cameraDistance.toFixed(1)}，${params.wideAngle ? "广角" : "标准"}镜头`; } function buildAnglePrompt(params: CanvasImageAngleParams) { return `基于参考图重新生成同一主体的新视角，保持主体、颜色、材质和画面风格一致，不要只做透视变形。${buildAngleLabel(params)}。`; }