Merging canvas serialization with meta data

Question

I'm building an interactive environment based on kinetic.js. I want to be able to save and load the state of the canvas along with meta data.

I already know I can use stage.toJSON() to serialize/save and use Kinetic.Node.create(stageJson, 'container') to load. But I'd like to add arbitrary data to that serialization that would track additional properties that my environment would define/use.

Example of standard kinetic.js serialization:

{
    "attrs": {
        "width": 578,
        "height": 200,
        "x": 0,
        "y": 0
    },
    "nodeType":"Shape",
    "shapeType":"Rect"
}

Example of what I'd like to be able to save/load instead:

{
    "attrs": {
        "width": 578,
        "height": 200,
        "x": 0,
        "y": 0
    },
    "nodeType":"Shape",
    "shapeType":"Rect",
    "metaData": {"foo": "bar"}
}

What would be the best approach here? I could hack/wrap the serialization and loading functions to add-in/pull-out the meta data before passing it along, but that seems clunky and hard to implement, especially if there are a lot of nested layers and shapes to parse. I could save two completely separate serializations, one produced by kinetic.js and a parallel one produced by my own code, but again, clunky. Anyone have better ideas?

Answer 1

toJSON() serializes all the stage (Node) 's attributes.
I didn't try it but it seems like you can add your own attributes to the stage by using setAttr(key,val). After setting them they will be seriallized and I assume also deserialized...

Note that this is not exactly what you were asking for as the extra data is not in the root level of the JSON but rather in the attrs sub-object