feat(flowEditor): 添加历史记录快照防抖功能

- 引入 lodash 的 debounce 方法优化性能
- 对 takeSnapshot 事件处理函数进行防抖处理
- 设置防抖延迟时间为 100 毫秒
- 避免频繁触发快照导致的性能问题
master
钟良源 4 months ago
parent 92b4a783de
commit efb1983ed1

@ -1,4 +1,5 @@
import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react'; import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
import { debounce } from 'lodash';
import { Node, Edge } from '@xyflow/react'; import { Node, Edge } from '@xyflow/react';
interface HistoryContextType { interface HistoryContextType {
@ -147,11 +148,11 @@ const HistoryProvider: React.FC<HistoryProviderProps> = ({
// 监听 takeSnapshot 事件 // 监听 takeSnapshot 事件
useEffect(() => { useEffect(() => {
const handleTakeSnapshot = ((event: CustomEvent) => { const handleTakeSnapshot = debounce((event: CustomEvent) => {
const { nodes, edges } = event.detail; const { nodes, edges } = event.detail;
updateCurrentState(nodes, edges); updateCurrentState(nodes, edges);
takeSnapshot(); takeSnapshot();
}) as EventListener; }, 100) as EventListener;
document.addEventListener('takeSnapshot', handleTakeSnapshot); document.addEventListener('takeSnapshot', handleTakeSnapshot);
return () => { return () => {

Loading…
Cancel
Save