Можем ли мы реализовать операции Undo / Redo в макете дерева d3? - PullRequest
Новая
       54

Можем ли мы реализовать операции Undo / Redo в макете дерева d3?

0 голосов
/ 21 декабря 2018

Я создал диаграмму дерева d3 с функциями создания, удаления и переименования узлов, как показано на диаграмме ниже.

https://bl.ocks.org/adamfeuer/042bfa0dde0059e2b288

Как мы можем реализовать операции отмены / возврата в этом графике?.Я нашел несколько примеров в vis.js, но не в d3.js.

1 Ответ

0 голосов
/ 21 декабря 2018

Операции отмены / возврата - это только сохранение в массиве выполненного вами действия и индекса действия, в котором вы находитесь.Каждое изменение, вы удаляете элементы в массиве после состояния.Puff Я полагаю, что это лучше на примере

Представьте, что у вас есть три кнопки и еще две для отмены / повтора 

<button (click)="add(0)">add 0</button>
<button (click)="add(1)">add 1</button>
<button (click)="add(2)">add 2</button>
<p>{{values|json}}</p>
<button (click)="undo(2)">undo</button>
<button (click)="redo(2)">redo</button>

В вашем компоненте вам нужны две переменные "historyIndex" и "history" 

  values: number[] = [];

  history: any[] = [];
  historyIndex: number = -1;

И наши функции «добавить», «повторить» и «отменить» 

  add(value) {
    //remove all next history
    if (this.history.length>this.historyIndex+1)
      this.history.splice(-this.historyIndex - 1);

    //Store the necesary properties to undo/redo
    this.history.push({ index: this.values.length, value: value }); 
    this.historyIndex = this.history.length - 1;   //store the index;
    this.values.push(value);
  }
  undo() {
    //we need remove the element in "this.history[historyIndex]"
    this.values.splice(this.history[this.historyIndex].index, 1);
    this.historyIndex--;
  }
  redo() {
    if (this.history.length > this.historyIndex+1) {
      this.historyIndex++;
      this.values.splice(this.history[this.historyIndex].index, 0,
          this.history[this.historyIndex].value);
    }
  }

См. stackblitz

...