Mind-elixir-yg NPM

Mind elixir 是一个免费开源的思维导图内核

立即试用

mindelixir

在项目中使用

安装

NPM

npm i mind-elixir -S

import MindElixir, { E } from 'mind-elixir'

script 标签引入

<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>

HTML 结构

<div class="outer">
  <div id="map"></div>
</div>
<style>
  #map {
    height: 500px;
    width: 100%;
  }
</style>

初始化

let mind = new MindElixir({
  el: '#map',
  direction: MindElixir.LEFT,
  // 创建新数据
  data: MindElixir.new('new topic'), 
  // 也使用 getDataAll 得到的数据
  data: {...},
  draggable: true, // 启用拖动 default true
  contextMenu: true, // 启用右键菜单 default true
  toolBar: true, // 启用工具栏 default true
  nodeMenu: true, // 启用节点菜单 default true
  keypress: true, // 启用快捷键 default true
})
mind.init()

// get a node
E('node-id')

Data Export

mind.getAllData()
// see src/example.js

使用提示

direction 选项

direction 选项可选 MindElixir.LEFT、MindElixir.RIGHT 和 MindElixir.SIDE。

HTML 结构

挂载的目标需要定宽高，可以是百分百；外层元素建议设置 position: relative;，否则菜单位置以视窗为标准分布。

E 函数

在使用节点操作方法时需要传入的参数可以借助 E 函数获得。

mind.insertSibling(E('bd4313fbac40284b'))

文档

https://inspiring-golick-3c01b9.netlify.com/

暴露的接口

initLeftOnChange, initRightOnChange, initSideOnChange, reduceXmind, addXmind, changeContainerPosition, updateNodeRemark

暴露接收的属性 dev.ts

callingAnExternalInterface, enableExternalInterface, --- true 后 callingAnExternalInterface 中的方法才得以生效 callingAnExternalInterface:{ changePosition : (x,y) => { console.log('向外调用的方法--坐标',x,y) mind2.changeContainerPosition(x,y) }, initLeftOnChangeOpen : () => { console.log('向外调用的方法--左转') mind2.initLeftOnChange() }, initRightOnChangeOpen : () => { console.log('向外调用的方法--右转') mind2.initRightOnChange() }, initSideOnChangeOpen : () => { console.log('向外调用的方法--分散') mind2.initSideOnChange() }, reduceXmindOpen : (data) => { console.log('向外调用的方法--缩小') mind2.reduceXmind(data) }, addXmindOpen : (data) => { console.log('向外调用的方法--放大') mind2.addXmind(data) }, },

属性说明

draggable: true, // 启用拖动 default true contextMenu: true, // 启用右键菜单 default true toolBar: true, // 启用工具栏 default true nodeMenu: true, // 启用节点菜单 default true keypress: true, // 启用快捷键 default true

属性 root:true (表示根节点，不允许删除和移动)

selectCaseList: // 自动化用例列表 (用于关联手工用例) showSelectCaseList: // 是否展示自动化用例列表