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

Loading…
Cancel
Save