PixiEditor utilizes a quite complex undo system, yet easy to use after understanding a few concepts. The editor itself handles almost all the hard work and unless you are building some complex tool, implementing new things should come with ease.
Generally, there are 3 methods, that you'll use while working with UndoManager.
This is a method that adds your change to UndoManager
There are 2 parameters,
Change change and
bool invokedInsideSetter = false.
- Change is a class that contains all the data about your undoable change.
- invokedInsideSetter is used to prevent infinite adding the same change when
AddUndoChangeis located inside the setter property of this change.
This Example will yield an infinite loop of adding changes to UndoManager
true this problem is gone.
This is the most basic change type. It sets the property value on
propertyis the name of the property that is affected, dot format is supported (ex.
oldValueis the value before the property was changed
newValueis the value after the property was changed
descriptionis the description of the change, it's just a documentation
rootis the parent class that contains property, default is null, which points to PixiEditor
UndoChangesproperty containing class (while writing this doc, it's:
This type of change is significantly different from a property-based one. It doesn't set any values by itself, but rather executes a defined process (method/function/Action) on
In this constructor, we have
processArguments. The reverse process is a function that is called on
Undo and the process is a function called on
Redo. They both are Actions with
object arguments. This kind of Undo is for more complex cases, where simple property changing isn't enough. PixiEditor mainly uses them, since working with images is a challenging task, and we do not store whole bitmaps in memory.
In this example, we are setting the pixel at some Coordinates to black, we have 2 methods that are used in undo, they are called processes, One is basically a wrapper for
object arguments and second Undoes the setting pixel with
lastColor which is red.
Some actions are unreversible, and cannot be recreated without saving the bitmap somewhere, that's where
StorageBasedChange comes in. This change saves selected layers on the disk.
This class is basically a wrapper for normal Change, that injects some logic into
ReverseProcess (undo) and
Process (redo). Either you choose to save layers on each
Redo(), StorageBasedChange supports both approaches.
First, you need to construct an object and provide layers, which you want to save with some additional parameters.
The basic syntax looks like this:
document - is a Document that contains layers to save.
layers - layers to save on disk
saveOnStartup - if true, layers are saved on disk after object initialization (in the constructor).
And the next this is to construct actual
Change, which you can insert into
One of the method overloads looks like this
undoProcess - is a method that will be executed on Undo, it needs to have 2 parameters and doesn't return anything. Both parameters are connected with restored layers from the disk.
The first parameter is a
Layer, these layer array is loaded from disk, and you can do whatever with them.
The Second parameter is a UndoLayer, this class contains information about the layer before saving, this is required since
StorageBasedUndo saves only layer bitmap on disk (as a PNG).
redoProcess - is a basic method with object parameters, same as a normal Change process, but before calling this function,
StorageBasedUndo saves layers on disk again.
redoProcessParameters - arguments for
description - description of undo.
There are a few more overloads, one which swaps
Redo, so you save layers on disk on
Redo and restore on
Undo, another adds the possibility to attach custom parameters to
Example of add layer undo (taken directly from PixiEditor).
Undo system is quite complex, there are a lot of variations and possibilities, you've learned from this guide about most important aspects, you can find out more examples in source code and tests (they are a great source of knowledge!).