3

Vejo em algumas ferramentas nativas em javascript, a opção refazer e desfazer, como se fosse um Ctrl + z e Ctrl + y, porém são ferramentas gráficas e não formulários.

Pensei em algo como...

  1. Os componentes serão estáticos.
  2. Cada componente terá um código próprio gerado dinamicamente.
  3. Cada ação terá um valor inicial e um valor final, esses dados serão armazenados em um objeto para desfazer junto com o código do componente.
  4. Ao acionar o Ctrl + Z o ultimo elemento é retirado do objeto de desfazer e colocado em outro responsável por restaurar, e ao mover seu valor inicial é trocado pelo final e compilado no componente com angular e vise versa.

Fiz alguns testes e é totalmente possível fazer isso, porém o trabalho vai ser gigante, pois tudo é criado dinamicamente. Existe alguma outra forma de implementar isso? usando cache ou alguma biblioteca? não achei nada relacionado na internet.

1 Resposta 1

2

Achei esta biblioteca no GitHub que facilita a abordagem de desfazer e refazer. Você precisa somente dizer quais métodos são responsáveis por criar e remover os componentes (tanto gráficos, como caracteres, etc). Tudo vai sendo armazenado em uma pilha e depois é só chamar os métodos da classe UndoManager para realizar as operações: undoManager.undo(); e undoManager.redo();. Pode ser útil pra você.

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"}

Aqui você pode testar a biblioteca funcionando.

2
  • 1
    Obrigado por responder, vou testa-la depois e dar o feedback, mas pelo que percebi ela é para canvas, no meu caso não utilizarei canvas 15/08/2017 às 16:15
  • 1
    Espero ter ajudado... E acredito que ela serve para qualquer objeto tanto gráfico quanto componentes diversos, assim como é mostrado no código de exemplo (Pessoa). Tudo vai depender da implementação dos métodos da biblioteca para se adequarem a seus componentes.
    – Zulian
    15/08/2017 às 16:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .