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

### nodeMoving event

> 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()"

### Configurable node tree depth etc.

> 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


### Configurable node select type.

> 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);
  }
}
```