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">
|
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 | ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/screenshot.png)
|
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/regenerator-runtime"></script>
|
55 | <script src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/mind-elixir.js"></script>
|
56 | ```
|
57 |
|
58 | ### HTML structure
|
59 |
|
60 | ```html
|
61 | <div id="map"></div>
|
62 | <style>
|
63 | #map {
|
64 | height: 500px;
|
65 | width: 100%;
|
66 | }
|
67 | </style>
|
68 | ```
|
69 |
|
70 | ### Init
|
71 |
|
72 | ```javascript
|
73 | let options = {
|
74 | el: '#map',
|
75 | direction: MindElixir.LEFT,
|
76 | // create new map data
|
77 | data: MindElixir.new('new topic'),
|
78 | // the data return from `.getAllData()`
|
79 | data: {...},
|
80 | draggable: true, // default true
|
81 | contextMenu: true, // default true
|
82 | toolBar: true, // default true
|
83 | nodeMenu: true, // default true
|
84 | keypress: true, // default true
|
85 | locale: 'en', // [zh_CN,zh_TW,en,ja,pt] waiting for PRs
|
86 | overflowHidden: false, // default false
|
87 | primaryLinkStyle: 2, // [1,2] default 1
|
88 | primaryNodeVerticalGap: 15, // default 25
|
89 | primaryNodeHorizontalGap: 15, // default 65
|
90 | contextMenuOption: {
|
91 | focus: true,
|
92 | link: true,
|
93 | extend: [
|
94 | {
|
95 | name: 'Node edit',
|
96 | onclick: () => {
|
97 | alert('extend menu')
|
98 | },
|
99 | },
|
100 | ],
|
101 | },
|
102 | allowUndo: false,
|
103 | before: {
|
104 | insertSibling(el, obj) {
|
105 | return true
|
106 | },
|
107 | async addChild(el, obj) {
|
108 | await sleep()
|
109 | return true
|
110 | },
|
111 | },
|
112 | }
|
113 |
|
114 | let mind = new MindElixir(options)
|
115 | mind.init()
|
116 |
|
117 | // get a node
|
118 | E('node-id')
|
119 |
|
120 | ```
|
121 |
|
122 | ### Data Structure
|
123 |
|
124 | ```javascript
|
125 | // whole node data structure up to now
|
126 | {
|
127 | topic: 'node topic',
|
128 | id: 'bd1c24420cd2c2f5',
|
129 | style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
130 | parent: null,
|
131 | tags: ['Tag'],
|
132 | icons: ['😀'],
|
133 | }
|
134 | ```
|
135 |
|
136 | ### Event Handling
|
137 |
|
138 | ```javascript
|
139 | mind.bus.addListener('operation', operation => {
|
140 | console.log(operation)
|
141 | // return {
|
142 | // name: action name,
|
143 | // obj: target object
|
144 | // }
|
145 |
|
146 | // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
147 | // obj: target
|
148 |
|
149 | // name: moveNode
|
150 | // obj: {from:target1,to:target2}
|
151 | })
|
152 | mind.bus.addListener('selectNode', node => {
|
153 | console.log(node)
|
154 | })
|
155 | ```
|
156 |
|
157 | ### Data Export
|
158 |
|
159 | ```javascript
|
160 | mind.getAllData() // javascript object, see src/example.js
|
161 | mind.getAllDataString() // stringify object
|
162 | mind.getAllDataMd() // markdown
|
163 | ```
|
164 |
|
165 | ### Export as image
|
166 |
|
167 | ```javascript
|
168 | import painter from 'mind-elixir/dist/painter'
|
169 | painter.exportSvg()
|
170 | painter.exportPng()
|
171 | ```
|
172 |
|
173 | ### Operation Guards
|
174 |
|
175 | ```javascript
|
176 | let mind = new MindElixir({
|
177 | ...
|
178 | before: {
|
179 | insertSibling(el, obj) {
|
180 | console.log(el, obj)
|
181 | if (this.currentNode.nodeObj.parent.root) {
|
182 | return false
|
183 | }
|
184 | return true
|
185 | },
|
186 | async addChild(el, obj) {
|
187 | await sleep()
|
188 | if (this.currentNode.nodeObj.parent.root) {
|
189 | return false
|
190 | }
|
191 | return true
|
192 | },
|
193 | },
|
194 | })
|
195 | ```
|
196 |
|
197 | ## Doc
|
198 |
|
199 | https://doc.mindelixir.ink/
|