修复 redo undo 的逻辑错误
This commit is contained in:
@@ -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;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user