Как реализовать функцию отмены / возврата для KovaJS в реакции? - PullRequest
Новая
       15

Как реализовать функцию отмены / возврата для KovaJS в реакции?

0 голосов
/ 18 мая 2018

Каков наилучший способ реализации функции отмены / возврата для KovaJS в реакции?

Я вижу, что у каждого узла есть метод toObject (), используемый для сериализации каждого узла холста.Одной из простых реализаций будет сериализация объекта при каждой модификации и вставка его в массив изменений.И как только пользователь коснется Undo / Redo, чтобы попытаться восстановить холст из этого массива.

Есть мысли?

1 Ответ

0 голосов
/ 21 мая 2018

Вам не нужно использовать toObject(), если вы используете React.

Будет гораздо проще сохранить историю состояния (состояние компонента реакции, состояние редукции или любое другое состояние, которое вы используете).И осуществите отмену / повтор с ним.

Простейшая демонстрация отмены: 

let history = [{
  x: 20,
  y: 20
}];
let historyStep = 0;

class App extends Component {
  state = {
    position: history[0]
  };

  handleUndo = () => {
    if (historyStep === 0) {
      return;
    }
    historyStep -= 1;
    this.setState({
      position: history[historyStep]
    });
  };
  handleDragEnd = e => {
    history.slice(0, historyStep);
    history = history.concat({
      x: e.target.x(),
      y: e.target.y()
    });
    historyStep += 1;
    console.log(history[history.length - 1]);
    this.setState({
      position: history[history.length - 1]
    });
  };
  render() {
    return (
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Text text="undo" onClick={this.handleUndo} />
          <Rect
            x={this.state.position.x}
            y={this.state.position.y}
            width={50}
            height={50}
            fill="black"
            draggable
            onDragEnd={this.handleDragEnd}
          />
        </Layer>
      </Stage>
    );
  }
}

https://codesandbox.io/s/3x3rwnlykp

...