You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 8, 2025. It is now read-only.
Copy file name to clipboardExpand all lines: README.md
+62Lines changed: 62 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,7 @@ Simple undo manager to provide undo and redo actions in JavaScript applications.
6
6
-[Demos](#demos)
7
7
-[Installation](#installation)
8
8
-[Example](#example)
9
+
-[Updating the UI](#updating-the-ui)
9
10
-[Methods](#methods)
10
11
-[add](#add)
11
12
-[undo](#undo)
@@ -23,6 +24,7 @@ Simple undo manager to provide undo and redo actions in JavaScript applications.
23
24
24
25
## Demos
25
26
27
+
*[CodeSandbox with RGB color slider](https://codesandbox.io/s/undo-manager-color-sliders-z4myoj)
26
28
*[Undo Manager with canvas drawing](https://arthurclemens.github.io/JavaScript-Undo-Manager/)
27
29
*[JSBin demo, also with canvas](http://jsbin.com/tidibi/edit?js,output)
28
30
@@ -90,6 +92,66 @@ undoManager.redo();
90
92
console.log(people); // logs: {101: "John"}
91
93
```
92
94
95
+
## Updating the UI
96
+
97
+
TL;DR UI that relies on undo manager state - for example `hasUndo` and `hasRedo` - needs to be updated using the callback function provided with `setCallback`. This ensures that all internal state has been resolved before the UI is repainted.
98
+
99
+
Let's say we have an update function that conditionally disables the undo and redo buttons:
100
+
101
+
```js
102
+
functionupdateUI() {
103
+
btn_undo.disabled=!undoManager.hasUndo();
104
+
btn_redo.disabled=!undoManager.hasRedo();
105
+
}
106
+
```
107
+
108
+
You might be inclined to call the update in the undo/redo command pair:
109
+
110
+
```js
111
+
// wrong approach, don't copy
112
+
constundoManager=newUndoManager();
113
+
conststates= [];
114
+
115
+
functionupdateState(newState) {
116
+
states.push(newState);
117
+
updateUI();
118
+
119
+
undoManager.add({
120
+
undo:function () {
121
+
states.pop();
122
+
updateUI(); // <= this will lead to inconsistent UI state
123
+
},
124
+
redo:function () {
125
+
states.push(newState);
126
+
updateUI(); // <= this will lead to inconsistent UI state
127
+
}
128
+
});
129
+
}
130
+
```
131
+
132
+
Instead, pass the update function to `setCallback`:
0 commit comments