fix(network): force re-render on undo/redo so canUndo/canRedo stay accurate
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useCallback, useEffect, useRef } from 'react'
|
import { useState, useCallback, useEffect, useRef, useReducer } from 'react'
|
||||||
import { useParams, useNavigate } from 'react-router-dom'
|
import { useParams, useNavigate } from 'react-router-dom'
|
||||||
import {
|
import {
|
||||||
ReactFlowProvider,
|
ReactFlowProvider,
|
||||||
@@ -74,6 +74,7 @@ function DiagramEditorInner() {
|
|||||||
const historyStack = useRef<{ nodes: Node[]; edges: Edge[] }[]>([])
|
const historyStack = useRef<{ nodes: Node[]; edges: Edge[] }[]>([])
|
||||||
const historyIndex = useRef<number>(-1)
|
const historyIndex = useRef<number>(-1)
|
||||||
const MAX_HISTORY = 50
|
const MAX_HISTORY = 50
|
||||||
|
const [, forceHistoryUpdate] = useReducer((x: number) => x + 1, 0)
|
||||||
|
|
||||||
const pushHistory = useCallback((currentNodes: Node[], currentEdges: Edge[]) => {
|
const pushHistory = useCallback((currentNodes: Node[], currentEdges: Edge[]) => {
|
||||||
historyStack.current = historyStack.current.slice(0, historyIndex.current + 1)
|
historyStack.current = historyStack.current.slice(0, historyIndex.current + 1)
|
||||||
@@ -86,7 +87,8 @@ function DiagramEditorInner() {
|
|||||||
} else {
|
} else {
|
||||||
historyIndex.current += 1
|
historyIndex.current += 1
|
||||||
}
|
}
|
||||||
}, [])
|
forceHistoryUpdate()
|
||||||
|
}, [forceHistoryUpdate])
|
||||||
|
|
||||||
const undo = useCallback(() => {
|
const undo = useCallback(() => {
|
||||||
if (historyIndex.current <= 0) return
|
if (historyIndex.current <= 0) return
|
||||||
@@ -95,7 +97,8 @@ function DiagramEditorInner() {
|
|||||||
setNodes(snapshot.nodes)
|
setNodes(snapshot.nodes)
|
||||||
setEdges(snapshot.edges)
|
setEdges(snapshot.edges)
|
||||||
setIsDirty(true)
|
setIsDirty(true)
|
||||||
}, [setNodes, setEdges])
|
forceHistoryUpdate()
|
||||||
|
}, [setNodes, setEdges, forceHistoryUpdate])
|
||||||
|
|
||||||
const redo = useCallback(() => {
|
const redo = useCallback(() => {
|
||||||
if (historyIndex.current >= historyStack.current.length - 1) return
|
if (historyIndex.current >= historyStack.current.length - 1) return
|
||||||
@@ -104,7 +107,8 @@ function DiagramEditorInner() {
|
|||||||
setNodes(snapshot.nodes)
|
setNodes(snapshot.nodes)
|
||||||
setEdges(snapshot.edges)
|
setEdges(snapshot.edges)
|
||||||
setIsDirty(true)
|
setIsDirty(true)
|
||||||
}, [setNodes, setEdges])
|
forceHistoryUpdate()
|
||||||
|
}, [setNodes, setEdges, forceHistoryUpdate])
|
||||||
|
|
||||||
const canUndo = historyIndex.current > 0
|
const canUndo = historyIndex.current > 0
|
||||||
const canRedo = historyIndex.current < historyStack.current.length - 1
|
const canRedo = historyIndex.current < historyStack.current.length - 1
|
||||||
|
|||||||
Reference in New Issue
Block a user