Javascript Undo, Redo 기능 구현하기

Javascript에서 Undo, Redo 기능을 구현해보겠습니다.

제가 처음부터 마지막까지 개발한건 아니고 아래링크의 깃허브소스를 활용하였을 뿐입니다.

기능이 아주 명백하고 간단해서 공유해드립니다.

https://github.com/ArthurClemens/Javascript-Undo-Manager

[code]

var undoManager = new UndoManager(),
    people = {},
    addPerson,
    removePerson,
    createPerson;        

addPerson = function(id, name) {
    people[id] = name;
};

removePerson = function(id) {
    delete people[id];
};

createPerson = function (id, name) {
    // first creation
    addPerson(id, name);

    // make undo-able
    undoManager.add({
        undo: function() {
            removePerson(id)
        },
        redo: function() {
            addPerson(id, name);
        }
    });
}

createPerson(101, "John");
createPerson(102, "Mary");

console.log("people", people); // {101: "John", 102: "Mary"}

undoManager.undo();
console.log("people", people); // {101: "John"}

undoManager.undo();
console.log("people", people); // {}

undoManager.redo();
console.log("people", people); // {101: "John"}

[/code]

http://108.181.203.145/ar

의 3디편집환경에서 저는 이 라이브러리를 사용하여 ctrl+z(undo), ctrl+y(redo)를 구현하였습니다.

3디편집기에서의 Undo, Redo기능을 직접 확인하시려면

ID: user1, PW: 123456789
로그인 하신 다음 구세관안내를 더블클릭하여 3디편집환경에 들어가셔서 아무런 편집도 해보고 ctrl+z(undo), ctrl+y(redo) 에 의 하여 기능이 작동하는지를 확인해보시면 됩니다.

감사합니다.