Fabric.js history implementation
npm i fabric-historyimport 'fabric-history';<script src="https://raw.githubusercontent.com/lyzerk/fabric-history/master/src/index.js"></script>Following commands will undo and redo the canvas.
canvas.undo();
canvas.redo();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.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fabric with history</title>
</head>
<body>
<canvas style="border:1px solid black;" width="800" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<script src="https://alimozdemir.com/fabric-history/src/index.js"></script>
<script>
const canvas = new fabric.Canvas(document.querySelector('canvas'), {
isDrawingMode: true
})
document.addEventListener('keyup', ({ keyCode, ctrlKey } = event) => {
// Check Ctrl key is pressed.
if (!ctrlKey) {
return
}
// Check pressed button is Z - Ctrl+Z.
if (keyCode === 90) {
canvas.undo()
}
// Check pressed button is Y - Ctrl+Y.
if (keyCode === 89) {
canvas.redo()
}
})
</script>
</body>
</html>You can find an advanced example on demo folder.
- 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
canvas.undo(function() {
console.log('post undo');
});
canvas.redo(function() {
console.log('post redo');
});- undo
- redo
- clearHistory