Angular, AWS und Symfony Freelancer

Redo / Undo Class für 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);
    }
}

Posted

in

,

by

Tags:

Comments

2 Kommentare zu „Redo / Undo Class für kinetic.js“

  1. Avatar von Kevin
    Kevin

    Thanks Sebastian.

  2. Avatar von Zoran
    Zoran

    Thanks Sebastian. Just to check with you, is events handler and custom draw function persisted in this case.

    Thanks,
    Zoran

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert