Drawing app undo and redo function action script 3 - actionscript-3

Question

Can anyone show me how can I make undo and redo function? so this is my current action script. I cant figure how to do it and i see some example in some web site, the action script is to long to under stand. Pls show a simple way that i can make this work..
sorry for bad grammar...
var drawingLine:Shape=new Shape();
board.addChild(drawingLine);
var doDraw:Boolean=false;
var lineSize:Number=7;
var activeColor:uint = 0x000000;
function PencilTool(event:MouseEvent):void{
board.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
board.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
}
function MouseDown(e:MouseEvent):void{
doDraw=true;
drawingLine.graphics.moveTo(drawingLine.mouseX, drawingLine.mouseY);
drawingLine.graphics.lineStyle(lineSize, activeColor);
board.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
}
function MouseMove(e:MouseEvent):void{
var curX:Number=drawingLine.mouseX;
var curY:Number=drawingLine.mouseY;
if(doDraw && checkCoords(curX,curY)){
if(active=="Line"){
clearTemp();
temporaryDrawing.graphics.lineTo(curX,curY);
}else{
drawingLine.graphics.lineTo(curX,curY);
}
e.updateAfterEvent();
}
}
function MouseUp(event:MouseEvent):void{
doDraw=false;
}
btn_Pencil.addEventListener(MouseEvent.MOUSE_UP, PencilTool);

Answer 1

this,o Using two graphics,would not be the way to go
The way I would approach this is by creating a lineInfo class (seeing how you are using lines only), and have the information of startpoint, endpoint, lineColour, lineWidth, and lineAlpha .
Then create an array or Vector and populate it with a new LineInfo class, and update the graphics with the line. If you need to undo, you can set the last item use value to false, and redraw the graphics from the instruction of the array. Create a undo step integer, that keeps track of how many (counting from the back) actions should be omitted.
To improve performance, you can create a maximum of 25 instructions, and create a graphics that caches the items not in the undo list.

Answer 2

You could save all movements after clicks in an array or vector, then if you want to undo, you redraw all movements in the array except the last one.
Could be something like this:
var drawingLine:Shape=new Shape();
board.addChild(drawingLine);
// MOVEMENTS INFORMATION
var movements:Array = new Array();
var doDraw:Boolean = false;
var cacheIndex:int = 0;
var lineSize:Number=7;
var activeColor:uint = 0x000000;
function PencilTool(event:MouseEvent):void{
board.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
board.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
}
function MouseDown(e:MouseEvent):void{
function PencilTool(event:MouseEvent):void{
board.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
board.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
}
function MouseDown(e:MouseEvent):void{
doDraw=true;
drawingLine.graphics.moveTo(drawingLine.mouseX, drawingLine.mouseY);
drawingLine.graphics.lineStyle(lineSize, activeColor);
board.addEventListener(MouseEvent.MOUSE_MOVE, MouseMove);
lastTracing = {
mainPoint: {
x:drawingLine.mouseX,
y:drawingLine.mouseY
},
lineSize: lineSize,
activeColor:activeColor,
points:new Array()
}
cacheIndex = 0;
movements.splice(movements.length - cacheIndex, cacheIndex);
movements.push(lastTracing );
}
function MouseMove(e:MouseEvent):void{
var curX:Number=drawingLine.mouseX;
var curY:Number=drawingLine.mouseY;
if(doDraw && checkCoords(curX,curY)){
if(active=="Line"){
clearTemp();
temporaryDrawing.graphics.lineTo(curX,curY);
}else{
drawingLine.graphics.lineTo(curX,curY);
lastTracing.points.push({x:curX, y:curY});
}
e.updateAfterEvent();
}
}
function MouseUp(event:MouseEvent):void{
doDraw=false;
}
function undoFunction(event:MouseEvent=null):void {
if(cacheIndex+1 <= movements.length){
cacheIndex++;
}
drawCache();
}
function redoFunction(event:MouseEvent = null):void {
if(cacheIndex-1 >= 0){
cacheIndex--;
}
drawCache();
}
function drawCache():void {
for(var i:uint=0;i<(movements.length-cacheIndex);i++){
var tracingInfo:Object = movements[i];
drawingLine.graphics.clear();
drawingLine.graphics.moveTo(tracingInfo.mainPoint.x, tracingInfo.mainPoint.y);
drawingLine.graphics.lineStyle(tracingInfo.lineSize, tracingInfo.activeColor);
for(var j:uint=0;j<tracingInfo.points.length;j++){
drawingLine.graphics.lineTo(tracingInfo.points[j].x,tracingInfo.points[j].y);
}
}
}
btn_Pencil.addEventListener(MouseEvent.MOUSE_UP, PencilTool);