From 62914f80c3c8defda819f69b681ffd430e7c26a4 Mon Sep 17 00:00:00 2001 From: JIANG Date: Tue, 10 Mar 2026 17:35:20 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20redo=20undo=20=E7=9A=84?= =?UTF-8?q?=E9=80=BB=E8=BE=91=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../olmap/core/Controls/DrawPanel.tsx | 65 +++++++++++-------- 1 file changed, 38 insertions(+), 27 deletions(-) diff --git a/src/components/olmap/core/Controls/DrawPanel.tsx b/src/components/olmap/core/Controls/DrawPanel.tsx index 66a74f9..3980cc9 100644 --- a/src/components/olmap/core/Controls/DrawPanel.tsx +++ b/src/components/olmap/core/Controls/DrawPanel.tsx @@ -35,8 +35,13 @@ const DrawPanel: React.FC = () => { null ); const [drawnFeatures, setDrawnFeatures] = useState[]>([]); - const [historyStack, setHistoryStack] = useState[][]>([]); - const [historyIndex, setHistoryIndex] = useState(-1); + const [history, setHistory] = useState<{ + stack: Feature[][]; + index: number; + }>({ + stack: [[]], + index: 0, + }); const drawInteractionRef = useRef(null); @@ -88,14 +93,16 @@ const DrawPanel: React.FC = () => { // 保存到历史记录 const saveToHistory = useCallback( (features: Feature[]) => { - setHistoryStack((prevStack) => { - const newHistory = prevStack.slice(0, historyIndex + 1); - newHistory.push([...features]); - setHistoryIndex(newHistory.length - 1); - return newHistory; + setHistory((prev) => { + const newStack = prev.stack.slice(0, prev.index + 1); + newStack.push([...features]); + return { + stack: newStack, + index: newStack.length - 1, + }; }); }, - [historyIndex] + [] ); // 添加绘图交互 @@ -153,7 +160,13 @@ const DrawPanel: React.FC = () => { // 绘图完成事件 draw.on("drawend", (event: DrawEvent) => { const feature = event.feature; - const currentFeatures = [...drawnFeatures, feature]; + const currentFeatures = [...source.getFeatures()]; + + // Fallback in case feature has not been synced to source yet. + if (!currentFeatures.includes(feature)) { + currentFeatures.push(feature); + } + setDrawnFeatures(currentFeatures); saveToHistory(currentFeatures); }); @@ -244,23 +257,29 @@ const DrawPanel: React.FC = () => { // 撤销功能 const handleUndo = () => { - if (historyIndex > 0) { - const newIndex = historyIndex - 1; - const previousFeatures = historyStack[newIndex]; + if (history.index > 0) { + const newIndex = history.index - 1; + const previousFeatures = history.stack[newIndex]; updateDrawLayer(previousFeatures); setDrawnFeatures(previousFeatures); - setHistoryIndex(newIndex); + setHistory((prev) => ({ + ...prev, + index: newIndex, + })); } }; // 重做功能 const handleRedo = () => { - if (historyIndex < historyStack.length - 1) { - const newIndex = historyIndex + 1; - const nextFeatures = historyStack[newIndex]; + if (history.index < history.stack.length - 1) { + const newIndex = history.index + 1; + const nextFeatures = history.stack[newIndex]; updateDrawLayer(nextFeatures); setDrawnFeatures(nextFeatures); - setHistoryIndex(newIndex); + setHistory((prev) => ({ + ...prev, + index: newIndex, + })); } }; @@ -291,17 +310,9 @@ const DrawPanel: React.FC = () => { } }; - // 初始化历史记录 - useEffect(() => { - // 初始化空的历史记录 - if (historyStack.length === 0) { - saveToHistory([]); - } - }, [historyStack.length, saveToHistory]); - // 判断按钮是否应该禁用 - const isUndoDisabled = historyIndex <= 0; - const isRedoDisabled = historyIndex >= historyStack.length - 1; + const isUndoDisabled = history.index <= 0; + const isRedoDisabled = history.index >= history.stack.length - 1; const isDeleteDisabled = drawnFeatures.length === 0; const isSaveDisabled = drawnFeatures.length === 0;