!mindelixir logo

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

立即试用

!mindelixir

https://mindelixir.ink/#/

在项目中使用

$3

#### NPM

``bash
npm i mind-elixir -S
`

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

#### script 标签引入

`html

`

$3

`html




`

$3

`javascript
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')
`

$3

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

使用提示

$3

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

$3

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

$3

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

`javascript
mind.insertSibling(E('bd4313fbac40284b'))
``

文档

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

$3

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

$3

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: // 是否展示自动化用例列表

$3

先构建再推送 (把 dist中的例子文件去掉再推送)
npm run build || npm run-script build
yarn publish

$3

节点操作
dom.ts

字段：
caseRunStatus：用例状态
priority: 优先级
autoCaseId: 关联自动化用例的ID
autoCaseName: 关联自动化用例的Name
autoCaseVideo: 关联自动化视频
people: 执行人楼层

更新

1.1.17版本
autoCaseId: 关联自动化用例的ID [{id:1,name:"用例名称"}]
autoCaseName: 关联自动化用例的Name

默认数据入口是

src\dev.ts