This repo that convert original lib to typescript lib, then, add some feature, hope you like this feature.
jsMind ๆฏไธไธชๆพ็คบ/็ผ่พๆ็ปดๅฏผๅพ็็บฏ javascript ็ฑปๅบ๏ผๅ ถๅบไบ html5 ็ canvas ่ฟ่ก่ฎพ่ฎกใjsMind ไปฅ BSD ๅ่ฎฎๅผๆบ๏ผๅจๆญคๅบ็กไธไฝ ๅฏไปฅๅจไฝ ็้กน็ฎไธไปปๆไฝฟ็จใไฝ ๅฏไปฅๅจๆญคๆต่ง[้็จไบ jsMind ็ BSD ่ฎธๅฏๅ่ฎฎ(ไธญ่ฑๆ็ๆฌ)][3]ใ
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. You can read [the BSD license agreement for jsMind in English and Chinese version][3] here.
npm install mind-map
we can add property depth of option parameter to control this mind map depth, it will throw exception when add node greater the depth.
const option = {
...
depth: 5,
hasInteraction: true,
enableDraggable: true,
}
const mindMap = MindMapMain.show(option, mind);By above example, we create a mind map that support 5 level depth,
define the select option is ้ๅฎ็ป็, ๅฑๅ
, ้ๅฎๅฐ็ป and
support interaction(but now, we only support interaction with the last level option, that's mean when we select the last option like ้ๅฎๅฐ็ป,
we can receive event from the mind map transporter.
Likewise, we can initiative send event to the mind map by the mind map receiver)
- 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.
const HIERARCHY_RULES = {
ROOT: {
name: 'XXๆฑฝ่ฝฆๆ้ๅ
ฌๅธ',
backgroundColor: '#7EC6E1',
getChildren: () => [
HIERARCHY_RULES.SALES_MANAGER,
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_MANAGER: {
name: '้ๅฎ็ป็',
color: '#fff',
backgroundColor: '#616161',
getChildren: () => [
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SHOW_ROOM: {
name: 'ๅฑๅ
',
color: '#fff',
backgroundColor: '#989898',
getChildren: () => [
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_TEAM: {
name: '้ๅฎๅฐ็ป',
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 angular2,
import { MindMapMain } from 'mind-map';
const HIERARCHY_RULES = {
ROOT: {
name: 'XXๆฑฝ่ฝฆๆ้ๅ
ฌๅธ',
backgroundColor: '#7EC6E1',
getChildren: () => [
HIERARCHY_RULES.SALES_MANAGER,
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_MANAGER: {
name: '้ๅฎ็ป็',
color: '#fff',
backgroundColor: '#616161',
getChildren: () => [
HIERARCHY_RULES.SHOW_ROOM,
HIERARCHY_RULES.SALES_TEAM
]
},
SHOW_ROOM: {
name: 'ๅฑๅ
',
color: '#fff',
backgroundColor: '#989898',
getChildren: () => [
HIERARCHY_RULES.SALES_TEAM
]
},
SALES_TEAM: {
name: '้ๅฎๅฐ็ป',
color: '#fff',
backgroundColor: '#C6C6C6',
getChildren: () => []
}
};
const option = {
container: 'jsmind_container',
theme: 'normal',
editable: true,
depth: 4,
hierarchyRule: HIERARCHY_RULES
};
const mind = {
"format": "nodeTree",
"data": {
"id": 43,
"topic": "xx่ฝฆ่ก",
"selectedType": false,
"backgroundColor": "#7EC6E1",
"children": [
{
"id": 80,
"color": "#fff",
"topic": "show room",
"direction": "right",
"selectedType": "้ๅฎ็ป็",
"backgroundColor": "#616161",
"children": []
},
{
"id": 44,
"color": "#fff",
"topic": "้ๅฎ็ป็",
"direction": "right",
"selectedType": "้ๅฎ็ป็",
"backgroundColor": "#616161",
"children": [
{
"id": 46,
"color": "#fff",
"topic": "ๅฑๅ
็ป็",
"direction": "right",
"selectedType": "ๅฑๅ
",
"backgroundColor": "#989898",
"children": [
{
"id": 49,
"color": "#fff",
"topic": "้ๅฎๅฐ็ปC",
"direction": "right",
"selectedType": "้ๅฎๅฐ็ป",
"backgroundColor": "#C6C6C6",
"children": []
},
{
"id": 51,
"color": "#fff",
"topic": "AMG้ๅฎ",
"direction": "right",
"selectedType": "้ๅฎๅฐ็ป",
"backgroundColor": "#C6C6C6",
"children": []
},
{
"id": 47,
"color": "#fff",
"topic": "้ๅฎๅฐ็ปA",
"direction": "right",
"selectedType": "้ๅฎๅฐ็ป",
"backgroundColor": "#C6C6C6",
"children": []
},
{
"id": 48,
"color": "#fff",
"topic": "้ๅฎๅฐ็ปB",
"direction": "right",
"selectedType": "้ๅฎๅฐ็ป",
"backgroundColor": "#C6C6C6",
"children": []
},
{
"id": 50,
"color": "#fff",
"topic": "้ๅฎๅฐ็ปD",
"direction": "right",
"selectedType": "้ๅฎๅฐ็ป",
"backgroundColor": "#C6C6C6",
"children": []
}
]
}
]
},
{
"id": 45,
"color": "#fff",
"topic": "Smart็ป็",
"direction": "right",
"selectedType": "้ๅฎ็ป็",
"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);
}
}