mind-elixir 5.11.1-beta.2 → 5.11.1-beta.3

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/ko.md DELETED
@@ -1,435 +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는 오픈 소스 JavaScript 마인드맵 코어입니다. 원하는 프론트엔드 프레임워크와 함께 사용할 수 있습니다.
40
-
41
- 특징:
42
-
43
- - 경량화
44
- - 고성능
45
- - 프레임워크에 구애받지 않음
46
- - 플러그인 지원
47
- - 드래그 앤 드롭 / 노드 편집 플러그인 내장
48
- - SVG / PNG / HTML 내보내기
49
- - 노드 요약
50
- - 대량 작업 지원
51
- - 실행 취소 / 다시 실행
52
- - 효율적인 단축키
53
- - CSS 변수로 쉽게 노드 스타일링
54
-
55
- <details>
56
- <summary>목차</summary>
57
-
58
- - [지금 시작하기](#지금-시작하기)
59
- - [플레이그라운드](#플레이그라운드)
60
- - [문서](#문서)
61
- - [사용법](#사용법)
62
- - [설치](#설치)
63
- - [NPM](#npm)
64
- - [스크립트 태그](#스크립트-태그)
65
- - [초기화](#초기화)
66
- - [데이터 구조](#데이터-구조)
67
- - [이벤트 처리](#이벤트-처리)
68
- - [데이터 내보내기와 가져오기](#데이터-내보내기와-가져오기)
69
- - [작업 가드](#작업-가드)
70
- - [이미지로 내보내기](#이미지로-내보내기)
71
- - [방법 1](#방법-1)
72
- - [방법 2](#방법-2)
73
- - [테마](#테마)
74
- - [단축키](#단축키)
75
- - [생태계](#생태계)
76
- - [개발](#개발)
77
- - [감사의 말](#감사의-말)
78
- - [기여자](#기여자)
79
-
80
- </details>
81
-
82
- ## 지금 시작하기
83
-
84
- ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5_2.jpg)
85
-
86
- https://mind-elixir.com/
87
-
88
- ### 플레이그라운드
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
- ## 문서
95
-
96
- https://docs.mind-elixir.com/
97
-
98
- ## 사용법
99
-
100
- ### 설치
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
- #### 스크립트 태그
113
-
114
- ```html
115
- <script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
116
- ```
117
-
118
- 그리고 CSS 파일에 추가:
119
-
120
- ```css
121
- @import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
122
- ```
123
-
124
- ### 초기화
125
-
126
- ```html
127
- <div id="map"></div>
128
- <style>
129
- #map {
130
- height: 500px;
131
- width: 100%;
132
- }
133
- </style>
134
- ```
135
-
136
- **주요 변경사항** 1.0.0 버전부터 `data`는 `options`가 아닌 `init()`에 전달되어야 합니다.
137
-
138
- ```javascript
139
- import MindElixir from 'mind-elixir'
140
- import { ko } from 'mind-elixir/i18n'
141
- import example from 'mind-elixir/dist/example1'
142
-
143
- let options = {
144
- el: '#map', // or HTMLDivElement
145
- direction: MindElixir.LEFT,
146
- draggable: true, // default true
147
- keypress: true, // default true
148
- overflowHidden: false, // default false
149
- mouseSelectionButton: 0, // 0 for left button, 2 for right button, default 0
150
- contextMenu: {
151
- locale: ko,
152
- focus: true,
153
- link: true,
154
- extend: [
155
- {
156
- name: 'Node edit',
157
- onclick: () => {
158
- alert('extend menu')
159
- },
160
- },
161
- ],
162
- },
163
- before: {
164
- insertSibling(el, obj) {
165
- return true
166
- },
167
- async addChild(el, obj) {
168
- await sleep()
169
- return true
170
- },
171
- },
172
- }
173
-
174
- let mind = new MindElixir(options)
175
-
176
- mind.install(plugin) // install your plugin
177
-
178
- // create new map data
179
- const data = MindElixir.new('new topic')
180
- // or `example`
181
- // or the data return from `.getData()`
182
- mind.init(data)
183
-
184
- // get a node
185
- MindElixir.E('node-id')
186
- ```
187
-
188
- ### 데이터 구조
189
-
190
- ```javascript
191
- // whole node data structure up to now
192
- const nodeData = {
193
- topic: 'node topic',
194
- id: 'bd1c24420cd2c2f5',
195
- style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
196
- expanded: true,
197
- parent: null,
198
- tags: ['Tag'],
199
- icons: ['😀'],
200
- hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
201
- image: {
202
- url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // required
203
- // you need to query the height and width of the image and calculate the appropriate value to display the image
204
- height: 90, // required
205
- width: 90, // required
206
- },
207
- children: [
208
- {
209
- topic: 'child',
210
- id: 'xxxx',
211
- // ...
212
- },
213
- ],
214
- }
215
- ```
216
-
217
- ### 이벤트 처리
218
-
219
- ```javascript
220
- mind.bus.addListener('operation', operation => {
221
- console.log(operation)
222
- // return {
223
- // name: action name,
224
- // obj: target object
225
- // }
226
-
227
- // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
228
- // obj: target
229
-
230
- // name: moveNode
231
- // obj: {from:target1,to:target2}
232
- })
233
-
234
- mind.bus.addListener('selectNodes', nodes => {
235
- console.log(nodes)
236
- })
237
-
238
- mind.bus.addListener('expandNode', node => {
239
- console.log('expandNode: ', node)
240
- })
241
- ```
242
-
243
- ### 데이터 내보내기와 가져오기
244
-
245
- ```javascript
246
- // data export
247
- const data = mind.getData() // javascript object, see src/example.js
248
- mind.getDataString() // stringify object
249
-
250
- // data import
251
- // initiate
252
- let mind = new MindElixir(options)
253
- mind.init(data)
254
- // data update
255
- mind.refresh(data)
256
- ```
257
-
258
- ### 작업 가드
259
-
260
- ```javascript
261
- let mind = new MindElixir({
262
- // ...
263
- before: {
264
- insertSibling(el, obj) {
265
- console.log(el, obj)
266
- if (this.currentNode.nodeObj.parent.root) {
267
- return false
268
- }
269
- return true
270
- },
271
- async addChild(el, obj) {
272
- await sleep()
273
- if (this.currentNode.nodeObj.parent.root) {
274
- return false
275
- }
276
- return true
277
- },
278
- },
279
- })
280
- ```
281
-
282
- ## 이미지로 내보내기
283
-
284
- ### 방법 1
285
-
286
- ```typescript
287
- const mind = {
288
- /** mind elixir instance */
289
- }
290
- const downloadPng = async () => {
291
- const blob = await mind.exportPng() // Get a Blob!
292
- if (!blob) return
293
- const url = URL.createObjectURL(blob)
294
- const a = document.createElement('a')
295
- a.href = url
296
- a.download = 'filename.png'
297
- a.click()
298
- URL.revokeObjectURL(url)
299
- }
300
- ```
301
-
302
- ### 방법 2
303
-
304
- Install `@ssshooter/modern-screenshot`, then:
305
-
306
- ```typescript
307
- import { domToPng } from '@ssshooter/modern-screenshot'
308
-
309
- const download = async () => {
310
- const dataUrl = await domToPng(mind.nodes, {
311
- onCloneNode: node => {
312
- const n = node as HTMLDivElement
313
- n.style.position = ''
314
- n.style.top = ''
315
- n.style.left = ''
316
- n.style.bottom = ''
317
- n.style.right = ''
318
- },
319
- padding: 300,
320
- quality: 1,
321
- })
322
- const link = document.createElement('a')
323
- link.download = 'screenshot.png'
324
- link.href = dataUrl
325
- link.click()
326
- }
327
- ```
328
-
329
- ## 테마
330
-
331
- ```javascript
332
- const options = {
333
- // ...
334
- theme: {
335
- name: 'Dark',
336
- // main lines color palette
337
- palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
338
- // overwrite css variables
339
- cssVar: {
340
- '--main-color': '#ffffff',
341
- '--main-bgcolor': '#4c4f69',
342
- '--color': '#cccccc',
343
- '--bgcolor': '#252526',
344
- '--panel-color': '255, 255, 255',
345
- '--panel-bgcolor': '45, 55, 72',
346
- },
347
- // all variables see /src/index.less
348
- },
349
- // ...
350
- }
351
-
352
- // ...
353
-
354
- mind.changeTheme({
355
- name: 'Latte',
356
- palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
357
- cssVar: {
358
- '--main-color': '#444446',
359
- '--main-bgcolor': '#ffffff',
360
- '--color': '#777777',
361
- '--bgcolor': '#f6f6f6',
362
- },
363
- })
364
- ```
365
-
366
- Be aware that Mind Elixir will not observe the change of `prefers-color-scheme`. Please change the theme **manually** when the scheme changes.
367
-
368
- ## 단축키
369
-
370
- | 단축키 | 기능 |
371
- | ------------------ | --------------------------- |
372
- | Enter | 형제 노드 삽입 |
373
- | Tab | 자식 노드 삽입 |
374
- | F1 | 맵 중앙 정렬 |
375
- | F2 | 현재 노드 편집 시작 |
376
- | ↑ | 이전 형제 노드 선택 |
377
- | ↓ | 다음 형제 노드 선택 |
378
- | ← / → | 부모 또는 첫 자식 노드 선택 |
379
- | PageUp / Alt + ↑ | 노드 위로 이동 |
380
- | PageDown / Alt + ↓ | 노드 아래로 이동 |
381
- | Ctrl + ↑ | 레이아웃을 측면으로 변경 |
382
- | Ctrl + ← | 레이아웃을 왼쪽으로 변경 |
383
- | Ctrl + → | 레이아웃을 오른쪽으로 변경 |
384
- | Ctrl + C | 현재 노드 복사 |
385
- | Ctrl + V | 복사된 노드 붙여넣기 |
386
- | Ctrl + "+" | 마인드맵 확대 |
387
- | Ctrl + "-" | 마인드맵 축소 |
388
- | Ctrl + 0 | 확대/축소 수준 초기화 |
389
-
390
- ## 생태계
391
-
392
- - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
393
- - [@mind-elixir/node-menu-neo](https://github.com/ssshooter/node-menu-neo)
394
- - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
395
- - [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
396
- - [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
397
-
398
- PR은 언제나 환영입니다!
399
-
400
- ## 개발
401
-
402
- ```
403
- pnpm i
404
- pnpm dev
405
- ```
406
-
407
- Test generated files with `dev.dist.ts`:
408
-
409
- ```
410
- pnpm build
411
- pnpm link ./
412
- ```
413
-
414
- Update docs:
415
-
416
- ```
417
- # Install api-extractor
418
- pnpm install -g @microsoft/api-extractor
419
- # Maintain /src/docs.ts
420
- # Generate docs
421
- pnpm doc
422
- pnpm doc:md
423
- ```
424
-
425
- ## 감사의 말
426
-
427
- - [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla)
428
-
429
- ## 기여자
430
-
431
- Mind Elixir에 기여해 주셔서 감사합니다! 여러분의 지원과 헌신이 이 프로젝트를 더 좋게 만들어 갑니다.
432
-
433
- <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
434
- <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
435
- </a>