Interactive Mind Map Diagram

A mind map is a kind of spider diagram that organizes information around a central concept, with connecting branches.

The layout is controlled by moving the nodes closest to the tree's root node. When one of these nodes is moved horizontally to the other side of the root, all of its children will be sent to Layout.doLayout with a new direction, causing text to always be moved outwards from the root. The spotConverter function is used to manage GraphObject.fromSpot and GraphObject.toSpot for nodes manually, so the TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot properties are set to false so that laying out the diagram will not overwrite the values.

When a node is deleted the CommandHandler.deletesTree property ensures that all of its children are deleted with it. When a node is dragged the DraggingTool.dragsTree property ensures that all its children are dragged with it. Both of these are set during the the Diagram's initalization.

Node templates also have a Part.selectionAdornmentTemplate defined to allow for new nodes to be created and a GraphObject.contextMenu with additional commands.

Diagram Model saved in JSON format:

{ "class": "go.TreeModel",
  "nodeDataArray": [
{"key":0, "text":"Mind Map", "loc":"0 0"},
{"key":1, "parent":0, "text":"Getting more time", "brush":"skyblue", "dir":"right"},
{"key":11, "parent":1, "text":"Wake up early", "brush":"skyblue", "dir":"right"},
{"key":12, "parent":1, "text":"Delegate", "brush":"skyblue", "dir":"right"},
{"key":13, "parent":1, "text":"Simplify", "brush":"skyblue", "dir":"right"},
{"key":2, "parent":0, "text":"More effective use", "brush":"darkseagreen", "dir":"right"},
{"key":21, "parent":2, "text":"Planning", "brush":"darkseagreen", "dir":"right"},
{"key":211, "parent":21, "text":"Priorities", "brush":"darkseagreen", "dir":"right"},
{"key":212, "parent":21, "text":"Ways to focus", "brush":"darkseagreen", "dir":"right"},
{"key":22, "parent":2, "text":"Goals", "brush":"darkseagreen", "dir":"right"},
{"key":3, "parent":0, "text":"Time wasting", "brush":"palevioletred", "dir":"left"},
{"key":31, "parent":3, "text":"Too many meetings", "brush":"palevioletred", "dir":"left"},
{"key":32, "parent":3, "text":"Too much time spent on details", "brush":"palevioletred", "dir":"left"},
{"key":33, "parent":3, "text":"Message fatigue", "brush":"palevioletred", "dir":"left"},
{"key":331, "parent":31, "text":"Check messages less", "brush":"palevioletred", "dir":"left"},
{"key":332, "parent":31, "text":"Message filters", "brush":"palevioletred", "dir":"left"},
{"key":4, "parent":0, "text":"Key issues", "brush":"coral", "dir":"left"},
{"key":41, "parent":4, "text":"Methods", "brush":"coral", "dir":"left"},
{"key":42, "parent":4, "text":"Deadlines", "brush":"coral", "dir":"left"},
{"key":43, "parent":4, "text":"Checkpoints", "brush":"coral", "dir":"left"}
 ]
}

GoJS Features in this sample

Collections

GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.

Related samples

Tree Layout

This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.

Related samples

Context Menus

A GoJS context menu is an Adornment that is shown when the user context-clicks (right mouse click or long touch hold) an object that has its GraphObject.contextMenu set. The context menu is bound to the same data as the part itself.

It is typical to implement a context menu as a "ContextMenu" Panel containing "ContextMenuButton"s, as you can see in the code below in the assignment of the Node's GraphObject.contextMenu and Diagram.contextMenu properties. Each "ContextMenu" is just a "Vertical" Panel Adornment that is shadowed. Each "ContextMenuButton" is a Panel on which you can set the GraphObject.click event handler. In the event handler obj.part will be the whole context menu Adornment. obj.part.adornedPart will be the adorned Node or Link. The bound data is obj.part.data, which will be the same as obj.part.adornedPart.data.

More information can be found in the GoJS Intro.

Related samples

Buttons

GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.

These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.

More information can be found in the GoJS Intro.

Related samples