修复 redo undo 的逻辑错误

This commit is contained in:
JIANG
2026-03-10 17:35:20 +08:00
parent 64dcf9cbdb
commit 62914f80c3
@@ -35,8 +35,13 @@ const DrawPanel: React.FC = () => {
null
);
const [drawnFeatures, setDrawnFeatures] = useState<Feature<Geometry>[]>([]);
const [historyStack, setHistoryStack] = useState<Feature<Geometry>[][]>([]);
const [historyIndex, setHistoryIndex] = useState<number>(-1);
const [history, setHistory] = useState<{
stack: Feature<Geometry>[][];
index: number;
}>({
stack: [[]],
index: 0,
});
const drawInteractionRef = useRef<Draw | null>(null);
@@ -88,14 +93,16 @@ const DrawPanel: React.FC = () => {
// 保存到历史记录
const saveToHistory = useCallback(
(features: Feature<Geometry>[]) => {
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;