1 | ![mindelixir logo](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/logo.png)
|
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 | ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/screenshot.cn.png)
|
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/
|