mind-elixir 0.19.1 → 0.19.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -21
- package/dist/MindElixir.js +1 -55
- package/dist/MindElixirLite.js +1 -35
- package/dist/example1.js +1 -1
- package/dist/example2.js +1 -1
- package/dist/painter.js +1 -16
- package/package.json +17 -17
- package/readme.cn.md +99 -99
- package/readme.md +209 -209
- package/dist/test.html +0 -342
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mind-elixir",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.4",
|
|
4
4
|
"description": "Mind elixir is a free open source mind map core.",
|
|
5
5
|
"main": "dist/MindElixir.js",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"start": "webpack-dev-server --mode development --env
|
|
8
|
-
"startd": "webpack-dev-server --mode development --env
|
|
7
|
+
"start": "webpack-dev-server --mode development --env dist=0",
|
|
8
|
+
"startd": "webpack-dev-server --mode development --env dist=1",
|
|
9
9
|
"test": "jest --runInBand",
|
|
10
10
|
"build": "webpack --mode production",
|
|
11
11
|
"doc": "./node_modules/.bin/jsdoc src/ -R readme.md -c conf.json",
|
|
@@ -33,27 +33,27 @@
|
|
|
33
33
|
"babel-loader": "^8.0.6",
|
|
34
34
|
"better-docs": "^2.3.2",
|
|
35
35
|
"canvg": "^3.0.6",
|
|
36
|
-
"css-loader": "^
|
|
36
|
+
"css-loader": "^6.7.1",
|
|
37
37
|
"docdash": "^1.1.1",
|
|
38
38
|
"eslint": "^8.0.0",
|
|
39
|
-
"file-loader": "^
|
|
39
|
+
"file-loader": "^6.2.0",
|
|
40
40
|
"html-webpack-plugin": "^5.3.2",
|
|
41
|
-
"jest": "^
|
|
41
|
+
"jest": "^27.5.1",
|
|
42
42
|
"jsdoc": "^3.6.3",
|
|
43
|
-
"jsdoc-to-markdown": "^
|
|
44
|
-
"less": "^
|
|
45
|
-
"less-loader": "^
|
|
46
|
-
"puppeteer": "^5.
|
|
43
|
+
"jsdoc-to-markdown": "^7.1.1",
|
|
44
|
+
"less": "^4.1.2",
|
|
45
|
+
"less-loader": "^10.2.0",
|
|
46
|
+
"puppeteer": "^13.5.1",
|
|
47
47
|
"puppeteer-to-istanbul": "^1.4.0",
|
|
48
48
|
"regenerator-runtime": "^0.13.7",
|
|
49
|
-
"style-loader": "^
|
|
49
|
+
"style-loader": "^3.3.1",
|
|
50
|
+
"terser-webpack-plugin": "^5.3.1",
|
|
50
51
|
"ts-loader": "^9.2.6",
|
|
51
52
|
"typescript": "^4.4.3",
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"webpack": "5.
|
|
55
|
-
"webpack-
|
|
56
|
-
"webpack-
|
|
57
|
-
"webpack-dev-server": "^3.5.1"
|
|
53
|
+
"url-loader": "^4.1.1",
|
|
54
|
+
"webpack": "5.70.0",
|
|
55
|
+
"webpack-bundle-analyzer": "^4.5.0",
|
|
56
|
+
"webpack-cli": "^4.9.2",
|
|
57
|
+
"webpack-dev-server": "^4.7.4"
|
|
58
58
|
}
|
|
59
59
|
}
|
package/readme.cn.md
CHANGED
|
@@ -1,99 +1,99 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<p>
|
|
4
|
-
<a href="https://www.npmjs.com/package/mind-elixir"><img src="https://img.shields.io/npm/v/mind-elixir" alt="version"></a>
|
|
5
|
-
<img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
|
6
|
-
</p>
|
|
7
|
-
|
|
8
|
-
Mind elixir 是一个免费开源的思维导图内核
|
|
9
|
-
|
|
10
|
-
## 立即试用
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
https://mindelixir.ink/#/
|
|
15
|
-
|
|
16
|
-
## 在项目中使用
|
|
17
|
-
|
|
18
|
-
### 安装
|
|
19
|
-
|
|
20
|
-
#### NPM
|
|
21
|
-
|
|
22
|
-
```bash
|
|
23
|
-
npm i mind-elixir -S
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
```javascript
|
|
27
|
-
import MindElixir, { E } from 'mind-elixir'
|
|
28
|
-
```
|
|
29
|
-
|
|
30
|
-
#### script 标签引入
|
|
31
|
-
|
|
32
|
-
```html
|
|
33
|
-
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
|
34
|
-
```
|
|
35
|
-
|
|
36
|
-
### HTML 结构
|
|
37
|
-
|
|
38
|
-
```html
|
|
39
|
-
<div class="outer">
|
|
40
|
-
<div id="map"></div>
|
|
41
|
-
</div>
|
|
42
|
-
<style>
|
|
43
|
-
#map {
|
|
44
|
-
height: 500px;
|
|
45
|
-
width: 100%;
|
|
46
|
-
}
|
|
47
|
-
</style>
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
### 初始化
|
|
51
|
-
|
|
52
|
-
```javascript
|
|
53
|
-
let mind = new MindElixir({
|
|
54
|
-
el: '#map',
|
|
55
|
-
direction: MindElixir.LEFT,
|
|
56
|
-
// 创建新数据
|
|
57
|
-
data: MindElixir.new('new topic'),
|
|
58
|
-
// 也使用 getDataAll 得到的数据
|
|
59
|
-
data: {...},
|
|
60
|
-
draggable: true, // 启用拖动 default true
|
|
61
|
-
contextMenu: true, // 启用右键菜单 default true
|
|
62
|
-
toolBar: true, // 启用工具栏 default true
|
|
63
|
-
nodeMenu: true, // 启用节点菜单 default true
|
|
64
|
-
keypress: true, // 启用快捷键 default true
|
|
65
|
-
})
|
|
66
|
-
mind.init()
|
|
67
|
-
|
|
68
|
-
// get a node
|
|
69
|
-
E('node-id')
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### Data Export
|
|
73
|
-
|
|
74
|
-
```javascript
|
|
75
|
-
mind.getAllData()
|
|
76
|
-
// see src/example.js
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
## 使用提示
|
|
80
|
-
|
|
81
|
-
### direction 选项
|
|
82
|
-
|
|
83
|
-
direction 选项可选 `MindElixir.LEFT`、`MindElixir.RIGHT` 和 `MindElixir.SIDE`。
|
|
84
|
-
|
|
85
|
-
### HTML 结构
|
|
86
|
-
|
|
87
|
-
挂载的目标需要定宽高，可以是百分百；外层元素建议设置 `position: relative;`，否则菜单位置以视窗为标准分布。
|
|
88
|
-
|
|
89
|
-
### E 函数
|
|
90
|
-
|
|
91
|
-
在使用节点操作方法时需要传入的参数可以借助 `E` 函数获得。
|
|
92
|
-
|
|
93
|
-
```javascript
|
|
94
|
-
mind.insertSibling(E('bd4313fbac40284b'))
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
## 文档
|
|
98
|
-
|
|
99
|
-
https://inspiring-golick-3c01b9.netlify.com/
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<p>
|
|
4
|
+
<a href="https://www.npmjs.com/package/mind-elixir"><img src="https://img.shields.io/npm/v/mind-elixir" alt="version"></a>
|
|
5
|
+
<img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
Mind elixir 是一个免费开源的思维导图内核
|
|
9
|
+
|
|
10
|
+
## 立即试用
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
https://mindelixir.ink/#/
|
|
15
|
+
|
|
16
|
+
## 在项目中使用
|
|
17
|
+
|
|
18
|
+
### 安装
|
|
19
|
+
|
|
20
|
+
#### NPM
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm i mind-elixir -S
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
import MindElixir, { E } from 'mind-elixir'
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
#### script 标签引入
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### HTML 结构
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<div class="outer">
|
|
40
|
+
<div id="map"></div>
|
|
41
|
+
</div>
|
|
42
|
+
<style>
|
|
43
|
+
#map {
|
|
44
|
+
height: 500px;
|
|
45
|
+
width: 100%;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 初始化
|
|
51
|
+
|
|
52
|
+
```javascript
|
|
53
|
+
let mind = new MindElixir({
|
|
54
|
+
el: '#map',
|
|
55
|
+
direction: MindElixir.LEFT,
|
|
56
|
+
// 创建新数据
|
|
57
|
+
data: MindElixir.new('new topic'),
|
|
58
|
+
// 也使用 getDataAll 得到的数据
|
|
59
|
+
data: {...},
|
|
60
|
+
draggable: true, // 启用拖动 default true
|
|
61
|
+
contextMenu: true, // 启用右键菜单 default true
|
|
62
|
+
toolBar: true, // 启用工具栏 default true
|
|
63
|
+
nodeMenu: true, // 启用节点菜单 default true
|
|
64
|
+
keypress: true, // 启用快捷键 default true
|
|
65
|
+
})
|
|
66
|
+
mind.init()
|
|
67
|
+
|
|
68
|
+
// get a node
|
|
69
|
+
E('node-id')
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Data Export
|
|
73
|
+
|
|
74
|
+
```javascript
|
|
75
|
+
mind.getAllData()
|
|
76
|
+
// see src/example.js
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## 使用提示
|
|
80
|
+
|
|
81
|
+
### direction 选项
|
|
82
|
+
|
|
83
|
+
direction 选项可选 `MindElixir.LEFT`、`MindElixir.RIGHT` 和 `MindElixir.SIDE`。
|
|
84
|
+
|
|
85
|
+
### HTML 结构
|
|
86
|
+
|
|
87
|
+
挂载的目标需要定宽高，可以是百分百；外层元素建议设置 `position: relative;`，否则菜单位置以视窗为标准分布。
|
|
88
|
+
|
|
89
|
+
### E 函数
|
|
90
|
+
|
|
91
|
+
在使用节点操作方法时需要传入的参数可以借助 `E` 函数获得。
|
|
92
|
+
|
|
93
|
+
```javascript
|
|
94
|
+
mind.insertSibling(E('bd4313fbac40284b'))
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## 文档
|
|
98
|
+
|
|
99
|
+
https://inspiring-golick-3c01b9.netlify.com/
|
package/readme.md
CHANGED
|
@@ -1,209 +1,209 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<p>
|
|
4
|
-
<a href="https://www.npmjs.com/package/mind-elixir">
|
|
5
|
-
<img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
|
|
6
|
-
</a>
|
|
7
|
-
<img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
|
8
|
-
<a href="https://app.codacy.com/gh/ssshooter/mind-elixir-core?utm_source=github.com&utm_medium=referral&utm_content=ssshooter/mind-elixir-core&utm_campaign=Badge_Grade_Settings">
|
|
9
|
-
<img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
|
|
10
|
-
</a>
|
|
11
|
-
<a href="https://bundlephobia.com/result?p=mind-elixir">
|
|
12
|
-
<img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
|
|
13
|
-
</a>
|
|
14
|
-
<a href="https://packagephobia.com/result?p=mind-elixir">
|
|
15
|
-
<img src="https://packagephobia.com/badge?p=mind-elixir" alt="dependency-count">
|
|
16
|
-
</a>
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
Mind elixir is a free open source mind map core.
|
|
20
|
-
|
|
21
|
-
[中文](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
|
|
22
|
-
|
|
23
|
-
## Use now
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
https://mindelixir.ink/#/
|
|
28
|
-
|
|
29
|
-
### Playground
|
|
30
|
-
|
|
31
|
-
https://codepen.io/ssshooter/pen/GVQRYK
|
|
32
|
-
|
|
33
|
-
with React https://codesandbox.io/s/mind-elixir-react-9sisb
|
|
34
|
-
|
|
35
|
-
with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl
|
|
36
|
-
|
|
37
|
-
## Use in your project
|
|
38
|
-
|
|
39
|
-
### Install
|
|
40
|
-
|
|
41
|
-
#### NPM
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
npm i mind-elixir -S
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
```javascript
|
|
48
|
-
import MindElixir, { E } from 'mind-elixir'
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
#### Script tag
|
|
52
|
-
|
|
53
|
-
```html
|
|
54
|
-
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
### HTML structure
|
|
58
|
-
|
|
59
|
-
```html
|
|
60
|
-
<div id="map"></div>
|
|
61
|
-
<style>
|
|
62
|
-
#map {
|
|
63
|
-
height: 500px;
|
|
64
|
-
width: 100%;
|
|
65
|
-
}
|
|
66
|
-
</style>
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
### Init
|
|
70
|
-
|
|
71
|
-
```javascript
|
|
72
|
-
import MindElixir, { E } from 'mind-elixir'
|
|
73
|
-
import { exportSvg, exportPng } from '../dist/painter'
|
|
74
|
-
import example from '../dist/example1'
|
|
75
|
-
|
|
76
|
-
let options = {
|
|
77
|
-
el: '#map',
|
|
78
|
-
direction: MindElixir.LEFT,
|
|
79
|
-
// create new map data
|
|
80
|
-
data: MindElixir.new('new topic') or example,
|
|
81
|
-
// the data return from `.getAllData()`
|
|
82
|
-
draggable: true, // default true
|
|
83
|
-
contextMenu: true, // default true
|
|
84
|
-
toolBar: true, // default true
|
|
85
|
-
nodeMenu: true, // default true
|
|
86
|
-
keypress: true, // default true
|
|
87
|
-
locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
|
|
88
|
-
overflowHidden: false, // default false
|
|
89
|
-
primaryLinkStyle: 2, // [1,2] default 1
|
|
90
|
-
primaryNodeVerticalGap: 15, // default 25
|
|
91
|
-
primaryNodeHorizontalGap: 15, // default 65
|
|
92
|
-
contextMenuOption: {
|
|
93
|
-
focus: true,
|
|
94
|
-
link: true,
|
|
95
|
-
extend: [
|
|
96
|
-
{
|
|
97
|
-
name: 'Node edit',
|
|
98
|
-
onclick: () => {
|
|
99
|
-
alert('extend menu')
|
|
100
|
-
},
|
|
101
|
-
},
|
|
102
|
-
],
|
|
103
|
-
},
|
|
104
|
-
allowUndo: false,
|
|
105
|
-
before: {
|
|
106
|
-
insertSibling(el, obj) {
|
|
107
|
-
return true
|
|
108
|
-
},
|
|
109
|
-
async addChild(el, obj) {
|
|
110
|
-
await sleep()
|
|
111
|
-
return true
|
|
112
|
-
},
|
|
113
|
-
},
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
let mind = new MindElixir(options)
|
|
117
|
-
mind.init()
|
|
118
|
-
|
|
119
|
-
// get a node
|
|
120
|
-
E('node-id')
|
|
121
|
-
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Data Structure
|
|
125
|
-
|
|
126
|
-
```javascript
|
|
127
|
-
// whole node data structure up to now
|
|
128
|
-
{
|
|
129
|
-
topic: 'node topic',
|
|
130
|
-
id: 'bd1c24420cd2c2f5',
|
|
131
|
-
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
|
132
|
-
parent: null,
|
|
133
|
-
tags: ['Tag'],
|
|
134
|
-
icons: ['😀'],
|
|
135
|
-
hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
|
|
136
|
-
}
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
### Event Handling
|
|
140
|
-
|
|
141
|
-
```javascript
|
|
142
|
-
mind.bus.addListener('operation', operation => {
|
|
143
|
-
console.log(operation)
|
|
144
|
-
// return {
|
|
145
|
-
// name: action name,
|
|
146
|
-
// obj: target object
|
|
147
|
-
// }
|
|
148
|
-
|
|
149
|
-
// name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
|
150
|
-
// obj: target
|
|
151
|
-
|
|
152
|
-
// name: moveNode
|
|
153
|
-
// obj: {from:target1,to:target2}
|
|
154
|
-
})
|
|
155
|
-
|
|
156
|
-
mind.bus.addListener('selectNode', node => {
|
|
157
|
-
console.log(node)
|
|
158
|
-
})
|
|
159
|
-
|
|
160
|
-
mind.bus.addListener('expandNode', node => {
|
|
161
|
-
console.log('expandNode: ', node)
|
|
162
|
-
})
|
|
163
|
-
```
|
|
164
|
-
|
|
165
|
-
### Data Export
|
|
166
|
-
|
|
167
|
-
```javascript
|
|
168
|
-
mind.getAllData() // javascript object, see src/example.js
|
|
169
|
-
mind.getAllDataString() // stringify object
|
|
170
|
-
mind.getAllDataMd() // markdown
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Export as image
|
|
174
|
-
|
|
175
|
-
**WIP**
|
|
176
|
-
|
|
177
|
-
```javascript
|
|
178
|
-
import painter from 'mind-elixir/dist/painter'
|
|
179
|
-
painter.exportSvg()
|
|
180
|
-
painter.exportPng()
|
|
181
|
-
```
|
|
182
|
-
|
|
183
|
-
### Operation Guards
|
|
184
|
-
|
|
185
|
-
```javascript
|
|
186
|
-
let mind = new MindElixir({
|
|
187
|
-
...
|
|
188
|
-
before: {
|
|
189
|
-
insertSibling(el, obj) {
|
|
190
|
-
console.log(el, obj)
|
|
191
|
-
if (this.currentNode.nodeObj.parent.root) {
|
|
192
|
-
return false
|
|
193
|
-
}
|
|
194
|
-
return true
|
|
195
|
-
},
|
|
196
|
-
async addChild(el, obj) {
|
|
197
|
-
await sleep()
|
|
198
|
-
if (this.currentNode.nodeObj.parent.root) {
|
|
199
|
-
return false
|
|
200
|
-
}
|
|
201
|
-
return true
|
|
202
|
-
},
|
|
203
|
-
},
|
|
204
|
-
})
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
## Doc
|
|
208
|
-
|
|
209
|
-
https://doc.mindelixir.ink/
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<p>
|
|
4
|
+
<a href="https://www.npmjs.com/package/mind-elixir">
|
|
5
|
+
<img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
|
|
6
|
+
</a>
|
|
7
|
+
<img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
|
8
|
+
<a href="https://app.codacy.com/gh/ssshooter/mind-elixir-core?utm_source=github.com&utm_medium=referral&utm_content=ssshooter/mind-elixir-core&utm_campaign=Badge_Grade_Settings">
|
|
9
|
+
<img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
|
|
10
|
+
</a>
|
|
11
|
+
<a href="https://bundlephobia.com/result?p=mind-elixir">
|
|
12
|
+
<img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
|
|
13
|
+
</a>
|
|
14
|
+
<a href="https://packagephobia.com/result?p=mind-elixir">
|
|
15
|
+
<img src="https://packagephobia.com/badge?p=mind-elixir" alt="dependency-count">
|
|
16
|
+
</a>
|
|
17
|
+
</p>
|
|
18
|
+
|
|
19
|
+
Mind elixir is a free open source mind map core.
|
|
20
|
+
|
|
21
|
+
[中文](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
|
|
22
|
+
|
|
23
|
+
## Use now
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
https://mindelixir.ink/#/
|
|
28
|
+
|
|
29
|
+
### Playground
|
|
30
|
+
|
|
31
|
+
https://codepen.io/ssshooter/pen/GVQRYK
|
|
32
|
+
|
|
33
|
+
with React https://codesandbox.io/s/mind-elixir-react-9sisb
|
|
34
|
+
|
|
35
|
+
with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl
|
|
36
|
+
|
|
37
|
+
## Use in your project
|
|
38
|
+
|
|
39
|
+
### Install
|
|
40
|
+
|
|
41
|
+
#### NPM
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm i mind-elixir -S
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
```javascript
|
|
48
|
+
import MindElixir, { E } from 'mind-elixir'
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
#### Script tag
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### HTML structure
|
|
58
|
+
|
|
59
|
+
```html
|
|
60
|
+
<div id="map"></div>
|
|
61
|
+
<style>
|
|
62
|
+
#map {
|
|
63
|
+
height: 500px;
|
|
64
|
+
width: 100%;
|
|
65
|
+
}
|
|
66
|
+
</style>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Init
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
import MindElixir, { E } from 'mind-elixir'
|
|
73
|
+
import { exportSvg, exportPng } from '../dist/painter'
|
|
74
|
+
import example from '../dist/example1'
|
|
75
|
+
|
|
76
|
+
let options = {
|
|
77
|
+
el: '#map',
|
|
78
|
+
direction: MindElixir.LEFT,
|
|
79
|
+
// create new map data
|
|
80
|
+
data: MindElixir.new('new topic') or example,
|
|
81
|
+
// the data return from `.getAllData()`
|
|
82
|
+
draggable: true, // default true
|
|
83
|
+
contextMenu: true, // default true
|
|
84
|
+
toolBar: true, // default true
|
|
85
|
+
nodeMenu: true, // default true
|
|
86
|
+
keypress: true, // default true
|
|
87
|
+
locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
|
|
88
|
+
overflowHidden: false, // default false
|
|
89
|
+
primaryLinkStyle: 2, // [1,2] default 1
|
|
90
|
+
primaryNodeVerticalGap: 15, // default 25
|
|
91
|
+
primaryNodeHorizontalGap: 15, // default 65
|
|
92
|
+
contextMenuOption: {
|
|
93
|
+
focus: true,
|
|
94
|
+
link: true,
|
|
95
|
+
extend: [
|
|
96
|
+
{
|
|
97
|
+
name: 'Node edit',
|
|
98
|
+
onclick: () => {
|
|
99
|
+
alert('extend menu')
|
|
100
|
+
},
|
|
101
|
+
},
|
|
102
|
+
],
|
|
103
|
+
},
|
|
104
|
+
allowUndo: false,
|
|
105
|
+
before: {
|
|
106
|
+
insertSibling(el, obj) {
|
|
107
|
+
return true
|
|
108
|
+
},
|
|
109
|
+
async addChild(el, obj) {
|
|
110
|
+
await sleep()
|
|
111
|
+
return true
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
let mind = new MindElixir(options)
|
|
117
|
+
mind.init()
|
|
118
|
+
|
|
119
|
+
// get a node
|
|
120
|
+
E('node-id')
|
|
121
|
+
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Data Structure
|
|
125
|
+
|
|
126
|
+
```javascript
|
|
127
|
+
// whole node data structure up to now
|
|
128
|
+
{
|
|
129
|
+
topic: 'node topic',
|
|
130
|
+
id: 'bd1c24420cd2c2f5',
|
|
131
|
+
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
|
132
|
+
parent: null,
|
|
133
|
+
tags: ['Tag'],
|
|
134
|
+
icons: ['😀'],
|
|
135
|
+
hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Event Handling
|
|
140
|
+
|
|
141
|
+
```javascript
|
|
142
|
+
mind.bus.addListener('operation', operation => {
|
|
143
|
+
console.log(operation)
|
|
144
|
+
// return {
|
|
145
|
+
// name: action name,
|
|
146
|
+
// obj: target object
|
|
147
|
+
// }
|
|
148
|
+
|
|
149
|
+
// name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
|
150
|
+
// obj: target
|
|
151
|
+
|
|
152
|
+
// name: moveNode
|
|
153
|
+
// obj: {from:target1,to:target2}
|
|
154
|
+
})
|
|
155
|
+
|
|
156
|
+
mind.bus.addListener('selectNode', node => {
|
|
157
|
+
console.log(node)
|
|
158
|
+
})
|
|
159
|
+
|
|
160
|
+
mind.bus.addListener('expandNode', node => {
|
|
161
|
+
console.log('expandNode: ', node)
|
|
162
|
+
})
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### Data Export
|
|
166
|
+
|
|
167
|
+
```javascript
|
|
168
|
+
mind.getAllData() // javascript object, see src/example.js
|
|
169
|
+
mind.getAllDataString() // stringify object
|
|
170
|
+
mind.getAllDataMd() // markdown
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
### Export as image
|
|
174
|
+
|
|
175
|
+
**WIP**
|
|
176
|
+
|
|
177
|
+
```javascript
|
|
178
|
+
import painter from 'mind-elixir/dist/painter'
|
|
179
|
+
painter.exportSvg()
|
|
180
|
+
painter.exportPng()
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
### Operation Guards
|
|
184
|
+
|
|
185
|
+
```javascript
|
|
186
|
+
let mind = new MindElixir({
|
|
187
|
+
...
|
|
188
|
+
before: {
|
|
189
|
+
insertSibling(el, obj) {
|
|
190
|
+
console.log(el, obj)
|
|
191
|
+
if (this.currentNode.nodeObj.parent.root) {
|
|
192
|
+
return false
|
|
193
|
+
}
|
|
194
|
+
return true
|
|
195
|
+
},
|
|
196
|
+
async addChild(el, obj) {
|
|
197
|
+
await sleep()
|
|
198
|
+
if (this.currentNode.nodeObj.parent.root) {
|
|
199
|
+
return false
|
|
200
|
+
}
|
|
201
|
+
return true
|
|
202
|
+
},
|
|
203
|
+
},
|
|
204
|
+
})
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
## Doc
|
|
208
|
+
|
|
209
|
+
https://doc.mindelixir.ink/
|