angular-mindmapping

Mind Map
======

Notice

This repo that convert original lib to typescript lib, then, add some feature, hope you like this feature.

Original

jsMind is a pure javascript library for mindmap, it base on html5 canvas. jsMind was released under BSD license, you can embed it in any project, if only you observe the license.

Install

> npm i angular-mindmapping

Feature

$3

> we can handle "nodeMoving" event to catch the current, source and destination node during a drag/drop move and even cancel the move using "event.preventDefault()"

$3

> we can add property depth of option parameter to control this mind map depth, it will throw exception when add node greater the depth.

``javascript
const option = {
...
depth: 5,
hasInteraction: true,
enableDraggable: true,
}

const mindMap = MindMapMain.show(option, mind);
`

* hasInteraction(boolean): define this mind map whether need interaction, if true, we can use some utils like reporter and receiver to control yourself interaction
* enableDraggable(boolean): enable node draggable, default is false

$3

> we can add property hierarchy_rule of option parameter to control this mind map select type and node background color and font color.

`javascript
const HIERARCHY_RULES = {
ROOT: {
name: 'Company',
backgroundColor: '#7EC6E1',
getChildren: () => [
HIERARCHY_RULES.SALES_MANAGER,
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_MANAGER: {
name: 'Work Plan',
color: '#fff',
backgroundColor: '#616161',
getChildren: () => [
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SHOW_ROOM: {
name: 'Job',
color: '#fff',
backgroundColor: '#989898',
getChildren: () => [
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_TEAM: {
name: 'Task',
color: '#fff',
backgroundColor: '#C6C6C6',
getChildren: () => []
}
};
`

By above example, we can configurate the mind map hierarchical relationship.

* name(string): display in node text
* color(string): node font color
* backgroundColor(string): node background color
* getChildren(function): get can select node type in selector

Usage

--In angular

`javascript
import { MindMapMain } from "angular-mindmapping";

const HIERARCHY_RULES = {
ROOT: {
name: 'Company',
backgroundColor: '#7EC6E1',
getChildren: () => [
HIERARCHY_RULES.SALES_MANAGER,
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_MANAGER: {
name: 'Work Plan',
color: '#fff',
backgroundColor: '#616161',
getChildren: () => [
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SHOW_ROOM: {
name: 'Job',
color: '#fff',
backgroundColor: '#989898',
getChildren: () => [
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_TEAM: {
name: 'Task',
color: '#fff',
backgroundColor: '#C6C6C6',
getChildren: () => []
}
};

const option = {
container: 'jsmind_container',
theme: 'normal',
editable: true,
selectable: false,
depth: 4,
hierarchyRule: HIERARCHY_RULES,
enableDraggable: true,
};

const mind = {
format: 'nodeTree',
data: {
id: 43,
topic: 'EiBP',
selectedType: false,
backgroundColor: '#7EC6E1',
children: [
{
id: 80,
color: '#fff',
topic: 'Work Plan No.1',
direction: 'right',
selectedType: 'Work Plan',
backgroundColor: '#616161',
children: []
},
{
id: 44,
color: '#fff',
topic: 'Work Plan No.2',
direction: 'right',
selectedType: 'Work Plan',
backgroundColor: '#616161',
children: [
{
id: 46,
color: '#fff',
topic: 'Job No.1',
direction: 'right',
selectedType: 'Job',
backgroundColor: '#989898',
children: [
{
id: 49,
color: '#fff',
topic: 'Task No.1',
direction: 'right',
selectedType: 'Task',
backgroundColor: '#C6C6C6',
children: []
},
{
id: 51,
color: '#fff',
topic: 'Task No.2',
direction: 'right',
selectedType: 'Task',
backgroundColor: '#C6C6C6',
children: []
},
{
id: 47,
color: '#fff',
topic: 'Task No.3',
direction: 'right',
selectedType: 'Task',
backgroundColor: '#C6C6C6',
children: []
},
{
id: 48,
color: '#fff',
topic: 'Task No.4',
direction: 'right',
selectedType: 'Task',
backgroundColor: '#C6C6C6',
children: []
},
{
id: 50,
color: '#fff',
topic: 'Task No.5',
direction: 'right',
selectedType: 'Task',
backgroundColor: '#C6C6C6',
children: []
}
]
}
]
},
{
id: 45,
color: '#fff',
topic: 'Work Plan No.3',
direction: 'right',
selectedType: 'Work Plan',
backgroundColor: '#616161',
children: []
}
]
}
};

@Component(
...
)
class MindMapComponent implements OnInit {

mindMap;

constructor() {

}

ngOnInit() {
this.mindMap = MindMapMain.show(option, mind);
}

removeNode() {
const selectedNode = this.mindMap.getSelectedNode();
const selectedId = selectedNode && selectedNode.id;

if (!selectedId) {
return;
}
this.mindMap.removeNode(selectedId);
}

addNode() {
const selectedNode = this.mindMap.getSelectedNode();
if (!selectedNode) {
return;
}

const nodeId = customizeUtil.uuid.newid();
this.mindMap.addNode(selectedNode, nodeId);
}

getMindMapData() {
const data = this.mindMap.getData().data;
console.log('data: ', data);
}
}
``