Für den Einbau einer Redo und Undo-History Funktion in ein Porgramm zu integrieren, benötigt man nur die folgende Klasse und muss an den passenden Zeitpunkten die makeHistory() funktion aufrufen:
history = new History(stage, layer); histoy.makeHistory();
function History(stage, layer){
var historyStep = 0;
var history = Array();
var layer = layer;
var stage = stage;
this.makeHistory = function() {
console.log("make history. History Items:");
var json = layer.toJSON();
history.push(json);
if (historyStep < history.length) {
historyStep = history.length - 1;
}
this.logStage();
}
this.undoHistory = function() {
if (historyStep > 0) {
console.log("undo history. History Items:");
historyStep--;
layer.destroy();
layer = Kinetic.Node.create(history[historyStep], 'history-container');
stage.add(layer);
this.logStage();
stage.draw();
}
}
this.redoHistory = function() {
if (historyStep < history.length - 1) {
console.log("redo history. History Items:");
historyStep++;
layer.destroy();
layer = Kinetic.Node.create(history[historyStep], 'history-container');
stage.add(layer);
this.logStage();
stage.draw();
}
}
this.logStage = function(){
console.log("Layer has " + layer.getChildren().length + " children");
console.log(layer.getChildren());
console.log("History length: " + history.length + " items");
console.log("historyStep is " + historyStep);
}
}
