# MindMap 思维导图

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mindmap/freepass)
- 平台：PC
- 维护者：栾俊超
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/shezhiyemian/#artboard4
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MindMap]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component, } from 'react';
import { MindMap, constants, MindFormatType, Select, Button, SelectValueType, RightMenu } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-mind-map`;

type ValueType = SelectValueType;

interface MindMapDemoProps { }
interface MindMapDemoState {
  expendLevel: ValueType;
}
const options = [
  { id: '0', content: '全部展开' },
  { id: '1', content: '展开到第一层级' },
  { id: '2', content: '展开到第二层级' },
  { id: '3', content: '展开到第三层级' },
  { id: '4', content: '展开到第四层级' },
  { id: '5', content: '展开到第五层级' },
  { id: '6', content: '展开到第六层级' },
];

const mindOptions = {
  editable: false,
  theme: "asbestos",
  mode: 'full',           // 显示模式
  support_html: true,    // 是否支持节点里的HTML元素
  view: {
    engine: 'svg',   // 思维导图各节点之间线条的绘制引擎  canvas  svg
    hmargin: 100,        // 思维导图距容器外框的最小水平距离
    vmargin: 50,         // 思维导图距容器外框的最小垂直距离
    line_width: 1,       // 思维导图线条的粗细
    line_color: '#5d9cec'   // 思维导图线条的颜色
  },
}

class MindMapDemo extends Component<MindMapDemoProps, MindMapDemoState>{
  jmInstance: any = null;
  rightMenuRef: any;
  constructor(props: MindMapDemoProps) {
    super(props);
    this.state = {
      expendLevel: ["0"],
    }
  }

  componentDidMount() {
    let root = this.jmInstance?.get_root();
    console.log(root)
  }
  getMindData = () => {

    const mindData = [
      { "id": "root", "isroot": true, "topic": "jsMind" },

      { "id": "easy", "parentid": "root", "topic": "Easy", "direction": "left" },
      { "id": "easy1", "parentid": "easy", "topic": "Easy to show" },
      { "id": "easy2", "parentid": "easy", "topic": "Easy to edit" },
      { "id": "easy3", "parentid": "easy", "topic": "Easy to store" },
      { "id": "easy4", "parentid": "easy", "topic": "Easy to embed" },

      { "id": "open", "parentid": "root", "topic": "Open Source", "expanded": false, "direction": "right" },
      { "id": "open1", "parentid": "open", "topic": "on GitHub" },
      { "id": "open2", "parentid": "open", "topic": "BSD License" },

      { "id": "powerful", "parentid": "root", "topic": "Powerful", "direction": "right" },
      { "id": "powerful1", "parentid": "powerful", "topic": "Base on Javascript" },
      { "id": "powerful2", "parentid": "powerful", "topic": "Base on HTML5" },
      { "id": "powerful3", "parentid": "powerful", "topic": "Depends on you" },
    ];

    return {
      meta: {
        name: "demo",
      },
      format: 'node_array' as MindFormatType,
      data: mindData.map(m => ({ ...m }))
    }

  }

  getInstance = (jm: any) => {
    this.jmInstance = jm;
    this.jmInstance.select_node = (id: any) => {
      console.log(111, id)
    }
  }

  handleChange = (v: ValueType) => {
    this.setState({ expendLevel: v })
    const key = v;
    if (key === "0") {
      this.jmInstance.expand_all();
    } else {
      this.jmInstance.expand_to_depth(key);
    }
  };

  impImage = () => {
    // console.log(this.jmInstance.mind.nodes)
    // this.jmInstance.mind.nodes.root.topic = "lhfjdashfjfh"
    this.jmInstance.screenshot.shootDownload();
  }

  render() {
    const { expendLevel } = this.state;
    return (
      <div >
        <Select
          style={{ width: 200 }}
          data={options}
          value={expendLevel}
          onChange={this.handleChange}
        />
        <Button type="primary" onClick={this.impImage}>导出图片</Button>
        <div className={prefixCls}>
          <MindMap
           
            datas={this.getMindData()}
            getInstance={this.getInstance}
            options={mindOptions}
            draggable
          />
        </div>
      </div>
    );
  }
}

export default MindMapDemo;
```

### 节点复写右键菜单

配合右键菜单使用（复写根节点右键菜单）

```jsx
import React, { Component, } from 'react';
import { MindMap, constants, MindFormatType, Select, Button, SelectValueType, RightMenu } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-mind-map`;

type ValueType = SelectValueType;

interface MindMapDemoProps { }
interface MindMapDemoState {
  expendLevel: ValueType;
  rightMenuData: any;
  enable: boolean;
}
const options = [
  { id: '0', content: '全部展开' },
  { id: '1', content: '展开到第一层级' },
  { id: '2', content: '展开到第二层级' },
  { id: '3', content: '展开到第三层级' },
  { id: '4', content: '展开到第四层级' },
  { id: '5', content: '展开到第五层级' },
  { id: '6', content: '展开到第六层级' },
];

const mindOptions = {
  editable: false,
  theme: "asbestos",
  mode: 'full',           // 显示模式
  support_html: true,    // 是否支持节点里的HTML元素
  view: {
    engine: 'svg',   // 思维导图各节点之间线条的绘制引擎  canvas  svg
    hmargin: 100,        // 思维导图距容器外框的最小水平距离
    vmargin: 50,         // 思维导图距容器外框的最小垂直距离
    line_width: 1,       // 思维导图线条的粗细
    line_color: '#5d9cec'   // 思维导图线条的颜色
  },
}

class MindMapDemo extends Component<MindMapDemoProps, MindMapDemoState>{
  jmInstance: any = null;
  rightMenuRef: any;
  constructor(props: MindMapDemoProps) {
    super(props);
    this.state = {
      expendLevel: ["0"],
      enable: false,
      rightMenuData: [
        {
          id: 'tab1', content: '标签1标签1标签1标签1标签1标签1标签1',
          // icon: 'Icon-Left-fold-up',
        },
        {
          id: 'tab2', content: '标签2',
          // icon: 'Icon-Left-fold-up',
        },
        {
          id: 'tab3', content: '标签3',
          // icon: 'Icon-Left-fold-up',
        },
      ]
    }
  }

  componentDidMount() {
    let root = this.jmInstance?.get_root();
    console.log(root)
  }
  getMindData = () => {

    const mindData = [
      { "id": "root", "isroot": true, "topic": "jsMind" },

      { "id": "easy", "parentid": "root", "topic": "Easy", "direction": "left" },
      { "id": "easy1", "parentid": "easy", "topic": "Easy to show" },
      { "id": "easy2", "parentid": "easy", "topic": "Easy to edit" },
      { "id": "easy3", "parentid": "easy", "topic": "Easy to store" },
      { "id": "easy4", "parentid": "easy", "topic": "Easy to embed" },

      { "id": "open", "parentid": "root", "topic": "Open Source", "expanded": false, "direction": "right" },
      { "id": "open1", "parentid": "open", "topic": "on GitHub" },
      { "id": "open2", "parentid": "open", "topic": "BSD License" },

      { "id": "powerful", "parentid": "root", "topic": "Powerful", "direction": "right" },
      { "id": "powerful1", "parentid": "powerful", "topic": "Base on Javascript" },
      { "id": "powerful2", "parentid": "powerful", "topic": "Base on HTML5" },
      { "id": "powerful3", "parentid": "powerful", "topic": "Depends on you" },
    ];

    return {
      meta: {
        name: "demo",
      },
      format: 'node_array' as MindFormatType,
      data: mindData.map(m => ({ ...m }))
    }

  }

  getInstance = (jm: any) => {
    this.jmInstance = jm;
    this.jmInstance.select_node = (id: any) => {
      console.log(111, id)
      if (id === 'root') {
        this.setState({
          enable: true,
          rightMenuData: [
            {
              id: 'tab1', content: '更激动',
              // icon: 'Icon-Left-fold-up',
            },
            {
              id: 'tab2', content: '标签2',
              // icon: 'Icon-Left-fold-up',
            },
            {
              id: 'tab3', content: '标签3',
              // icon: 'Icon-Left-fold-up',
            },
          ]
        })
      }
    }
  }

  handleChange = (v: ValueType) => {
    this.setState({ expendLevel: v })
    const key = v;
    if (key === "0") {
      this.jmInstance.expand_all();
    } else {
      this.jmInstance.expand_to_depth(key);
    }
  };

  impImage = () => {
    // console.log(this.jmInstance.mind.nodes)
    // this.jmInstance.mind.nodes.root.topic = "lhfjdashfjfh"
    this.jmInstance.screenshot.shootDownload();
  }

  onClick = () => {
    this.setState({ enable: false })
  }

  onChangeVisible = (visible: boolean) => {
    if (!visible) this.setState({ enable: false })
    console.log('visible', visible)
  }

  render() {
    const { expendLevel, rightMenuData, enable } = this.state;
    return (
      <div >
        <Select
          style={{ width: 200 }}
          data={options}
          value={expendLevel}
          onChange={this.handleChange}
        />
        <Button type="primary" onClick={this.impImage}>导出图片</Button>
        <div className={prefixCls}>
          <RightMenu
            enable={enable}
            data={rightMenuData}
            onChangeVisible={this.onChangeVisible}
            ref={this.rightMenuRef}
            style={{ width: '100%', height: '100%' }}
          >
            <MindMap
             
              datas={this.getMindData()}
              getInstance={this.getInstance}
              options={mindOptions}
              draggable
            />
          </RightMenu>
        </div>
      </div>
    );
  }
}

export default MindMapDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| datas | 数据 | Object | 是 | { meta:{name:"demo",},format:"node_array",data: []}, |
| draggable | 是否拖拽 | boolean | No | false |
| getInstance | 实例回调函数 | Function | No | 无 |
| options | options 配置 | object | No | container 属性不可更改，内置属性 |
| className | 外层 div 样式 | object | No | 无 |
| style | 自定义样式 | object | No | 无 |
> API 地址：

[点击查看 jsMind 官方网址](http://hizzgdev.github.io/jsmind/developer.html)

[点击查看 jsMind 官方中文文档](https://github.com/hizzgdev/jsmind/blob/master/docs/zh/index.md)
