feat(flowEditor):优化ReactFlow实例ID生成逻辑

- 使用useMemo优化reactFlowId的生成,避免不必要的重复计算
- 统一ID生成逻辑,确保实例ID的唯一性和稳定性
- 修复addNodeOnPane函数中坐标类型定义的语法问题
- 提升组件性能,减少重复渲染
master
钟良源 4 months ago
parent bba0197215
commit a024ba911d

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { useEffect, useMemo } from 'react';
import { import {
ReactFlow, ReactFlow,
Background, Background,
@ -76,7 +76,7 @@ interface FlowEditorMainProps {
editEdge: (edge: Edge) => void; editEdge: (edge: Edge) => void;
copyNode: (node: Node) => void; copyNode: (node: Node) => void;
addNodeOnEdge: (nodeType: string, node: any) => void; addNodeOnEdge: (nodeType: string, node: any) => void;
addNodeOnPane: (nodeType: string, position: { x: number; y: number }, node?: any) => void; addNodeOnPane: (nodeType: string, position: { x: number, y: number }, node?: any) => void;
handleAddNode: (nodeType: string, node: any) => void; handleAddNode: (nodeType: string, node: any) => void;
saveFlowDataToServer: () => void; saveFlowDataToServer: () => void;
handleRun: (running: boolean) => void; handleRun: (running: boolean) => void;
@ -135,6 +135,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines(); const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
const { undo, redo, canUndo, canRedo } = useHistory(); const { undo, redo, canUndo, canRedo } = useHistory();
const reactFlowId = useMemo(() => new Date().getTime().toString(), []);
// 监听键盘事件实现快捷键 // 监听键盘事件实现快捷键
useEffect(() => { useEffect(() => {
@ -175,7 +176,7 @@ const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
<div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }} <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
onContextMenu={(e) => e.preventDefault()}> onContextMenu={(e) => e.preventDefault()}>
<ReactFlow <ReactFlow
id={new Date().getTime().toString()} id={reactFlowId}
nodes={nodes} nodes={nodes}
edges={edges} edges={edges}
nodeTypes={nodeTypes} nodeTypes={nodeTypes}

Loading…
Cancel
Save