Kategorie: kinetic.js

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);
    }
}