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.

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.

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

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