jsMind

Table of Contents

jsMind object

jsMind provides a set of APIs for manipulating the mindmap, all of which are based on the jsMind object processing, which can be obtained using the following code.

/*
Method 1.
    jsMind objects are available when you create a mindmap
*/
var jm = new jsMind(options);

/*
Method 2.
    This jsMind object can be obtained directly if a mindmap already exists on the current page
    When multiple jsMind are created on a page, this method gets the last object created
*/
var jm = jsMind.current;

Node object

A mindmap diagram is composed of multiple nodes and connections between nodes, a mindmap diagram has a root node, the root node can have multiple child nodes on the periphery, and the child node can have multiple child nodes. Each node contains more than one of the following attributes.

node {
    id,         // : string node id
    index,      // : integer node number
    topic,      // : string node topic
    isroot,     // : boolean indicates whether this node is root or not
    parent,     // : node The parent of this node, the parent program of the root node is null, but please do not judge whether this node is the root node based on this property.
    direction,  // : enum(left,center,right) The distribution position of the node
    children,   // : array of node The combination of children of the node
    expanded,   // : boolean Is the next level of the node expanded or not
    data,       // : object{string: object} Other additional data for this node
}

3.1 Displaying a mindmap

Use the jm.show(mind) method to display a mindmap, see 1.1. Basic framework for specific usage.

3.2. Finding Nodes

Get root : Use jm.get_root() to get the root of the current mindmap.

Find node by id : Use the jm.get_node(node_id) method to find the node specified in the current mind map by id, and return null if it is not found.

Get selected node : Use jm.get_selected_node() to get the currently selected node and return null if there is no selected node.

Find adjacent nodes : Use jm.find_node_before(node|node_id) and find_node_after(node|node_id) to get the previous or next node of the specified node, and return null if there is no previous or next one.

Fetch parent : Use node.parent to get the parent node, the parent of the root node is null.

Fetching a collection of child nodes : A collection of child nodes can be obtained using node.children.

3.3 Operation on Nodes

Select node : Use the jm.select_node(node) method to select the specified node.

Collapse child nodes : Use the jm.collapse_node(node) method to collapse the child nodes of the node.

Expand Child Node : Use the jm.expand_node(node) method to expand the child node of this node.

Collapse or expand child nodes : Use the jm.toggle_node(node) method to automatically expand or collapse child nodes.

Expand all child nodes : All child nodes can be expanded using the jm.expand_all() method.

Expand to level : Use the jm.expand_to_depth(depth) method to expand to a specified level.

Move Node : Use the jm.move_node(node, before_id, parent_id, direction) method to move a node

center node : Use the jm.scroll_node_to_center(node) method to scroll a node to the center of mindmap. (since 0.6.2)

Enable editing : Use the jm.enable_edit() method to enable editing of the current mindmap.

Disable_edit : Use the jm.disable_edit() method to disable editing of the current mindmap.

Edit Node : The node can be adjusted to edit using the jm.begin_edit(node|node_id) method.

Stop editing : The node can be adjusted to read-only using the jm.end_edit() method.

3.4. Editing Nodes

Add Node : Use the jm.add_node(parent_node, node_id, topic, data, direction) method to add a sub node to the parent_node. data and direction are optional.

Insert node before specified location : Use the jm.insert_node_before(node_before, node_id, topic, data, direction) method to insert a node before the node_before node. data and direction are optional.

Insert node after specified location : Use the jm.insert_node_after(node_after, node_id, topic, data, direction) method to insert a node after the node_after node. data and direction are optional.

Delete Node : Use the jm.remove_node(node|node_id) method to delete a specified node and all its children.

Update node : Use the jm.update_node(node_id, topic) method to update the topic of the specified node.

3.5 Setting Style

Set the theme : Use the jm.set_theme(theme) method to set the theme of the mind map.

Set background / foreground color : Use the jm.set_node_color(node_id, bg_color, fg_color) method to set the background and foreground color of the specified node.

Set Font : Use the jm.set_node_font_style(node_id, size, weight, style) method to set the font of the specified node.

Set background image : Use the jm.set_node_background_image(node_id, image, width, height) method to set the background image of the specified node.

3.6 Access to Data

Get metadata : Use the jm.get_meta() method to get metadata for the current mindmap.

Get Data : Use the jm.get_data(data_format) method to get the data text in the specified format of the current mindmap.

3.7 Other Operations

Clear selection of nodes : Use the jm.select_clear() method to clear the current selected state.

Determine if the node is visible : Use the jm.is_node_visible(node) method to determine if this node is visible.

copyright notice

Reproduction and deduction are prohibited.

The jsMind project is still being updated and the corresponding documentation is updated at the same time as the version is updated. In order to avoid confusion to the user, it is forbidden to reprint this document without written permission and to make changes of any kind to this document.