kakidash 0.2.0 → 0.2.2

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.
Files changed (7) hide show
  1. package/README.ja.md +119 -123
  2. package/README.md +120 -123
  3. package/dist/index.d.ts +56 -7
  4. package/dist/kakidash.cjs +6 -4
  5. package/dist/kakidash.es.js +3965 -1171
  6. package/dist/kakidash.umd.js +6 -4
  7. package/package.json +6 -1
package/README.ja.md CHANGED
@@ -22,6 +22,7 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
22
22
  - フォントサイズ変更
23
23
  - 太字 (Bold)、斜体 (Italic)
24
24
  - カラーパレットによる色変更 (Style Editor)
25
+ - **テーマ**: 複数の組み込みテーマ (Default, Simple, Colorful, Dark) の切り替え
25
26
  - **アイコン設定**: コマンドパレットからのフラットアイコン追加・削除 (`m` key)
26
27
  - **インタラクション**:
27
28
  - ドラッグ＆ドロップによるノード移動・並び替え
@@ -29,7 +30,11 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
29
30
  - ズーム、パン (画面移動)
30
31
  - **画像対応**: クリップボードからの画像貼り付け
31
32
  - **Auto Link**: ノード内のURLを自動検出し、クリック可能なリンクに変換
32
- - **インポート/エクスポート**: JSON形式でのデータ保存・読み込み (フォーカス状態も含む)
33
+ - **インポート/エクスポート**:
34
+ - JSON形式でのデータ保存・読み込み。
35
+ - XMindファイル(.xmind)のインポート。
36
+ - **画像エクスポート**: PNGおよびSVG形式でのマインドマップ画像出力（コマンドパレット > Export）。
37
+ - **Markdownエクスポート**: マインドマップをMarkdown形式で出力（コマンドパレット > Export > Markdown）。
33
38
  - **開発者向け**:
34
39
  - TypeScript対応
35
40
  - 読み取り専用 (Read-only) モード
@@ -51,26 +56,28 @@ pnpm add kakidash
51
56
  ```html
52
57
  <!DOCTYPE html>
53
58
  <html lang="ja">
54
- <head>
55
- <meta charset="UTF-8">
59
+ <head>
60
+ <meta charset="UTF-8" />
56
61
  <title>Kakidash Demo</title>
57
62
  <style>
58
- /* コンテナのサイズ指定は必須です */
59
- #mindmap-container {
60
- width: 100vw;
61
- height: 100vh;
62
- border: 1px solid #ccc; /* 境界線はお好みで */
63
- margin: 0;
64
- padding: 0;
65
- overflow: hidden; /* コンテナ内でのスクロールを防ぐため */
66
- }
67
- body { margin: 0; }
63
+ /* コンテナのサイズ指定は必須です */
64
+ #mindmap-container {
65
+ width: 100vw;
66
+ height: 100vh;
67
+ border: 1px solid #ccc; /* 境界線はお好みで */
68
+ margin: 0;
69
+ padding: 0;
70
+ overflow: hidden; /* コンテナ内でのスクロールを防ぐため */
71
+ }
72
+ body {
73
+ margin: 0;
74
+ }
68
75
  </style>
69
- </head>
70
- <body>
76
+ </head>
77
+ <body>
71
78
  <div id="mindmap-container"></div>
72
79
  <!-- Script挿入場所 -->
73
- </body>
80
+ </body>
74
81
  </html>
75
82
  ```
76
83
 
@@ -82,7 +89,7 @@ pnpm add kakidash
82
89
  pnpm add kakidash
83
90
  ```
84
91
 
85
- ```typescript
92
+ ````typescript
86
93
  import { Kakidash } from 'kakidash';
87
94
 
88
95
  // コンテナ取得
@@ -99,7 +106,16 @@ const kakidash = new Kakidash(container, {
99
106
 
100
107
  // 必要に応じて初期データをロードしたり、ノードを追加したりします
101
108
  kakidash.addNode(kakidash.getRootId(), 'Hello World');
102
- ```
109
+
110
+ ### 3. テーマの切り替え
111
+
112
+ テーマを動的に切り替えることができます:
113
+
114
+ ```typescript
115
+ kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
116
+ ````
117
+
118
+ ````
103
119
 
104
120
  #### B. ブラウザ直接読み込み (Script Tag / CDN)
105
121
 
@@ -120,12 +136,12 @@ kakidash.addNode(kakidash.getRootId(), 'Hello World');
120
136
  // 初期化
121
137
  const container = document.getElementById('mindmap-container');
122
138
  const kakidash = new Kakidash(container);
123
-
139
+
124
140
  // 動作確認
125
141
  // 動作確認
126
142
  console.log('Kakidash initialized:', kakidash);
127
143
  </script>
128
- ```
144
+ ````
129
145
 
130
146
  ## スタイルのカスタマイズ
131
147
 
@@ -136,28 +152,28 @@ kakidash.addNode(kakidash.getRootId(), 'Hello World');
136
152
  // 設定は内部に保存されます
137
153
  kakidash.updateGlobalStyles({
138
154
  // ルートノード（中心）のスタイル
139
- rootNode: {
155
+ rootNode: {
140
156
  border: '4px solid gold',
141
157
  background: '#ffeeee',
142
- color: '#333' // フォント色
158
+ color: '#333', // フォント色
143
159
  },
144
-
160
+
145
161
  // 子ノード（枝）のスタイル
146
- childNode: {
147
- border: '2px dashed blue',
162
+ childNode: {
163
+ border: '2px dashed blue',
148
164
  background: 'white',
149
- color: '#555' // フォント色
165
+ color: '#555', // フォント色
150
166
  },
151
-
167
+
152
168
  // 接続線の色
153
- connection: {
154
- color: 'orange'
169
+ connection: {
170
+ color: 'orange',
155
171
  },
156
-
172
+
157
173
  // マインドマップ全体の背景
158
174
  canvas: {
159
- background: '#fafafa' // 透明にする場合は 'transparent'
160
- }
175
+ background: '#fafafa', // 透明にする場合は 'transparent'
176
+ },
161
177
  });
162
178
 
163
179
  // 2. カスタムテーマを有効化してスタイルを反映
@@ -168,13 +184,13 @@ kakidash.setTheme('custom');
168
184
 
169
185
  すべての値は標準的なCSSの文字列として指定可能です。
170
186
 
171
- | オブジェクト | プロパティ | 説明 | 例 |
172
- | --- | --- | --- | --- |
173
- | `rootNode`, `childNode` | `border` | 枠線の指定 | `'2px solid red'`, `'none'` |
174
- | | `background` | 背景色 | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
175
- | | `color` | 文字色 | `'#333'`, `'black'` |
176
- | `connection` | `color` | 接続線の色 | `'#ccc'`, `'orange'` |
177
- | `canvas` | `background` | キャンバス全体の背景 | `'#f0f0f0'`, `'transparent'` |
187
+ | オブジェクト | プロパティ | 説明 | 例 |
188
+ | ----------------------- | ------------ | -------------------- | ------------------------------------------------- |
189
+ | `rootNode`, `childNode` | `border` | 枠線の指定 | `'2px solid red'`, `'none'` |
190
+ | | `background` | 背景色 | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
191
+ | | `color` | 文字色 | `'#333'`, `'black'` |
192
+ | `connection` | `color` | 接続線の色 | `'#ccc'`, `'orange'` |
193
+ | `canvas` | `background` | キャンバス全体の背景 | `'#f0f0f0'`, `'transparent'` |
178
194
 
179
195
  ## API Reference
180
196
 
@@ -202,15 +218,15 @@ kakidash.setTheme('custom');
202
218
 
203
219
  ### Events
204
220
 
205
- | Event Name | Payload | Description |
206
- | --- | --- | --- |
207
- | `node:select` | `string \| null` | ノードが選択されたときに発火します。 |
208
- | `node:add` | `{ id: string; topic: string }` | 新しいノードが追加されたときに発火します。 |
209
- | `node:remove` | `string` | ノードが削除されたときに発火します。 |
210
- | `node:update` | `{ id: string; topic?: string; icon?: string }` | ノードが更新されたときに発火します。 |
211
- | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | ノードが移動されたときに発火します。 |
212
- | `model:load` | `MindMapData` | データがロードされたときに発火します。 |
213
- | `model:change` | `void` | データモデルが変更されたときに発火します。 |
221
+ | Event Name | Payload | Description |
222
+ | -------------- | ------------------------------------------------------------ | ------------------------------------------ |
223
+ | `node:select` | `string \| null` | ノードが選択されたときに発火します。 |
224
+ | `node:add` | `{ id: string; topic: string }` | 新しいノードが追加されたときに発火します。 |
225
+ | `node:remove` | `string` | ノードが削除されたときに発火します。 |
226
+ | `node:update` | `{ id: string; topic?: string; icon?: string }` | ノードが更新されたときに発火します。 |
227
+ | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | ノードが移動されたときに発火します。 |
228
+ | `model:load` | `MindMapData` | データがロードされたときに発火します。 |
229
+ | `model:change` | `void` | データモデルが変更されたときに発火します。 |
214
230
 
215
231
  ```typescript
216
232
  kakidash.on('node:select', (nodeId) => {
@@ -229,7 +245,7 @@ const kakidash = new Kakidash(container, {
229
245
  shortcuts: {
230
246
  // 'addChild' を Ctrl+N に変更する例
231
247
  addChild: [{ key: 'n', ctrlKey: true }],
232
- }
248
+ },
233
249
  });
234
250
  ```
235
251
 
@@ -239,41 +255,19 @@ const kakidash = new Kakidash(container, {
239
255
 
240
256
  ```json
241
257
  {
242
- "navUp": [
243
- { "key": "ArrowUp" },
244
- { "key": "k" }
245
- ],
246
- "navDown": [
247
- { "key": "ArrowDown" },
248
- { "key": "j" }
249
- ],
250
- "navLeft": [
251
- { "key": "ArrowLeft" },
252
- { "key": "h" }
253
- ],
254
- "navRight": [
255
- { "key": "ArrowRight" },
256
- { "key": "l" }
257
- ],
258
- "addChild": [
259
- { "key": "Tab" },
260
- { "key": "a" }
261
- ],
258
+ "navUp": [{ "key": "ArrowUp" }, { "key": "k" }],
259
+ "navDown": [{ "key": "ArrowDown" }, { "key": "j" }],
260
+ "navLeft": [{ "key": "ArrowLeft" }, { "key": "h" }],
261
+ "navRight": [{ "key": "ArrowRight" }, { "key": "l" }],
262
+ "addChild": [{ "key": "Tab" }, { "key": "a" }],
262
263
  "insertParent": [
263
264
  { "key": "Tab", "shiftKey": true },
264
265
  { "key": "a", "shiftKey": true }
265
266
  ],
266
267
  "addSibling": [{ "key": "Enter" }],
267
268
  "addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
268
- "deleteNode": [
269
- { "key": "Delete" },
270
- { "key": "Backspace" }
271
- ],
272
- "beginEdit": [
273
- { "key": "i" },
274
- { "key": " " },
275
- { "key": "F2" }
276
- ],
269
+ "deleteNode": [{ "key": "Delete" }, { "key": "Backspace" }],
270
+ "beginEdit": [{ "key": "i" }, { "key": " " }, { "key": "F2" }],
277
271
  "copy": [
278
272
  { "key": "c", "ctrlKey": true },
279
273
  { "key": "c", "metaKey": true }
@@ -298,14 +292,8 @@ const kakidash = new Kakidash(container, {
298
292
  ],
299
293
  "bold": [{ "key": "b", "shiftKey": true }],
300
294
  "italic": [{ "key": "i", "shiftKey": true }],
301
- "increaseFontSize": [
302
- { "key": ">", "shiftKey": true },
303
- { "key": "." }
304
- ],
305
- "decreaseFontSize": [
306
- { "key": "<", "shiftKey": true },
307
- { "key": "," }
308
- ],
295
+ "increaseFontSize": [{ "key": ">", "shiftKey": true }, { "key": "." }],
296
+ "decreaseFontSize": [{ "key": "<", "shiftKey": true }, { "key": "," }],
309
297
  "zoomIn": [{ "key": "[" }],
310
298
  "zoomOut": [{ "key": "]" }],
311
299
  "resetZoom": [{ "key": ":" }],
@@ -324,51 +312,55 @@ const kakidash = new Kakidash(container, {
324
312
  ## Shortcuts
325
313
 
326
314
  ### General
327
- | Key | Description |
328
- | --- | --- |
329
- | `m` | コマンドパレット (検索 / アイコン) |
330
- | `Arrow Keys` | ノード間の移動 |
331
- | `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
332
- | `F2` / `DblClick` / `Space` / `i` | ノードの編集を開始 (画像の場合はズーム) |
333
- | `Enter` | 兄弟ノードを追加 (下) |
334
- | `Shift + Enter` | 兄弟ノードを追加 (上) |
335
- | `Tab` / `a` | 子ノードを追加 |
336
- | `Shift + Tab` / `Shift + a` | 親ノードを挿入 |
337
- | `Delete` / `Backspace` | ノードを削除 |
338
- | `Ctrl/Cmd + z` | 元に戻す (Undo) |
339
- | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | やり直し (Redo) |
340
- | `Ctrl/Cmd + C` | コピー |
341
- | `Ctrl/Cmd + X` | 切り取り |
342
- | `Ctrl/Cmd + V` | 貼り付け (画像も可) |
343
- | `Drag` (Canvas) | 画面のパン (移動) |
344
- | `Wheel` | 上下スクロール (パン) |
345
- | `Shift + Wheel` | 左右スクロール (パン) |
346
- | `Ctrl/Cmd + Wheel` | ズームイン/アウト |
347
- | `[` | キャンバス拡大 |
348
- | `]` | キャンバス縮小 |
349
- | `:` | ズームリセット |
350
- | Click `+/-` / `f` | ノードの展開/折り畳み |
315
+
316
+ | Key | Description |
317
+ | ----------------------------------- | --------------------------------------- |
318
+ | `m` | コマンドパレット (検索 / アイコン) |
319
+ | `Arrow Keys` | ノード間の移動 |
320
+ | `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
321
+ | `F2` / `DblClick` / `Space` / `i` | ノードの編集を開始 (画像の場合はズーム) |
322
+ | `Enter` | 兄弟ノードを追加 (下) |
323
+ | `Shift + Enter` | 兄弟ノードを追加 (上) |
324
+ | `Tab` / `a` | 子ノードを追加 |
325
+ | `Shift + Tab` / `Shift + a` | 親ノードを挿入 |
326
+ | `Delete` / `Backspace` | ノードを削除 |
327
+ | `Ctrl/Cmd + z` | 元に戻す (Undo) |
328
+ | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | やり直し (Redo) |
329
+ | `Ctrl/Cmd + C` | コピー |
330
+ | `Ctrl/Cmd + X` | 切り取り |
331
+ | `Ctrl/Cmd + V` | 貼り付け (画像も可) |
332
+ | `Drag` (Canvas) | 画面のパン (移動) |
333
+ | `Wheel` | 上下スクロール (パン) |
334
+ | `Shift + Wheel` | 左右スクロール (パン) |
335
+ | `Ctrl/Cmd + Wheel` | ズームイン/アウト |
336
+ | `[` | キャンバス拡大 |
337
+ | `]` | キャンバス縮小 |
338
+ | `:` | ズームリセット |
339
+ | Click `+/-` / `f` | ノードの展開/折り畳み |
351
340
 
352
341
  ### Editing (Text Input)
353
- | Key | Description |
354
- | --- | --- |
355
- | `Enter` | 編集を確定 |
356
- | `Shift + Enter` | 改行 |
357
- | `Esc` | 編集をキャンセル |
342
+
343
+ | Key | Description |
344
+ | --------------- | ---------------- |
345
+ | `Enter` | 編集を確定 |
346
+ | `Shift + Enter` | 改行 |
347
+ | `Esc` | 編集をキャンセル |
358
348
 
359
349
  ### Styling (Since selection)
360
- | Key | Description |
361
- | --- | --- |
362
- | `Shift + b` | 太字 (Bold) 切り替え |
363
- | `Shift + i` | 斜体 (Italic) 切り替え |
364
- | `Shift + . (>)` / `.` | フォントサイズ拡大 |
365
- | `Shift + , (<)` / `,` | フォントサイズ縮小 |
366
- | `Shift + ArrowLeft / Right` | ノード幅の変更 |
367
- | `1` - `7` | ノードの色を変更 (パレット順) |
350
+
351
+ | Key | Description |
352
+ | --------------------------- | ----------------------------- |
353
+ | `Shift + b` | 太字 (Bold) 切り替え |
354
+ | `Shift + i` | 斜体 (Italic) 切り替え |
355
+ | `Shift + . (>)` / `.` | フォントサイズ拡大 |
356
+ | `Shift + , (<)` / `,` | フォントサイズ縮小 |
357
+ | `Shift + ArrowLeft / Right` | ノード幅の変更 |
358
+ | `1` - `7` | ノードの色を変更 (パレット順) |
368
359
 
369
360
  ## アーキテクチャ
370
361
 
371
362
  ソフトウェアアーキテクチャの詳細や内部モジュールの依存関係については、以下を参照してください：
363
+
372
364
  - [ソフトウェアアーキテクチャ設計書](./docs/SOFTWARE_ARCHITECTURE_ja.md)
373
365
 
374
366
  ## Development
@@ -417,6 +409,10 @@ pnpm test:e2e
417
409
  pnpm turbo run test:e2e
418
410
  ```
419
411
 
412
+ > [!NOTE]
413
+ > E2Eテストの実行にはブラウザとシステム依存関係のインストールが必要です。初回実行時や依存関係エラーが発生した場合は、以下のコマンドを実行してください：
414
+ > `npx playwright install --with-deps`
415
+
420
416
  ### Lint
421
417
 
422
418
  ```bash