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 |
|
19 | [中文 README](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
|
20 |
|
21 | Mind elixir is a free open source mind map core.
|
22 |
|
23 | - High performance
|
24 | - Small size
|
25 | - Framework agnostic
|
26 | - Pluginable
|
27 | - Build-in drag and drop / node edit plugin
|
28 |
|
29 | ## Try now
|
30 |
|
31 | ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot.png)
|
32 |
|
33 | https://mind-elixir.com/#/
|
34 |
|
35 | ### Playground
|
36 |
|
37 | https://codepen.io/ssshooter/pen/GVQRYK
|
38 |
|
39 | with React https://codesandbox.io/s/mind-elixir-react-9sisb
|
40 |
|
41 | with Vue https://codesandbox.io/s/mind-elixir-vue-nqjjl
|
42 |
|
43 | ## Usage
|
44 |
|
45 | ### Install
|
46 |
|
47 | #### NPM
|
48 |
|
49 | ```bash
|
50 | npm i mind-elixir -S
|
51 | ```
|
52 |
|
53 | ```javascript
|
54 | import MindElixir, { E } from 'mind-elixir'
|
55 | ```
|
56 |
|
57 | #### Script tag
|
58 |
|
59 | ```html
|
60 | <script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
61 | ```
|
62 |
|
63 | ### HTML structure
|
64 |
|
65 | ```html
|
66 | <div id="map"></div>
|
67 | <style>
|
68 | #map {
|
69 | height: 500px;
|
70 | width: 100%;
|
71 | }
|
72 | </style>
|
73 | ```
|
74 |
|
75 | ### Init
|
76 |
|
77 | **Breaking Change** since 1.0.0, `data` should be passed to `init()`, not `options`.
|
78 |
|
79 | ```javascript
|
80 | import MindElixir, { E } from 'mind-elixir'
|
81 | import { exportSvg, exportPng } from '../dist/painter'
|
82 | import example from '../dist/example1'
|
83 |
|
84 | let options = {
|
85 | el: '#map', // or HTMLDivElement
|
86 | direction: MindElixir.LEFT,
|
87 | draggable: true, // default true
|
88 | contextMenu: true, // default true
|
89 | toolBar: true, // default true
|
90 | nodeMenu: true, // default true
|
91 | keypress: true, // default true
|
92 | locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
|
93 | overflowHidden: false, // default false
|
94 | primaryLinkStyle: 2, // [1,2] default 1
|
95 | primaryNodeVerticalGap: 15, // default 25
|
96 | primaryNodeHorizontalGap: 15, // default 65
|
97 | contextMenuOption: {
|
98 | focus: true,
|
99 | link: true,
|
100 | extend: [
|
101 | {
|
102 | name: 'Node edit',
|
103 | onclick: () => {
|
104 | alert('extend menu')
|
105 | },
|
106 | },
|
107 | ],
|
108 | },
|
109 | allowUndo: false,
|
110 | before: {
|
111 | insertSibling(el, obj) {
|
112 | return true
|
113 | },
|
114 | async addChild(el, obj) {
|
115 | await sleep()
|
116 | return true
|
117 | },
|
118 | },
|
119 | }
|
120 |
|
121 | let mind = new MindElixir(options)
|
122 |
|
123 | mind.install(plugin) // install your plugin
|
124 |
|
125 | // create new map data
|
126 | const data = MindElixir.new('new topic')
|
127 | // or `example`
|
128 | // or the data return from `.getAllData()`
|
129 | mind.init(data)
|
130 |
|
131 | // get a node
|
132 | E('node-id')
|
133 | ```
|
134 |
|
135 | ### Data Structure
|
136 |
|
137 | ```javascript
|
138 | // whole node data structure up to now
|
139 | {
|
140 | topic: 'node topic',
|
141 | id: 'bd1c24420cd2c2f5',
|
142 | style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
143 | parent: null,
|
144 | tags: ['Tag'],
|
145 | icons: ['😀'],
|
146 | hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
|
147 | }
|
148 | ```
|
149 |
|
150 | ### Event Handling
|
151 |
|
152 | ```javascript
|
153 | mind.bus.addListener('operation', operation => {
|
154 | console.log(operation)
|
155 | // return {
|
156 | // name: action name,
|
157 | // obj: target object
|
158 | // }
|
159 |
|
160 | // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
161 | // obj: target
|
162 |
|
163 | // name: moveNode
|
164 | // obj: {from:target1,to:target2}
|
165 | })
|
166 |
|
167 | mind.bus.addListener('selectNode', node => {
|
168 | console.log(node)
|
169 | })
|
170 |
|
171 | mind.bus.addListener('expandNode', node => {
|
172 | console.log('expandNode: ', node)
|
173 | })
|
174 | ```
|
175 |
|
176 | ### Data Export
|
177 |
|
178 | ```javascript
|
179 | mind.getAllData() // javascript object, see src/example.js
|
180 | mind.getAllDataString() // stringify object
|
181 | mind.getAllDataMd() // markdown
|
182 | ```
|
183 |
|
184 | ### Operation Guards
|
185 |
|
186 | ```javascript
|
187 | let mind = new MindElixir({
|
188 | // ...
|
189 | before: {
|
190 | insertSibling(el, obj) {
|
191 | console.log(el, obj)
|
192 | if (this.currentNode.nodeObj.parent.root) {
|
193 | return false
|
194 | }
|
195 | return true
|
196 | },
|
197 | async addChild(el, obj) {
|
198 | await sleep()
|
199 | if (this.currentNode.nodeObj.parent.root) {
|
200 | return false
|
201 | }
|
202 | return true
|
203 | },
|
204 | },
|
205 | })
|
206 | ```
|
207 |
|
208 | ### Export as image
|
209 |
|
210 | **WIP**
|
211 |
|
212 | ```javascript
|
213 | import painter from 'mind-elixir/dist/painter'
|
214 | painter.exportSvg()
|
215 | painter.exportPng()
|
216 | ```
|
217 |
|
218 | ## Doc
|
219 |
|
220 | https://doc.mind-elixir.com/
|
221 |
|
222 | ## Thanks
|
223 |
|
224 | [canvg](https://github.com/canvg/canvg)
|