@@ -81,15 +116,37 @@ export function CanvasMergeStatusToast({ progress, theme }: { progress: MergeVid
export function CanvasAgentChangeToast({ change, theme, onView, onUndo, onClose }: { change: CanvasAgentChange; theme: CanvasTheme; onView: () => void; onUndo: () => void; onClose: () => void }) {
return (
-
+
-
- Agent 已写回画布{change.summary} · 可撤销最近 {change.undoCount} 批
-
+
+
+
+
+ Agent 已写回画布
+
+ {change.summary} · 可撤销最近 {change.undoCount} 批
+
+
+
- {change.nodeIds.length ? : null}
-
+ {change.nodeIds.length ? (
+
+ ) : null}
+
);
diff --git a/web/src/pages/canvas/canvas-refresh-shell.tsx b/web/src/pages/canvas/canvas-refresh-shell.tsx
new file mode 100644
index 000000000..31d35e76f
--- /dev/null
+++ b/web/src/pages/canvas/canvas-refresh-shell.tsx
@@ -0,0 +1,38 @@
+export function CanvasRefreshShell() {
+ return (
+
+
+
+
+ {Array.from({ length: 7 }).map((_, index) => (
+
+ ))}
+
+ );
+}
diff --git a/web/src/pages/canvas/project.tsx b/web/src/pages/canvas/project.tsx
index 46dc2bc0b..fd6e1bd99 100644
--- a/web/src/pages/canvas/project.tsx
+++ b/web/src/pages/canvas/project.tsx
@@ -52,21 +52,10 @@ import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-refer
import { CanvasConnectionCreateMenu, CanvasNodePanelOverlay } from "@/components/canvas/canvas-workspace-overlays";
import { CanvasLeaferGraphicsLayer } from "@/components/canvas/canvas-leafer-graphics-layer";
import { CanvasFreeformEmptyState, CanvasLinkedProjectEmptyState, CanvasShortDramaEmptyState, CanvasShortDramaGuide, CanvasStoryInputNodeContent, CanvasStylePlaceholderNodeContent } from "@/components/canvas/canvas-short-drama-entry";
-import {
- createCanvasNode,
- getInputSummary,
- isHiddenBatchChild,
- persistCanvasWorkspaceMode,
- readCanvasWorkspaceMode,
-} from "@/lib/canvas/canvas-project-domain";
-import {
- deriveStoryboardPipelineProgress,
-} from "@/lib/canvas/canvas-storyboard-progress";
+import { createCanvasNode, getInputSummary, isHiddenBatchChild, persistCanvasWorkspaceMode, readCanvasWorkspaceMode } from "@/lib/canvas/canvas-project-domain";
+import { deriveStoryboardPipelineProgress } from "@/lib/canvas/canvas-storyboard-progress";
import { CanvasAgentChangeToast, CanvasMergeStatusToast, CanvasUploadStatusToast } from "./canvas-project-feedback";
-import {
- backendProviderConfig,
- getGenerationCount,
-} from "@/lib/canvas/canvas-project-generation";
+import { backendProviderConfig, getGenerationCount } from "@/lib/canvas/canvas-project-generation";
import { CanvasTopBar } from "./canvas-project-top-bar";
import { CanvasFocusModeBar } from "@/components/canvas/canvas-focus-mode-bar";
import { CanvasProjectContextMenu } from "./canvas-project-context-menu";
@@ -74,6 +63,7 @@ import { CanvasProjectMediaDialogs } from "./canvas-project-media-dialogs";
import { CanvasProjectSelectionToolbar } from "./canvas-project-selection-toolbar";
import { CanvasProjectStatusDialogs } from "./canvas-project-status-dialogs";
import { CanvasProjectWorldLayers } from "./canvas-project-world-layers";
+import { CanvasRefreshShell } from "./canvas-refresh-shell";
import type { CanvasImageEmotionPayload } from "@/components/canvas/canvas-node-emotion-panel";
import { CanvasEmotionWorkspace } from "@/components/canvas/canvas-emotion-workspace";
import { removeCanvasDrawing } from "@/lib/canvas/canvas-drawing-storage";
@@ -143,41 +133,6 @@ export default function CanvasPage() {
return
;
}
-function CanvasRefreshShell() {
- return (
-
-
-
-
- {Array.from({ length: 7 }).map((_, index) => (
-
- ))}
-
- );
-}
-
function InfiniteCanvasPage() {
const { message } = App.useApp();
const params = useParams<{ id: string }>();
@@ -319,16 +274,7 @@ function InfiniteCanvasPage() {
[cleanupAssetImages, getHistoryCleanupContext],
);
- const {
- addedSkills,
- clearCanvasFiles,
- createAndOpenProject,
- currentProject,
- deleteCurrentProject,
- renameCurrentProject,
- saveCanvasProject,
- updateProject,
- } = useCanvasProjectLifecycle({
+ const { addedSkills, clearCanvasFiles, createAndOpenProject, currentProject, deleteCurrentProject, renameCurrentProject, saveCanvasProject, updateProject } = useCanvasProjectLifecycle({
projectId,
projectLoaded,
nodes,
@@ -360,25 +306,10 @@ function InfiniteCanvasPage() {
if (!projectLoaded || !linkedProjectQuery.data) return;
setNodes((current) => refreshCanvasCharacterReferenceNodes(current, linkedProjectQuery.data.assets));
}, [linkedProjectQuery.data, projectLoaded, setNodes]);
- const canvasContext = useMemo(
- () => summarizeCanvasContext(nodes, selectedNodeIds, linkedProjectQuery.data?.units),
- [linkedProjectQuery.data?.units, nodes, selectedNodeIds],
- );
+ const canvasContext = useMemo(() => summarizeCanvasContext(nodes, selectedNodeIds, linkedProjectQuery.data?.units), [linkedProjectQuery.data?.units, nodes, selectedNodeIds]);
- const {
- bindGenerationTask,
- cancelNodeTask,
- confirmStopGeneration,
- finishGenerationRequest,
- openNodeTaskDetails,
- runningNodeId,
- setRunningNodeId,
- setTaskDetail,
- startGenerationRequest,
- taskDetail,
- taskDetailLoading,
- taskDetailLogs,
- } = useCanvasGeneration({ projectId, domainProjectId: linkedProjectId, projectLoaded, nodes, nodesRef, setNodes });
+ const { bindGenerationTask, cancelNodeTask, confirmStopGeneration, finishGenerationRequest, openNodeTaskDetails, runningNodeId, setRunningNodeId, setTaskDetail, startGenerationRequest, taskDetail, taskDetailLoading, taskDetailLogs } =
+ useCanvasGeneration({ projectId, domainProjectId: linkedProjectId, projectLoaded, nodes, nodesRef, setNodes });
useEffect(() => {
if (!projectLoaded || !["new", "recent", "choose"].includes(searchParams.get("mode") || "")) return;
@@ -400,7 +331,6 @@ function InfiniteCanvasPage() {
setFocusDockRevealed(false);
}, [closeAgent, focusMode]);
-
useEffect(() => {
if (!dialogNodeId) setNodeImageSettingsOpen(false);
}, [dialogNodeId]);
@@ -419,7 +349,7 @@ function InfiniteCanvasPage() {
const updateSize = () => {
const rect = el.getBoundingClientRect();
- setSize((current) => current.width === rect.width && current.height === rect.height ? current : { width: rect.width, height: rect.height });
+ setSize((current) => (current.width === rect.width && current.height === rect.height ? current : { width: rect.width, height: rect.height }));
if (!didInitialCenterRef.current) {
didInitialCenterRef.current = true;
const current = viewportRef.current;
@@ -484,7 +414,7 @@ function InfiniteCanvasPage() {
};
if (current) {
if (current.metadata?.stylePresetId === preset.id && current.metadata?.content === preset.prompt && current.metadata?.locked) return;
- setNodes((nodes) => nodes.map((node) => node.id === current.id ? { ...node, title: `项目画风 · ${preset.title}`, metadata: { ...node.metadata, ...nextMetadata } } : node));
+ setNodes((nodes) => nodes.map((node) => (node.id === current.id ? { ...node, title: `项目画风 · ${preset.title}`, metadata: { ...node.metadata, ...nextMetadata } } : node)));
return;
}
const node = createCanvasNode(CanvasNodeType.Text, getCanvasCenter(), nextMetadata);
@@ -587,37 +517,39 @@ function InfiniteCanvasPage() {
bindGenerationTask,
});
- const handleNodesDeleted = useCallback((removedIds: Set
, nextNodes: CanvasNodeData[], removedNodes: CanvasNodeData[]) => {
- const clearDeletedId = (current: string | null) => current && removedIds.has(current) ? null : current;
- setHoveredNodeId(clearDeletedId);
- setToolbarNodeId(clearDeletedId);
- setDialogNodeId(clearDeletedId);
- setTextEditorNodeId(clearDeletedId);
- setCharacterReferenceNodeId(clearDeletedId);
- setDrawingNodeId(clearDeletedId);
- setInfoNodeId(clearDeletedId);
- setCropNodeId(clearDeletedId);
- setMaskEditNodeId(clearDeletedId);
- setAnnotationNodeId(clearDeletedId);
- setSplitNodeId(clearDeletedId);
- setUpscaleNodeId(clearDeletedId);
- setAngleNodeId(clearDeletedId);
- setEmotionNodeId(clearDeletedId);
- setSuperResolveNodeId(clearDeletedId);
- setPreviewNodeId(clearDeletedId);
- setRunningNodeId(clearDeletedId);
- setScriptEditorNodeId(clearDeletedId);
- setDirectorNodeId(clearDeletedId);
- setVersionCompareRootId(clearDeletedId);
- setScriptScrollTopById((current) => Object.fromEntries(Object.entries(current).filter(([id]) => !removedIds.has(id))));
- setContextMenu((current) => current?.type === "node" && removedIds.has(current.nodeId) ? null : current);
- const removedDrawingIds = removedNodes.flatMap((node) => node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []);
- if (removedDrawingIds.length) {
- void Promise.all(removedDrawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId)))
- .catch(() => message.warning("绘图节点已删除，但本地绘图缓存清理失败"));
- }
- cleanupCanvasFiles({ projectId, nodes: nextNodes, chatSessions });
- }, [chatSessions, cleanupCanvasFiles, message, projectId, setAngleNodeId, setAnnotationNodeId, setCropNodeId, setEmotionNodeId, setMaskEditNodeId, setSplitNodeId, setUpscaleNodeId, setRunningNodeId]);
+ const handleNodesDeleted = useCallback(
+ (removedIds: Set, nextNodes: CanvasNodeData[], removedNodes: CanvasNodeData[]) => {
+ const clearDeletedId = (current: string | null) => (current && removedIds.has(current) ? null : current);
+ setHoveredNodeId(clearDeletedId);
+ setToolbarNodeId(clearDeletedId);
+ setDialogNodeId(clearDeletedId);
+ setTextEditorNodeId(clearDeletedId);
+ setCharacterReferenceNodeId(clearDeletedId);
+ setDrawingNodeId(clearDeletedId);
+ setInfoNodeId(clearDeletedId);
+ setCropNodeId(clearDeletedId);
+ setMaskEditNodeId(clearDeletedId);
+ setAnnotationNodeId(clearDeletedId);
+ setSplitNodeId(clearDeletedId);
+ setUpscaleNodeId(clearDeletedId);
+ setAngleNodeId(clearDeletedId);
+ setEmotionNodeId(clearDeletedId);
+ setSuperResolveNodeId(clearDeletedId);
+ setPreviewNodeId(clearDeletedId);
+ setRunningNodeId(clearDeletedId);
+ setScriptEditorNodeId(clearDeletedId);
+ setDirectorNodeId(clearDeletedId);
+ setVersionCompareRootId(clearDeletedId);
+ setScriptScrollTopById((current) => Object.fromEntries(Object.entries(current).filter(([id]) => !removedIds.has(id))));
+ setContextMenu((current) => (current?.type === "node" && removedIds.has(current.nodeId) ? null : current));
+ const removedDrawingIds = removedNodes.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
+ if (removedDrawingIds.length) {
+ void Promise.all(removedDrawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("绘图节点已删除，但本地绘图缓存清理失败"));
+ }
+ cleanupCanvasFiles({ projectId, nodes: nextNodes, chatSessions });
+ },
+ [chatSessions, cleanupCanvasFiles, message, projectId, setAngleNodeId, setAnnotationNodeId, setCropNodeId, setEmotionNodeId, setMaskEditNodeId, setSplitNodeId, setUpscaleNodeId, setRunningNodeId],
+ );
const {
alignSelectedNodes,
@@ -653,33 +585,23 @@ function InfiniteCanvasPage() {
onNodesDeleted: handleNodesDeleted,
});
- const {
- cancelPendingConnectionCreate,
- closeConnectionCreateMenu,
- connectionTargetAnchorRatio,
- connectionTargetNodeId,
- connectingParams,
- createConnectedNode,
- handleConnectStart,
- mouseWorld,
- pendingConnectionCreate,
- setConnecting,
- } = useCanvasConnectionController({
- projectId,
- defaultDrawingEngine,
- nodesRef,
- connectionsRef,
- viewportRef,
- scriptScrollTopById,
- screenToCanvas,
- setNodes,
- setConnections,
- setSelectedNodeIds,
- setSelectedConnectionId,
- setContextMenu,
- setDialogNodeId,
- setDrawingNodeId,
- });
+ const { cancelPendingConnectionCreate, closeConnectionCreateMenu, connectionTargetAnchorRatio, connectionTargetNodeId, connectingParams, createConnectedNode, handleConnectStart, mouseWorld, pendingConnectionCreate, setConnecting } =
+ useCanvasConnectionController({
+ projectId,
+ defaultDrawingEngine,
+ nodesRef,
+ connectionsRef,
+ viewportRef,
+ scriptScrollTopById,
+ screenToCanvas,
+ setNodes,
+ setConnections,
+ setSelectedNodeIds,
+ setSelectedConnectionId,
+ setContextMenu,
+ setDialogNodeId,
+ setDrawingNodeId,
+ });
const handleCanvasSelectionStart = useCallback(() => {
setContextMenu(null);
@@ -700,7 +622,7 @@ function InfiniteCanvasPage() {
} else if (node.type === CanvasNodeType.Script) {
setDialogNodeId(null);
} else if (node.type === CanvasNodeType.Text || node.type === CanvasNodeType.Frame) {
- setDialogNodeId((current) => current === node.id ? current : null);
+ setDialogNodeId((current) => (current === node.id ? current : null));
} else {
setDialogNodeId(node.id);
}
@@ -713,19 +635,7 @@ function InfiniteCanvasPage() {
setDialogNodeId(null);
}, []);
- const {
- alignmentGuides,
- cancelSelectionBox,
- deselectCanvas,
- dragPreview,
- frameDropTargetId,
- handleCanvasMouseDown,
- handleNodeMouseDown,
- isNodeDragging,
- nodeDraggingRef,
- selectionBoundsElementRef,
- selectionBox,
- } = useCanvasSelectionController({
+ const { alignmentGuides, cancelSelectionBox, deselectCanvas, dragPreview, frameDropTargetId, handleCanvasMouseDown, handleNodeMouseDown, isNodeDragging, nodeDraggingRef, selectionBoundsElementRef, selectionBox } = useCanvasSelectionController({
containerRef,
nodesRef,
viewportRef,
@@ -957,15 +867,12 @@ function InfiniteCanvasPage() {
openTextEditor: openTextNodeEditor,
});
- const shortDramaGuide = shortDramaEnabled && !currentProject?.projectId && shortDramaProgress.active
- ? { progress: shortDramaProgress, collapsed: shortDramaGuideCollapsed, onToggle: () => setShortDramaGuideCollapsed((value) => !value) }
- : undefined;
+ const shortDramaGuide = shortDramaEnabled && !currentProject?.projectId && shortDramaProgress.active ? { progress: shortDramaProgress, collapsed: shortDramaGuideCollapsed, onToggle: () => setShortDramaGuideCollapsed((value) => !value) } : undefined;
const clearCanvas = useCallback(() => {
- const drawingIds = nodesRef.current.flatMap((node) => node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []);
+ const drawingIds = nodesRef.current.flatMap((node) => (node.type === CanvasNodeType.Drawing && node.metadata?.drawingId ? [node.metadata.drawingId] : []));
if (drawingIds.length) {
- void Promise.all(drawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId)))
- .catch(() => message.warning("画布已清空，但部分本地绘图缓存清理失败"));
+ void Promise.all(drawingIds.map((drawingId) => removeCanvasDrawing(projectId, drawingId))).catch(() => message.warning("画布已清空，但部分本地绘图缓存清理失败"));
}
setNodes([]);
setConnections([]);
@@ -1092,7 +999,7 @@ function InfiniteCanvasPage() {
const mediaURL = mediaPath ? new URL(mediaPath, window.location.href).toString() : "";
if (!mediaURL) throw new Error("当前媒体只有本地内容，没有可复制的地址");
if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(mediaURL);
- else if (!await copyToClipboard(mediaURL)) throw new Error("当前浏览器不支持写入剪贴板");
+ else if (!(await copyToClipboard(mediaURL))) throw new Error("当前浏览器不支持写入剪贴板");
message.success(node?.type === CanvasNodeType.Video ? "视频地址已复制" : "图片地址已复制");
} catch (error) {
message.error(error instanceof Error ? error.message : "媒体地址复制失败");
@@ -1119,16 +1026,19 @@ function InfiniteCanvasPage() {
[closeConnectionCreateMenu, screenToCanvas],
);
- const handleNodeContextMenu = useCallback((event: ReactMouseEvent, id: string) => {
- event.preventDefault();
- event.stopPropagation();
- setSelectedNodeIds(new Set([id]));
- setSelectedConnectionId(null);
- closeConnectionCreateMenu();
- setToolbarNodeId(null);
- setDialogNodeId(null);
- setContextMenu({ type: "node", x: event.clientX, y: event.clientY, nodeId: id });
- }, [closeConnectionCreateMenu]);
+ const handleNodeContextMenu = useCallback(
+ (event: ReactMouseEvent, id: string) => {
+ event.preventDefault();
+ event.stopPropagation();
+ setSelectedNodeIds(new Set([id]));
+ setSelectedConnectionId(null);
+ closeConnectionCreateMenu();
+ setToolbarNodeId(null);
+ setDialogNodeId(null);
+ setContextMenu({ type: "node", x: event.clientX, y: event.clientY, nodeId: id });
+ },
+ [closeConnectionCreateMenu],
+ );
const handleGenerateNode = useCanvasGenerationExecutor({
projectId,
@@ -1150,12 +1060,7 @@ function InfiniteCanvasPage() {
generateNodeRef.current = handleGenerateNode;
}, [handleGenerateNode]);
- const {
- cancelSubmittedBatchItem,
- enqueueGenerationBatch,
- retryFailedBatchItems,
- stopRemainingBatchItems,
- } = useCanvasGenerationBatches({
+ const { cancelSubmittedBatchItem, enqueueGenerationBatch, retryFailedBatchItems, stopRemainingBatchItems } = useCanvasGenerationBatches({
projectId,
projectLoaded,
nodes,
@@ -1164,27 +1069,16 @@ function InfiniteCanvasPage() {
handleGenerateNode,
});
- const {
- addScriptRow,
- createAndGenerateScriptVideos,
- createScriptActionBoards,
- createScriptImageNodes,
- createScriptVideoNodes,
- generateScriptImages,
- generateScriptRows,
- generateScriptVideos,
- removeScriptRow,
- replaceScriptRows,
- updateScriptRow,
- } = useCanvasStoryboard({
- projectId,
- nodesRef,
- connectionsRef,
- setNodes,
- setConnections,
- setSelectedNodeIds,
- enqueueGenerationBatch,
- });
+ const { addScriptRow, createAndGenerateScriptVideos, createScriptActionBoards, createScriptImageNodes, createScriptVideoNodes, generateScriptImages, generateScriptRows, generateScriptVideos, removeScriptRow, replaceScriptRows, updateScriptRow } =
+ useCanvasStoryboard({
+ projectId,
+ nodesRef,
+ connectionsRef,
+ setNodes,
+ setConnections,
+ setSelectedNodeIds,
+ enqueueGenerationBatch,
+ });
const handleRetryNode = useCanvasGenerationRetry({
projectId,
@@ -1275,108 +1169,153 @@ function InfiniteCanvasPage() {
[configInputsById, confirmStopGeneration, handleConfigNodeChange, handleGenerateNode, handleNodePromptChange, mentionReferencesByNodeId, runningNodeId, skillMentionReferences, workspaceMode],
);
- const renderCanvasNodeContent = useCallback((contentNode: CanvasNodeData) => {
- if (contentNode.metadata?.workflowKind === "character" && contentNode.metadata.characterAssetId) {
- return ;
- }
- if (contentNode.metadata?.workflowKind === "styleboard" && !contentNode.metadata.content) {
- return setStylePickerOpen(true)} />;
- }
- if (contentNode.metadata?.workflowKind === "story_input") {
- return openStoryInput(contentNode.id)} />;
- }
- if (contentNode.type === CanvasNodeType.Script) {
- const pipeline = deriveStoryboardPipelineProgress(contentNode, nodesRef.current, connectionsRef.current);
- const rowIds = pipeline.rows.map((item) => item.row.id);
+ const renderCanvasNodeContent = useCallback(
+ (contentNode: CanvasNodeData) => {
+ if (contentNode.metadata?.workflowKind === "character" && contentNode.metadata.characterAssetId) {
+ return ;
+ }
+ if (contentNode.metadata?.workflowKind === "styleboard" && !contentNode.metadata.content) {
+ return setStylePickerOpen(true)} />;
+ }
+ if (contentNode.metadata?.workflowKind === "story_input") {
+ return openStoryInput(contentNode.id)} />;
+ }
+ if (contentNode.type === CanvasNodeType.Script) {
+ const pipeline = deriveStoryboardPipelineProgress(contentNode, nodesRef.current, connectionsRef.current);
+ const rowIds = pipeline.rows.map((item) => item.row.id);
+ return (
+ setScriptEditorNodeId(contentNode.id)}
+ onCreateImageNodes={() => createScriptImageNodes(contentNode.id)}
+ onCreateVideoNodes={() => createScriptVideoNodes(contentNode.id)}
+ onGenerateImages={() => void generateScriptImages(contentNode.id, rowIds)}
+ onGenerateVideos={() => (contentNode.metadata?.storyboardVideoInputMode === "keyframe" ? void generateScriptVideos(contentNode.id, rowIds) : void createAndGenerateScriptVideos(contentNode.id, rowIds))}
+ onVideoInputModeChange={(storyboardVideoInputMode) => handleConfigNodeChange(contentNode.id, { storyboardVideoInputMode })}
+ onMergeVideos={() => void mergeVideosByIds(pipeline.successfulVideoNodeIds)}
+ onCreateActionBoards={() => void createScriptActionBoards(contentNode.id)}
+ onRetryBatch={(batchId) => retryFailedBatchItems(contentNode.id, batchId)}
+ onRetryBatchItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
+ onStopBatch={(batchId) => stopRemainingBatchItems(contentNode.id, batchId)}
+ onCancelBatchItem={(batchId, itemId) => cancelSubmittedBatchItem(contentNode.id, batchId, itemId)}
+ onAddRow={() => addScriptRow(contentNode.id)}
+ onRemoveRow={(rowId) => removeScriptRow(contentNode.id, rowId)}
+ onUpdateRow={(rowId, patch) => updateScriptRow(contentNode.id, rowId, patch)}
+ onPromptChange={(composerContent) => handleConfigNodeChange(contentNode.id, { composerContent })}
+ onGenerateScript={(prompt) => void generateScriptRows(contentNode.id, prompt)}
+ onModelChange={(model) => handleConfigNodeChange(contentNode.id, { model })}
+ onShotDurationChange={(duration: StoryboardShotDuration) => handleConfigNodeChange(contentNode.id, { storyboardShotDuration: duration })}
+ onShotCountChange={(count: StoryboardShotCount) => handleConfigNodeChange(contentNode.id, { storyboardShotCount: count })}
+ workspaceMode={workspaceMode}
+ onComposerHeightChange={(height) => {
+ if (contentNode.metadata?.storyboardComposerHeight === height) return;
+ handleConfigNodeChange(contentNode.id, { storyboardComposerHeight: height });
+ const minHeight = storyboardMinNodeHeight(height);
+ if (contentNode.height < minHeight) handleNodeResize(contentNode.id, contentNode.width, minHeight);
+ }}
+ onConnectStart={(event, rowId, handleType) => handleConnectStart(event, contentNode.id, handleType, rowId === "context" ? "storyboard:context" : `row:${rowId}`)}
+ onScrollTopChange={(scrollTop) => setScriptScrollTopById((current) => (current[contentNode.id] === scrollTop ? current : { ...current, [contentNode.id]: scrollTop }))}
+ />
+ );
+ }
+ if (contentNode.metadata?.directorSceneId) {
+ return (
+ scene.id === contentNode.metadata?.directorSceneId) || null}
+ previewUrl={nodesRef.current.find((item) => item.id === contentNode.metadata?.directorPreviewNodeId)?.metadata?.content}
+ professional={workspaceMode === "professional"}
+ onOpen={() => openDirectorWorkbench(contentNode.id)}
+ />
+ );
+ }
return (
- setScriptEditorNodeId(contentNode.id)}
- onCreateImageNodes={() => createScriptImageNodes(contentNode.id)}
- onCreateVideoNodes={() => createScriptVideoNodes(contentNode.id)}
- onGenerateImages={() => void generateScriptImages(contentNode.id, rowIds)}
- onGenerateVideos={() => contentNode.metadata?.storyboardVideoInputMode === "keyframe" ? void generateScriptVideos(contentNode.id, rowIds) : void createAndGenerateScriptVideos(contentNode.id, rowIds)}
- onVideoInputModeChange={(storyboardVideoInputMode) => handleConfigNodeChange(contentNode.id, { storyboardVideoInputMode })}
- onMergeVideos={() => void mergeVideosByIds(pipeline.successfulVideoNodeIds)}
- onCreateActionBoards={() => void createScriptActionBoards(contentNode.id)}
- onRetryBatch={(batchId) => retryFailedBatchItems(contentNode.id, batchId)}
- onRetryBatchItem={(batchId, itemId) => retryFailedBatchItems(contentNode.id, batchId, itemId)}
- onStopBatch={(batchId) => stopRemainingBatchItems(contentNode.id, batchId)}
- onCancelBatchItem={(batchId, itemId) => cancelSubmittedBatchItem(contentNode.id, batchId, itemId)}
- onAddRow={() => addScriptRow(contentNode.id)}
- onRemoveRow={(rowId) => removeScriptRow(contentNode.id, rowId)}
- onUpdateRow={(rowId, patch) => updateScriptRow(contentNode.id, rowId, patch)}
- onPromptChange={(composerContent) => handleConfigNodeChange(contentNode.id, { composerContent })}
- onGenerateScript={(prompt) => void generateScriptRows(contentNode.id, prompt)}
- onModelChange={(model) => handleConfigNodeChange(contentNode.id, { model })}
- onShotDurationChange={(duration: StoryboardShotDuration) => handleConfigNodeChange(contentNode.id, { storyboardShotDuration: duration })}
- onShotCountChange={(count: StoryboardShotCount) => handleConfigNodeChange(contentNode.id, { storyboardShotCount: count })}
- workspaceMode={workspaceMode}
- onComposerHeightChange={(height) => {
- if (contentNode.metadata?.storyboardComposerHeight === height) return;
- handleConfigNodeChange(contentNode.id, { storyboardComposerHeight: height });
- const minHeight = storyboardMinNodeHeight(height);
- if (contentNode.height < minHeight) handleNodeResize(contentNode.id, contentNode.width, minHeight);
+ isRunning={runningNodeId === contentNode.id}
+ inputSummary={getInputSummary(configInputsById.get(contentNode.id) || [])}
+ onConfigChange={handleConfigNodeChange}
+ onComposerToggle={() => setDialogNodeId((current) => (current === contentNode.id ? null : contentNode.id))}
+ onStop={confirmStopGeneration}
+ onGenerate={(nodeId) => {
+ const target = nodesRef.current.find((item) => item.id === nodeId);
+ void handleGenerateNode(nodeId, target?.metadata?.generationMode || "image", target?.metadata?.composerContent ?? target?.metadata?.prompt ?? "");
}}
- onConnectStart={(event, rowId, handleType) => handleConnectStart(event, contentNode.id, handleType, rowId === "context" ? "storyboard:context" : `row:${rowId}`)}
- onScrollTopChange={(scrollTop) => setScriptScrollTopById((current) => current[contentNode.id] === scrollTop ? current : { ...current, [contentNode.id]: scrollTop })}
+ workspaceMode={workspaceMode}
/>
);
- }
- if (contentNode.metadata?.directorSceneId) {
- return (
- scene.id === contentNode.metadata?.directorSceneId) || null}
- previewUrl={nodesRef.current.find((item) => item.id === contentNode.metadata?.directorPreviewNodeId)?.metadata?.content}
- professional={workspaceMode === "professional"}
- onOpen={() => openDirectorWorkbench(contentNode.id)}
- />
- );
- }
- return (
- setDialogNodeId((current) => (current === contentNode.id ? null : contentNode.id))}
- onStop={confirmStopGeneration}
- onGenerate={(nodeId) => {
- const target = nodesRef.current.find((item) => item.id === nodeId);
- void handleGenerateNode(nodeId, target?.metadata?.generationMode || "image", target?.metadata?.composerContent ?? target?.metadata?.prompt ?? "");
- }}
- workspaceMode={workspaceMode}
- />
- );
- }, [addScriptRow, cancelSubmittedBatchItem, configInputsById, confirmStopGeneration, createAndGenerateScriptVideos, createScriptActionBoards, createScriptImageNodes, createScriptVideoNodes, currentProject?.directorScenes, generateScriptImages, generateScriptRows, generateScriptVideos, handleConfigNodeChange, handleConnectStart, handleGenerateNode, handleNodeResize, mentionReferencesByNodeId, mergeVideosByIds, openDirectorWorkbench, openStoryInput, removeScriptRow, retryFailedBatchItems, runningNodeId, stopRemainingBatchItems, updateScriptRow, viewport.k, workspaceMode]);
+ },
+ [
+ addScriptRow,
+ cancelSubmittedBatchItem,
+ configInputsById,
+ confirmStopGeneration,
+ createAndGenerateScriptVideos,
+ createScriptActionBoards,
+ createScriptImageNodes,
+ createScriptVideoNodes,
+ currentProject?.directorScenes,
+ generateScriptImages,
+ generateScriptRows,
+ generateScriptVideos,
+ handleConfigNodeChange,
+ handleConnectStart,
+ handleGenerateNode,
+ handleNodeResize,
+ mentionReferencesByNodeId,
+ mergeVideosByIds,
+ openDirectorWorkbench,
+ openStoryInput,
+ removeScriptRow,
+ retryFailedBatchItems,
+ runningNodeId,
+ stopRemainingBatchItems,
+ updateScriptRow,
+ viewport.k,
+ workspaceMode,
+ ],
+ );
- const handleCanvasNodeHoverStart = useCallback((nodeId: string) => {
- if (nodeDraggingRef.current) return;
- setHoveredNodeId(nodeId);
- keepNodeToolbar(nodeId);
- }, [keepNodeToolbar]);
- const handleCanvasNodeHoverEnd = useCallback((nodeId: string) => {
- setHoveredNodeId((current) => (current === nodeId ? null : current));
- hideNodeToolbar();
- }, [hideNodeToolbar]);
- const retryCanvasNode = useCallback((node: CanvasNodeData) => {
- if (node.type === CanvasNodeType.Script) {
- const prompt = (node.metadata?.composerContent || node.metadata?.prompt || "").trim();
- if (!prompt) {
- message.warning("分镜脚本缺少剧情内容，无法重试");
+ const handleCanvasNodeHoverStart = useCallback(
+ (nodeId: string) => {
+ if (nodeDraggingRef.current) return;
+ setHoveredNodeId(nodeId);
+ keepNodeToolbar(nodeId);
+ },
+ [keepNodeToolbar],
+ );
+ const handleCanvasNodeHoverEnd = useCallback(
+ (nodeId: string) => {
+ setHoveredNodeId((current) => (current === nodeId ? null : current));
+ hideNodeToolbar();
+ },
+ [hideNodeToolbar],
+ );
+ const retryCanvasNode = useCallback(
+ (node: CanvasNodeData) => {
+ if (node.type === CanvasNodeType.Script) {
+ const prompt = (node.metadata?.composerContent || node.metadata?.prompt || "").trim();
+ if (!prompt) {
+ message.warning("分镜脚本缺少剧情内容，无法重试");
+ return;
+ }
+ void generateScriptRows(node.id, prompt);
return;
}
- void generateScriptRows(node.id, prompt);
- return;
- }
- void handleRetryNode(node);
- }, [generateScriptRows, handleRetryNode, message]);
- const openCanvasNodeTaskDetails = useCallback((node: CanvasNodeData) => { void openNodeTaskDetails(node); }, [openNodeTaskDetails]);
+ void handleRetryNode(node);
+ },
+ [generateScriptRows, handleRetryNode, message],
+ );
+ const openCanvasNodeTaskDetails = useCallback(
+ (node: CanvasNodeData) => {
+ void openNodeTaskDetails(node);
+ },
+ [openNodeTaskDetails],
+ );
const openCanvasNodeVersions = useCallback((node: CanvasNodeData) => setVersionCompareRootId(node.metadata?.versionOfNodeId || node.id), []);
const viewCanvasNodeImage = useCallback((node: CanvasNodeData) => setPreviewNodeId(node.id), []);
const editCanvasDirector = useCallback((node: CanvasNodeData) => openDirectorWorkbench(node.id), [openDirectorWorkbench]);
@@ -1404,7 +1343,11 @@ function InfiniteCanvasPage() {
) : (
{ setCinematicAgentEntry(true); setAgentMode("online"); openAgent("online"); }}
+ onOpenAgent={() => {
+ setCinematicAgentEntry(true);
+ setAgentMode("online");
+ openAgent("online");
+ }}
onUpload={() => handleUploadRequest()}
onAddText={() => createNode(CanvasNodeType.Text)}
onAddScript={() => createNode(CanvasNodeType.Script)}
@@ -1414,474 +1357,608 @@ function InfiniteCanvasPage() {
return (
<>
- 跳转到画布主内容
-
- {!focusMode && shortDramaEnabled && currentProject?.projectId ? openProjectAssets()} /> : null}
-
- {!focusMode ? (
- setTitleEditing(false)}
- canUndo={historyState.canUndo}
- canRedo={historyState.canRedo}
- onCreateProject={createAndOpenProject}
- onDeleteProject={deleteCurrentProject}
- onImportImage={() => handleUploadRequest()}
- onUndo={undoCanvas}
- onRedo={redoCanvas}
- onShare={() => setShareModalOpen(true)}
- agentOpen={assistantOpen}
- compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined}
- onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
- shortcutRequestNonce={shortcutRequestNonce}
- mediaPerformanceMode={mediaPerformanceMode}
- onMediaPerformanceModeChange={setMediaPerformanceMode}
- onOpenSearch={() => setNodeSearchOpen(true)}
- projectContext={shortDramaEnabled && currentProject?.projectId ? {
- ...canvasContext,
- projectId: currentProject.projectId,
- projectName: linkedProjectQuery.data?.project.name || currentProject.title,
- } : undefined}
- onEnterFocusMode={enterFocusMode}
- shortDramaGuide={shortDramaGuide}
- />
+ 跳转到画布主内容
+
+
+ {!focusMode && shortDramaEnabled && currentProject?.projectId ? (
+ openProjectAssets()} />
) : null}
-
- setNodeSearchOpen(false)}
- onFocus={(nodeId) => {
- const target = nodeById.get(nodeId);
- const parent = target?.parentId ? nodeById.get(target.parentId) : null;
- if (parent?.metadata?.frame?.collapsed) toggleFrameCollapsed(parent.id);
- const batchRoot = target?.metadata?.batchRootId ? nodeById.get(target.metadata.batchRootId) : null;
- if (batchRoot && !batchRoot.metadata?.imageBatchExpanded) toggleBatchExpanded(batchRoot.id);
- const selection = new Set([nodeId]);
- selectedNodeIdsRef.current = selection;
- setSelectedNodeIds(selection);
- setSelectedConnectionId(null);
- focusCanvasNode(nodeId);
- }}
- />
-
- {!focusMode && shortDramaGuide ? : null}
-
- setShareModalOpen(false)} beforeCreate={saveCanvasProject} />
-
- setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
-
-
-
-
+ {!focusMode ? (
+ setTitleEditing(false)}
+ canUndo={historyState.canUndo}
+ canRedo={historyState.canRedo}
+ onCreateProject={createAndOpenProject}
+ onDeleteProject={deleteCurrentProject}
+ onImportImage={() => handleUploadRequest()}
+ onUndo={undoCanvas}
+ onRedo={redoCanvas}
+ onShare={() => setShareModalOpen(true)}
+ agentOpen={assistantOpen}
+ compactAgentStatus={codexCompactAgent ? { connected: localAgentConnected, enabled: localAgentEnabled, activity: localAgentActivity } : undefined}
+ onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
+ shortcutRequestNonce={shortcutRequestNonce}
+ mediaPerformanceMode={mediaPerformanceMode}
+ onMediaPerformanceModeChange={setMediaPerformanceMode}
+ onOpenSearch={() => setNodeSearchOpen(true)}
+ projectContext={
+ shortDramaEnabled && currentProject?.projectId
+ ? {
+ ...canvasContext,
+ projectId: currentProject.projectId,
+ projectName: linkedProjectQuery.data?.project.name || currentProject.title,
+ }
+ : undefined
+ }
+ onEnterFocusMode={enterFocusMode}
+ shortDramaGuide={shortDramaGuide}
/>
- )}
- onViewportChange={handleViewportChange}
- onViewportPreviewChange={handleViewportPreviewChange}
- onCanvasMouseDown={handleCanvasMouseDown}
- boxSelectEnabled={canvasTool === "box-select"}
- onCanvasDoubleClick={handleCanvasDoubleClick}
- onCanvasDeselect={deselectCanvas}
- onContextMenu={handleCanvasContextMenu}
- onDrop={handleDrop}
- onFileDragEnter={handleFileDragEnter}
- onFileDragLeave={handleFileDragLeave}
- onFileDragOver={handleFileDragOver}
- >
- { setSelectedConnectionId(connectionId); setSelectedNodeIds(new Set()); setContextMenu(null); }}
- onConnectionContextMenu={(event, connectionId) => { setSelectedConnectionId(connectionId); setSelectedNodeIds(new Set()); closeConnectionCreateMenu(); setContextMenu({ type: "connection", x: event.clientX, y: event.clientY, connectionId }); }}
- onNodeMouseDown={handleNodeMouseDown}
- onNodeHoverStart={handleCanvasNodeHoverStart}
- onNodeHoverEnd={handleCanvasNodeHoverEnd}
- onConnectStart={handleConnectStart}
- onNodeResize={handleNodeResize}
- onToggleFrame={toggleFrameCollapsed}
- onNodeTitleChange={handleNodeTitleChange}
- onNodeContextMenu={handleNodeContextMenu}
- onNodeContentChange={handleNodeContentChange}
- onToggleBatch={toggleBatchExpanded}
- onSetBatchPrimary={setBatchPrimary}
- onRetry={retryCanvasNode}
- onCancelTask={cancelNodeTask}
- onOpenTaskDetails={openCanvasNodeTaskDetails}
- onOpenVersions={openCanvasNodeVersions}
- onViewImage={viewCanvasNodeImage}
- onReplaceMedia={(node) => handleUploadRequest(node.id)}
- onOpenTextEditor={openTextNodeEditor}
- onOpenDirector={editCanvasDirector}
- onOpenDrawing={openDrawingNode}
- />
-
+ ) : null}
-
-
- {focusMode ? (
- setFocusDockRevealed((value) => !value)}
- onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
- onExit={exitFocusMode}
- onZoomIn={zoomCanvasIn}
- onZoomOut={zoomCanvasOut}
- onFit={resetViewport}
- />
- ) : null}
-
-
-
- {emptyCanvasState}
-
- {!focusMode || focusDockRevealed ? (
- createNode(CanvasNodeType.Image)}
- onAddVideo={() => createNode(CanvasNodeType.Video)}
- onAddAudio={() => createNode(CanvasNodeType.Audio)}
- onAddText={() => createNode(CanvasNodeType.Text)}
- onChooseStyle={() => setStylePickerOpen(true)}
- onAddScript={() => createNode(CanvasNodeType.Script)}
- onAddFrame={() => createNode(CanvasNodeType.Frame)}
- onAddDrawing={() => createNode(CanvasNodeType.Drawing)}
- onOpenDirector={() => createDirectorShot()}
- onUndo={undoCanvas}
- onRedo={redoCanvas}
- onUpload={() => handleUploadRequest()}
- onDelete={() => deleteNodes(new Set(selectedNodeIds))}
- onClear={() => setClearConfirmOpen(true)}
- onDeselect={deselectCanvas}
- onBackgroundModeChange={setBackgroundMode}
- onShowImageInfoChange={setShowImageInfo}
- onOpenMyAssets={() => {
- openAssetsAtPosition();
+ setNodeSearchOpen(false)}
+ onFocus={(nodeId) => {
+ const target = nodeById.get(nodeId);
+ const parent = target?.parentId ? nodeById.get(target.parentId) : null;
+ if (parent?.metadata?.frame?.collapsed) toggleFrameCollapsed(parent.id);
+ const batchRoot = target?.metadata?.batchRootId ? nodeById.get(target.metadata.batchRootId) : null;
+ if (batchRoot && !batchRoot.metadata?.imageBatchExpanded) toggleBatchExpanded(batchRoot.id);
+ const selection = new Set([nodeId]);
+ selectedNodeIdsRef.current = selection;
+ setSelectedNodeIds(selection);
+ setSelectedConnectionId(null);
+ focusCanvasNode(nodeId);
}}
- onOpenProjectCharacters={() => openProjectAssets("character")}
/>
- ) : null}
-
- {assistantMounted ? (
-
- {(resizing) => (
- setCinematicAgentEntry(false)}
- resizing={resizing}
+ {!focusMode && shortDramaGuide ? (
+
+ ) : null}
+
+ setShareModalOpen(false)} beforeCreate={saveCanvasProject} />
+
+ setStylePickerOpen(false)} onSelect={selectCanvasStyle} />
+
+
+
+
+ }
+ onViewportChange={handleViewportChange}
+ onViewportPreviewChange={handleViewportPreviewChange}
+ onCanvasMouseDown={handleCanvasMouseDown}
+ boxSelectEnabled={canvasTool === "box-select"}
+ onCanvasDoubleClick={handleCanvasDoubleClick}
+ onCanvasDeselect={deselectCanvas}
+ onContextMenu={handleCanvasContextMenu}
+ onDrop={handleDrop}
+ onFileDragEnter={handleFileDragEnter}
+ onFileDragLeave={handleFileDragLeave}
+ onFileDragOver={handleFileDragOver}
+ >
+ {
+ setSelectedConnectionId(connectionId);
+ setSelectedNodeIds(new Set());
+ setContextMenu(null);
+ }}
+ onConnectionContextMenu={(event, connectionId) => {
+ setSelectedConnectionId(connectionId);
+ setSelectedNodeIds(new Set());
+ closeConnectionCreateMenu();
+ setContextMenu({ type: "connection", x: event.clientX, y: event.clientY, connectionId });
+ }}
+ onNodeMouseDown={handleNodeMouseDown}
+ onNodeHoverStart={handleCanvasNodeHoverStart}
+ onNodeHoverEnd={handleCanvasNodeHoverEnd}
+ onConnectStart={handleConnectStart}
+ onNodeResize={handleNodeResize}
+ onToggleFrame={toggleFrameCollapsed}
+ onNodeTitleChange={handleNodeTitleChange}
+ onNodeContextMenu={handleNodeContextMenu}
+ onNodeContentChange={handleNodeContentChange}
+ onToggleBatch={toggleBatchExpanded}
+ onSetBatchPrimary={setBatchPrimary}
+ onRetry={retryCanvasNode}
+ onCancelTask={cancelNodeTask}
+ onOpenTaskDetails={openCanvasNodeTaskDetails}
+ onOpenVersions={openCanvasNodeVersions}
+ onViewImage={viewCanvasNodeImage}
+ onReplaceMedia={(node) => handleUploadRequest(node.id)}
+ onOpenTextEditor={openTextNodeEditor}
+ onOpenDirector={editCanvasDirector}
+ onOpenDrawing={openDrawingNode}
+ />
+
+
+
+
+ {focusMode ? (
+ setFocusDockRevealed((value) => !value)}
+ onToggleAgent={() => (assistantOpen ? closeAgent() : openAgent())}
+ onExit={exitFocusMode}
+ onZoomIn={zoomCanvasIn}
+ onZoomOut={zoomCanvasOut}
+ onFit={resetViewport}
+ />
+ ) : null}
+
+
+
+ {emptyCanvasState}
+
+ {!focusMode || focusDockRevealed ? (
+ createNode(CanvasNodeType.Image)}
+ onAddVideo={() => createNode(CanvasNodeType.Video)}
+ onAddAudio={() => createNode(CanvasNodeType.Audio)}
+ onAddText={() => createNode(CanvasNodeType.Text)}
+ onChooseStyle={() => setStylePickerOpen(true)}
+ onAddScript={() => createNode(CanvasNodeType.Script)}
+ onAddFrame={() => createNode(CanvasNodeType.Frame)}
+ onAddDrawing={() => createNode(CanvasNodeType.Drawing)}
+ onOpenDirector={() => createDirectorShot()}
+ onUndo={undoCanvas}
+ onRedo={redoCanvas}
+ onUpload={() => handleUploadRequest()}
+ onDelete={() => deleteNodes(new Set(selectedNodeIds))}
+ onClear={() => setClearConfirmOpen(true)}
+ onDeselect={deselectCanvas}
+ onBackgroundModeChange={setBackgroundMode}
+ onShowImageInfoChange={setShowImageInfo}
+ onOpenMyAssets={() => {
+ openAssetsAtPosition();
+ }}
+ onOpenProjectCharacters={() => openProjectAssets("character")}
+ />
+ ) : null}
+
+
+ {assistantMounted ? (
+
+ {(resizing) => (
+ setCinematicAgentEntry(false)}
+ resizing={resizing}
+ />
+ )}
+
+ ) : null}
+
- ) : null}
-
event.stopPropagation()}
+ onPointerDown={(event) => event.stopPropagation()}
+ onWheel={(event) => event.stopPropagation()}
+ >
+ setIsMiniMapOpen((value) => !value)}
+ onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)}
+ />
+ void createImageAssetNode(asset)}
+ onFocusCanvasImage={focusCanvasImageNode}
+ />
+
+ ) : null}
- {selectedNodeBounds && !selectionBox && !isNodeDragging ? void mergeSelectedVideos()} /> : null}
+ setContextMenu(null)}
+ onAddNode={(type, position) => createNode(type, position)}
+ onChooseStyle={() => setStylePickerOpen(true)}
+ onOpenDirector={createDirectorShot}
+ onUpload={(nodeId, position) => handleUploadRequest(nodeId, position)}
+ onOpenAssets={openAssetsAtPosition}
+ onOpenProjectCharacters={(position) => openProjectAssets("character", position)}
+ onUndo={undoCanvas}
+ onRedo={redoCanvas}
+ onPaste={pasteAtPosition}
+ onCopyNode={(nodeId) => copyNodesToClipboard(new Set([nodeId]))}
+ onDuplicate={duplicateNode}
+ onDeleteNode={(nodeId) => deleteNodes(new Set([nodeId]))}
+ onDeleteConnection={deleteConnection}
+ onSaveAsset={(node) => {
+ void saveNodeAsset(node);
+ }}
+ onViewMedia={(node) => setPreviewNodeId(node.id)}
+ onEditText={openTextNodeEditor}
+ onOpenDrawing={openDrawingNode}
+ onGenerateImage={generateImageFromTextNode}
+ onCopyContent={(node) => {
+ void copyNodeContentToClipboard(node);
+ }}
+ onCopyMediaUrl={(node) => {
+ void copyNodeMediaUrlToClipboard(node);
+ }}
+ onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
+ onToggleFrame={(node) => toggleFrameCollapsed(node.id)}
+ />
- {uploadStatus ? : null}
- {mergeVideoProgress ? : null}
- {lastAgentChange ? { undoAgentOps(); }} onClose={dismissLastAgentChange} /> : null}
+
- node.metadata?.workflowKind === "character" && node.metadata.characterAssetId ? openTextNodeEditor(node) : setInfoNodeId(node.id)}
- onEditText={openTextNodeEditor}
- 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)}
- onAnnotate={(node) => setAnnotationNodeId(node.id)}
- onMaskEdit={(node) => setMaskEditNodeId(node.id)}
- onEmotion={(node) => { setDialogNodeId(null); setEmotionNodeId((current) => current === node.id ? null : node.id); }}
- onPortraitTexture={generatePortraitTextureNode}
- onCrop={(node) => setCropNodeId(node.id)}
- onSplit={(node) => setSplitNodeId(node.id)}
- onUpscale={(node) => setUpscaleNodeId(node.id)}
- onSuperResolve={(node) => setSuperResolveNodeId(node.id)}
- onAngle={(node) => { setDialogNodeId(null); setAngleNodeId((current) => current === node.id ? null : node.id); }}
- onViewImage={(node) => setPreviewNodeId(node.id)}
- onExtractVideoLastFrame={(node) => void extractVideoLastFrame(node)}
- extractingVideoFrame={toolbarNode?.id === extractingVideoFrameNodeId}
- onReversePrompt={createImageReversePromptNodes}
- onRetry={(node) => void handleRetryNode(node)}
- onToggleFreeResize={(node) => toggleNodeFreeResize(node.id)}
- onToggleLocked={(node) => toggleNodeLocked(node.id)}
- onDelete={(node) => deleteNodes(new Set([node.id]))}
- />
+ setInfoNodeId(null)} onMetadataChange={handleConfigNodeChange} />
- {isMiniMapOpen && !focusMode ? : null}
+ setCharacterReferenceNodeId(null)} />
- {!focusMode ? (
- event.stopPropagation()} onPointerDown={(event) => event.stopPropagation()} onWheel={(event) => event.stopPropagation()}>
- setIsMiniMapOpen((value) => !value)} onOpenShortcuts={() => setShortcutRequestNonce((value) => value + 1)} />
- void createImageAssetNode(asset)} onFocusCanvasImage={focusCanvasImageNode} />
-
- ) : null}
-
- setContextMenu(null)}
- onAddNode={(type, position) => createNode(type, position)}
- onChooseStyle={() => setStylePickerOpen(true)}
- onOpenDirector={createDirectorShot}
- onUpload={(nodeId, position) => handleUploadRequest(nodeId, position)}
- onOpenAssets={openAssetsAtPosition}
- onOpenProjectCharacters={(position) => openProjectAssets("character", position)}
- onUndo={undoCanvas}
- onRedo={redoCanvas}
- onPaste={pasteAtPosition}
- onCopyNode={(nodeId) => copyNodesToClipboard(new Set([nodeId]))}
- onDuplicate={duplicateNode}
- onDeleteNode={(nodeId) => deleteNodes(new Set([nodeId]))}
- onDeleteConnection={deleteConnection}
- onSaveAsset={(node) => { void saveNodeAsset(node); }}
- onViewMedia={(node) => setPreviewNodeId(node.id)}
- onEditText={openTextNodeEditor}
- onOpenDrawing={openDrawingNode}
- onGenerateImage={generateImageFromTextNode}
- onCopyContent={(node) => { void copyNodeContentToClipboard(node); }}
- onCopyMediaUrl={(node) => { void copyNodeMediaUrlToClipboard(node); }}
- onSetAssetCategory={(nodeId, assetCategory) => handleConfigNodeChange(nodeId, { assetCategory })}
- onToggleFrame={(node) => toggleFrameCollapsed(node.id)}
- />
-
-
-
- setInfoNodeId(null)} onMetadataChange={handleConfigNodeChange} />
-
- setCharacterReferenceNodeId(null)}
- />
-
- setTextEditorNodeId(null)}
- onSave={(nodeId, title, content, richText) => {
- setNodes((current) => current.map((node) => node.id === nodeId ? { ...node, title, metadata: { ...node.metadata, content, richText } } : node));
- }}
- />
-
- {drawingNode ? 
- 
+ 
