Enhanced english version for angular-mindmap
npm install angular-mindmappingMind Map
======
This repo that convert original lib to typescript lib, then, add some feature, hope you like this feature.
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.
> npm i angular-mindmapping
> 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()"
> 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
> 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
--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);
}
}
``