Unable to create accurate copy of a Kinetic.js stage / layer

Question

I'm trying to build in a change history, rather than a diff style history, I've opted to save the entire object. This becomes problematic because each copy of the object updates along side the original object.

The Kinetic.Node.clone method seemed like the right thing for me, but it doesn't seem to do what I expect it to do.

Pseudocode:

var History = function(){
  var h = this;
  h.history = [];
  h.pointer = -1;
  h.save = function() {
    h.history = h.history.slice(0,h.pointer);
    h.history.push(im.Stage.createCopy());
    h.movePointer(1);
  };
  h.movePointer = function(diff) {
    h.pointer += diff;
    (h.pointer < 0 && (h.pointer = 0));
    (h.pointer >= h.history.length && (h.pointer = h.history.length-1));
    return h.pointer;
  };
  h.render = function() {
    im.Stage = h.history[h.pointer].createCopy();
    im.Stage.draw();
  };
  h.undo = function() {
    h.movePointer(-1);
    h.render();
  };
  h.redo = function() {
    h.movePointer(1);
    h.render();
  };
};

How can I create an accurate copy of the stage?

Answer 1

The best method to build up a history system is to store your layers/elements after each operation into an array as serialized values, using layer.toJSON() .
If you use images on layers and eventhandlers that you want to display/work after you restore anything from the history then you will have to reattache images and eventhandlers to the objects/layers/etc because toJSON() does not store images and eventhandlers as it would have been too large data stored. Build up your history like this:

1. first, try to use projeqht's answer on this question .
2. second you will have to reattach the images and eventhandlers. With a trick given by markE on this question you can easily handle it.

Answer 2

The best thing for an accurate representation is to do:

 var layers = stage.getChildren();

to get the layers. Then do:

 var layerChildren = new Array();
 for(var i=0; i<layers.length; i++)
    layerChildren[i] = layers.getChildren();

each time you want to save a state.

This will store all your layers and their children in an array. Fairly efficient and accurate.

Now you just have to save the list of layers and list of children somewhere and then you can move back and forth between states.