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

8
src/components/AnnotationModal.tsx

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

Loading…
Cancel
Save