Fabric.js Undo Redo Functionality causing 2 steps at a time

Question

I'm having a little trouble getting Undo/Redo to work when I'm using multiple ways to add objects. My editor has a button to add images, background, and text.

Therefore, I believe (please correct me if I'm wrong) I need to call the updateModifications() function each time I call a function that adds an image, background or text, along with each time the canvas is modified. I'm fairly certain the issue is that updateModifications is called too many times throughout the document.

function remove(){
  console.log(canvas.getActiveObject());
  var activeObjects = canvas.getActiveObjects();
      canvas.discardActiveObject()
      if (activeObjects.length) {
        canvas.remove.apply(canvas, activeObjects);
      }
      updateModifications(true);
}
canvas.on({
  'object:modified': function () {
    updateModifications(true);
  },
  'object:added': function() {
    updateModifications(true);
  }

});
function addText() {
  prodName = localStorage.getItem('storedName');
  var textObj = new fabric.IText(prodName, {
    fontSize: 22,
    top: 362.5,
    left: 262.5,
    hasControls: true,
    fontWeight: 'bold',
    fontFamily: '"Montserrat",sans-serif',
    fontStyle: 'normal',
    centeredrotation: true,
    originX: 'center',
    originY: 'center'
  });
  canvas.insertAt(textObj,0).setActiveObject(textObj);
  textToFront();
  canvas.renderAll();
  updateModifications(true);
}

This is creating some issues when code based on zaid's SO question;

var mods = 0;
var state = [];
function updateModifications(savehistory) {
  if (savehistory === true) {
      myjson = JSON.stringify(canvas);
      state.push(myjson);
  }
}

undo = function undo() {
  if (mods < state.length) {
      canvas.clear().renderAll();
      canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
      canvas.renderAll();
      mods += 1;
  }
}

redo = function redo() {
  if (mods > 0) {
      canvas.clear().renderAll();
      canvas.loadFromJSON(state[state.length - 1 - mods + 1]);
      canvas.renderAll();
      mods -= 1;
  }
}

Answer 1

When you call addText(), you are calling updateModifications() and then have an event listener 'object:added' also calling updateModifications(). Either remove the event listener or simply dont call updateModifications() in addText().

Not sure then mate but this works for me in fabric 2.5:

var CanvasState = [];
var CanvasStateIndex = -1;
saveCanvas()

function refreshCanvas(){
  canvas.renderAll.bind(canvas);
}

function saveCanvas(){
  var newState = canvas.toJSON();
  CanvasState.push(newState);
  CanvasStateIndex = CanvasStateIndex +1;
  while (CanvasStateIndex < (CanvasState.length)-1){
    CanvasState.pop();
  }
}

function undo(){
  if (CanvasStateIndex >= 0){
    CanvasStateIndex = CanvasStateIndex -1;
    var jsonCanvas = CanvasState[CanvasStateIndex];
    canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){ 
    })
  } else{
    console.log('undo error CanvasStateIndex = '+CanvasStateIndex)
  }
}

function redo(){
  if (CanvasStateIndex < CanvasState.length -1){
    CanvasStateIndex = CanvasStateIndex +1;
    var jsonCanvas = CanvasState[CanvasStateIndex];
    canvas.loadFromJSON(jsonCanvas, refreshCanvas, function(o, obj){
    })
  }else{
    console.log('redo error CanvasStateIndex = '+CanvasStateIndex)
  }
};