Undo, redo functionality with image manipulation in Flex

Question

So I managed to learn some Flex and created a small app that:

• Loads an image to an Image component
• Transform the image (rotate, flip) with the Matrix
• Apply filter(s)

Now I am thinking about to create some undo redo functionality. Each time I do a transformation / add an filter I want to be able to go back to the previous image (before the action).

My thought is to have an Array and add the previous bitmap to the stack. But I see that there are some differences between transformations and filters I have also seen the ImageSnapshot and whot i can do and it looks like what I am after.

I am a bit new to Flex in general and I hope someone here can give me any advice on this and hopefully som directions.

Thanks for any advice! Best regards,

Ran

Answer 1

I suggest looking into the Command design pattern.

Essentially, your array would contain not the image, but tokens representing the operation taken on the image. Each token would have enough information to undo (and redo?) its operation.

var c:Command = new RotateCommand(90, CLOCKWISE);
c.doWork();
history.push(c);

// Undo
var c:Command = history.pop();
c.undoWork();

then in the commands, roughly:

public function doWork():void {
    var newTransform:Matrix = calculateTransform(angle, direction); // 90, CLOCKWISE
    image.transform.matrix.concat(newTransform);
}

public function undoWork():void {
    var newTransform:Matrix = calculateTransform(-angle, direction); // reverse operation
    image.transform.matrix.concat(newTransform);