1 | <p align="center">
|
2 | <a href="mind-elixir.com" target="_blank" rel="noopener noreferrer">
|
3 | <img width="150" src="https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png" alt="mindelixir logo2">
|
4 | </a>
|
5 | <h1 align="center">Mind Elixir</h1>
|
6 | </p>
|
7 |
|
8 | <p align="center">
|
9 | <a href="https://www.npmjs.com/package/mind-elixir">
|
10 | <img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
|
11 | </a>
|
12 | <a href="https://github.com/ssshooter/mind-elixir-core/blob/master/LICENSE">
|
13 | <img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
14 | </a>
|
15 | <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">
|
16 | <img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
|
17 | </a>
|
18 | <a href="https://bundlephobia.com/result?p=mind-elixir">
|
19 | <img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
|
20 | </a>
|
21 | <a href="https://packagephobia.com/result?p=mind-elixir">
|
22 | <img src="https://packagephobia.com/badge?p=mind-elixir" alt="package size">
|
23 | </a>
|
24 | </p>
|
25 |
|
26 | [中文 README](https://github.com/ssshooter/mind-elixir-core/blob/master/readme.cn.md)
|
27 |
|
28 | Mind elixir is a free open source mind map core.
|
29 |
|
30 | - Zero dependency
|
31 | - High performance
|
32 | - Lightweight
|
33 | - Framework agnostic
|
34 | - Pluginable
|
35 | - Build-in drag and drop / node edit plugin
|
36 | - Styling your node with CSS
|
37 |
|
38 | <details>
|
39 | <summary>Table of Contents</summary>
|
40 |
|
41 | - [Doc](#doc)
|
42 | - [Try now](#try-now)
|
43 | - [Playground](#playground)
|
44 | - [Vanilla JS](#vanilla-js)
|
45 | - [Use with React](#use-with-react)
|
46 | - [Use with Vue](#use-with-vue)
|
47 | - [Use with Vue3](#use-with-vue3)
|
48 | - [Usage](#usage)
|
49 | - [Install](#install)
|
50 | - [NPM](#npm)
|
51 | - [Script tag](#script-tag)
|
52 | - [HTML structure](#html-structure)
|
53 | - [Init](#init)
|
54 | - [Data Structure](#data-structure)
|
55 | - [Event Handling](#event-handling)
|
56 | - [Data Export And Import](#data-export-and-import)
|
57 | - [Operation Guards](#operation-guards)
|
58 | - [Theme](#theme)
|
59 | - [Not only core](#not-only-core)
|
60 | - [Development](#development)
|
61 |
|
62 | </details>
|
63 |
|
64 | ## Doc
|
65 |
|
66 | https://doc.mind-elixir.com/
|
67 |
|
68 | ## Try now
|
69 |
|
70 | ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot2.png)
|
71 |
|
72 | https://mind-elixir.com/
|
73 |
|
74 | ### Playground
|
75 |
|
76 | #### Vanilla JS
|
77 |
|
78 | https://codepen.io/ssshooter/pen/rNqGpwW
|
79 |
|
80 | #### Use with React
|
81 |
|
82 | https://codesandbox.io/s/mind-elixir-2-x-react-q9glxt
|
83 |
|
84 | #### Use with Vue
|
85 |
|
86 | https://codesandbox.io/s/mind-elixir-vue-nqjjl
|
87 |
|
88 | #### Use with Vue3
|
89 |
|
90 | https://codesandbox.io/s/mind-elixir-vue3-dtcq6u
|
91 |
|
92 | ## Usage
|
93 |
|
94 | ### Install
|
95 |
|
96 | #### NPM
|
97 |
|
98 | ```bash
|
99 | npm i mind-elixir -S
|
100 | ```
|
101 |
|
102 | ```javascript
|
103 | import MindElixir, { E } from 'mind-elixir'
|
104 | ```
|
105 |
|
106 | #### Script tag
|
107 |
|
108 | ```html
|
109 | <script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
|
110 | ```
|
111 |
|
112 | ### HTML structure
|
113 |
|
114 | ```html
|
115 | <div id="map"></div>
|
116 | <style>
|
117 | #map {
|
118 | height: 500px;
|
119 | width: 100%;
|
120 | }
|
121 | </style>
|
122 | ```
|
123 |
|
124 | ### Init
|
125 |
|
126 | **Breaking Change** since 1.0.0, `data` should be passed to `init()`, not `options`.
|
127 |
|
128 | ```javascript
|
129 | import MindElixir, { E } from 'mind-elixir'
|
130 | import example from 'mind-elixir/dist/example1'
|
131 |
|
132 | let options = {
|
133 | el: '#map', // or HTMLDivElement
|
134 | direction: MindElixir.LEFT,
|
135 | draggable: true, // default true
|
136 | contextMenu: true, // default true
|
137 | toolBar: true, // default true
|
138 | nodeMenu: true, // default true
|
139 | keypress: true, // default true
|
140 | locale: 'en', // [zh_CN,zh_TW,en,ja,pt,ru] waiting for PRs
|
141 | overflowHidden: false, // default false
|
142 | mainLinkStyle: 2, // [1,2] default 1
|
143 | contextMenuOption: {
|
144 | focus: true,
|
145 | link: true,
|
146 | extend: [
|
147 | {
|
148 | name: 'Node edit',
|
149 | onclick: () => {
|
150 | alert('extend menu')
|
151 | },
|
152 | },
|
153 | ],
|
154 | },
|
155 | before: {
|
156 | insertSibling(el, obj) {
|
157 | return true
|
158 | },
|
159 | async addChild(el, obj) {
|
160 | await sleep()
|
161 | return true
|
162 | },
|
163 | },
|
164 | }
|
165 |
|
166 | let mind = new MindElixir(options)
|
167 |
|
168 | mind.install(plugin) // install your plugin
|
169 |
|
170 | // create new map data
|
171 | const data = MindElixir.new('new topic')
|
172 | // or `example`
|
173 | // or the data return from `.getData()`
|
174 | mind.init(data)
|
175 |
|
176 | // get a node
|
177 | E('node-id')
|
178 | ```
|
179 |
|
180 | ### Data Structure
|
181 |
|
182 | ```javascript
|
183 | // whole node data structure up to now
|
184 | const nodeData = {
|
185 | topic: 'node topic',
|
186 | id: 'bd1c24420cd2c2f5',
|
187 | style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
188 | expanded: true,
|
189 | parent: null,
|
190 | tags: ['Tag'],
|
191 | icons: ['😀'],
|
192 | hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
|
193 | image: {
|
194 | url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
|
195 | // you need to query the height and width of the image and calculate the appropriate value to display the image
|
196 | height: 90, // required
|
197 | width: 90, // required
|
198 | },
|
199 | children: [
|
200 | {
|
201 | topic: 'child',
|
202 | id: 'xxxx',
|
203 | // ...
|
204 | },
|
205 | ],
|
206 | }
|
207 | ```
|
208 |
|
209 | ### Event Handling
|
210 |
|
211 | ```javascript
|
212 | mind.bus.addListener('operation', operation => {
|
213 | console.log(operation)
|
214 | // return {
|
215 | // name: action name,
|
216 | // obj: target object
|
217 | // }
|
218 |
|
219 | // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
220 | // obj: target
|
221 |
|
222 | // name: moveNode
|
223 | // obj: {from:target1,to:target2}
|
224 | })
|
225 |
|
226 | mind.bus.addListener('selectNode', node => {
|
227 | console.log(node)
|
228 | })
|
229 |
|
230 | mind.bus.addListener('expandNode', node => {
|
231 | console.log('expandNode: ', node)
|
232 | })
|
233 | ```
|
234 |
|
235 | ### Data Export And Import
|
236 |
|
237 | ```javascript
|
238 | // data export
|
239 | const data = mind.getData() // javascript object, see src/example.js
|
240 | mind.getDataString() // stringify object
|
241 | mind.getDataMd() // markdown
|
242 |
|
243 | // data import
|
244 | // initiate
|
245 | let mind = new MindElixir(options)
|
246 | mind.init(data)
|
247 | // data update
|
248 | mind.refresh(data)
|
249 | ```
|
250 |
|
251 | ### Operation Guards
|
252 |
|
253 | ```javascript
|
254 | let mind = new MindElixir({
|
255 | // ...
|
256 | before: {
|
257 | insertSibling(el, obj) {
|
258 | console.log(el, obj)
|
259 | if (this.currentNode.nodeObj.parent.root) {
|
260 | return false
|
261 | }
|
262 | return true
|
263 | },
|
264 | async addChild(el, obj) {
|
265 | await sleep()
|
266 | if (this.currentNode.nodeObj.parent.root) {
|
267 | return false
|
268 | }
|
269 | return true
|
270 | },
|
271 | },
|
272 | })
|
273 | ```
|
274 |
|
275 | ## Theme
|
276 |
|
277 | ```javascript
|
278 | const options = {
|
279 | // ...
|
280 | theme: {
|
281 | name: 'Dark',
|
282 | // main lines color palette
|
283 | palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
|
284 | // overwrite css variables
|
285 | cssVar: {
|
286 | '--main-color': '#ffffff',
|
287 | '--main-bgcolor': '#4c4f69',
|
288 | '--color': '#cccccc',
|
289 | '--bgcolor': '#252526',
|
290 | },
|
291 | // all variables see /src/index.less
|
292 | },
|
293 | // ...
|
294 | }
|
295 |
|
296 | // ...
|
297 |
|
298 | mind.changeTheme({
|
299 | name: 'Latte',
|
300 | palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
|
301 | cssVar: {
|
302 | '--main-color': '#444446',
|
303 | '--main-bgcolor': '#ffffff',
|
304 | '--color': '#777777',
|
305 | '--bgcolor': '#f6f6f6',
|
306 | },
|
307 | })
|
308 | ```
|
309 |
|
310 | Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme manually when the scheme changes.
|
311 |
|
312 | ## Not only core
|
313 |
|
314 | - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
|
315 | - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
|
316 | - [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
|
317 | - [@mind-elixir/export-image](https://github.com/ssshooter/export-image) (WIP🚧)
|
318 | - [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
|
319 |
|
320 | ## Development
|
321 |
|
322 | ```
|
323 | yarn
|
324 | npm start
|
325 | ```
|
326 |
|
327 | Test generated files with `dev.dist.ts`:
|
328 |
|
329 | ```
|
330 | npm run build
|
331 | npm link
|
332 | npm link mind-elixir
|
333 | npm run startd
|
334 | ```
|