mind-elixir 5.11.1-beta.2 → 5.11.1-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/MindElixir.iife.js +4 -4
- package/dist/MindElixir.js +205 -204
- package/dist/MindElixirLite.iife.js +4 -4
- package/dist/MindElixirLite.js +145 -144
- package/package.json +17 -17
- package/readme/es.md +0 -453
- package/readme/fr.md +0 -437
- package/readme/ja.md +0 -452
- package/readme/ko.md +0 -435
- package/readme/pt.md +0 -436
- package/readme/ru.md +0 -435
- package/readme/zh.md +0 -453
package/readme/pt.md
DELETED
|
@@ -1,436 +0,0 @@
|
|
|
1
|
-
<p align="center">
|
|
2
|
-
<a href="https://docs.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://trendshift.io/repositories/13049" target="_blank"><img src="https://trendshift.io/api/badge/repositories/13049" alt="SSShooter%2Fmind-elixir-core | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
|
|
10
|
-
</p>
|
|
11
|
-
|
|
12
|
-
<p align="center">
|
|
13
|
-
<a href="https://www.npmjs.com/package/mind-elixir">
|
|
14
|
-
<img src="https://img.shields.io/npm/v/mind-elixir" alt="version">
|
|
15
|
-
</a>
|
|
16
|
-
<a href="https://github.com/ssshooter/mind-elixir-core/blob/master/LICENSE">
|
|
17
|
-
<img src="https://img.shields.io/npm/l/mind-elixir" alt="license">
|
|
18
|
-
</a>
|
|
19
|
-
<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">
|
|
20
|
-
<img src="https://api.codacy.com/project/badge/Grade/09fadec5bf094886b30cea6aabf3a88b" alt="code quality">
|
|
21
|
-
</a>
|
|
22
|
-
<a href="https://bundlephobia.com/result?p=mind-elixir">
|
|
23
|
-
<img src="https://badgen.net/bundlephobia/dependency-count/mind-elixir" alt="dependency-count">
|
|
24
|
-
</a>
|
|
25
|
-
<a href="https://packagephobia.com/result?p=mind-elixir">
|
|
26
|
-
<img src="https://packagephobia.com/badge?p=mind-elixir" alt="package size">
|
|
27
|
-
</a>
|
|
28
|
-
</p>
|
|
29
|
-
|
|
30
|
-
[English](/readme.md) |
|
|
31
|
-
[中文](/readme/zh.md) |
|
|
32
|
-
[Español](/readme/es.md) |
|
|
33
|
-
[Français](/readme/fr.md) |
|
|
34
|
-
[Português](/readme/pt.md) |
|
|
35
|
-
[Русский](/readme/ru.md) |
|
|
36
|
-
[日本語](/readme/ja.md) |
|
|
37
|
-
[한국어](/readme/ko.md)
|
|
38
|
-
|
|
39
|
-
Mind Elixir é um núcleo JavaScript de mapa mental de código aberto. Você pode usá-lo com qualquer framework frontend de sua preferência.
|
|
40
|
-
|
|
41
|
-
Características:
|
|
42
|
-
|
|
43
|
-
- Leve
|
|
44
|
-
- Alto desempenho
|
|
45
|
-
- Independente de framework
|
|
46
|
-
- Plugável
|
|
47
|
-
- Plugin integrado de arrastar e soltar / edição de nós
|
|
48
|
-
- Exportação como SVG / PNG / Html
|
|
49
|
-
- Resumo de nós
|
|
50
|
-
- Suporte a operações em massa
|
|
51
|
-
- Desfazer / Refazer
|
|
52
|
-
- Atalhos eficientes
|
|
53
|
-
- Estilização fácil dos nós com variáveis CSS
|
|
54
|
-
|
|
55
|
-
<details>
|
|
56
|
-
<summary>Índice</summary>
|
|
57
|
-
|
|
58
|
-
- [Experimente agora](#experimente-agora)
|
|
59
|
-
- [Playground](#playground)
|
|
60
|
-
- [Documentação](#documentação)
|
|
61
|
-
- [Uso](#uso)
|
|
62
|
-
- [Instalação](#instalação)
|
|
63
|
-
- [NPM](#npm)
|
|
64
|
-
- [Tag de script](#tag-de-script)
|
|
65
|
-
- [Inicialização](#inicialização)
|
|
66
|
-
- [Estrutura de Dados](#estrutura-de-dados)
|
|
67
|
-
- [Manipulação de Eventos](#manipulação-de-eventos)
|
|
68
|
-
- [Exportação e Importação de Dados](#exportação-e-importação-de-dados)
|
|
69
|
-
- [Guardas de Operação](#guardas-de-operação)
|
|
70
|
-
- [Exportar como Imagem](#exportar-como-imagem)
|
|
71
|
-
- [Solução 1](#solução-1)
|
|
72
|
-
- [Solução 2](#solução-2)
|
|
73
|
-
- [Tema](#tema)
|
|
74
|
-
- [Atalhos](#atalhos)
|
|
75
|
-
- [Ecossistema](#ecossistema)
|
|
76
|
-
- [Desenvolvimento](#desenvolvimento)
|
|
77
|
-
- [Agradecimentos](#agradecimentos)
|
|
78
|
-
- [Contribuidores](#contribuidores)
|
|
79
|
-
|
|
80
|
-
</details>
|
|
81
|
-
|
|
82
|
-
## Experimente agora
|
|
83
|
-
|
|
84
|
-

|
|
85
|
-
|
|
86
|
-
https://mind-elixir.com/
|
|
87
|
-
|
|
88
|
-
### Playground
|
|
89
|
-
|
|
90
|
-
- Vanilla JS - https://codepen.io/ssshooter/pen/vEOqWjE
|
|
91
|
-
- React - https://codesandbox.io/p/devbox/mind-elixir-3-x-react-18-x-forked-f3mtcd
|
|
92
|
-
- Vue3 - https://codesandbox.io/p/sandbox/mind-elixir-3-x-vue3-lth484
|
|
93
|
-
|
|
94
|
-
## Documentação
|
|
95
|
-
|
|
96
|
-
https://docs.mind-elixir.com/
|
|
97
|
-
|
|
98
|
-
## Uso
|
|
99
|
-
|
|
100
|
-
### Instalação
|
|
101
|
-
|
|
102
|
-
#### NPM
|
|
103
|
-
|
|
104
|
-
```bash
|
|
105
|
-
npm i mind-elixir -S
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
```javascript
|
|
109
|
-
import MindElixir from 'mind-elixir'
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
#### Tag de script
|
|
113
|
-
|
|
114
|
-
```html
|
|
115
|
-
<script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
|
|
116
|
-
```
|
|
117
|
-
|
|
118
|
-
E no seu arquivo CSS:
|
|
119
|
-
|
|
120
|
-
```css
|
|
121
|
-
@import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
### Inicialização
|
|
125
|
-
|
|
126
|
-
```html
|
|
127
|
-
<div id="map"></div>
|
|
128
|
-
<style>
|
|
129
|
-
#map {
|
|
130
|
-
height: 500px;
|
|
131
|
-
width: 100%;
|
|
132
|
-
}
|
|
133
|
-
</style>
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
**Mudança Importante** desde a versão 1.0.0, `data` deve ser passado para `init()`, não para `options`.
|
|
137
|
-
|
|
138
|
-
```javascript
|
|
139
|
-
import MindElixir from 'mind-elixir'
|
|
140
|
-
import { pt } from 'mind-elixir/i18n'
|
|
141
|
-
import example from 'mind-elixir/dist/example1'
|
|
142
|
-
|
|
143
|
-
let options = {
|
|
144
|
-
el: '#map', // ou HTMLDivElement
|
|
145
|
-
direction: MindElixir.LEFT,
|
|
146
|
-
draggable: true, // padrão true
|
|
147
|
-
toolBar: true, // padrão true
|
|
148
|
-
keypress: true, // padrão true
|
|
149
|
-
overflowHidden: false, // padrão false
|
|
150
|
-
mouseSelectionButton: 0, // 0 para botão esquerdo, 2 para botão direito, padrão 0
|
|
151
|
-
contextMenu: {
|
|
152
|
-
locale: pt,
|
|
153
|
-
focus: true,
|
|
154
|
-
link: true,
|
|
155
|
-
extend: [
|
|
156
|
-
{
|
|
157
|
-
name: 'Editar Nó',
|
|
158
|
-
onclick: () => {
|
|
159
|
-
alert('menu estendido')
|
|
160
|
-
},
|
|
161
|
-
},
|
|
162
|
-
],
|
|
163
|
-
},
|
|
164
|
-
before: {
|
|
165
|
-
insertSibling(el, obj) {
|
|
166
|
-
return true
|
|
167
|
-
},
|
|
168
|
-
async addChild(el, obj) {
|
|
169
|
-
await sleep()
|
|
170
|
-
return true
|
|
171
|
-
},
|
|
172
|
-
},
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
let mind = new MindElixir(options)
|
|
176
|
-
|
|
177
|
-
mind.install(plugin) // instale seu plugin
|
|
178
|
-
|
|
179
|
-
// criar novos dados do mapa
|
|
180
|
-
const data = MindElixir.new('novo tópico')
|
|
181
|
-
// ou `example`
|
|
182
|
-
// ou os dados retornados de `.getData()`
|
|
183
|
-
mind.init(data)
|
|
184
|
-
|
|
185
|
-
// obter um nó
|
|
186
|
-
MindElixir.E('node-id')
|
|
187
|
-
```
|
|
188
|
-
|
|
189
|
-
### Estrutura de Dados
|
|
190
|
-
|
|
191
|
-
```javascript
|
|
192
|
-
// estrutura completa de dados do nó até agora
|
|
193
|
-
const nodeData = {
|
|
194
|
-
topic: 'tópico do nó',
|
|
195
|
-
id: 'bd1c24420cd2c2f5',
|
|
196
|
-
style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
|
|
197
|
-
expanded: true,
|
|
198
|
-
parent: null,
|
|
199
|
-
tags: ['Tag'],
|
|
200
|
-
icons: ['😀'],
|
|
201
|
-
hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
|
|
202
|
-
image: {
|
|
203
|
-
url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // obrigatório
|
|
204
|
-
// você precisa consultar a altura e largura da imagem e calcular o valor apropriado para exibir a imagem
|
|
205
|
-
height: 90, // obrigatório
|
|
206
|
-
width: 90, // obrigatório
|
|
207
|
-
},
|
|
208
|
-
children: [
|
|
209
|
-
{
|
|
210
|
-
topic: 'filho',
|
|
211
|
-
id: 'xxxx',
|
|
212
|
-
// ...
|
|
213
|
-
},
|
|
214
|
-
],
|
|
215
|
-
}
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### Manipulação de Eventos
|
|
219
|
-
|
|
220
|
-
```javascript
|
|
221
|
-
mind.bus.addListener('operation', operation => {
|
|
222
|
-
console.log(operation)
|
|
223
|
-
// retorna {
|
|
224
|
-
// name: nome da ação,
|
|
225
|
-
// obj: objeto alvo
|
|
226
|
-
// }
|
|
227
|
-
|
|
228
|
-
// name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
|
|
229
|
-
// obj: alvo
|
|
230
|
-
|
|
231
|
-
// name: moveNode
|
|
232
|
-
// obj: {from:alvo1,to:alvo2}
|
|
233
|
-
})
|
|
234
|
-
|
|
235
|
-
mind.bus.addListener('selectNodes', nodes => {
|
|
236
|
-
console.log(nodes)
|
|
237
|
-
})
|
|
238
|
-
|
|
239
|
-
mind.bus.addListener('expandNode', node => {
|
|
240
|
-
console.log('expandNode: ', node)
|
|
241
|
-
})
|
|
242
|
-
```
|
|
243
|
-
|
|
244
|
-
### Exportação e Importação de Dados
|
|
245
|
-
|
|
246
|
-
```javascript
|
|
247
|
-
// exportação de dados
|
|
248
|
-
const data = mind.getData() // objeto javascript, veja src/example.js
|
|
249
|
-
mind.getDataString() // objeto em string
|
|
250
|
-
|
|
251
|
-
// importação de dados
|
|
252
|
-
// inicialização
|
|
253
|
-
let mind = new MindElixir(options)
|
|
254
|
-
mind.init(data)
|
|
255
|
-
// atualização de dados
|
|
256
|
-
mind.refresh(data)
|
|
257
|
-
```
|
|
258
|
-
|
|
259
|
-
### Guardas de Operação
|
|
260
|
-
|
|
261
|
-
```javascript
|
|
262
|
-
let mind = new MindElixir({
|
|
263
|
-
// ...
|
|
264
|
-
before: {
|
|
265
|
-
insertSibling(el, obj) {
|
|
266
|
-
console.log(el, obj)
|
|
267
|
-
if (this.currentNode.nodeObj.parent.root) {
|
|
268
|
-
return false
|
|
269
|
-
}
|
|
270
|
-
return true
|
|
271
|
-
},
|
|
272
|
-
async addChild(el, obj) {
|
|
273
|
-
await sleep()
|
|
274
|
-
if (this.currentNode.nodeObj.parent.root) {
|
|
275
|
-
return false
|
|
276
|
-
}
|
|
277
|
-
return true
|
|
278
|
-
},
|
|
279
|
-
},
|
|
280
|
-
})
|
|
281
|
-
```
|
|
282
|
-
|
|
283
|
-
## Exportar como Imagem
|
|
284
|
-
|
|
285
|
-
### Solução 1
|
|
286
|
-
|
|
287
|
-
```typescript
|
|
288
|
-
const mind = {
|
|
289
|
-
/** instância do mind elixir */
|
|
290
|
-
}
|
|
291
|
-
const downloadPng = async () => {
|
|
292
|
-
const blob = await mind.exportPng() // Obter um Blob!
|
|
293
|
-
if (!blob) return
|
|
294
|
-
const url = URL.createObjectURL(blob)
|
|
295
|
-
const a = document.createElement('a')
|
|
296
|
-
a.href = url
|
|
297
|
-
a.download = 'arquivo.png'
|
|
298
|
-
a.click()
|
|
299
|
-
URL.revokeObjectURL(url)
|
|
300
|
-
}
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
### Solução 2
|
|
304
|
-
|
|
305
|
-
Instale `@ssshooter/modern-screenshot`, depois:
|
|
306
|
-
|
|
307
|
-
```typescript
|
|
308
|
-
import { domToPng } from '@ssshooter/modern-screenshot'
|
|
309
|
-
|
|
310
|
-
const download = async () => {
|
|
311
|
-
const dataUrl = await domToPng(mind.nodes, {
|
|
312
|
-
onCloneNode: node => {
|
|
313
|
-
const n = node as HTMLDivElement
|
|
314
|
-
n.style.position = ''
|
|
315
|
-
n.style.top = ''
|
|
316
|
-
n.style.left = ''
|
|
317
|
-
n.style.bottom = ''
|
|
318
|
-
n.style.right = ''
|
|
319
|
-
},
|
|
320
|
-
padding: 300,
|
|
321
|
-
quality: 1,
|
|
322
|
-
})
|
|
323
|
-
const link = document.createElement('a')
|
|
324
|
-
link.download = 'screenshot.png'
|
|
325
|
-
link.href = dataUrl
|
|
326
|
-
link.click()
|
|
327
|
-
}
|
|
328
|
-
```
|
|
329
|
-
|
|
330
|
-
## Tema
|
|
331
|
-
|
|
332
|
-
```javascript
|
|
333
|
-
const options = {
|
|
334
|
-
// ...
|
|
335
|
-
theme: {
|
|
336
|
-
name: 'Dark',
|
|
337
|
-
// main lines color palette
|
|
338
|
-
palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
|
|
339
|
-
// overwrite css variables
|
|
340
|
-
cssVar: {
|
|
341
|
-
'--main-color': '#ffffff',
|
|
342
|
-
'--main-bgcolor': '#4c4f69',
|
|
343
|
-
'--color': '#cccccc',
|
|
344
|
-
'--bgcolor': '#252526',
|
|
345
|
-
'--panel-color': '255, 255, 255',
|
|
346
|
-
'--panel-bgcolor': '45, 55, 72',
|
|
347
|
-
},
|
|
348
|
-
// all variables see /src/index.less
|
|
349
|
-
},
|
|
350
|
-
// ...
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
// ...
|
|
354
|
-
|
|
355
|
-
mind.changeTheme({
|
|
356
|
-
name: 'Latte',
|
|
357
|
-
palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
|
|
358
|
-
cssVar: {
|
|
359
|
-
'--main-color': '#444446',
|
|
360
|
-
'--main-bgcolor': '#ffffff',
|
|
361
|
-
'--color': '#777777',
|
|
362
|
-
'--bgcolor': '#f6f6f6',
|
|
363
|
-
},
|
|
364
|
-
})
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme **manually** when the scheme changes.
|
|
368
|
-
|
|
369
|
-
## Atalhos
|
|
370
|
-
|
|
371
|
-
| Atalho | Função |
|
|
372
|
-
| ------------------ | ------------------------------------ |
|
|
373
|
-
| Enter | Inserir Nó Irmão |
|
|
374
|
-
| Tab | Inserir Nó Filho |
|
|
375
|
-
| F1 | Centralizar o Mapa |
|
|
376
|
-
| F2 | Começar a Editar o Nó Atual |
|
|
377
|
-
| ↑ | Selecionar o Nó Irmão Anterior |
|
|
378
|
-
| ↓ | Selecionar o Próximo Nó Irmão |
|
|
379
|
-
| ← / → | Selecionar Pai ou Primeiro Filho |
|
|
380
|
-
| PageUp / Alt + ↑ | Mover Nó para Cima |
|
|
381
|
-
| PageDown / Alt + ↓ | Mover Nó para Baixo |
|
|
382
|
-
| Ctrl + ↑ | Mudar Padrão de Layout para Lado |
|
|
383
|
-
| Ctrl + ← | Mudar Padrão de Layout para Esquerda |
|
|
384
|
-
| Ctrl + → | Mudar Padrão de Layout para Direita |
|
|
385
|
-
| Ctrl + C | Copiar o Nó Atual |
|
|
386
|
-
| Ctrl + V | Colar o Nó Copiado |
|
|
387
|
-
| Ctrl + "+" | Aumentar Zoom do Mapa Mental |
|
|
388
|
-
| Ctrl + "-" | Diminuir Zoom do Mapa Mental |
|
|
389
|
-
| Ctrl + 0 | Redefinir Nível de Zoom |
|
|
390
|
-
|
|
391
|
-
## Ecossistema
|
|
392
|
-
|
|
393
|
-
- [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
|
|
394
|
-
- [@mind-elixir/node-menu-neo](https://github.com/ssshooter/node-menu-neo)
|
|
395
|
-
- [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
|
|
396
|
-
- [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
|
|
397
|
-
- [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
|
|
398
|
-
|
|
399
|
-
PRs são bem-vindos!
|
|
400
|
-
|
|
401
|
-
## Desenvolvimento
|
|
402
|
-
|
|
403
|
-
```
|
|
404
|
-
pnpm i
|
|
405
|
-
pnpm dev
|
|
406
|
-
```
|
|
407
|
-
|
|
408
|
-
Testar arquivos gerados com `dev.dist.ts`:
|
|
409
|
-
|
|
410
|
-
```
|
|
411
|
-
pnpm build
|
|
412
|
-
pnpm link ./
|
|
413
|
-
```
|
|
414
|
-
|
|
415
|
-
Atualizar documentação:
|
|
416
|
-
|
|
417
|
-
```
|
|
418
|
-
# Instalar api-extractor
|
|
419
|
-
pnpm install -g @microsoft/api-extractor
|
|
420
|
-
# Manter /src/docs.ts
|
|
421
|
-
# Gerar documentação
|
|
422
|
-
pnpm doc
|
|
423
|
-
pnpm doc:md
|
|
424
|
-
```
|
|
425
|
-
|
|
426
|
-
## Agradecimentos
|
|
427
|
-
|
|
428
|
-
- [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla)
|
|
429
|
-
|
|
430
|
-
## Contribuidores
|
|
431
|
-
|
|
432
|
-
Obrigado por suas contribuições ao Mind Elixir! Seu apoio e dedicação tornam este projeto melhor.
|
|
433
|
-
|
|
434
|
-
<a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
|
|
435
|
-
<img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
|
|
436
|
-
</a>
|