Merge origin/master into feat/dialog-generator-cancel-generation
This commit is contained in:
OmniAI Developer
@@ -0,0 +1,40 @@
|
||||
interface CanvasMarkingPopoverProps {
|
||||
value?: string;
|
||||
placeholder: string;
|
||||
onChange: (value: string) => void;
|
||||
onClear: () => void;
|
||||
onDone: () => void;
|
||||
}
|
||||
|
||||
export function CanvasMarkingPopover({
|
||||
value,
|
||||
placeholder,
|
||||
onChange,
|
||||
onClear,
|
||||
onDone,
|
||||
}: CanvasMarkingPopoverProps) {
|
||||
return (
|
||||
<div
|
||||
className="studio-canvas-marking-popover"
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<textarea
|
||||
className="studio-canvas-marking-input"
|
||||
placeholder={placeholder}
|
||||
value={value || ""}
|
||||
onChange={(event) => onChange(event.target.value)}
|
||||
/>
|
||||
<div className="studio-canvas-marking-actions">
|
||||
{value ? (
|
||||
<button type="button" className="studio-canvas-marking-clear" onClick={onClear}>
|
||||
清除
|
||||
</button>
|
||||
) : null}
|
||||
<button type="button" className="studio-canvas-marking-done" onClick={onDone}>
|
||||
完成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+174
-339
@@ -28,10 +28,13 @@
|
||||
import {
|
||||
ReactFlow,
|
||||
} from "@xyflow/react";
|
||||
import "@xyflow/react/dist/style.css";
|
||||
import "../../styles/pages/canvas.css";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
|
||||
import { aiGenerationClient } from "../../api/aiGenerationClient";
|
||||
import { assetClient, type ServerAssetItem } from "../../api/assetClient";
|
||||
import { communityClient } from "../../api/communityClient";
|
||||
import { modelCapabilitiesClient } from "../../api/modelCapabilitiesClient";
|
||||
import type { CreatePreviewTaskInput } from "../../api/webGenerationGateway";
|
||||
import WorkspacePageShell from "../../components/WorkspacePageShell";
|
||||
import type {
|
||||
@@ -52,6 +55,7 @@ import { useCanvasHistory, type CanvasHistorySnapshot } from "./useCanvasHistory
|
||||
import { useCanvasKeyboard } from "./useCanvasKeyboard";
|
||||
import { useCanvasNodeDrag } from "./useCanvasNodeDrag";
|
||||
import { useCanvasGeneration, addCanvasGenKeepalive, removeCanvasGenKeepalive } from "./useCanvasGeneration";
|
||||
import { useCanvasAssetSummary, useCanvasVisibleNodes } from "./useCanvasDerivedState";
|
||||
import {
|
||||
toHappyHorseDisplayModel,
|
||||
} from "../../utils/happyHorseRouting";
|
||||
@@ -118,7 +122,7 @@ import {
|
||||
defaultVideoModel,
|
||||
image4kCapableModels,
|
||||
imageFocusRatioOptions,
|
||||
imageModelOptions,
|
||||
imageModelOptions as fallbackCanvasImageModelOptions,
|
||||
imageRatioOptions,
|
||||
textModelOptions,
|
||||
videoDurationOptions,
|
||||
@@ -182,6 +186,8 @@ import {
|
||||
} from "./canvasWorkflowDeserialize";
|
||||
import { CanvasNodeToolbar, CanvasNodeVideoPlayer, CanvasSelectChip } from "./canvasComponents";
|
||||
import type { CanvasNodeToolbarAction } from "./canvasComponents";
|
||||
import { CanvasMarkingPopover } from "./CanvasMarkingPopover";
|
||||
import { CanvasPromptMentionTextarea, CanvasTextPromptComposer } from "./CanvasTextPromptComposer";
|
||||
import { CanvasMultiGridPanel, CanvasUpscalePanel, CanvasInpaintPanel } from "./canvasToolPanels";
|
||||
import { CanvasSmoothedProgressRing } from "./CanvasSmoothedProgressRing";
|
||||
|
||||
@@ -193,7 +199,6 @@ const canvasEnterpriseVideoModelOptions: CanvasOption[] = ENTERPRISE_VIDEO_MODEL
|
||||
// --- Canvas generation keep-alive (survives page refresh / view switch) ---
|
||||
|
||||
const MENTION_TOKEN_RE = /@(?:图片|视频|文本)\d+/g;
|
||||
const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
|
||||
|
||||
function buildNodeMentionOptions(
|
||||
kind: CanvasNodeKind,
|
||||
@@ -354,6 +359,8 @@ function CanvasPage({
|
||||
const [projectNameEditing, setProjectNameEditing] = useState(false);
|
||||
const [videoNodeMenu, setVideoNodeMenu] = useState<{ left: number; top: number; nodeId: string } | null>(null);
|
||||
const [videoNodes, setVideoNodes] = useState<CanvasVideoNode[]>([]);
|
||||
const [canvasImageModelOptions, setCanvasImageModelOptions] = useState<CanvasOption[]>(fallbackCanvasImageModelOptions);
|
||||
const [canvasVideoModelOptions, setCanvasVideoModelOptions] = useState<CanvasOption[]>(canvasEnterpriseVideoModelOptions);
|
||||
const [selectedNode, setSelectedNode] = useState<CanvasSelectedNode | null>(null);
|
||||
const [selectedNodes, setSelectedNodes] = useState<CanvasSelectedNode[]>([]);
|
||||
const [selectionContextMenu, setSelectionContextMenu] = useState<CanvasFloatingMenuPosition | null>(null);
|
||||
@@ -396,10 +403,12 @@ function CanvasPage({
|
||||
const suppressNextPaneClickRef = useRef(false);
|
||||
const canvasAutoSaveTimerRef = useRef<number | null>(null);
|
||||
const canvasAutoSaveIdleHandleRef = useRef<number | null>(null);
|
||||
const canvasAutoSaveRetryTimerRef = useRef<number | null>(null);
|
||||
const canvasAutoSaveInFlightRef = useRef(false);
|
||||
const canvasAutoSavePendingRef = useRef(false);
|
||||
const lastAutoSavedWorkflowFingerprintRef = useRef("");
|
||||
const canvasAutoSaveHydrationRef = useRef(true);
|
||||
const textNodeMentionFocusTimerRef = useRef<number | null>(null);
|
||||
const textNodeIdRef = useRef(9);
|
||||
const imageNodeIdRef = useRef(1);
|
||||
const videoNodeIdRef = useRef(1);
|
||||
@@ -460,9 +469,39 @@ function CanvasPage({
|
||||
callbacksRef: dragCallbacksRef,
|
||||
suppressNextPaneClickRef,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
if (!isAuthenticated) {
|
||||
setCanvasImageModelOptions(fallbackCanvasImageModelOptions);
|
||||
setCanvasVideoModelOptions(canvasEnterpriseVideoModelOptions);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}
|
||||
|
||||
modelCapabilitiesClient
|
||||
.get()
|
||||
.then((capabilities) => {
|
||||
if (cancelled) return;
|
||||
setCanvasImageModelOptions(capabilities.imageModels.length ? capabilities.imageModels : fallbackCanvasImageModelOptions);
|
||||
setCanvasVideoModelOptions(capabilities.videoModels.length ? capabilities.videoModels : canvasEnterpriseVideoModelOptions);
|
||||
})
|
||||
.catch(() => {
|
||||
if (cancelled) return;
|
||||
setCanvasImageModelOptions(fallbackCanvasImageModelOptions);
|
||||
setCanvasVideoModelOptions(canvasEnterpriseVideoModelOptions);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [isAuthenticated]);
|
||||
|
||||
const visibleImageModelOptions = useMemo(
|
||||
() => filterImageModelOptionsForSession(imageModelOptions, session),
|
||||
[session],
|
||||
() => filterImageModelOptionsForSession(canvasImageModelOptions, session),
|
||||
[canvasImageModelOptions, session],
|
||||
);
|
||||
const fallbackVisibleImageModel = visibleImageModelOptions[0]?.value || defaultImageModel;
|
||||
const resolveVisibleImageModel = useCallback(
|
||||
@@ -488,7 +527,11 @@ function CanvasPage({
|
||||
else if (kind === "video") updateVideoNodePrompt(nodeId, nextValue);
|
||||
else updateTextNodePrompt(nodeId, nextValue);
|
||||
closeTextNodeMention(nodeId);
|
||||
setTimeout(() => {
|
||||
if (textNodeMentionFocusTimerRef.current !== null) {
|
||||
window.clearTimeout(textNodeMentionFocusTimerRef.current);
|
||||
}
|
||||
textNodeMentionFocusTimerRef.current = window.setTimeout(() => {
|
||||
textNodeMentionFocusTimerRef.current = null;
|
||||
if (textarea) {
|
||||
textarea.focus();
|
||||
textarea.setSelectionRange(nextCaret, nextCaret);
|
||||
@@ -524,10 +567,22 @@ function CanvasPage({
|
||||
const [autoSaveStatus, setAutoSaveStatus] = useState<"saved" | "saving" | "error" | "idle">("idle");
|
||||
const autoSaveStatusTimerRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (canvasAutoSaveTimerRef.current !== null) window.clearTimeout(canvasAutoSaveTimerRef.current);
|
||||
if (canvasAutoSaveRetryTimerRef.current !== null) window.clearTimeout(canvasAutoSaveRetryTimerRef.current);
|
||||
if (autoSaveStatusTimerRef.current !== null) window.clearTimeout(autoSaveStatusTimerRef.current);
|
||||
if (textNodeMentionFocusTimerRef.current !== null) window.clearTimeout(textNodeMentionFocusTimerRef.current);
|
||||
if (canvasAutoSaveIdleHandleRef.current !== null && "cancelIdleCallback" in window) {
|
||||
window.cancelIdleCallback(canvasAutoSaveIdleHandleRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Save immediately when user leaves page or switches tab (placed after runCanvasAutoSave definition)
|
||||
// — see useEffect below near runCanvasAutoSave
|
||||
|
||||
const canvasAssets = serverAssets.filter((asset) => asset.imageUrl);
|
||||
const { canvasAssets, assetCountsByCategory } = useCanvasAssetSummary(serverAssets);
|
||||
const shouldShowEmptyProjectState =
|
||||
projectsLoaded && projects.length === 0 && !projectId && workflow.source === "blank" && workflow.nodes.length === 0;
|
||||
const isWaitingForProjects = isAuthenticated && !projectsLoaded;
|
||||
@@ -2704,13 +2759,17 @@ function CanvasPage({
|
||||
setConnectorDrag(null);
|
||||
};
|
||||
|
||||
const collapsedPackageNodeKeys = new Set(
|
||||
nodePackages.flatMap((nodePackage) =>
|
||||
nodePackage.collapsed ? nodePackage.nodeIds.map((node) => getCanvasSelectionKey(node)) : []
|
||||
)
|
||||
);
|
||||
const isNodeCollapsedInPackage = (kind: CanvasNodeKind, id: string) =>
|
||||
collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind, id }));
|
||||
const {
|
||||
isNodeCollapsedInPackage,
|
||||
visibleTextNodes,
|
||||
visibleImageNodes,
|
||||
visibleVideoNodes,
|
||||
} = useCanvasVisibleNodes({
|
||||
textNodes,
|
||||
imageNodes,
|
||||
videoNodes,
|
||||
nodePackages,
|
||||
});
|
||||
const isLinkCollapsedInPackage = (link: { sourceKind: CanvasNodeKind; sourceNodeId: string; targetKind: CanvasNodeKind; targetNodeId: string }) =>
|
||||
isNodeCollapsedInPackage(link.sourceKind, link.sourceNodeId) ||
|
||||
isNodeCollapsedInPackage(link.targetKind, link.targetNodeId);
|
||||
@@ -3243,7 +3302,13 @@ function CanvasPage({
|
||||
canvasAutoSaveInFlightRef.current = false;
|
||||
if (canvasAutoSavePendingRef.current) {
|
||||
canvasAutoSavePendingRef.current = false;
|
||||
window.setTimeout(() => void runCanvasAutoSave(), canvasAutoSaveIdleTimeoutMs);
|
||||
if (canvasAutoSaveRetryTimerRef.current !== null) {
|
||||
window.clearTimeout(canvasAutoSaveRetryTimerRef.current);
|
||||
}
|
||||
canvasAutoSaveRetryTimerRef.current = window.setTimeout(() => {
|
||||
canvasAutoSaveRetryTimerRef.current = null;
|
||||
void runCanvasAutoSave();
|
||||
}, canvasAutoSaveIdleTimeoutMs);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
@@ -3312,7 +3377,13 @@ function CanvasPage({
|
||||
);
|
||||
return;
|
||||
}
|
||||
window.setTimeout(() => void runCanvasAutoSave(), canvasAutoSaveIdleTimeoutMs);
|
||||
if (canvasAutoSaveRetryTimerRef.current !== null) {
|
||||
window.clearTimeout(canvasAutoSaveRetryTimerRef.current);
|
||||
}
|
||||
canvasAutoSaveRetryTimerRef.current = window.setTimeout(() => {
|
||||
canvasAutoSaveRetryTimerRef.current = null;
|
||||
void runCanvasAutoSave();
|
||||
}, canvasAutoSaveIdleTimeoutMs);
|
||||
}, canvasAutoSaveDebounceMs);
|
||||
|
||||
return () => {
|
||||
@@ -3324,6 +3395,10 @@ function CanvasPage({
|
||||
window.cancelIdleCallback(canvasAutoSaveIdleHandleRef.current);
|
||||
canvasAutoSaveIdleHandleRef.current = null;
|
||||
}
|
||||
if (canvasAutoSaveRetryTimerRef.current !== null) {
|
||||
window.clearTimeout(canvasAutoSaveRetryTimerRef.current);
|
||||
canvasAutoSaveRetryTimerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [
|
||||
isAuthenticated,
|
||||
@@ -3571,9 +3646,14 @@ function CanvasPage({
|
||||
return;
|
||||
}
|
||||
const toDelete = selectedNode ? [selectedNode] : selectedNodes;
|
||||
const textIds = new Set(toDelete.filter((n) => n.kind === "text").map((n) => n.id));
|
||||
const imageIds = new Set(toDelete.filter((n) => n.kind === "image").map((n) => n.id));
|
||||
const videoIds = new Set(toDelete.filter((n) => n.kind === "video").map((n) => n.id));
|
||||
const textIds = new Set<string>();
|
||||
const imageIds = new Set<string>();
|
||||
const videoIds = new Set<string>();
|
||||
for (const node of toDelete) {
|
||||
if (node.kind === "text") textIds.add(node.id);
|
||||
else if (node.kind === "image") imageIds.add(node.id);
|
||||
else if (node.kind === "video") videoIds.add(node.id);
|
||||
}
|
||||
if (textIds.size) setTextNodes((nodes) => nodes.filter((n) => !textIds.has(n.id)));
|
||||
if (imageIds.size) setImageNodes((nodes) => nodes.filter((n) => !imageIds.has(n.id)));
|
||||
if (videoIds.size) setVideoNodes((nodes) => nodes.filter((n) => !videoIds.has(n.id)));
|
||||
@@ -4054,7 +4134,7 @@ function CanvasPage({
|
||||
) : null}
|
||||
</svg>
|
||||
) : null}
|
||||
{textNodes.filter((textNode) => !isNodeCollapsedInPackage("text", textNode.id)).map((textNode) => {
|
||||
{visibleTextNodes.map((textNode) => {
|
||||
const textNodeSelected = isSelectedNode("text", textNode.id);
|
||||
const textNodeActive = isActiveSelectedNode("text", textNode.id);
|
||||
const textNodeResizing = nodeResizeDrag?.kind === "text" && nodeResizeDrag.nodeId === textNode.id;
|
||||
@@ -4203,132 +4283,26 @@ function CanvasPage({
|
||||
onMouseDown={(event) => handleNodeResizeStart(event, "text", textNode.id, textNode.size)}
|
||||
/>
|
||||
</div>
|
||||
{textNodeActive && !isCanvasNodeMoving ? (() => {
|
||||
const mentionOptions = buildNodeMentionOptions("text", textNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
|
||||
const mentionState = textNodeMentionStates[textNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
|
||||
const filteredMentions = mentionState.open
|
||||
? mentionOptions.filter((o) => !mentionState.query || o.searchText.includes(mentionState.query.toLowerCase()))
|
||||
: [];
|
||||
|
||||
const handlePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const caret = e.target.selectionStart || 0;
|
||||
updateTextNodePrompt(textNode.id, value);
|
||||
|
||||
// Detect @-mention trigger
|
||||
const beforeCaret = value.slice(0, caret);
|
||||
const atIdx = beforeCaret.lastIndexOf("@");
|
||||
if (atIdx >= 0) {
|
||||
const query = beforeCaret.slice(atIdx + 1);
|
||||
if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
|
||||
setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
|
||||
return;
|
||||
}
|
||||
}
|
||||
closeTextNodeMention(textNode.id);
|
||||
};
|
||||
|
||||
const handlePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (!mentionState.open || filteredMentions.length === 0) return;
|
||||
if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex + 1) % filteredMentions.length } }));
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
setTextNodeMentionStates((prev) => ({ ...prev, [textNode.id]: { ...mentionState, activeIndex: (mentionState.activeIndex - 1 + filteredMentions.length) % filteredMentions.length } }));
|
||||
} else if (e.key === "Enter" || e.key === "Tab") {
|
||||
e.preventDefault();
|
||||
const opt = filteredMentions[mentionState.activeIndex];
|
||||
if (opt) {
|
||||
const ta = e.currentTarget;
|
||||
insertTextNodeMention(textNode.id, opt, ta);
|
||||
}
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
closeTextNodeMention(textNode.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePromptSelect = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
|
||||
const ta = e.currentTarget;
|
||||
const caret = ta.selectionStart || 0;
|
||||
setTextNodeMentionStates((prev) => {
|
||||
const cur = prev[textNode.id];
|
||||
if (!cur?.open) return prev;
|
||||
return { ...prev, [textNode.id]: { ...cur, caret } };
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`studio-canvas-text-composer${textComposerDragNodeId === textNode.id ? " is-drag-over" : ""}`}
|
||||
onDragEnter={(e) => handleTextComposerDragEnter(e, textNode.id)}
|
||||
onDragOver={handleTextComposerDragOver}
|
||||
onDragLeave={handleTextComposerDragLeave}
|
||||
onDrop={(e) => handleTextComposerDrop(e, textNode)}
|
||||
>
|
||||
<div className="studio-canvas-text-composer__input-wrap">
|
||||
<textarea
|
||||
value={textNode.prompt}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onChange={handlePromptChange}
|
||||
onKeyDown={handlePromptKeyDown}
|
||||
onSelect={handlePromptSelect}
|
||||
placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
|
||||
/>
|
||||
{mentionState.open ? (
|
||||
<div className="studio-canvas-mention-panel">
|
||||
{filteredMentions.length > 0 ? filteredMentions.map((opt, idx) => (
|
||||
<button
|
||||
key={opt.token}
|
||||
type="button"
|
||||
className={`studio-canvas-mention-item${idx === mentionState.activeIndex ? " is-active" : ""}`}
|
||||
onMouseDown={(e) => { e.preventDefault(); const ta = e.currentTarget.closest(".studio-canvas-text-composer")?.querySelector("textarea") || null; insertTextNodeMention(textNode.id, opt, ta as HTMLTextAreaElement | null); }}
|
||||
>
|
||||
<span className="studio-canvas-mention-thumb">
|
||||
{opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
|
||||
</span>
|
||||
<span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
|
||||
<span className="studio-canvas-mention-token">{opt.token}</span>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
|
||||
<span className="studio-canvas-mention-label">没有可引用的连接节点</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="studio-canvas-text-composer__footer">
|
||||
<button
|
||||
type="button"
|
||||
className={`studio-canvas-text-composer__send studio-canvas-generate-button${textNodeCanGenerate && !textNodeGenerating ? " is-ready" : ""}`}
|
||||
title={textNodeGenerating ? "生成中" : "生成"}
|
||||
disabled={textNodeGenerating || !textNodeCanGenerate}
|
||||
aria-busy={textNodeGenerating}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!textNodeGenerating && textNodeCanGenerate) {
|
||||
void handleGenerateTextNode(textNode.id);
|
||||
}
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<SendOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})() : null}
|
||||
{textNodeActive && !isCanvasNodeMoving ? (
|
||||
<CanvasTextPromptComposer
|
||||
nodeId={textNode.id}
|
||||
prompt={textNode.prompt}
|
||||
canGenerate={textNodeCanGenerate}
|
||||
isGenerating={textNodeGenerating}
|
||||
mentionOptions={buildNodeMentionOptions("text", textNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
|
||||
mentionState={textNodeMentionStates[textNode.id]}
|
||||
onPromptChange={updateTextNodePrompt}
|
||||
onMentionStateChange={setTextNodeMentionStates}
|
||||
onCloseMention={closeTextNodeMention}
|
||||
onInsertMention={insertTextNodeMention}
|
||||
onGenerate={handleGenerateTextNode}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{imageNodes.filter((imageNode) => !isNodeCollapsedInPackage("image", imageNode.id)).map((imageNode) => {
|
||||
{visibleImageNodes.map((imageNode) => {
|
||||
const imageNodeSelected = isSelectedNode("image", imageNode.id);
|
||||
const imageNodeActive = isActiveSelectedNode("image", imageNode.id);
|
||||
const imageNodeResizing = nodeResizeDrag?.kind === "image" && nodeResizeDrag.nodeId === imageNode.id;
|
||||
@@ -4586,38 +4560,7 @@ function CanvasPage({
|
||||
</button>
|
||||
</div>
|
||||
) : null}
|
||||
{imageNodeActive && !isCanvasNodeMoving && !imageNodeFocusActive ? (() => {
|
||||
const imgMentionOptions = buildNodeMentionOptions("image", imageNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
|
||||
const imgMentionState = textNodeMentionStates[imageNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
|
||||
const imgFilteredMentions = imgMentionState.open
|
||||
? imgMentionOptions.filter((o) => !imgMentionState.query || o.searchText.includes(imgMentionState.query.toLowerCase()))
|
||||
: [];
|
||||
|
||||
const handleImagePromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const caret = e.target.selectionStart || 0;
|
||||
updateImageNodePrompt(imageNode.id, value);
|
||||
const beforeCaret = value.slice(0, caret);
|
||||
const atIdx = beforeCaret.lastIndexOf("@");
|
||||
if (atIdx >= 0) {
|
||||
const query = beforeCaret.slice(atIdx + 1);
|
||||
if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
|
||||
setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
|
||||
return;
|
||||
}
|
||||
}
|
||||
closeTextNodeMention(imageNode.id);
|
||||
};
|
||||
|
||||
const handleImagePromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (!imgMentionState.open || imgFilteredMentions.length === 0) return;
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex + 1) % imgFilteredMentions.length } })); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [imageNode.id]: { ...imgMentionState, activeIndex: (imgMentionState.activeIndex - 1 + imgFilteredMentions.length) % imgFilteredMentions.length } })); }
|
||||
else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = imgFilteredMentions[imgMentionState.activeIndex]; if (opt) insertTextNodeMention(imageNode.id, opt, e.currentTarget, "image"); }
|
||||
else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(imageNode.id); }
|
||||
};
|
||||
|
||||
return (
|
||||
{imageNodeActive && !isCanvasNodeMoving && !imageNodeFocusActive ? (
|
||||
<div className="studio-canvas-image-composer">
|
||||
<div className="studio-canvas-image-composer__tools">
|
||||
<button
|
||||
@@ -4656,47 +4599,23 @@ function CanvasPage({
|
||||
>
|
||||
<FileImageOutlined /><span>标记</span>
|
||||
</button>
|
||||
{markingPopoverNodeId === imageNode.id && (
|
||||
<div
|
||||
className="studio-canvas-marking-popover"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<textarea
|
||||
className="studio-canvas-marking-input"
|
||||
placeholder="描述标记内容，如：主角站在桥上，远处是城市天际线"
|
||||
value={imageNode.marking || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setImageNodes((nodes) =>
|
||||
nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: val } : n)),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="studio-canvas-marking-actions">
|
||||
{imageNode.marking && (
|
||||
<button
|
||||
type="button"
|
||||
className="studio-canvas-marking-clear"
|
||||
onClick={() => {
|
||||
setImageNodes((nodes) =>
|
||||
nodes.map((n) => (n.id === imageNode.id ? { ...n, marking: "" } : n)),
|
||||
);
|
||||
}}
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="studio-canvas-marking-done"
|
||||
onClick={() => setMarkingPopoverNodeId(null)}
|
||||
>
|
||||
完成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{markingPopoverNodeId === imageNode.id ? (
|
||||
<CanvasMarkingPopover
|
||||
value={imageNode.marking}
|
||||
placeholder="描述标记内容，如：主角站在桥上，远处是城市天际线"
|
||||
onChange={(value) => {
|
||||
setImageNodes((nodes) =>
|
||||
nodes.map((node) => (node.id === imageNode.id ? { ...node, marking: value } : node)),
|
||||
);
|
||||
}}
|
||||
onClear={() => {
|
||||
setImageNodes((nodes) =>
|
||||
nodes.map((node) => (node.id === imageNode.id ? { ...node, marking: "" } : node)),
|
||||
);
|
||||
}}
|
||||
onDone={() => setMarkingPopoverNodeId(null)}
|
||||
/>
|
||||
) : null}
|
||||
<button
|
||||
type="button"
|
||||
title="多宫格生成"
|
||||
@@ -4738,28 +4657,18 @@ function CanvasPage({
|
||||
</button>
|
||||
<button type="button" className="studio-canvas-image-composer__expand" aria-label="展开">↗</button>
|
||||
</div>
|
||||
<div className="studio-canvas-text-composer__input-wrap">
|
||||
<textarea
|
||||
<CanvasPromptMentionTextarea
|
||||
nodeId={imageNode.id}
|
||||
value={imageNode.prompt}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onChange={handleImagePromptChange}
|
||||
onKeyDown={handleImagePromptKeyDown}
|
||||
placeholder="描述你想要生成的画面内容，按/呼出指令，@引用素材"
|
||||
mentionOptions={buildNodeMentionOptions("image", imageNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
|
||||
mentionState={textNodeMentionStates[imageNode.id]}
|
||||
mentionKind="image"
|
||||
onPromptChange={updateImageNodePrompt}
|
||||
onMentionStateChange={setTextNodeMentionStates}
|
||||
onCloseMention={closeTextNodeMention}
|
||||
onInsertMention={insertTextNodeMention}
|
||||
/>
|
||||
{imgMentionState.open && (
|
||||
<div className="studio-canvas-mention-panel">
|
||||
{imgFilteredMentions.length > 0 ? imgFilteredMentions.map((opt, idx) => (
|
||||
<button key={opt.token} type="button" className={`studio-canvas-mention-item${idx === imgMentionState.activeIndex ? " is-active" : ""}`} onMouseDown={(e) => { e.preventDefault(); insertTextNodeMention(imageNode.id, opt, e.currentTarget.closest(".studio-canvas-image-composer")?.querySelector("textarea") || null, "image"); }}>
|
||||
<span className="studio-canvas-mention-thumb">{opt.kind === "image" && opt.previewUrl ? <img src={opt.previewUrl} alt="" /> : opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}</span>
|
||||
<span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
|
||||
<span className="studio-canvas-mention-token">{opt.token}</span>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}><span className="studio-canvas-mention-label">没有可引用的连接节点</span></div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="studio-canvas-image-composer__footer">
|
||||
<CanvasSelectChip
|
||||
ariaLabel="选择生图模型"
|
||||
@@ -4827,12 +4736,12 @@ function CanvasPage({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
); })() : null}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{videoNodes.filter((videoNode) => !isNodeCollapsedInPackage("video", videoNode.id)).map((videoNode) => {
|
||||
{visibleVideoNodes.map((videoNode) => {
|
||||
const videoNodeSelected = isSelectedNode("video", videoNode.id);
|
||||
const videoNodeActive = isActiveSelectedNode("video", videoNode.id);
|
||||
const videoNodeResizing = nodeResizeDrag?.kind === "video" && nodeResizeDrag.nodeId === videoNode.id;
|
||||
@@ -4982,38 +4891,7 @@ function CanvasPage({
|
||||
onMouseDown={(event) => handleNodeResizeStart(event, "video", videoNode.id, videoNode.size)}
|
||||
/>
|
||||
</div>
|
||||
{videoNodeActive && !isCanvasNodeMoving ? (() => {
|
||||
const vidMentionOptions = buildNodeMentionOptions("video", videoNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks);
|
||||
const vidMentionState = textNodeMentionStates[videoNode.id] || { open: false, query: "", start: 0, caret: 0, activeIndex: 0 };
|
||||
const vidFilteredMentions = vidMentionState.open
|
||||
? vidMentionOptions.filter((o) => !vidMentionState.query || o.searchText.includes(vidMentionState.query.toLowerCase()))
|
||||
: [];
|
||||
|
||||
const handleVideoPromptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const caret = e.target.selectionStart || 0;
|
||||
updateVideoNodePrompt(videoNode.id, value);
|
||||
const beforeCaret = value.slice(0, caret);
|
||||
const atIdx = beforeCaret.lastIndexOf("@");
|
||||
if (atIdx >= 0) {
|
||||
const query = beforeCaret.slice(atIdx + 1);
|
||||
if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
|
||||
setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { open: true, query, start: atIdx, caret, activeIndex: 0 } }));
|
||||
return;
|
||||
}
|
||||
}
|
||||
closeTextNodeMention(videoNode.id);
|
||||
};
|
||||
|
||||
const handleVideoPromptKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (!vidMentionState.open || vidFilteredMentions.length === 0) return;
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex + 1) % vidFilteredMentions.length } })); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); setTextNodeMentionStates((prev) => ({ ...prev, [videoNode.id]: { ...vidMentionState, activeIndex: (vidMentionState.activeIndex - 1 + vidFilteredMentions.length) % vidFilteredMentions.length } })); }
|
||||
else if (e.key === "Enter" || e.key === "Tab") { e.preventDefault(); const opt = vidFilteredMentions[vidMentionState.activeIndex]; if (opt) insertTextNodeMention(videoNode.id, opt, e.currentTarget, "video"); }
|
||||
else if (e.key === "Escape") { e.preventDefault(); closeTextNodeMention(videoNode.id); }
|
||||
};
|
||||
|
||||
return (
|
||||
{videoNodeActive && !isCanvasNodeMoving ? (
|
||||
<div className="studio-canvas-video-composer">
|
||||
<div className="studio-canvas-video-composer__tabs studio-canvas-video-composer__mode-tabs">
|
||||
<button
|
||||
@@ -5068,47 +4946,23 @@ function CanvasPage({
|
||||
>
|
||||
运镜{videoNode.cameraMotion ? ` ${CAMERA_MOTION_PRESETS.find((p) => p.value === videoNode.cameraMotion)?.label || ""}` : ""}
|
||||
</button>
|
||||
{markingPopoverNodeId === videoNode.id && (
|
||||
<div
|
||||
className="studio-canvas-marking-popover"
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<textarea
|
||||
className="studio-canvas-marking-input"
|
||||
placeholder="描述标记内容，如：主角在城市街头行走"
|
||||
value={videoNode.marking || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setVideoNodes((nodes) =>
|
||||
nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: val } : n)),
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<div className="studio-canvas-marking-actions">
|
||||
{videoNode.marking && (
|
||||
<button
|
||||
type="button"
|
||||
className="studio-canvas-marking-clear"
|
||||
onClick={() => {
|
||||
setVideoNodes((nodes) =>
|
||||
nodes.map((n) => (n.id === videoNode.id ? { ...n, marking: "" } : n)),
|
||||
);
|
||||
}}
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="studio-canvas-marking-done"
|
||||
onClick={() => setMarkingPopoverNodeId(null)}
|
||||
>
|
||||
完成
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{markingPopoverNodeId === videoNode.id ? (
|
||||
<CanvasMarkingPopover
|
||||
value={videoNode.marking}
|
||||
placeholder="描述标记内容，如：主角在城市街头行走"
|
||||
onChange={(value) => {
|
||||
setVideoNodes((nodes) =>
|
||||
nodes.map((node) => (node.id === videoNode.id ? { ...node, marking: value } : node)),
|
||||
);
|
||||
}}
|
||||
onClear={() => {
|
||||
setVideoNodes((nodes) =>
|
||||
nodes.map((node) => (node.id === videoNode.id ? { ...node, marking: "" } : node)),
|
||||
);
|
||||
}}
|
||||
onDone={() => setMarkingPopoverNodeId(null)}
|
||||
/>
|
||||
) : null}
|
||||
{cameraMotionDropdownNodeId === videoNode.id && (
|
||||
<div
|
||||
className="studio-canvas-camera-dropdown"
|
||||
@@ -5135,43 +4989,24 @@ function CanvasPage({
|
||||
<button type="button">角色库</button>
|
||||
<button type="button" className="is-active">文本</button>
|
||||
</div>
|
||||
<div className="studio-canvas-text-composer__input-wrap">
|
||||
<textarea
|
||||
<CanvasPromptMentionTextarea
|
||||
nodeId={videoNode.id}
|
||||
value={videoNode.prompt}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onChange={handleVideoPromptChange}
|
||||
onKeyDown={handleVideoPromptKeyDown}
|
||||
placeholder="根据文字描述生成视频。"
|
||||
mentionOptions={buildNodeMentionOptions("video", videoNode.id, imageNodes, videoNodes, textNodes, getIncomingCanvasPorts, manualLinks)}
|
||||
mentionState={textNodeMentionStates[videoNode.id]}
|
||||
mentionKind="video"
|
||||
onPromptChange={updateVideoNodePrompt}
|
||||
onMentionStateChange={setTextNodeMentionStates}
|
||||
onCloseMention={closeTextNodeMention}
|
||||
onInsertMention={insertTextNodeMention}
|
||||
/>
|
||||
{vidMentionState.open ? (
|
||||
<div className="studio-canvas-mention-panel">
|
||||
{vidFilteredMentions.length > 0 ? vidFilteredMentions.map((opt, idx) => (
|
||||
<button
|
||||
key={opt.token}
|
||||
type="button"
|
||||
className={`studio-canvas-mention-item${idx === vidMentionState.activeIndex ? " is-active" : ""}`}
|
||||
onMouseDown={(ev) => { ev.preventDefault(); insertTextNodeMention(videoNode.id, opt, ev.currentTarget.closest(".studio-canvas-text-composer__input-wrap")?.querySelector("textarea")!, "video"); }}
|
||||
>
|
||||
<span className={`studio-canvas-mention-icon studio-canvas-mention-icon--${opt.kind}`}>
|
||||
{opt.kind === "image" ? "🖼" : opt.kind === "video" ? "🎬" : "📝"}
|
||||
</span>
|
||||
<span className="studio-canvas-mention-label">{opt.nodeTitle}</span>
|
||||
<span className="studio-canvas-mention-token">{opt.token}</span>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="studio-canvas-mention-item" style={{ opacity: 0.5, pointerEvents: "none" }}>
|
||||
<span className="studio-canvas-mention-label">没有可引用的连接节点</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="studio-canvas-video-composer__footer studio-canvas-video-composer__settings">
|
||||
<CanvasSelectChip
|
||||
ariaLabel="选择视频模型"
|
||||
className="canvas-select-chip--model studio-canvas-composer-chip"
|
||||
value={toHappyHorseDisplayModel(videoNode.model || defaultVideoModel)}
|
||||
options={canvasEnterpriseVideoModelOptions}
|
||||
options={canvasVideoModelOptions}
|
||||
open={canvasSelectMenu === `${videoNode.id}:video-model`}
|
||||
onToggle={() =>
|
||||
setCanvasSelectMenu((current) =>
|
||||
@@ -5249,7 +5084,7 @@ function CanvasPage({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
); })() : null}
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -5543,7 +5378,7 @@ function CanvasPage({
|
||||
onClick={() => setSelectedExistingCategory(category.key)}
|
||||
>
|
||||
{category.label}
|
||||
<span>{serverAssets.filter((asset) => asset.type === category.key).length} 个素材</span>
|
||||
<span>{assetCountsByCategory.get(category.key) ?? 0} 个素材</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
import { SendOutlined } from "@ant-design/icons";
|
||||
import { useRef, type CSSProperties, type Dispatch, type SetStateAction } from "react";
|
||||
import type { CanvasNodeKind, CanvasPromptMentionOption, CanvasPromptMentionState } from "./canvasTypes";
|
||||
|
||||
const MENTION_BOUNDARY_RE = /\s|[，。、；：！？?(){}[\]<>]/;
|
||||
const EMPTY_MENTION_STYLE: CSSProperties = { opacity: 0.5, pointerEvents: "none" };
|
||||
const DEFAULT_MENTION_STATE: CanvasPromptMentionState = {
|
||||
open: false,
|
||||
query: "",
|
||||
start: 0,
|
||||
caret: 0,
|
||||
activeIndex: 0,
|
||||
};
|
||||
|
||||
interface CanvasPromptMentionTextareaProps {
|
||||
nodeId: string;
|
||||
value: string;
|
||||
placeholder: string;
|
||||
mentionOptions: CanvasPromptMentionOption[];
|
||||
mentionState?: CanvasPromptMentionState;
|
||||
onPromptChange: (nodeId: string, prompt: string) => void;
|
||||
onMentionStateChange: Dispatch<SetStateAction<Record<string, CanvasPromptMentionState>>>;
|
||||
onCloseMention: (nodeId: string) => void;
|
||||
onInsertMention: (
|
||||
nodeId: string,
|
||||
option: CanvasPromptMentionOption,
|
||||
textarea: HTMLTextAreaElement | null,
|
||||
kind?: CanvasNodeKind,
|
||||
) => void;
|
||||
mentionKind?: CanvasNodeKind;
|
||||
}
|
||||
|
||||
export function CanvasPromptMentionTextarea({
|
||||
nodeId,
|
||||
value,
|
||||
placeholder,
|
||||
mentionOptions,
|
||||
mentionState = DEFAULT_MENTION_STATE,
|
||||
onPromptChange,
|
||||
onMentionStateChange,
|
||||
onCloseMention,
|
||||
onInsertMention,
|
||||
mentionKind,
|
||||
}: CanvasPromptMentionTextareaProps) {
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
const filteredMentions = mentionState.open
|
||||
? mentionOptions.filter((option) => !mentionState.query || option.searchText.includes(mentionState.query.toLowerCase()))
|
||||
: [];
|
||||
|
||||
const handlePromptChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = event.target.value;
|
||||
const caret = event.target.selectionStart || 0;
|
||||
onPromptChange(nodeId, value);
|
||||
|
||||
const beforeCaret = value.slice(0, caret);
|
||||
const atIndex = beforeCaret.lastIndexOf("@");
|
||||
if (atIndex >= 0) {
|
||||
const query = beforeCaret.slice(atIndex + 1);
|
||||
if (!MENTION_BOUNDARY_RE.test(query) && !query.includes(" ")) {
|
||||
onMentionStateChange((prev) => ({
|
||||
...prev,
|
||||
[nodeId]: { open: true, query, start: atIndex, caret, activeIndex: 0 },
|
||||
}));
|
||||
return;
|
||||
}
|
||||
}
|
||||
onCloseMention(nodeId);
|
||||
};
|
||||
|
||||
const handlePromptKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if (!mentionState.open || filteredMentions.length === 0) return;
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
onMentionStateChange((prev) => ({
|
||||
...prev,
|
||||
[nodeId]: { ...mentionState, activeIndex: (mentionState.activeIndex + 1) % filteredMentions.length },
|
||||
}));
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
onMentionStateChange((prev) => ({
|
||||
...prev,
|
||||
[nodeId]: {
|
||||
...mentionState,
|
||||
activeIndex: (mentionState.activeIndex - 1 + filteredMentions.length) % filteredMentions.length,
|
||||
},
|
||||
}));
|
||||
} else if (event.key === "Enter" || event.key === "Tab") {
|
||||
event.preventDefault();
|
||||
const option = filteredMentions[mentionState.activeIndex];
|
||||
if (option) {
|
||||
onInsertMention(nodeId, option, event.currentTarget, mentionKind);
|
||||
}
|
||||
} else if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
onCloseMention(nodeId);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePromptSelect = (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
|
||||
const caret = event.currentTarget.selectionStart || 0;
|
||||
onMentionStateChange((prev) => {
|
||||
const current = prev[nodeId];
|
||||
if (!current?.open) return prev;
|
||||
return { ...prev, [nodeId]: { ...current, caret } };
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="studio-canvas-text-composer__input-wrap">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onMouseDown={(event) => event.stopPropagation()}
|
||||
onChange={handlePromptChange}
|
||||
onKeyDown={handlePromptKeyDown}
|
||||
onSelect={handlePromptSelect}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
{mentionState.open ? (
|
||||
<div className="studio-canvas-mention-panel">
|
||||
{filteredMentions.length > 0 ? filteredMentions.map((option, index) => (
|
||||
<button
|
||||
key={option.token}
|
||||
type="button"
|
||||
className={`studio-canvas-mention-item${index === mentionState.activeIndex ? " is-active" : ""}`}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault();
|
||||
onInsertMention(nodeId, option, textareaRef.current, mentionKind);
|
||||
}}
|
||||
>
|
||||
<span className="studio-canvas-mention-thumb">
|
||||
{option.kind === "image" && option.previewUrl ? (
|
||||
<img src={option.previewUrl} alt="" />
|
||||
) : option.kind === "image" ? "🖼" : option.kind === "video" ? "🎬" : "📝"}
|
||||
</span>
|
||||
<span className="studio-canvas-mention-label">{option.nodeTitle}</span>
|
||||
<span className="studio-canvas-mention-token">{option.token}</span>
|
||||
</button>
|
||||
)) : (
|
||||
<div className="studio-canvas-mention-item" style={EMPTY_MENTION_STYLE}>
|
||||
<span className="studio-canvas-mention-label">没有可引用的连接节点</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CanvasTextPromptComposerProps {
|
||||
nodeId: string;
|
||||
prompt: string;
|
||||
canGenerate: boolean;
|
||||
isGenerating: boolean;
|
||||
mentionOptions: CanvasPromptMentionOption[];
|
||||
mentionState?: CanvasPromptMentionState;
|
||||
onPromptChange: (nodeId: string, prompt: string) => void;
|
||||
onMentionStateChange: Dispatch<SetStateAction<Record<string, CanvasPromptMentionState>>>;
|
||||
onCloseMention: (nodeId: string) => void;
|
||||
onInsertMention: (
|
||||
nodeId: string,
|
||||
option: CanvasPromptMentionOption,
|
||||
textarea: HTMLTextAreaElement | null,
|
||||
kind?: CanvasNodeKind,
|
||||
) => void;
|
||||
onGenerate: (nodeId: string) => void | Promise<void>;
|
||||
}
|
||||
|
||||
export function CanvasTextPromptComposer({
|
||||
nodeId,
|
||||
prompt,
|
||||
canGenerate,
|
||||
isGenerating,
|
||||
mentionOptions,
|
||||
mentionState,
|
||||
onPromptChange,
|
||||
onMentionStateChange,
|
||||
onCloseMention,
|
||||
onInsertMention,
|
||||
onGenerate,
|
||||
}: CanvasTextPromptComposerProps) {
|
||||
return (
|
||||
<div className="studio-canvas-text-composer">
|
||||
<CanvasPromptMentionTextarea
|
||||
nodeId={nodeId}
|
||||
value={prompt}
|
||||
placeholder="写下你想讲的故事、场景或角色设定。@引用连接的节点"
|
||||
mentionOptions={mentionOptions}
|
||||
mentionState={mentionState}
|
||||
onPromptChange={onPromptChange}
|
||||
onMentionStateChange={onMentionStateChange}
|
||||
onCloseMention={onCloseMention}
|
||||
onInsertMention={onInsertMention}
|
||||
/>
|
||||
<div className="studio-canvas-text-composer__footer">
|
||||
<button
|
||||
type="button"
|
||||
className={`studio-canvas-text-composer__send studio-canvas-generate-button${canGenerate && !isGenerating ? " is-ready" : ""}`}
|
||||
title={isGenerating ? "生成中" : "生成"}
|
||||
disabled={isGenerating || !canGenerate}
|
||||
aria-busy={isGenerating}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (!isGenerating && canGenerate) {
|
||||
void onGenerate(nodeId);
|
||||
}
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<SendOutlined />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { useCallback, useMemo } from "react";
|
||||
import type { ServerAssetItem } from "../../api/assetClient";
|
||||
import type {
|
||||
CanvasImageNode,
|
||||
CanvasNodeKind,
|
||||
CanvasNodePackage,
|
||||
CanvasTextNode,
|
||||
CanvasVideoNode,
|
||||
} from "./canvasTypes";
|
||||
import { getCanvasSelectionKey } from "./canvasUtils";
|
||||
|
||||
export function useCanvasAssetSummary(serverAssets: ServerAssetItem[]) {
|
||||
return useMemo(() => {
|
||||
const canvasAssets: ServerAssetItem[] = [];
|
||||
const assetCountsByCategory = new Map<string, number>();
|
||||
|
||||
for (const asset of serverAssets) {
|
||||
if (asset.imageUrl) {
|
||||
canvasAssets.push(asset);
|
||||
}
|
||||
assetCountsByCategory.set(asset.type, (assetCountsByCategory.get(asset.type) ?? 0) + 1);
|
||||
}
|
||||
|
||||
return { canvasAssets, assetCountsByCategory };
|
||||
}, [serverAssets]);
|
||||
}
|
||||
|
||||
export function useCanvasVisibleNodes({
|
||||
textNodes,
|
||||
imageNodes,
|
||||
videoNodes,
|
||||
nodePackages,
|
||||
}: {
|
||||
textNodes: CanvasTextNode[];
|
||||
imageNodes: CanvasImageNode[];
|
||||
videoNodes: CanvasVideoNode[];
|
||||
nodePackages: CanvasNodePackage[];
|
||||
}) {
|
||||
const collapsedPackageNodeKeys = useMemo(
|
||||
() => new Set(
|
||||
nodePackages.flatMap((nodePackage) =>
|
||||
nodePackage.collapsed ? nodePackage.nodeIds.map((node) => getCanvasSelectionKey(node)) : []
|
||||
)
|
||||
),
|
||||
[nodePackages],
|
||||
);
|
||||
|
||||
const isNodeCollapsedInPackage = useCallback(
|
||||
(kind: CanvasNodeKind, id: string) =>
|
||||
collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind, id })),
|
||||
[collapsedPackageNodeKeys],
|
||||
);
|
||||
|
||||
const visibleTextNodes = useMemo(
|
||||
() => textNodes.filter((textNode) => !collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind: "text", id: textNode.id }))),
|
||||
[collapsedPackageNodeKeys, textNodes],
|
||||
);
|
||||
const visibleImageNodes = useMemo(
|
||||
() => imageNodes.filter((imageNode) => !collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind: "image", id: imageNode.id }))),
|
||||
[collapsedPackageNodeKeys, imageNodes],
|
||||
);
|
||||
const visibleVideoNodes = useMemo(
|
||||
() => videoNodes.filter((videoNode) => !collapsedPackageNodeKeys.has(getCanvasSelectionKey({ kind: "video", id: videoNode.id }))),
|
||||
[collapsedPackageNodeKeys, videoNodes],
|
||||
);
|
||||
|
||||
return {
|
||||
collapsedPackageNodeKeys,
|
||||
isNodeCollapsedInPackage,
|
||||
visibleTextNodes,
|
||||
visibleImageNodes,
|
||||
visibleVideoNodes,
|
||||
};
|
||||
}
|
||||
@@ -82,11 +82,16 @@ export function useCanvasNodeDrag(params: UseCanvasNodeDragParams) {
|
||||
const cy = pos.y + size.height / 2;
|
||||
const right = pos.x + size.width;
|
||||
const bottom = pos.y + size.height;
|
||||
const others = [
|
||||
...textNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
|
||||
...imageNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
|
||||
...videoNodesRef.current.filter((n) => n.id !== draggedId).map((n) => ({ pos: n.position, size: n.size })),
|
||||
];
|
||||
const others: Array<{ pos: CanvasPoint; size: CanvasNodeSize }> = [];
|
||||
for (const node of textNodesRef.current) {
|
||||
if (node.id !== draggedId) others.push({ pos: node.position, size: node.size });
|
||||
}
|
||||
for (const node of imageNodesRef.current) {
|
||||
if (node.id !== draggedId) others.push({ pos: node.position, size: node.size });
|
||||
}
|
||||
for (const node of videoNodesRef.current) {
|
||||
if (node.id !== draggedId) others.push({ pos: node.position, size: node.size });
|
||||
}
|
||||
for (const other of others) {
|
||||
const ocx = other.pos.x + other.size.width / 2;
|
||||
const ocy = other.pos.y + other.size.height / 2;
|
||||
|
||||
Reference in New Issue
Block a user