kakidash 0.2.1 → 0.2.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.
Files changed (7) hide show
  1. package/README.ja.md +137 -125
  2. package/README.md +138 -125
  3. package/dist/index.d.ts +89 -3
  4. package/dist/kakidash.cjs +7 -6
  5. package/dist/kakidash.es.js +2574 -2045
  6. package/dist/kakidash.umd.js +7 -6
  7. package/package.json +8 -4
package/README.ja.md CHANGED
@@ -23,10 +23,13 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
23
23
  - 太字 (Bold)、斜体 (Italic)
24
24
  - カラーパレットによる色変更 (Style Editor)
25
25
  - **テーマ**: 複数の組み込みテーマ (Default, Simple, Colorful, Dark) の切り替え
26
- - **アイコン設定**: コマンドパレットからのフラットアイコン追加・削除 (`m` key)
26
+ - **アイコン設定**: コマンドパレットからのフラットアイコンおよび数字アイコン (0-9) の追加・削除 (`m` key)
27
27
  - **インタラクション**:
28
28
  - ドラッグ＆ドロップによるノード移動・並び替え
29
29
  - キーボードショートカットによる高速操作
30
+ - **ヘルプモーダル**: ツールバーの「？」アイコンからアイコンの意味とショートカットキーの確認が可能
31
+ - **複数選択**: Shift + Click または Shift + 矢印キーによる範囲選択
32
+ - **一括操作**: 削除、コピー、切り取り、貼り付け、スタイル変更は選択された全ノードに適用されます
30
33
  - ズーム、パン (画面移動)
31
34
  - **画像対応**: クリップボードからの画像貼り付け
32
35
  - **Auto Link**: ノード内のURLを自動検出し、クリック可能なリンクに変換
@@ -56,26 +59,28 @@ pnpm add kakidash
56
59
  ```html
57
60
  <!DOCTYPE html>
58
61
  <html lang="ja">
59
- <head>
60
- <meta charset="UTF-8">
62
+ <head>
63
+ <meta charset="UTF-8" />
61
64
  <title>Kakidash Demo</title>
62
65
  <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; }
66
+ /* コンテナのサイズ指定は必須です */
67
+ #mindmap-container {
68
+ width: 100vw;
69
+ height: 100vh;
70
+ border: 1px solid #ccc; /* 境界線はお好みで */
71
+ margin: 0;
72
+ padding: 0;
73
+ overflow: hidden; /* コンテナ内でのスクロールを防ぐため */
74
+ }
75
+ body {
76
+ margin: 0;
77
+ }
73
78
  </style>
74
- </head>
75
- <body>
79
+ </head>
80
+ <body>
76
81
  <div id="mindmap-container"></div>
77
82
  <!-- Script挿入場所 -->
78
- </body>
83
+ </body>
79
84
  </html>
80
85
  ```
81
86
 
@@ -87,7 +92,7 @@ pnpm add kakidash
87
92
  pnpm add kakidash
88
93
  ```
89
94
 
90
- ```typescript
95
+ ````typescript
91
96
  import { Kakidash } from 'kakidash';
92
97
 
93
98
  // コンテナ取得
@@ -96,10 +101,12 @@ const container = document.getElementById('mindmap-container');
96
101
  // インスタンス化
97
102
  // インスタンス化 (オプション指定可能)
98
103
  const kakidash = new Kakidash(container, {
104
+ locale: 'ja', // オプション: 'en' | 'ja' (デフォルト: 'en')
99
105
  maxNodeWidth: 200, // オプション: ノードの最大幅
100
106
  customStyles: { // オプション: 初期のカスタムスタイル
101
107
  rootNode: { border: '2px solid red' }
102
- }
108
+ },
109
+ disabledCommandPaletteFeatures: ['import'] // オプション: 特定の機能を無効化
103
110
  });
104
111
 
105
112
  // 必要に応じて初期データをロードしたり、ノードを追加したりします
@@ -111,8 +118,9 @@ kakidash.addNode(kakidash.getRootId(), 'Hello World');
111
118
 
112
119
  ```typescript
113
120
  kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
114
- ```
115
- ```
121
+ ````
122
+
123
+ ````
116
124
 
117
125
  #### B. ブラウザ直接読み込み (Script Tag / CDN)
118
126
 
@@ -133,12 +141,12 @@ kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
133
141
  // 初期化
134
142
  const container = document.getElementById('mindmap-container');
135
143
  const kakidash = new Kakidash(container);
136
-
144
+
137
145
  // 動作確認
138
146
  // 動作確認
139
147
  console.log('Kakidash initialized:', kakidash);
140
148
  </script>
141
- ```
149
+ ````
142
150
 
143
151
  ## スタイルのカスタマイズ
144
152
 
@@ -149,28 +157,28 @@ kakidash.setTheme('dark'); // 'default', 'simple', 'colorful', 'dark'
149
157
  // 設定は内部に保存されます
150
158
  kakidash.updateGlobalStyles({
151
159
  // ルートノード（中心）のスタイル
152
- rootNode: {
160
+ rootNode: {
153
161
  border: '4px solid gold',
154
162
  background: '#ffeeee',
155
- color: '#333' // フォント色
163
+ color: '#333', // フォント色
156
164
  },
157
-
165
+
158
166
  // 子ノード（枝）のスタイル
159
- childNode: {
160
- border: '2px dashed blue',
167
+ childNode: {
168
+ border: '2px dashed blue',
161
169
  background: 'white',
162
- color: '#555' // フォント色
170
+ color: '#555', // フォント色
163
171
  },
164
-
172
+
165
173
  // 接続線の色
166
- connection: {
167
- color: 'orange'
174
+ connection: {
175
+ color: 'orange',
168
176
  },
169
-
177
+
170
178
  // マインドマップ全体の背景
171
179
  canvas: {
172
- background: '#fafafa' // 透明にする場合は 'transparent'
173
- }
180
+ background: '#fafafa', // 透明にする場合は 'transparent'
181
+ },
174
182
  });
175
183
 
176
184
  // 2. カスタムテーマを有効化してスタイルを反映
@@ -181,22 +189,24 @@ kakidash.setTheme('custom');
181
189
 
182
190
  すべての値は標準的なCSSの文字列として指定可能です。
183
191
 
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'` |
192
+ | オブジェクト | プロパティ | 説明 | 例 |
193
+ | ----------------------- | ------------ | -------------------- | ------------------------------------------------- |
194
+ | `rootNode`, `childNode` | `border` | 枠線の指定 | `'2px solid red'`, `'none'` |
195
+ | | `background` | 背景色 | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
196
+ | | `color` | 文字色 | `'#333'`, `'black'` |
197
+ | `connection` | `color` | 接続線の色 | `'#ccc'`, `'orange'` |
198
+ | `canvas` | `background` | キャンバス全体の背景 | `'#f0f0f0'`, `'transparent'` |
191
199
 
192
200
  ## API Reference
193
201
 
194
202
  ### Methods
195
203
 
196
204
  - **`new Kakidash(container: HTMLElement, options?: KakidashOptions)`**: インスタンスを生成します。
205
+ - `options.locale`: ヘルプモーダルなどの表示言語 ('en' | 'ja')。
197
206
  - `options.shortcuts`: キーボードショートカットのカスタマイズ。
198
207
  - `options.maxNodeWidth`: テキストノードの最大幅 (ピクセル)。
199
208
  - `options.customStyles`: 初期のカスタムスタイル。
209
+ - `options.disabledCommandPaletteFeatures`: コマンドパレットの特定の機能を無効化 ('search' | 'icon' | 'import' | 'export')。
200
210
  - **`kakidash.addNode(parentId, topic)`**: 指定した親ノードに新しい子ノードを追加します。
201
211
  - **`kakidash.getData()`**: 現在のマインドマップデータをJSONオブジェクトとして取得します。
202
212
  - **`kakidash.loadData(data)`**: JSONデータを読み込み、マインドマップを描画します。
@@ -209,21 +219,26 @@ kakidash.setTheme('custom');
209
219
  - **`kakidash.redo()`**: 元に戻した変更をやり直します。
210
220
  - **`kakidash.toggleFold(nodeId)`**: ノードの折り畳み/展開を切り替えます。
211
221
  - **`kakidash.getSelectedNodeId()`**: 現在選択されているノードのIDを取得します。
222
+ - **`kakidash.setSelectedNodeId(nodeId)`**: 指定したIDのノードを選択状態にします。
223
+ - **`kakidash.registerCommand(command)`**: コマンドパレットにカスタムコマンドを登録します。
224
+ - `command.id`: コマンドの一意なID。
225
+ - `command.topic`: パレットに表示される名前。
226
+ - `command.execute`: 実行時に呼ばれるコールバック `(selectedNodeId: string | null) => void`。
212
227
  - **`kakidash.updateNode(nodeId, { topic?, style?, icon? })`**: ノードを更新します。`icon` にはアイコンID ('check', 'star' など) を指定します。
213
228
  - **`kakidash.on(event, listener)`**: イベントリスナーを登録します。
214
229
  - **`kakidash.off(event, listener)`**: イベントリスナーを削除します。
215
230
 
216
231
  ### Events
217
232
 
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` | データモデルが変更されたときに発火します。 |
233
+ | Event Name | Payload | Description |
234
+ | -------------- | ------------------------------------------------------------ | ------------------------------------------ |
235
+ | `node:select` | `string \| null` | ノードが選択されたときに発火します。 |
236
+ | `node:add` | `{ id: string; topic: string }` | 新しいノードが追加されたときに発火します。 |
237
+ | `node:remove` | `string` | ノードが削除されたときに発火します。 |
238
+ | `node:update` | `{ id: string; topic?: string; icon?: string }` | ノードが更新されたときに発火します。 |
239
+ | `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | ノードが移動されたときに発火します。 |
240
+ | `model:load` | `MindMapData` | データがロードされたときに発火します。 |
241
+ | `model:change` | `void` | データモデルが変更されたときに発火します。 |
227
242
 
228
243
  ```typescript
229
244
  kakidash.on('node:select', (nodeId) => {
@@ -242,7 +257,7 @@ const kakidash = new Kakidash(container, {
242
257
  shortcuts: {
243
258
  // 'addChild' を Ctrl+N に変更する例
244
259
  addChild: [{ key: 'n', ctrlKey: true }],
245
- }
260
+ },
246
261
  });
247
262
  ```
248
263
 
@@ -252,41 +267,19 @@ const kakidash = new Kakidash(container, {
252
267
 
253
268
  ```json
254
269
  {
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
- ],
270
+ "navUp": [{ "key": "ArrowUp" }, { "key": "k" }],
271
+ "navDown": [{ "key": "ArrowDown" }, { "key": "j" }],
272
+ "navLeft": [{ "key": "ArrowLeft" }, { "key": "h" }],
273
+ "navRight": [{ "key": "ArrowRight" }, { "key": "l" }],
274
+ "addChild": [{ "key": "Tab" }, { "key": "a" }],
275
275
  "insertParent": [
276
276
  { "key": "Tab", "shiftKey": true },
277
277
  { "key": "a", "shiftKey": true }
278
278
  ],
279
279
  "addSibling": [{ "key": "Enter" }],
280
280
  "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
- ],
281
+ "deleteNode": [{ "key": "Delete" }, { "key": "Backspace" }],
282
+ "beginEdit": [{ "key": "i" }, { "key": " " }, { "key": "F2" }],
290
283
  "copy": [
291
284
  { "key": "c", "ctrlKey": true },
292
285
  { "key": "c", "metaKey": true }
@@ -311,14 +304,8 @@ const kakidash = new Kakidash(container, {
311
304
  ],
312
305
  "bold": [{ "key": "b", "shiftKey": true }],
313
306
  "italic": [{ "key": "i", "shiftKey": true }],
314
- "increaseFontSize": [
315
- { "key": ">", "shiftKey": true },
316
- { "key": "." }
317
- ],
318
- "decreaseFontSize": [
319
- { "key": "<", "shiftKey": true },
320
- { "key": "," }
321
- ],
307
+ "increaseFontSize": [{ "key": ">", "shiftKey": true }, { "key": "." }],
308
+ "decreaseFontSize": [{ "key": "<", "shiftKey": true }, { "key": "," }],
322
309
  "zoomIn": [{ "key": "[" }],
323
310
  "zoomOut": [{ "key": "]" }],
324
311
  "resetZoom": [{ "key": ":" }],
@@ -337,51 +324,76 @@ const kakidash = new Kakidash(container, {
337
324
  ## Shortcuts
338
325
 
339
326
  ### 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` | ノードの展開/折り畳み |
327
+
328
+ | Key | Description |
329
+ | ----------------------------------- | --------------------------------------- |
330
+ | `m` | コマンドパレット (検索 / アイコン) |
331
+ | `Arrow Keys` | ノード間の移動 |
332
+ | `Shift + Arrow Keys` | ノードの範囲選択 |
333
+ | `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
334
+ | `F2` / `DblClick` / `Space` / `i` | ノードの編集を開始 (画像の場合はズーム) |
335
+ | `Enter` | 兄弟ノードを追加 (下) |
336
+ | `Shift + Enter` | 兄弟ノードを追加 (上) |
337
+ | `Tab` / `a` | 子ノードを追加 |
338
+ | `Shift + Tab` / `Shift + a` | 親ノードを挿入 |
339
+ | `Delete` / `Backspace` | ノードを削除 |
340
+ | `Ctrl/Cmd + z` | 元に戻す (Undo) |
341
+ | `Ctrl/Cmd + Shift + z` / `Ctrl + y` | やり直し (Redo) |
342
+ | `Ctrl/Cmd + C` | コピー |
343
+ | `Ctrl/Cmd + X` | 切り取り |
344
+ | `Ctrl/Cmd + V` | 貼り付け (画像も可) |
345
+ | `Drag` (Canvas) | 画面のパン (移動) |
346
+ | `Wheel` | 上下スクロール (パン) |
347
+ | `Shift + Wheel` | 左右スクロール (パン) |
348
+ | `Ctrl/Cmd + Wheel` | ズームイン/アウト |
349
+ | `[` | キャンバス拡大 |
350
+ | `]` | キャンバス縮小 |
351
+ | `:` | ズームリセット |
352
+ | Click `+/-` / `f` | ノードの展開/折り畳み |
364
353
 
365
354
  ### Editing (Text Input)
366
- | Key | Description |
367
- | --- | --- |
368
- | `Enter` | 編集を確定 |
369
- | `Shift + Enter` | 改行 |
370
- | `Esc` | 編集をキャンセル |
355
+
356
+ | Key | Description |
357
+ | --------------- | ---------------- |
358
+ | `Enter` | 編集を確定 |
359
+ | `Shift + Enter` | 改行 |
360
+ | `Esc` | 編集をキャンセル |
371
361
 
372
362
  ### 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` | ノードの色を変更 (パレット順) |
363
+
364
+ | Key | Description |
365
+ | --------------------------- | ----------------------------- |
366
+ | `Shift + b` | 太字 (Bold) 切り替え |
367
+ | `Shift + i` | 斜体 (Italic) 切り替え |
368
+ | `Shift + . (>)` / `.` | フォントサイズ拡大 |
369
+ | `Shift + , (<)` / `,` | フォントサイズ縮小 |
370
+ | `Shift + Alt + ArrowLeft / Right` | ノード幅の変更 |
371
+ | `1` - `7` | ノードの色を変更 (パレット順) |
372
+
373
+ ## カスタムコマンドの登録
374
+
375
+ `registerCommand` を使用して、自身の関数をコマンドパレットに追加できます。
376
+
377
+ ```typescript
378
+ board.registerCommand({
379
+ id: 'rocket-launch',
380
+ topic: '🚀 Rocket Launch',
381
+ execute: (selectedNodeId) => {
382
+ console.log('選択中のノード:', selectedNodeId);
383
+ // ここに独自のロジックを記述します
384
+ if (selectedNodeId) {
385
+ board.updateNodeTopic(selectedNodeId, '🚀 LAUNCHED!');
386
+ }
387
+ }
388
+ });
389
+ ```
390
+
391
+ 登録されたコマンドはコマンドパレット（デフォルト：`m` キー）の一覧に表示されます。項目をクリックするか Enter キーを押すことで実行されます。
381
392
 
382
393
  ## アーキテクチャ
383
394
 
384
395
  ソフトウェアアーキテクチャの詳細や内部モジュールの依存関係については、以下を参照してください：
396
+
385
397
  - [ソフトウェアアーキテクチャ設計書](./docs/SOFTWARE_ARCHITECTURE_ja.md)
386
398
 
387
399
  ## Development