<p align="center"> <h1 align="center"> :broken_heart: Project no longer supported </h1> <p align="center">Fork it to continue development!</p> </p>

Mmp^beta

Mmp was born with the intention to make the creation of maps extremely simple, while maintaining the fundamental properties that make the mind maps so efficient:

• Colors :rainbow:
• Images :mount_fuji:
• Neural branches :arrow_heading_up:
• Hierarchical structure :family:
• Radial geometry :palm_tree:

Mmp is a light JavaScript library (which uses the UMD pattern) with which it is possible to create mind map applications. It is highly customizable, easy to use and it is written using TypeScript and the famous D3.js library. All its functions are documented with JSDoc markup language and tested with mocha and chai.

Installing

npm

You can install mmp package with npm:

npm install mmp --save

Then add the mmp library with d3.js to your index.html:

<div id="map"></div>

<script src="node_modules/d3/build/d3.min.js"></script>
<script src="node_modules/mmp/build/mmp.min.js"></script>
<script>
    let myMap = mmp.create("map");
</script>

CDN

You can also load it using a <script> using the unpkg CDN:

<div id="map"></div>

<script src="https://unpkg.com/d3/build/d3.min.js"></script>
<script src="https://unpkg.com/mmp/build/mmp.min.js"></script>
<script>
    let myMap = mmp.create("map");
</script>

API Reference

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

<a name="mmp_create" href="#mmp_create">#</a> 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.

<a name="mmp_version" href="#mmp_version">#</a> mmp.version

Contains the version of the current used mmp library.

<a name="map_remove" href="#map_remove">#</a> map.remove()

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

<a name="map_new" href="#map_new">#</a> 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.

<a name="map_zoomIn" href="#map_zoomIn">#</a> map.zoomIn([duration])

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

<a name="map_zoomOut" href="#map_zoomOut">#</a> map.zoomOut([duration])

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

<a name="map_updateOptions" href="#map_updateOptions">#</a> map.updateOptions(property, value)

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

<a name="map_exportAsJson" href="#map_exportAsJson">#</a> map.exportAsJson()

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

<a name="map_exportAsImage" href="#map_exportAsImage">#</a> 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.

<a name="map_undo" href="#map_undo">#</a> map.undo()

Allows to reverse the last one change.

<a name="map_redo" href="#map_redo">#</a> map.redo()

Repeats a previously undoed change.

<a name="map_history" href="#map_history">#</a> map.history()

Return all snapshots of the map.

<a name="map_center" href="#map_center">#</a> 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.

<a name="map_on" href="#map_on">#</a> 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;
}

<a name="map_addNode" href="#map_addNode">#</a> map.addNode([properties], [id])

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. If id is not specified, adds the node as child of the selected node.

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;
}

<a name="map_selectNode" href="#map_selectNode">#</a> map.selectNode([id])

Selects the node with the id (string) passed as parameter or the position ("left", "right", "down", "up"). If the id is not specified returns the current selected node.

<a name="map_editNode" href="#map_editNode">#</a> map.editNode()

Focus on the text of the selected node.

<a name="map_deselectNode" href="#map_deselectNode">#</a> map.deselectNode()

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

<a name="map_updateNode" href="#map_updateNode">#</a> map.updateNode(property, value, [graphic], [id])

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. If id is not specified, update the selected node.

<a name="map_removeNode" href="#map_removeNode">#</a> map.removeNode([id])

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

<a name="map_copyNode" href="#map_copyNode">#</a> map.copyNode([id])

Copies a node with his children in the mmp clipboard. If id is not specified, copies the selected node.

<a name="map_cutNode" href="#map_cutNode">#</a> map.cutNode([id])

Removes and copy a node with his children in the mmp clipboard. If id is not specified, copies the selected node.

<a name="map_pasteNode" href="#map_pasteNode">#</a> map.pasteNode([id])

Paste the node