Undo-Redo feature in Fabric.js

Question

Is there any built-in support for for undo/redo in Fabric.js? Can you please guide me on how you used this cancel and repeat in [http://printio.ru/][1]

Answer 1

I have answer to all your queries :) get a smile check this link.. its all done ... copy & paste it :P http://jsfiddle.net/SpgGV/27/

var canvas = new fabric.Canvas('c');
var current;
var list = [];
var state = [];
var index = 0;
var index2 = 0;
var action = false;
var refresh = true;
state[0] = JSON.stringify(canvas.toDatalessJSON());
console.log(JSON.stringify(canvas.toDatalessJSON()));
$("#clear").click(function(){
canvas.clear();
index=0;
});
$("#addtext").click(function(){
++index;
action=true;  
var text = new fabric.Text('Sample', {
fontFamily: 'Hoefler Text',
left: 100,
top: 100,
//textAlign: 'center',
fill: 'navy',

});
canvas.add(text);   
}); 
canvas.on("object:added", function (e) {

if(action===true){

var object = e.target;
console.log(JSON.stringify(canvas.toDatalessJSON()));
state[index] = JSON.stringify(canvas.toDatalessJSON());
refresh = true;
action=false;
canvas.renderAll();
}
});
function undo() {

if (index < 0) {
index = 0;
canvas.loadFromJSON(state[index]);
canvas.renderAll();
return;
}


console.log('undo');

canvas.loadFromJSON(state[index]);

console.log(JSON.stringify(canvas.toDatalessJSON()));
canvas.renderAll();
action = false;
}

function redo() {

action = false;
if (index >= state.length - 1) {
canvas.loadFromJSON(state[index]);
canvas.renderAll();
return;
}

console.log('redo');

canvas.loadFromJSON(state[index]);

console.log(JSON.stringify(canvas.toDatalessJSON()));
canvas.renderAll();

canvas.renderAll();

}

canvas.on("object:modified", function (e) {
var object = e.target;
console.log('object:modified');
console.log(JSON.stringify(canvas.toDatalessJSON()));
state[++index] = JSON.stringify(canvas.toDatalessJSON());
action=false;
});

$('#undo').click(function () {
index--;
undo();
});
$('#redo').click(function () {
index++;
redo();
});