kakidash 0.2.1 → 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 +102 -123
  2. package/README.md +103 -123
  3. package/dist/index.d.ts +49 -1
  4. package/dist/kakidash.cjs +6 -6
  5. package/dist/kakidash.es.js +842 -786
  6. package/dist/kakidash.umd.js +6 -6
  7. package/package.json +1 -1
package/README.ja.md CHANGED
@@ -56,26 +56,28 @@ pnpm add kakidash
56
56
  ```html
57
57
  <!DOCTYPE html>
58
58
  <html lang="ja">
59
- <head>
60
- <meta charset="UTF-8">
59
+ <head>
60
+ <meta charset="UTF-8" />
61
61
  <title>Kakidash Demo</title>
62
62
  <style>
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 { 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
+ }
73
75
  </style>
74
- </head>
75
- <body>
76
+ </head>
77
+ <body>
76
78
  <div id="mindmap-container"></div>
77
79
  <!-- Script挿入場所 -->
78
- </body>
80
+ </body>
79
81
  </html>
80
82
  ```
81
83
 
@@ -87,7 +89,7 @@ pnpm add kakidash
87
89
  pnpm add kakidash
88
90
  ```
89
91
 
90
- ```typescript
92
+ ````typescript
91
93
  import { Kakidash } from 'kakidash';
92
94
 
93
95
  // コンテナ取得
@@ -111,8 +113,9 @@ kakidash.addNode(kakidash.getRootId(), 'Hello World');
111
113
 
112
114
  ```typescript
113
115
  kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
114
- ```
115
- ```
116
+ ````
117
+
118
+ ````
116
119
 
117
120
  #### B. ブラウザ直接読み込み (Script Tag / CDN)
118
121
 
@@ -133,12 +136,12 @@ kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
133
136
  // 初期化
134
137
  const container = document.getElementById('mindmap-container');
135
138
  const kakidash = new Kakidash(container);
136
-
139
+
137
140
  // 動作確認
138
141
  // 動作確認
139
142
  console.log('Kakidash initialized:', kakidash);
140
143
  </script>
141
- ```
144
+ ````
142
145
 
143
146
  ## スタイルのカスタマイズ
144
147
 
@@ -149,28 +152,28 @@ kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
149
152
  // 設定は内部に保存されます
150
153
  kakidash.updateGlobalStyles({
151
154
  // ルートノード（中心）のスタイル
152
- rootNode: {
155
+ rootNode: {
153
156
  border: '4px solid gold',
154
157
  background: '#ffeeee',
155
- color: '#333' // フォント色
158
+ color: '#333', // フォント色
156
159
  },
157
-
160
+
158
161
  // 子ノード（枝）のスタイル
159
- childNode: {
160
- border: '2px dashed blue',
162
+ childNode: {
163
+ border: '2px dashed blue',
161
164
  background: 'white',
162
- color: '#555' // フォント色
165
+ color: '#555', // フォント色
163
166
  },
164
-
167
+
165
168
  // 接続線の色
166
- connection: {
167
- color: 'orange'
169
+ connection: {
170
+ color: 'orange',
168
171
  },
169
-
172
+
170
173
  // マインドマップ全体の背景
171
174
  canvas: {
172
- background: '#fafafa' // 透明にする場合は 'transparent'
173
- }
175
+ background: '#fafafa', // 透明にする場合は 'transparent'
176
+ },
174
177
  });
175
178
 
176
179
  // 2. カスタムテーマを有効化してスタイルを反映
@@ -181,13 +184,13 @@ kakidash.setTheme('custom');
181
184
 
182
185
  すべての値は標準的なCSSの文字列として指定可能です。
183
186
 
184
- | オブジェクト | プロパティ | 説明 | 例 |
185
- | --- | --- | --- | --- |
186
- | `rootNode`, `childNode` | `border` | 枠線の指定 | `'2px solid red'`, `'none'` |
187
- | | `background` | 背景色 | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
188
- | | `color` | 文字色 | `'#333'`, `'black'` |
189
- | `connection` | `color` | 接続線の色 | `'#ccc'`, `'orange'` |
190
- | `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'` |
191
194
 
192
195
  ## API Reference
193
196
 
@@ -215,15 +218,15 @@ kakidash.setTheme('custom');
215
218
 
216
219
  ### Events
217
220
 
218
- | Event Name | Payload | Description |
219
- | --- | --- | --- |
220
- | `node:select` | `string \| null` | ノードが選択されたときに発火します。 |
221
- | `node:add` | `{ id: string; topic: string }` | 新しいノードが追加されたときに発火します。 |
222
- | `node:remove` | `string` | ノードが削除されたときに発火します。 |
223
- | `node:update` | `{ id: string; topic?: string; icon?: string }` | ノードが更新されたときに発火します。 |
224
- | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | ノードが移動されたときに発火します。 |
225
- | `model:load` | `MindMapData` | データがロードされたときに発火します。 |
226
- | `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` | データモデルが変更されたときに発火します。 |
227
230
 
228
231
  ```typescript
229
232
  kakidash.on('node:select', (nodeId) => {
@@ -242,7 +245,7 @@ const kakidash = new Kakidash(container, {
242
245
  shortcuts: {
243
246
  // 'addChild' を Ctrl+N に変更する例
244
247
  addChild: [{ key: 'n', ctrlKey: true }],
245
- }
248
+ },
246
249
  });
247
250
  ```
248
251
 
@@ -252,41 +255,19 @@ const kakidash = new Kakidash(container, {
252
255
 
253
256
  ```json
254
257
  {
255
- "navUp": [
256
- { "key": "ArrowUp" },
257
- { "key": "k" }
258
- ],
259
- "navDown": [
260
- { "key": "ArrowDown" },
261
- { "key": "j" }
262
- ],
263
- "navLeft": [
264
- { "key": "ArrowLeft" },
265
- { "key": "h" }
266
- ],
267
- "navRight": [
268
- { "key": "ArrowRight" },
269
- { "key": "l" }
270
- ],
271
- "addChild": [
272
- { "key": "Tab" },
273
- { "key": "a" }
274
- ],
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" }],
275
263
  "insertParent": [
276
264
  { "key": "Tab", "shiftKey": true },
277
265
  { "key": "a", "shiftKey": true }
278
266
  ],
279
267
  "addSibling": [{ "key": "Enter" }],
280
268
  "addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
281
- "deleteNode": [
282
- { "key": "Delete" },
283
- { "key": "Backspace" }
284
- ],
285
- "beginEdit": [
286
- { "key": "i" },
287
- { "key": " " },
288
- { "key": "F2" }
289
- ],
269
+ "deleteNode": [{ "key": "Delete" }, { "key": "Backspace" }],
270
+ "beginEdit": [{ "key": "i" }, { "key": " " }, { "key": "F2" }],
290
271
  "copy": [
291
272
  { "key": "c", "ctrlKey": true },
292
273
  { "key": "c", "metaKey": true }
@@ -311,14 +292,8 @@ const kakidash = new Kakidash(container, {
311
292
  ],
312
293
  "bold": [{ "key": "b", "shiftKey": true }],
313
294
  "italic": [{ "key": "i", "shiftKey": true }],
314
- "increaseFontSize": [
315
- { "key": ">", "shiftKey": true },
316
- { "key": "." }
317
- ],
318
- "decreaseFontSize": [
319
- { "key": "<", "shiftKey": true },
320
- { "key": "," }
321
- ],
295
+ "increaseFontSize": [{ "key": ">", "shiftKey": true }, { "key": "." }],
296
+ "decreaseFontSize": [{ "key": "<", "shiftKey": true }, { "key": "," }],
322
297
  "zoomIn": [{ "key": "[" }],
323
298
  "zoomOut": [{ "key": "]" }],
324
299
  "resetZoom": [{ "key": ":" }],
@@ -337,51 +312,55 @@ const kakidash = new Kakidash(container, {
337
312
  ## Shortcuts
338
313
 
339
314
  ### General
340
- | Key | Description |
341
- | --- | --- |
342
- | `m` | コマンドパレット (検索 / アイコン) |
343
- | `Arrow Keys` | ノード間の移動 |
344
- | `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
345
- | `F2` / `DblClick` / `Space` / `i` | ノードの編集を開始 (画像の場合はズーム) |
346
- | `Enter` | 兄弟ノードを追加 (下) |
347
- | `Shift + Enter` | 兄弟ノードを追加 (上) |
348
- | `Tab` / `a` | 子ノードを追加 |
349
- | `Shift + Tab` / `Shift + a` | 親ノードを挿入 |
350
- | `Delete` / `Backspace` | ノードを削除 |
351
- | `Ctrl/Cmd + z` | 元に戻す (Undo) |
352
- | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | やり直し (Redo) |
353
- | `Ctrl/Cmd + C` | コピー |
354
- | `Ctrl/Cmd + X` | 切り取り |
355
- | `Ctrl/Cmd + V` | 貼り付け (画像も可) |
356
- | `Drag` (Canvas) | 画面のパン (移動) |
357
- | `Wheel` | 上下スクロール (パン) |
358
- | `Shift + Wheel` | 左右スクロール (パン) |
359
- | `Ctrl/Cmd + Wheel` | ズームイン/アウト |
360
- | `[` | キャンバス拡大 |
361
- | `]` | キャンバス縮小 |
362
- | `:` | ズームリセット |
363
- | 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` | ノードの展開/折り畳み |
364
340
 
365
341
  ### Editing (Text Input)
366
- | Key | Description |
367
- | --- | --- |
368
- | `Enter` | 編集を確定 |
369
- | `Shift + Enter` | 改行 |
370
- | `Esc` | 編集をキャンセル |
342
+
343
+ | Key | Description |
344
+ | --------------- | ---------------- |
345
+ | `Enter` | 編集を確定 |
346
+ | `Shift + Enter` | 改行 |
347
+ | `Esc` | 編集をキャンセル |
371
348
 
372
349
  ### Styling (Since selection)
373
- | Key | Description |
374
- | --- | --- |
375
- | `Shift + b` | 太字 (Bold) 切り替え |
376
- | `Shift + i` | 斜体 (Italic) 切り替え |
377
- | `Shift + . (>)` / `.` | フォントサイズ拡大 |
378
- | `Shift + , (<)` / `,` | フォントサイズ縮小 |
379
- | `Shift + ArrowLeft / Right` | ノード幅の変更 |
380
- | `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` | ノードの色を変更 (パレット順) |
381
359
 
382
360
  ## アーキテクチャ
383
361
 
384
362
  ソフトウェアアーキテクチャの詳細や内部モジュールの依存関係については、以下を参照してください：
363
+
385
364
  - [ソフトウェアアーキテクチャ設計書](./docs/SOFTWARE_ARCHITECTURE_ja.md)
386
365
 
387
366
  ## Development