Question

I’m trying to find a way to record the state of the different objects on the canvas (image, shape, select box) so it can all be serialized into XML or JSON. I’ve tried placing each object into a global array:

var shapeState = { //Example of a shape being recorded
                            number:increment,
                            id:thisCanvas,
                            type:'shape',
                            kind:shapeKind,
                            cheight:canvasHeight,
                            cwidth:canvasWidth,
                            height:shapeHeight,
                            width:shapeWidth,
                            color:shapeColor,
                            x:xPos,
                            y:yPos
                        }

                        totalState.push(shapeState); //State of shape data has been stored in global array

But this only works if the shape (or other object) is static. If, for example, i move the element (after clicking the ‘move’ button), how can i update the xPos property? The shape object would have already been placed inside the array and unidentifiable by name. Say there are 100+ shapes in the global array, how would i be able to find a specific one to update? Please help.

here is the fiddle: http://jsfiddle.net/RymyY/5/

Answer 1

Here’s one approach:

var AllShapeStates = {};

function Shape() {
    var SerializedState = {},
        number,
        thisCanvas,
        etc;
    AllShapeStates[UNIQUE_IDENTIFYING_ATTRIBUTE] = SerializedState;
    //Shape Business

    this.updateState = function(){
        SerializedState.number = number;
        SerializedState.id = thisCanvas;
        //etc
    }
}

In this model, when a Shape is instantiated, it adds a reference to its SerializedState into the global AllShapestates var; Whenever the Shape updates it’s state, it should call updateState, which updates its SerializedState object;