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/ja.md DELETED
@@ -1,452 +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
- - **効率的なショートカット** - パワーユーザー向けのキーボードショートカット
49
-
50
- ### ⚡ **パフォーマンスとアーキテクチャ**
51
-
52
- - **軽量** - 最小バンドルサイズ
53
- - **高性能** - 大規模なマインドマップ用に最適化
54
- - **フレームワーク非依存** - 任意のフロントエンドフレームワークで動作
55
- - **プラグイン可能** - 拡張可能なアーキテクチャ
56
-
57
- ### 🛠️ **コア機能**
58
-
59
- - **インタラクティブ編集** - 組み込みのドラッグ&ドロップ / ノード編集機能
60
- - **一括操作** - 複数ノードの選択と操作
61
- - **元に戻す/やり直し** - 完全な操作履歴
62
- - **ノード接続と要約** - カスタムノードリンクとコンテンツ要約
63
-
64
- ### 📤 **エクスポートとカスタマイゼーション**
65
-
66
- - **複数のエクスポート形式** - SVG / PNG / HTML エクスポート
67
- - **簡単なスタイリング** - CSS変数でマインドマップをカスタマイズ
68
- - **テーマサポート** - 組み込みテーマとカスタムスタイリング
69
-
70
- [v5 破壊的変更](https://github.com/SSShooter/mind-elixir-core/wiki/Breaking-Change#500)
71
-
72
- <details>
73
- <summary>目次</summary>
74
-
75
- - [特徴](#特徴)
76
- - [🎨 **ユーザーエクスペリエンス**](#-ユーザーエクスペリエンス)
77
- - [⚡ **パフォーマンスとアーキテクチャ**](#-パフォーマンスとアーキテクチャ)
78
- - [🛠️ **コア機能**](#️-コア機能)
79
- - [📤 **エクスポートとカスタマイゼーション**](#-エクスポートとカスタマイゼーション)
80
- - [デモを試す](#デモを試す)
81
- - [プレイグラウンド](#プレイグラウンド)
82
- - [ドキュメント](#ドキュメント)
83
- - [使い方](#使い方)
84
- - [インストール](#インストール)
85
- - [NPM](#npm)
86
- - [スクリプトタグ](#スクリプトタグ)
87
- - [初期化](#初期化)
88
- - [データ構造](#データ構造)
89
- - [イベントハンドリング](#イベントハンドリング)
90
- - [データのエクスポートとインポート](#データのエクスポートとインポート)
91
- - [Markdown サポート](#markdown-サポート)
92
- - [操作ガード](#操作ガード)
93
- - [画像としてエクスポート](#画像としてエクスポート)
94
- - [非推奨API](#非推奨api)
95
- - [テーマ](#テーマ)
96
- - [ショートカット](#ショートカット)
97
- - [誰が使っているか](#誰が使っているか)
98
- - [エコシステム](#エコシステム)
99
- - [開発](#開発)
100
- - [謝辞](#謝辞)
101
- - [貢献者](#貢献者)
102
-
103
- </details>
104
-
105
- ## デモを試す
106
-
107
- ![mindelixir](https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/screenshot5_2.jpg)
108
-
109
- https://mind-elixir.com/
110
-
111
- ### プレイグラウンド
112
-
113
- - Vanilla JS - https://codepen.io/ssshooter/pen/vEOqWjE
114
- - React - https://codesandbox.io/p/devbox/mind-elixir-3-x-react-18-x-forked-f3mtcd
115
- - Vue3 - https://codesandbox.io/p/sandbox/mind-elixir-3-x-vue3-lth484
116
-
117
- ## ドキュメント
118
-
119
- https://docs.mind-elixir.com/
120
-
121
- ## 使い方
122
-
123
- ### インストール
124
-
125
- #### NPM
126
-
127
- ```bash
128
- npm i mind-elixir -S
129
- ```
130
-
131
- ```javascript
132
- import MindElixir from 'mind-elixir'
133
- ```
134
-
135
- #### スクリプトタグ
136
-
137
- ```html
138
- <script type="module" src="https://cdn.jsdelivr.net/npm/mind-elixir/dist/MindElixir.js"></script>
139
- ```
140
-
141
- CSSファイルに追加:
142
-
143
- ```css
144
- @import 'https://cdn.jsdelivr.net/npm/mind-elixir/dist/style.css';
145
- ```
146
-
147
- ### 初期化
148
-
149
- ```html
150
- <div id="map"></div>
151
- <style>
152
- #map {
153
- height: 500px;
154
- width: 100%;
155
- }
156
- </style>
157
- ```
158
-
159
- **重要な変更** バージョン1.0.0以降、`data`は`options`ではなく`init()`に渡す必要があります。
160
-
161
- ```javascript
162
- import MindElixir from 'mind-elixir'
163
- import { ja } from 'mind-elixir/i18n'
164
- import example from 'mind-elixir/dist/example1'
165
-
166
- let options = {
167
- el: '#map', // またはHTMLDivElement
168
- direction: MindElixir.LEFT,
169
- draggable: true, // デフォルトはtrue
170
- contextMenu: true, // デフォルトはtrue
171
- toolBar: true, // デフォルトはtrue
172
- keypress: true, // デフォルトはtrue
173
- overflowHidden: false, // デフォルトはfalse
174
- mouseSelectionButton: 0, // 0は左クリック、2は右クリック、デフォルトは0
175
- contextMenu: {
176
- locale: ja,
177
- focus: true,
178
- link: true,
179
- extend: [
180
- {
181
- name: 'ノード編集',
182
- onclick: () => {
183
- alert('拡張メニュー')
184
- },
185
- },
186
- ],
187
- },
188
- before: {
189
- insertSibling(el, obj) {
190
- return true
191
- },
192
- async addChild(el, obj) {
193
- await sleep()
194
- return true
195
- },
196
- },
197
- }
198
-
199
- let mind = new MindElixir(options)
200
-
201
- mind.install(plugin) // プラグインのインストール
202
-
203
- // 新しいマップデータの作成
204
- const data = MindElixir.new('新しいトピック')
205
- // または `example`
206
- // または `.getData()`の戻り値
207
- mind.init(data)
208
-
209
- // ノードの取得
210
- MindElixir.E('node-id')
211
- ```
212
-
213
- ### データ構造
214
-
215
- ```javascript
216
- // 現在のノードデータ構造
217
- const nodeData = {
218
- topic: 'ノードのトピック',
219
- id: 'bd1c24420cd2c2f5',
220
- style: { fontSize: '32', color: '#3298db', background: '#ecf0f1' },
221
- expanded: true,
222
- parent: null,
223
- tags: ['タグ'],
224
- icons: ['😀'],
225
- hyperLink: 'https://github.com/ssshooter/mind-elixir-core',
226
- image: {
227
- url: 'https://raw.githubusercontent.com/ssshooter/mind-elixir-core/master/images/logo2.png', // 必須
228
- height: 90, // 必須
229
- width: 90, // 必須
230
- },
231
- children: [
232
- {
233
- topic: '子ノード',
234
- id: 'xxxx',
235
- // ...
236
- },
237
- ],
238
- }
239
- ```
240
-
241
- ### イベントハンドリング
242
-
243
- ```javascript
244
- mind.bus.addListener('operation', operation => {
245
- console.log(operation)
246
- // return {
247
- // name: action name,
248
- // obj: target object
249
- // }
250
-
251
- // name: [insertSibling|addChild|removeNode|beginEdit|finishEdit]
252
- // obj: target
253
-
254
- // name: moveNode
255
- // obj: {from:target1,to:target2}
256
- })
257
-
258
- mind.bus.addListener('selectNodes', nodes => {
259
- console.log(nodes)
260
- })
261
-
262
- mind.bus.addListener('expandNode', node => {
263
- console.log('expandNode: ', node)
264
- })
265
- ```
266
-
267
- ### データのエクスポートとインポート
268
-
269
- ```javascript
270
- // データのエクスポート
271
- const data = mind.getData() // JavaScriptオブジェクト、src/example.jsを参照
272
- mind.getDataString() // オブジェクトを文字列化
273
-
274
- // データのインポート
275
- // 初期化
276
- let mind = new MindElixir(options)
277
- mind.init(data)
278
- // データの更新
279
- mind.refresh(data)
280
- ```
281
-
282
- ### Markdown サポート
283
-
284
- Mind Elixirはカスタムmarkdown解析をサポートしています:
285
-
286
- ```javascript
287
- // Markdownを無効化(デフォルト)
288
- let mind = new MindElixir({
289
- // markdownオプションを省略 - markdown処理なし
290
- })
291
-
292
- // カスタムmarkdownパーサーを使用
293
- let mind = new MindElixir({
294
- markdown: text => {
295
- // カスタムmarkdown実装
296
- return text
297
- .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
298
- .replace(/\*(.*?)\*/g, '<em>$1</em>')
299
- .replace(/`(.*?)`/g, '<code>$1</code>')
300
- },
301
- })
302
-
303
- // 任意のmarkdownライブラリを使用(marked、markdown-itなど)
304
- import { marked } from 'marked'
305
- let mind = new MindElixir({
306
- markdown: text => marked(text),
307
- })
308
- ```
309
-
310
- ### 操作ガード
311
-
312
- ```javascript
313
- let mind = new MindElixir({
314
- // ...
315
- before: {
316
- insertSibling(el, obj) {
317
- console.log(el, obj)
318
- if (this.currentNode.nodeObj.parent.root) {
319
- return false
320
- }
321
- return true
322
- },
323
- async addChild(el, obj) {
324
- await sleep()
325
- if (this.currentNode.nodeObj.parent.root) {
326
- return false
327
- }
328
- return true
329
- },
330
- },
331
- })
332
- ```
333
-
334
- ## 画像としてエクスポート
335
-
336
- `@zumer/snapdom`をインストールし、次に実行します:
337
-
338
- ```typescript
339
- import { snapdom } from '@zumer/snapdom'
340
-
341
- const download = async () => {
342
- const result = await snapdom(mind.nodes)
343
- await result.download({ format: 'jpg', filename: 'my-capture' })
344
- }
345
- ```
346
-
347
- 他のエクスポート形式と詳細なオプションについては、[Mind Elixirドキュメント](https://ssshooter.com/en/how-to-use-mind-elixir/#exporting-images)を参照してください。
348
-
349
- ### 非推奨API
350
-
351
- > ⚠️ **非推奨**:`mind.exportSvg()`メソッドは非推奨であり、将来のバージョンで削除される予定です。
352
-
353
- ```typescript
354
- // 非推奨 - 新規プロジェクトでは使用しないでください
355
- const svgData = await mind.exportSvg()
356
- ```
357
-
358
- ## テーマ
359
-
360
- ```javascript
361
- const options = {
362
- // ...
363
- theme: {
364
- name: 'Dark',
365
- // メインラインのカラーパレット
366
- palette: ['#848FA0', '#748BE9', '#D2F9FE', '#4145A5', '#789AFA', '#706CF4', '#EF987F', '#775DD5', '#FCEECF', '#DA7FBC'],
367
- // CSS変数の上書き
368
- cssVar: {
369
- '--main-color': '#ffffff',
370
- '--main-bgcolor': '#4c4f69',
371
- '--color': '#cccccc',
372
- '--bgcolor': '#252526',
373
- '--panel-color': '255, 255, 255',
374
- '--panel-bgcolor': '45, 55, 72',
375
- },
376
- // すべての変数は/src/index.lessを参照
377
- },
378
- // ...
379
- }
380
-
381
- // ...
382
-
383
- mind.changeTheme({
384
- name: 'Latte',
385
- palette: ['#dd7878', '#ea76cb', '#8839ef', '#e64553', '#fe640b', '#df8e1d', '#40a02b', '#209fb5', '#1e66f5', '#7287fd'],
386
- cssVar: {
387
- '--main-color': '#444446',
388
- '--main-bgcolor': '#ffffff',
389
- '--color': '#777777',
390
- '--bgcolor': '#f6f6f6',
391
- },
392
- })
393
- ```
394
-
395
- Mind Elixirは`prefers-color-scheme`の変更を監視しません。スキームが変更された場合は、テーマを**手動で**変更してください。
396
-
397
- ## ショートカット
398
-
399
- 詳細については、[ショートカットガイド](https://docs.mind-elixir.com/docs/guides/shortcuts)を参照してください。
400
-
401
- ## 誰が使っているか
402
-
403
- - [Mind Elixir Desktop](https://desktop.mind-elixir.com/)
404
-
405
- ## エコシステム
406
-
407
- - [@mind-elixir/node-menu](https://github.com/ssshooter/node-menu)
408
- - [@mind-elixir/node-menu-neo](https://github.com/ssshooter/node-menu-neo)
409
- - [@mind-elixir/export-xmind](https://github.com/ssshooter/export-xmind)
410
- - [@mind-elixir/export-html](https://github.com/ssshooter/export-html)
411
- - [mind-elixir-react](https://github.com/ssshooter/mind-elixir-react)
412
-
413
- PRsは大歓迎です!
414
-
415
- ## 開発
416
-
417
- ```
418
- pnpm i
419
- pnpm dev
420
- ```
421
-
422
- `dev.dist.ts`で生成されたファイルをテストします:
423
-
424
- ```
425
- pnpm build
426
- pnpm link ./
427
- ```
428
-
429
- ドキュメントを更新します:
430
-
431
- ```
432
- # api-extractorをインストール
433
- pnpm install -g @microsoft/api-extractor
434
- # /src/docs.tsを維持
435
- # ドキュメントを生成
436
- pnpm doc
437
- pnpm doc:md
438
- ```
439
-
440
- [DeepWiki](https://deepwiki.com/SSShooter/mind-elixir-core) を使用してMind Elixirについて詳しく学ぶ
441
-
442
- ## 謝辞
443
-
444
- - [@viselect/vanilla](https://github.com/simonwep/selection/tree/master/packages/vanilla)
445
-
446
- ## 貢献者
447
-
448
- Mind Elixirへの貢献に感謝します!あなたのサポートと献身がこのプロジェクトをより良くします。
449
-
450
- <a href="https://github.com/SSShooter/mind-elixir-core/graphs/contributors">
451
- <img src="https://contrib.rocks/image?repo=SSShooter/mind-elixir-core" />
452
- </a>