Undo and redo implementations on fabric.js
npm install fabric-history !npm
Fabric.js history implementation
bash
npm i fabric-history
``javascript
import 'fabric-history';
`HTML
`html
`Usage
Following commands will undo and redo the canvas.
`javascript
canvas.undo();canvas.redo();
`Excluding Objects
Objects can be excluded from history by setting the excludeFromExport property to true on the object. This prevents any history records for actions involving this object.`javascript
const text = new fabric.Text('Hello', {
excludeFromExport: true // This object will not be recorded in history.
});
canvas.add(text);
`
Caution: doing this will also exclude this object from exporting to JSON/Object.Example (only for demo purposes)
`html
Fabric with history
`You can find an advanced example on demo folder.
Events
- history:append
- Fired when a history appended to stack
- history:undo
- Fired when an undo process is happening
- history:redo
- Fired when a redo process is happening
- history:clear
- Fired when whole history cleared
Callbacks
`javascript
canvas.undo(function() {
console.log('post undo');
});canvas.redo(function() {
console.log('post redo');
});
``- undo
- redo
- clearHistory