Browse Source

refactor(canvas): 移除页面内联的AnnotationModal并优化其节点数据处理

1.  从CanvasPage中移除直接渲染的AnnotationModal组件
2.  为AnnotationModal添加nodes空值兜底,防止空数组报错
3.  新增卸载时自动关闭弹窗的清理effect
feature/group
huangmin 1 month ago
parent
commit
d0b54faf1b
  1. 2
      src/app/canvas/page.tsx
  2. 8
      src/components/AnnotationModal.tsx

2
src/app/canvas/page.tsx

@ -5,7 +5,6 @@ import { ReactFlowProvider } from "@xyflow/react";
import { Header } from "@/components/Header"; import { Header } from "@/components/Header";
import { WorkflowCanvas } from "@/components/WorkflowCanvas"; import { WorkflowCanvas } from "@/components/WorkflowCanvas";
import { FloatingActionBar } from "@/components/FloatingActionBar"; import { FloatingActionBar } from "@/components/FloatingActionBar";
import { AnnotationModal } from "@/components/AnnotationModal";
import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge"; import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge";
import { useWorkflowStore } from "@/store/workflowStore"; import { useWorkflowStore } from "@/store/workflowStore";
import { FTUXModal } from "@/components/onboarding/FTUXModal"; import { FTUXModal } from "@/components/onboarding/FTUXModal";
@ -82,7 +81,6 @@ function CanvasPageContent() {
<Header /> <Header />
<WorkflowCanvas /> <WorkflowCanvas />
<FloatingActionBar /> <FloatingActionBar />
<AnnotationModal />
<PopiaiEmbedBridge /> <PopiaiEmbedBridge />
{showFTUX && ( {showFTUX && (
<FTUXModal <FTUXModal

8
src/components/AnnotationModal.tsx

@ -99,7 +99,7 @@ export function AnnotationModal() {
} = useAnnotationStore(); } = useAnnotationStore();
const updateNodeData = useWorkflowStore((state) => state.updateNodeData); const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
const nodes = useWorkflowStore((state) => state.nodes); const nodes = useWorkflowStore((state) => state.nodes ?? []);
const nodeDisplaySize = useMemo(() => { const nodeDisplaySize = useMemo(() => {
const sourceNode = sourceNodeId ? nodes.find((node) => node.id === sourceNodeId) : null; const sourceNode = sourceNodeId ? nodes.find((node) => node.id === sourceNodeId) : null;
const nodeType = sourceNode?.type as NodeType | undefined; const nodeType = sourceNode?.type as NodeType | undefined;
@ -135,6 +135,12 @@ export function AnnotationModal() {
const textInputCreatedAt = useRef<number>(0); const textInputCreatedAt = useRef<number>(0);
const containerRef = useRef<HTMLDivElement>(null); const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
return () => {
closeModal();
};
}, [closeModal]);
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
let revokeImageSource: (() => void) | undefined; let revokeImageSource: (() => void) | undefined;

Loading…
Cancel
Save