【ドット絵エディタ制作】5回目:Undo・Redo機能

作業履歴をさかのぼる機能を実装した。

作ったもの

左のUndoボタンで一つ前の状態にもどり、右のRedoボタンでやり直し。
作業ログの保存は10件まで。

確認用ページ

ソースコード

クラス図

追加したのは、UI用のHistoryBtnsクラスのみ。あとは、EditBtnsをDrawBtnsに名称変更した。

つまづきポイント

履歴の考え方

履歴保存には、
状態を保存する(Mementoパターン)と変化を保存する(Commandパターン)があるらしいが、
状態を保存する方で実装した。

理由は、お絵描きの変化はかなり複雑で、
仮にそれを記録できたとしても、
その記録をもとに処理を正しく再現するはかなり大変になりそうだと思ったから。

幸い、前回までで、
Workspaceの状態をPixcelArtDataクラスでデータ化できているので、
履歴の機能もPixcelArtDataクラスを利用することにした。

処理を行うたびに、PixcelArtDataクラスのデータを作成し、配列で保存。
履歴を遡る際には、配列からPixcelArtDataを取り出し、
Workspaceに反映している。

この方法であれば、
将来的に複数のレイヤーを操作ができるようになったとしても、
操作後の状態を履歴に残せば良く、
機能追加時に履歴のことをあまり考えずに実装ができると思う。

参考:Undoの実装の考え方

履歴保存のタイミング

当初は、
ユーザーがマウス操作をするタイミングごとに履歴を保存しようとしていたが、
履歴を遡ったり、ファイルを読み込んだりと
お絵描き以外の操作を考慮しだすと
カオスになってしまった。

そのため考え方を改めて、
Workspaceが変更されたタイミングで履歴を保存する
という方針に変更したところ、
比較的すんなり実装することができた。

ひとこと

こっそりとSVG形式で保存する機能を追加しているが、
これについてはまた別の機会に。