Mind Map layout in EJ2 TypeScript Diagram control
16 Dec 202416 minutes to read
A mind map is a diagram that displays the nodes as a spider diagram organizes information around a central concept. To create mind map, the type of layout should be set as MindMap.
Mind Map Orientation
An Orientation of a MindMapTreeLayout is used to arrange the tree layout according to a specific direction. By default, the orientation is set to Horizontal.
The following code example illustrates how to create an mindmap layout.
import {
Diagram, ConnectorModel, Node, DataBinding,
LayoutType, Rect, HorizontalAlignment, VerticalAlignment, NodeModel, TextModel, MindMap
} from '@syncfusion/ej2-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, MindMap);
//Initializes data source
let data: object[] = [
{
id: 1,
Label: 'StackPanel'
},
{
id: 2,
Label: 'Label',
parentId: 1
},
{
id: 3,
Label: 'ListBox',
parentId: 1
},
{
id: 4,
Label: 'StackPanel',
parentId: 2
},
{
id: 5,
Label: 'Border',
parentId: 2
},
{
id: 6,
Label: 'Border',
parentId: 4
},
{
id: 7,
Label: 'Button',
parentId: 4
},
{
id: 8,
Label: 'ContentPresenter',
parentId: 5
},
{
id: 9,
Label: 'Text Block',
parentId: 5
},
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
// Initializes Diagram
let diagram: Diagram = new Diagram({
width: '100%',
height: '550px',
//Uses layout to auto-arrange nodes on the diagram page
layout: {
//Sets layout type
type: 'MindMap',
orientation : 'Horizontal'
},//Configures data source for diagram
dataSourceSettings: {
id: 'id',
parentId: 'parentId',
dataManager: items,
root: String(1)
},//Sets the default properties for nodes and connectors
getNodeDefaults: (obj: Node) => {
obj.shape = {
type: 'Text',
content: (obj.data as {
Label: 'string'
}).Label,
};
obj.style = {
fill: '#6BA5D7',
strokeColor: 'none',
strokeWidth: 2
};
obj.borderColor = 'white';
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
(obj.shape as TextModel).margin = {
left: 5,
right: 5,
top: 5,
bottom: 5
};
return obj;
},
getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
}
});
diagram.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>The following table outlines the various orientation types available:
| Orientation Type | Description |
|---|---|
| Horizontal | Aligns the tree layout from left to right |
| Vertical | Aligns the tree layout from top to bottom |
NOTE
If you want to use mind map layout in diagram, you need to inject MindMap in the diagram.
Mind Map branch
You can also decide the branch for mind map using getBranch method. The following code demonstrates how to set all branches on the right side for mind map layout using getBranch method.
import {
Diagram,
ConnectorModel,
Node,
DataBinding,
NodeModel,
TextModel,
MindMap,
} from '@syncfusion/ej2-diagrams';
import { DataManager, Query } from '@syncfusion/ej2-data';
Diagram.Inject(DataBinding, MindMap);
//Initializes data source
let data: object[] = [
{
id: 1,
Label: 'StackPanel',
},
{
id: 2,
Label: 'Label',
parentId: 1,
},
{
id: 3,
Label: 'ListBox',
parentId: 1,
},
{
id: 4,
Label: 'StackPanel',
parentId: 2,
},
{
id: 5,
Label: 'Border',
parentId: 2,
},
{
id: 6,
Label: 'Border',
parentId: 4,
},
{
id: 7,
Label: 'Button',
parentId: 4,
},
{
id: 8,
Label: 'ContentPresenter',
parentId: 5,
},
{
id: 9,
Label: 'Text Block',
parentId: 5,
},
];
let items: DataManager = new DataManager(data as JSON[], new Query().take(7));
// Initializes Diagram
let diagram: Diagram = new Diagram({
width: '100%',
height: '550px',
snapSettings: { constraints: 0 },
//Uses layout to auto-arrange nodes on the diagram page
layout: {
//Sets layout type
type: 'MindMap',
orientation: 'Horizontal',
//get branch for the node
getBranch: (node: NodeModel) => {
if ((node.data as any).id === 1) {
return 'Root';
}
return 'Right';
},
}, //Configures data source for diagram
dataSourceSettings: {
id: 'id',
parentId: 'parentId',
dataManager: items,
root: String(1),
}, //Sets the default properties for nodes and connectors
getNodeDefaults: (obj: Node) => {
obj.shape = {
type: 'Text',
content: (
obj.data as {
Label: 'string';
}
).Label,
};
obj.style = {
fill: '#6BA5D7',
strokeColor: 'none',
strokeWidth: 2,
};
obj.borderColor = 'white';
obj.backgroundColor = '#6BA5D7';
obj.borderWidth = 1;
(obj.shape as TextModel).margin = {
left: 5,
right: 5,
top: 5,
bottom: 5,
};
return obj;
},
getConnectorDefaults: (connector: ConnectorModel, diagram: Diagram) => {
connector.style = {
strokeColor: '#6BA5D7',
strokeWidth: 2,
};
connector.targetDecorator.style.fill = '#6BA5D7';
connector.targetDecorator.style.strokeColor = '#6BA5D7';
connector.type = 'Orthogonal';
return connector;
},
});
diagram.appendTo('#element');<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>