Edit Mode - marcelklehr/buzzmap GitHub Wiki

You like buzzmap, but you find it too complicated to set up a map in HTML?

That's where the edit mode comes in. It allows you to edit your map live, while viewing it in your browser! Simply double click on the node you want to edit, and an interface will appear, allowing you not only to edit the node's content but even to remove it and furthermore to add child nodes.

Enable edit mode

When initializing buzzmap, simply set editable to true.

$('#my-mindmap').buzzmap({
    editable: true,
});

Pass initial data

Now, we need to pass the initial structure of the mindmap. Buzzmap will then render the mindmap from the serialized data.

$('#my-mindmap').buzzmap({
    editable: true,
    structure: my_mapdata,
});

Register callback

Now we register a callback for the onchange event. Everytime a node is added, changed or removed this callback is invoked passing the node which was changed and the current structure of the mindmap serialized as JSON.

Let's see, how our code looks now:

$('#my-mindmap').buzzmap({
    editable: true,
    structure: my_mapdata,
    onchange: my_storeMapFunction,
});

The example (located in index.html) uses localStorage to be able to store and load the mindmap offline.