Kineticjs Undo Layers: Layers Don't Disappear On Undo?

I have a specific problem on my designer drawing tool in Canvas HTML5. I am developing an action history system (Undo & Redo). I am building my system on projeqht's answer on t

Solution 1:

After you serialize the layer to JSON, you must do

yourLayer.destroy()

Your code seems to do this so I would need more code to find what's going wrong.

A long-shot possibility:

I see that your undoHistory references a global layer and also creates a local layer. Try refactoring your code like this to be sure you're not mixing different "layer":

function undoHistory(){
   if (historyStep>0){
      var version = history[historyStep];
      var beforeState = history[historyStep].before;
      var layer1 = version.layer;
      removeLayerByUndoRedo(layer1);
      var layer2 = Kinetic.Node.create(beforeState, 'container');
      stage.add(layer2);
      stage.draw();
      historyStep--;
    }
}

You don't need to do l.draw() or stage.draw() after l.destroy() because the layer is being destroyed anyway and the stage is auto-updated when the layer is destroyed.

Here is a working example of layer.destroy that may help until you can post more code:

http://jsfiddle.net/m1erickson/FSBbN/

Solution 2:

Here's what the probloem was: I store the layer reference in the history array. So when I create an object the layer reference is stored in history[1]. I move it to 3 times, I will have the same reference in the history for all the steps. When I press undo, I am destroying the layer calling it from the stored reference and I create a new one which reference is a new one. In the history I still have the old reference, which points to NULL. This was the problem.

I have fixed it destroying the old layer calling it by name. (This only works if you give unique names to layers): stage.find('.'+layer.getName())[0].destroy()