UNPKG

4.56 kBMarkdownView Raw
1![mindelixir logo](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo.png)
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
19Mind elixir 是一个无框架依赖的思维导图内核
20
21[English](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.md)
22
23## 立即尝试
24
25![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot.png)
26
27https://mind-elixir.com/#/
28
29### Playground
30
31https://codepen.io/ssshooter/pen/GVQRYK
32
33with React https://codesandbox.io/s/mind-elixir-react-9sisb
34
35with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl
36
37## 如何使用
38
39### 安装
40
41#### NPM
42
43```bash
44npm i mind-elixir -S
45```
46
47```javascript
48import MindElixir, { E } from 'mind-elixir'
49```
50
51#### Script 标签
52
53```html
54<script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
55```
56
57### HTML 结构
58
59```html
60<div id="map"></div>
61<style>
62 #map {
63 height: 500px;
64 width: 100%;
65 }
66</style>
67```
68
69### 初始化
70
71```javascript
72import MindElixir, { E } from 'mind-elixir'
73import { exportSvg, exportPng } from '../dist/painter'
74import example from '../dist/example1'
75
76let 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
116let mind = new MindElixir(options)
117mind.init()
118
119// get a node
120E('node-id')
121
122```
123
124### 数据结构
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### 事件处理
140
141```javascript
142mind.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
156mind.bus.addListener('selectNode', node => {
157 console.log(node)
158})
159
160mind.bus.addListener('expandNode', node => {
161 console.log('expandNode: ', node)
162})
163```
164
165### 数据导出
166
167```javascript
168mind.getAllData() // javascript object, see src/example.js
169mind.getAllDataString() // stringify object
170mind.getAllDataMd() // markdown
171```
172
173### 输出图片
174
175**WIP**
176
177```javascript
178import painter from 'mind-elixir/dist/painter'
179painter.exportSvg()
180painter.exportPng()
181```
182
183### 操作拦截
184
185```javascript
186let 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## 文档
208
209https://doc.mind-elixir.com/
210
211## 感谢
212
213[canvg](https://github.com/canvg/canvg)
\No newline at end of file