API

Create instance

The library uses an OOP paradigm and allows you to create multiple instances.

mmp.create(id, [options])

Creates a mmp instance. Draw the mind map creating an svg element with the root node within the div element with id equal to the id string passed as parameter. You can optionally pass various options as the following example:

var map = mmp.create("map", {
    fontFamily: "Arial, Helvetica, sans-serif",
    centerOnResize: true,
    drag: false,
    zoom: false,
    defaultNode: {
        name: "Default node name",
        image: {
            src: "",
            size: 60
        },
        colors: {
            name: "#787878",
            background: "#f9f9f9",
            branch: "#577a96"
        },
        font: {
            size: 16,
            style: "normal",
            weight: "normal"
        },
        locked: true
    },
    rootNode: {
        name: "Default root node name",
        image: {
            src: "",
            size: 70
        },
        colors: {
            name: "#787878",
            background: "#f0f6f5",
            branch: ""
        },
        font: {
            size: 20,
            style: "normal",
            weight: "normal"
        }
    }
});

You can change these options later using the function map.updateOptions.

Library version

mmp.version

Contains the version of the current used mmp library.

Remove instance

map.remove()

Removes the map instance and the svg element of the mind map.

New map

map.new([map])

Creates a new empty mind map. If map is specified, creates a new mind map using mmp json structure. The map parameter must be a JSON-like object, here an example. The function map.exportAsJson is available to obtain the json of a map.

Zoom in

map.zoomIn([duration])

Zooms in the mind map. If duration (int, milliseconds) is specified, sets the duration of the zoom animation.

Zoom out

map.zoomOut([duration])

Zooms out the mind map. If duration (int, milliseconds) is specified, sets the duration of the zoom animation.

Update options

map.updateOptions(property, value)

Updates the option property (string, "fontFamily", "centerOnResize", "drag", "zoom", "defaultNode", "rootNode") with the relative value passed as parameter.

Export as JSON

map.exportAsJson()

Returns a json with the structure of the current mind map.

Export as image

map.exportAsImage(callback, [type])

Calls the callback passing the URI of the map image as parameter. The type (string) optional parameter is the standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.

Undo

map.undo()

Allows to reverse the last one change.

Redo

map.redo()

Repeats a previously undoed change.

History

map.history()

Return all snapshots of the map.

Center

map.center([type], [duration])

Places the root node in the middle of the map and sets the zoom to the original state. If type (string, "position" or "zoom") is specified, updates only the location or updates only the zoom. If duration (int, milliseconds) is specified, sets the duration of the center animation.

Events

map.on(event, callback)

Calls the callback of the related event passing some parameters.

Events	Callback parameters
create	(nothing)
center	(nothing)
undo	(nothing)
redo	(nothing)
exportJSON	(nothing)
exportImage	(nothing)
zoomIn	(nothing)
zoomOut	(nothing)
nodeSelect	(node*)
nodeDeselect	(nothing)
nodeUpdate	(node*)
nodeCreate	(node*)
nodeRemove	(node*)

*node properties:

{
    id: string;
    parent: string;
    k: number;
    name: string;
    coordinates: {
        x: number;
        y: number;
    };
    image: {
        src: string;
        size: number;
    };
    colors: {
        name: string;
        background: string;
        branch: string
    };
    font: {
        size: number;
        style: string;
        weight: string
    };
    locked: boolean;
}

Add node

map.addNode([properties])

Adds a node in the map. The added node will be the child of the current selected node. If properties is specified, adds the node with those node properties.

Properties:

{
    name: string;
    coordinates: {
        x: number;
        y: number;
    };
    image: {
        src: string;
        size: number;
    };
    colors: {
        name: string;
        background: string;
        branch: string
    };
    font: {
        size: number;
        style: string;
        weight: string
    };
    locked: boolean;
}

Select node

map.selectNode([id])

Selects the node with the id (string) passed as parameter or if the id is not specified returns the current selected node.

Deselect node

map.deselectNode()

Deselects the selected node. The deselection is the same as selecting the root node without highlighting.

Update node properties

map.updateNode(property, value, [graphic])

Updates the node property (string, "name", "locked", "coordinates", "imageSrc", "imageSize", "backgroundColor", "branchColor", "fontWeight", "fontStyle", "fontSize", "nameColor") with the relative value passed as parameter. If graphic (boolean) is specified and is true, update only graphically the node.

Remove node

map.removeNode([id])

Removes the selected node or if id (string) is specified, removes the node with the id passed as parameter.