kakidash 0.2.2 → 0.2.3

package/README.ja.md

@@ -23,10 +23,13 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
   - 太字 (Bold)、斜体 (Italic)
   - カラーパレットによる色変更 (Style Editor)
   - **テーマ**: 複数の組み込みテーマ (Default, Simple, Colorful, Dark) の切り替え
-  - **アイコン設定**: コマンドパレットからのフラットアイコン追加・削除 (`m` key)
+  - **アイコン設定**: コマンドパレットからのフラットアイコンおよび数字アイコン (0-9) の追加・削除 (`m` key)
 - **インタラクション**:
   - ドラッグ＆ドロップによるノード移動・並び替え
   - キーボードショートカットによる高速操作
+  - **ヘルプモーダル**: ツールバーの「？」アイコンからアイコンの意味とショートカットキーの確認が可能
+  - **複数選択**: 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`                             | 兄弟ノードを追加 (下)                   |
@@ -354,9 +367,29 @@ const kakidash = new Kakidash(container, {
 | `Shift + i`                 | 斜体 (Italic) 切り替え        |
 | `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

@@ -21,10 +21,13 @@ Master the shortcuts and expand your mind map at the speed of thought.
   - Bold (`Bold`), Italic (`Italic`).
   - 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.
   - 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)                          |
@@ -349,9 +362,29 @@ Here is the complete default configuration. You can partially override these key
 | `Shift + i`                 | Toggle Italic                     |
 | `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:

package/dist/index.d.ts

@@ -1,3 +1,9 @@
+export declare interface CustomCommand {
+    id: string;
+    topic: string;
+    execute: (selectedNodeId: string | null) => void;
+}
+
 export declare type Direction = 'Up' | 'Down' | 'Left' | 'Right';
 
 /**
@@ -50,6 +56,11 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
      * Toggles the visibility of the command palette.
      */
     toggleCommandPalette(): void;
+    /**
+     * Registers a custom command to be displayed in the command palette.
+     * @param command The custom command definition.
+     */
+    registerCommand(command: CustomCommand): void;
     /**
      * Opens the command palette (alias for toggleCommandPalette).
      */
@@ -99,11 +110,12 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
 
 declare type KakidashCommandArgs = {
     name: string;
-    args?: any;
+    args?: unknown;
 };
 
 export declare type KakidashEventMap = {
     'node:select': string | null;
+    'selection:change': string[];
     'node:add': {
         id: string;
         topic: string;
@@ -140,6 +152,14 @@ export declare interface KakidashOptions {
      * for importing and exporting files.
      */
     fileHandler?: FileHandler;
+    /**
+     * Locale for UI text (help modal, etc.). Defaults to 'en'.
+     */
+    locale?: 'en' | 'ja';
+    /**
+     * Features to disable in the command palette.
+     */
+    disabledCommandPaletteFeatures?: ('search' | 'icon' | 'import' | 'export')[];
 }
 
 export declare interface KeyBinding {
@@ -155,9 +175,26 @@ export declare type LayoutMode = 'Right' | 'Left' | 'Both';
 declare class MindMap {
     root: Node_2;
     theme: Theme;
+    private nodeIndex;
     constructor(rootNode: Node_2);
+    /**
+     * Rebuild the entire node index from the current root tree.
+     * Should be called after root replacement (e.g., importData).
+     */
+    rebuildIndex(): void;
+    private indexSubtree;
+    /**
+     * Register a node and its entire subtree into the index.
+     * Call after adding a node (or subtree) to the tree.
+     */
+    registerNode(node: Node_2): void;
+    /**
+     * Unregister a node and its entire subtree from the index.
+     * Call after removing a node (or subtree) from the tree.
+     */
+    unregisterNode(node: Node_2): void;
+    private removeFromIndex;
     findNode(id: string): Node_2 | null;
-    private findNodeRecursive;
     moveNode(nodeId: string, newParentId: string): boolean;
     addSibling(referenceId: string, newNode: Node_2, position: 'before' | 'after'): boolean;
     insertParent(targetId: string, newParentNode: Node_2): boolean;
@@ -170,6 +207,7 @@ export declare interface MindMapData {
     theme?: Theme;
     direction?: number;
     selectedId?: string;
+    selectedIds?: string[];
 }
 
 export declare interface MindMapNodeData {
@@ -265,7 +303,7 @@ export declare class SvgGenerator {
 
 export declare type Theme = 'default' | 'simple' | 'colorful' | 'custom';
 
-declare class TypedEventEmitter<EventMap extends Record<string, any>> {
+export declare class TypedEventEmitter<EventMap extends Record<string, any>> {
     private listeners;
     on<K extends keyof EventMap>(event: K, listener: (payload: EventMap[K]) => void): void;
     addListener<K extends keyof EventMap>(event: K, listener: (payload: EventMap[K]) => void): void;