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/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
- ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5_2.jpg)
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>