kakidash 0.2.2 → 0.3.0

package/README.ja.md

@@ -19,14 +19,17 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
 - **マインドマップ作成**: ノードの追加、兄弟ノード、子ノードの操作
 - **レイアウト**: 標準 (Standard/Both)、左揃え (Left)、右揃え (Right)
 - **スタイリング**:
-  - フォントサイズ変更
-  - 太字 (Bold)、斜体 (Italic)
-  - カラーパレットによる色変更 (Style Editor)
+  - フォントサイズの調整
+  - 太字 (`Bold`)、斜体 (`Italic`)、取り消し線 (`Strikethrough`)
+  - パレットによる文字ごとの色変更 (Style Editor)
   - **テーマ**: 複数の組み込みテーマ (Default, Simple, Colorful, Dark) の切り替え
-  - **アイコン設定**: コマンドパレットからのフラットアイコン追加・削除 (`m` key)
+  - **アイコン設定**: コマンドパレットからのフラットアイコンおよび数字アイコン (0-9) の追加・削除 (`m` key)
 - **インタラクション**:
-  - ドラッグ＆ドロップによるノード移動・並び替え
+  - ドラッグ＆ドロップによるノード移動・並び替え (PCのマウスおよびモバイルのタッチ操作に対応)
   - キーボードショートカットによる高速操作
+  - **ヘルプモーダル**: ツールバーの「？」アイコンからアイコンの意味とショートカットキーの確認が可能
+  - **複数選択**: Shift + Click または Shift + 矢印キーによる範囲選択
+  - **一括操作**: 削除、コピー、切り取り、貼り付け、スタイル変更は選択された全ノードに適用されます
   - ズーム、パン (画面移動)
 - **画像対応**: クリップボードからの画像貼り付け
 - **Auto Link**: ノード内のURLを自動検出し、クリック可能なリンクに変換
@@ -98,10 +101,12 @@ const container = document.getElementById('mindmap-container');
 // インスタンス化
 // インスタンス化 (オプション指定可能)
 const kakidash = new Kakidash(container, {
+    locale: 'ja', // オプション: 'en' | 'ja' (デフォルト: 'en')
     maxNodeWidth: 200, // オプション: ノードの最大幅
     customStyles: {    // オプション: 初期のカスタムスタイル
         rootNode: { border: '2px solid red' }
-    }
+    },
+    disabledCommandPaletteFeatures: ['import'] // オプション: 特定の機能を無効化
 });
 
 // 必要に応じて初期データをロードしたり、ノードを追加したりします
@@ -197,9 +202,11 @@ kakidash.setTheme('custom');
 ### Methods
 
 - **`new Kakidash(container: HTMLElement, options?: KakidashOptions)`**: インスタンスを生成します。
+  - `options.locale`: ヘルプモーダルなどの表示言語 ('en' | 'ja')。
   - `options.shortcuts`: キーボードショートカットのカスタマイズ。
   - `options.maxNodeWidth`: テキストノードの最大幅 (ピクセル)。
   - `options.customStyles`: 初期のカスタムスタイル。
+  - `options.disabledCommandPaletteFeatures`: コマンドパレットの特定の機能を無効化 ('search' | 'icon' | 'import' | 'export')。
 - **`kakidash.addNode(parentId, topic)`**: 指定した親ノードに新しい子ノードを追加します。
 - **`kakidash.getData()`**: 現在のマインドマップデータをJSONオブジェクトとして取得します。
 - **`kakidash.loadData(data)`**: JSONデータを読み込み、マインドマップを描画します。
@@ -212,6 +219,11 @@ kakidash.setTheme('custom');
 - **`kakidash.redo()`**: 元に戻した変更をやり直します。
 - **`kakidash.toggleFold(nodeId)`**: ノードの折り畳み/展開を切り替えます。
 - **`kakidash.getSelectedNodeId()`**: 現在選択されているノードのIDを取得します。
+- **`kakidash.setSelectedNodeId(nodeId)`**: 指定したIDのノードを選択状態にします。
+- **`kakidash.registerCommand(command)`**: コマンドパレットにカスタムコマンドを登録します。
+  - `command.id`: コマンドの一意なID。
+  - `command.topic`: パレットに表示される名前。
+  - `command.execute`: 実行時に呼ばれるコールバック `(selectedNodeId: string | null) => void`。
 - **`kakidash.updateNode(nodeId, { topic?, style?, icon? })`**: ノードを更新します。`icon` にはアイコンID ('check', 'star' など) を指定します。
 - **`kakidash.on(event, listener)`**: イベントリスナーを登録します。
 - **`kakidash.off(event, listener)`**: イベントリスナーを削除します。
@@ -317,6 +329,7 @@ const kakidash = new Kakidash(container, {
 | ----------------------------------- | --------------------------------------- |
 | `m`                                 | コマンドパレット (検索 / アイコン)      |
 | `Arrow Keys`                        | ノード間の移動                          |
+| `Shift + Arrow Keys`                | ノードの範囲選択                        |
 | `h` / `j` / `k` / `l`               | ノード間の移動 (Vim風)                  |
 | `F2` / `DblClick` / `Space` / `i`   | ノードの編集を開始 (画像の場合はズーム) |
 | `Enter`                             | 兄弟ノードを追加 (下)                   |
@@ -352,11 +365,32 @@ const kakidash = new Kakidash(container, {
 | --------------------------- | ----------------------------- |
 | `Shift + b`                 | 太字 (Bold) 切り替え          |
 | `Shift + i`                 | 斜体 (Italic) 切り替え        |
+| `Shift + x`                 | 取り消し線 (Strikethrough) 切り替え |
 | `Shift + . (>)` / `.`       | フォントサイズ拡大            |
 | `Shift + , (<)` / `,`       | フォントサイズ縮小            |
-| `Shift + ArrowLeft / Right` | ノード幅の変更                |
+| `Shift + Alt + ArrowLeft / Right` | ノード幅の変更                |
 | `1` - `7`                   | ノードの色を変更 (パレット順) |
 
+## カスタムコマンドの登録
+
+`registerCommand` を使用して、自身の関数をコマンドパレットに追加できます。
+
+```typescript
+board.registerCommand({
+    id: 'rocket-launch',
+    topic: '🚀 Rocket Launch',
+    execute: (selectedNodeId) => {
+        console.log('選択中のノード:', selectedNodeId);
+        // ここに独自のロジックを記述します
+        if (selectedNodeId) {
+            board.updateNodeTopic(selectedNodeId, '🚀 LAUNCHED!');
+        }
+    }
+});
+```
+
+登録されたコマンドはコマンドパレット（デフォルト：`m` キー）の一覧に表示されます。項目をクリックするか Enter キーを押すことで実行されます。
+
 ## アーキテクチャ
 
 ソフトウェアアーキテクチャの詳細や内部モジュールの依存関係については、以下を参照してください：

package/README.md

@@ -18,13 +18,16 @@ Master the shortcuts and expand your mind map at the speed of thought.
 - **Layouts**: Standard (Standard/Both), Left aligned (Left), Right aligned (Right).
 - **Styling**:
   - Font size adjustment.
-  - Bold (`Bold`), Italic (`Italic`).
+  - Bold (`Bold`), Italic (`Italic`), Strikethrough (`Strikethrough`).
   - Color changes via palette (Style Editor).
   - **Themes**: Switch between multiple built-in themes (Default, Simple, Colorful, Dark).
-  - **Icon Settings**: Add/Remove flat icons via Command Palette (`m` key).
+  - **Icon Settings**: Add/Remove flat icons and numeric icons (0-9) via Command Palette (`m` key).
 - **Interaction**:
-  - Drag and drop for node movement and reordering.
+  - Drag and drop for node movement and reordering (Supports Mouse & Touch on Mobile).
   - Keyboard shortcuts for rapid operation.
+  - **Help Modal**: Accessible via the "?" icon in the toolbar, allowing you to check icon meanings and shortcuts.
+  - **Multi-selection**: Shift + Click or Shift + Arrow Keys to select multiple nodes.
+  - **Bulk Operations**: Delete, Copy, Cut, Paste, and Styling apply to all selected nodes.
   - Zoom, Pan (Screen navigation).
 - **Image Support**: Paste images from the clipboard.
 - **Auto Link**: Automatically detects URLs in node text and converts them to clickable links.
@@ -96,10 +99,12 @@ const container = document.getElementById('mindmap-container');
 // Instantiate
 // Instantiate with optional configuration
 const kakidash = new Kakidash(container, {
+    locale: 'en', // Optional: 'en' | 'ja' (Default: 'en')
     maxNodeWidth: 200, // Optional: Maximum width for nodes
     customStyles: {    // Optional: Initial custom styles
         rootNode: { border: '2px solid red' }
-    }
+    },
+    disabledCommandPaletteFeatures: ['import'] // Optional: Disable specific features
 });
 
 // Add initial data or nodes if needed
@@ -192,9 +197,11 @@ All values accept standard CSS strings.
 ### Methods
 
 - **`new Kakidash(container: HTMLElement, options?: KakidashOptions)`**: Creates a new instance.
+  - `options.locale`: Language for the help modal and other UI elements ('en' | 'ja').
   - `options.shortcuts`: Custom keyboard shortcuts.
   - `options.maxNodeWidth`: Maximum width for text nodes (pixels).
   - `options.customStyles`: Initial custom styles.
+  - `options.disabledCommandPaletteFeatures`: Features to disable in the command palette ('search' | 'icon' | 'import' | 'export').
 - **`kakidash.addNode(parentId, topic)`**: Adds a new child node to the specified parent node.
 - **`kakidash.getData()`**: Retrieves current mindmap data as a JSON object.
 - **`kakidash.loadData(data)`**: Loads JSON data and renders the mindmap.
@@ -207,6 +214,11 @@ All values accept standard CSS strings.
 - **`kakidash.redo()`**: Redo the last undone change.
 - **`kakidash.toggleFold(nodeId)`**: Toggle fold state of a node.
 - **`kakidash.getSelectedNodeId()`**: Get the ID of the currently selected node.
+- **`kakidash.setSelectedNodeId(nodeId)`**: Selects a node by its ID.
+- **`kakidash.registerCommand(command)`**: Registers a custom command to the command palette.
+  - `command.id`: Unique ID for the command.
+  - `command.topic`: Display name in the palette.
+  - `command.execute`: Callback function `(selectedNodeId: string | null) => void`.
 - **`kakidash.updateNode(nodeId, { topic?, style?, icon? })`**: Updates a node property. `icon` accepts an icon ID (e.g., 'check').
 - **`kakidash.on(event, listener)`**: Register an event listener.
 - **`kakidash.off(event, listener)`**: Remove an event listener.
@@ -312,6 +324,7 @@ Here is the complete default configuration. You can partially override these key
 | ----------------------------------- | ------------------------------------------------- |
 | `m`                                 | Command Palette (Search / Icons)                  |
 | `Arrow Keys`                        | Navigate between nodes                            |
+| `Shift + Arrow Keys`                | Select range of nodes                             |
 | `h` / `j` / `k` / `l`               | Navigate between nodes (Vim-style)                |
 | `F2` / `DblClick` / `Space` / `i`   | Start editing node (Space triggers zoom if image) |
 | `Enter`                             | Add sibling node (below)                          |
@@ -347,11 +360,32 @@ Here is the complete default configuration. You can partially override these key
 | --------------------------- | --------------------------------- |
 | `Shift + b`                 | Toggle Bold                       |
 | `Shift + i`                 | Toggle Italic                     |
+| `Shift + x`                 | Toggle Strikethrough              |
 | `Shift + . (>)` / `.`       | Increase font size                |
 | `Shift + , (<)` / `,`       | Decrease font size                |
-| `Shift + ArrowLeft / Right` | Adjust node width                 |
+| `Shift + Alt + ArrowLeft / Right` | Adjust node width                 |
 | `1` - `7`                   | Change node color (Palette order) |
 
+## Custom Commands
+
+You can extend the command palette with your own functions using `registerCommand`.
+
+```typescript
+board.registerCommand({
+    id: 'rocket-launch',
+    topic: '🚀 Rocket Launch',
+    execute: (selectedNodeId) => {
+        console.log('Action on node:', selectedNodeId);
+        // Your logic here
+        if (selectedNodeId) {
+            board.updateNodeTopic(selectedNodeId, '🚀 LAUNCHED!');
+        }
+    }
+});
+```
+
+Registered commands will appear in the Command Palette (default key: `m`). Clicking or pressing Enter on the item will execute the handler.
+
 ## Architecture
 
 For details on the software architecture and internal module dependencies, please refer to: