javascript - KineticJS Undo layers: layers don't disappear on undo? -

i have specific problem on designer drawing tool in canvas html5. developing action history system (undo & redo). building system on projeqht's answer on this question serializing layers in history array. core, idea of solution working have strange problem. when hit undo creates new layers, old ones not disappearing. attach sourcecode , attach screenshots can see happening:

sourcecode:

var history = array(null); 

var historystep = 0;

var arraynonremovable = array('movelayer', 'scalefromouternode', 'scalefrominnernode', 'rotatefromoutersign', 'rotatefrominnersign' );

function removelayerbyundoredo(l) { if (l) { l.destroy(); l.draw(); stage.draw(); } }

function makehistory(layer, before, after, operation) { historystep++; if (historystep

function undohistory() { if (historystep>0) { version = history[historystep]; layer = version.layer; var beforestate = history[historystep].before;

    removelayerbyundoredo(layer);     var layer = kinetic.node.create(beforestate, 'container');     stage.add(layer);      stage.draw();     historystep--; } 

}

array.prototype.contains = function(obj) { return this.indexof(obj) > -1; };

screenshots: step 1. create object, contains more groups shapes inside (lines, rectangles, svg drawing) steps 2, 3, 4, 5: moving object different positions (top left, bottom left, bottom right , top right): step 6: press undo first time (removes old layer , recreates history well): step 7: press undo second time (creates new layer history, old layer not removed) step 8, 9: press undo 2 times (same happens in step 7: creates new layer old ones remain):

am doing wrong? think must reference new layers in step 6 removed layers reference original layer, in following steps new layers, reference should new one?

after serialize layer json, must

yourlayer.destroy() 

your code seems need more code find what's going wrong.

a long-shot possibility:

i see undohistory references global layer , creates local layer. try refactoring code 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 l.draw() or stage.draw() after l.destroy() because layer being destroyed anyway , stage auto-updated when layer destroyed.

here working example of layer.destroy may until can post more code:

http://jsfiddle.net/m1erickson/fsbbn/