|
|
|
@ -26,12 +26,12 @@ interface HistoryProviderProps {
|
|
|
|
onHistoryChange: (nodes: Node[], edges: Edge[]) => void;
|
|
|
|
onHistoryChange: (nodes: Node[], edges: Edge[]) => void;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const HistoryProvider: React.FC<HistoryProviderProps> = ({
|
|
|
|
const HistoryProvider: React.FC<HistoryProviderProps> = ({
|
|
|
|
children,
|
|
|
|
children,
|
|
|
|
initialNodes,
|
|
|
|
initialNodes,
|
|
|
|
initialEdges,
|
|
|
|
initialEdges,
|
|
|
|
onHistoryChange
|
|
|
|
onHistoryChange
|
|
|
|
}) => {
|
|
|
|
}) => {
|
|
|
|
// 历史记录状态
|
|
|
|
// 历史记录状态
|
|
|
|
const [history, setHistory] = useState<{ nodes: Node[]; edges: Edge[] }[]>([
|
|
|
|
const [history, setHistory] = useState<{ nodes: Node[]; edges: Edge[] }[]>([
|
|
|
|
{ nodes: initialNodes, edges: initialEdges }
|
|
|
|
{ nodes: initialNodes, edges: initialEdges }
|
|
|
|
@ -45,7 +45,10 @@ export const HistoryProvider: React.FC<HistoryProviderProps> = ({
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 检查两个状态是否相等
|
|
|
|
// 检查两个状态是否相等
|
|
|
|
const isSameState = useCallback((state1: { nodes: Node[]; edges: Edge[] }, state2: { nodes: Node[]; edges: Edge[] }) => {
|
|
|
|
const isSameState = useCallback((state1: { nodes: Node[]; edges: Edge[] }, state2: {
|
|
|
|
|
|
|
|
nodes: Node[];
|
|
|
|
|
|
|
|
edges: Edge[]
|
|
|
|
|
|
|
|
}) => {
|
|
|
|
// 只比较节点和边的关键属性,忽略拖动过程中的临时状态
|
|
|
|
// 只比较节点和边的关键属性,忽略拖动过程中的临时状态
|
|
|
|
if (state1.nodes.length !== state2.nodes.length || state1.edges.length !== state2.edges.length) {
|
|
|
|
if (state1.nodes.length !== state2.nodes.length || state1.edges.length !== state2.edges.length) {
|
|
|
|
return false;
|
|
|
|
return false;
|
|
|
|
@ -98,8 +101,8 @@ export const HistoryProvider: React.FC<HistoryProviderProps> = ({
|
|
|
|
|
|
|
|
|
|
|
|
// 添加新快照
|
|
|
|
// 添加新快照
|
|
|
|
newHistory.push({
|
|
|
|
newHistory.push({
|
|
|
|
nodes: nodes.map(node => ({...node})),
|
|
|
|
nodes: nodes.map(node => ({ ...node })),
|
|
|
|
edges: edges.map(edge => ({...edge}))
|
|
|
|
edges: edges.map(edge => ({ ...edge }))
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 限制历史记录长度,防止内存泄漏
|
|
|
|
// 限制历史记录长度,防止内存泄漏
|
|
|
|
@ -170,3 +173,5 @@ export const HistoryProvider: React.FC<HistoryProviderProps> = ({
|
|
|
|
</HistoryContext.Provider>
|
|
|
|
</HistoryContext.Provider>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default HistoryProvider;
|