kakidash 0.0.4 → 0.0.8

package/README.ja.md

@@ -27,7 +27,7 @@ Kakidashのミッションは、**アウトプット速度の最大化**です
   - キーボードショートカットによる高速操作
   - ズーム、パン (画面移動)
 - **画像対応**: クリップボードからの画像貼り付け
-- **インポート/エクスポート**: JSON形式でのデータ保存・読み込み
+- **インポート/エクスポート**: JSON形式でのデータ保存・読み込み (フォーカス状態も含む)
 - **開発者向け**:
   - TypeScript対応
   - 読み取り専用 (Read-only) モード
@@ -87,10 +87,10 @@ import { Kakidash } from 'kakidash';
 const container = document.getElementById('mindmap-container');
 
 // インスタンス化
-const board = new Kakidash(container);
+const kakidash = new Kakidash(container);
 
 // 必要に応じて初期データをロードしたり、ノードを追加したりします
-board.addNode(board.getRootId(), 'Hello World');
+kakidash.addNode(kakidash.getRootId(), 'Hello World');
 ```
 
 #### B. ブラウザ直接読み込み (Script Tag / CDN)
@@ -111,10 +111,10 @@ board.addNode(board.getRootId(), 'Hello World');
 
     // 初期化
     const container = document.getElementById('mindmap-container');
-    const board = new Kakidash(container);
+    const kakidash = new Kakidash(container);
     
     // 動作確認
-    console.log('Kakidash initialized:', board);
+    console.log('Kakidash initialized:', kakidash);
 </script>
 ```
 
@@ -123,28 +123,127 @@ board.addNode(board.getRootId(), 'Hello World');
 ### Methods
 
 - **`new Kakidash(container: HTMLElement)`**: インスタンスを生成します。
-- **`board.addNode(parentId, topic)`**: 指定した親ノードに新しい子ノードを追加します。
-- **`board.getData()`**: 現在のマインドマップデータをJSONオブジェクトとして取得します。
-- **`board.loadData(data)`**: JSONデータを読み込み、マインドマップを描画します。
-- **`board.updateLayout(mode)`**: レイアウトモードを変更します ('Standard', 'Left', 'Right')。
-- **`board.setReadOnly(boolean)`**: 読み取り専用モードを切り替えます。
+- **`kakidash.addNode(parentId, topic)`**: 指定した親ノードに新しい子ノードを追加します。
+- **`kakidash.getData()`**: 現在のマインドマップデータをJSONオブジェクトとして取得します。
+- **`kakidash.loadData(data)`**: JSONデータを読み込み、マインドマップを描画します。
+- **`kakidash.updateLayout(mode)`**: レイアウトモードを変更します ('Standard', 'Left', 'Right')。
+- **`kakidash.setReadOnly(boolean)`**: 読み取り専用モードを切り替えます。
+- **`kakidash.setMaxNodeWidth(width: number)`**: テキストノードの最大幅を設定します（-1で無制限）。
+- **`kakidash.getMaxNodeWidth()`**: 現在の最大ノード幅を取得します。
+- **`kakidash.undo()`**: 変更を元に戻します。
+- **`kakidash.redo()`**: 元に戻した変更をやり直します。
+- **`kakidash.toggleFold(nodeId)`**: ノードの折り畳み/展開を切り替えます。
+- **`kakidash.getSelectedNodeId()`**: 現在選択されているノードのIDを取得します。
+- **`kakidash.on(event, listener)`**: イベントリスナーを登録します。
+- **`kakidash.off(event, listener)`**: イベントリスナーを削除します。
 
 ### Events
 
+| Event Name | Payload | Description |
+| --- | --- | --- |
+| `node:select` | `string \| null` | ノードが選択されたときに発火します。 |
+| `node:add` | `{ id: string; topic: string }` | 新しいノードが追加されたときに発火します。 |
+| `node:remove` | `string` | ノードが削除されたときに発火します。 |
+| `node:update` | `{ id: string; topic: string }` | ノードが更新されたときに発火します。 |
+| `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | ノードが移動されたときに発火します。 |
+| `model:load` | `MindMapData` | データがロードされたときに発火します。 |
+| `model:change` | `void` | データモデルが変更されたときに発火します。 |
+
 ```typescript
-board.on('node:select', (nodeId) => {
+kakidash.on('node:select', (nodeId) => {
   console.log('Selected:', nodeId);
 });
+```
 
-board.on('node:add', (payload) => {
-  console.log('Added:', payload);
-});
+## Configuration
+
+### Custom Shortcuts
 
-board.on('model:change', () => {
-  console.log('Data changed');
+コンストラクタのオプションでキーボードショートカットをカスタマイズできます。
+
+```typescript
+const kakidash = new Kakidash(container, {
+  shortcuts: {
+    // 'addChild' を Ctrl+N に変更する例
+    addChild: [{ key: 'n', ctrlKey: true }],
+  }
 });
 ```
 
+### Default Shortcuts Configuration (JSON)
+
+以下はデフォルト設定の全量です。必要なキーのみを部分的に上書きできます。
+
+```json
+{
+  "navUp": [
+    { "key": "ArrowUp" },
+    { "key": "k" }
+  ],
+  "navDown": [
+    { "key": "ArrowDown" },
+    { "key": "j" }
+  ],
+  "navLeft": [
+    { "key": "ArrowLeft" },
+    { "key": "h" }
+  ],
+  "navRight": [
+    { "key": "ArrowRight" },
+    { "key": "l" }
+  ],
+  "addChild": [{ "key": "Tab" }],
+  "insertParent": [{ "key": "Tab", "shiftKey": true }],
+  "addSibling": [{ "key": "Enter" }],
+  "addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
+  "deleteNode": [
+    { "key": "Delete" },
+    { "key": "Backspace" }
+  ],
+  "beginEdit": [
+    { "key": "F2" },
+    { "key": " " }
+  ],
+  "copy": [
+    { "key": "c", "ctrlKey": true },
+    { "key": "c", "metaKey": true }
+  ],
+  "paste": [
+    { "key": "v", "ctrlKey": true },
+    { "key": "v", "metaKey": true }
+  ],
+  "cut": [
+    { "key": "x", "ctrlKey": true },
+    { "key": "x", "metaKey": true }
+  ],
+  "undo": [
+    { "key": "z", "ctrlKey": true },
+    { "key": "z", "metaKey": true }
+  ],
+  "redo": [
+    { "key": "Z", "ctrlKey": true, "shiftKey": true },
+    { "key": "Z", "metaKey": true, "shiftKey": true },
+    { "key": "y", "ctrlKey": true },
+    { "key": "y", "metaKey": true }
+  ],
+  "bold": [{ "key": "b" }],
+  "italic": [{ "key": "i" }],
+  "zoomIn": [
+    { "key": "+" },
+    { "key": "=" }
+  ],
+  "zoomOut": [{ "key": "-" }],
+  "toggleFold": [{ "key": "f" }],
+  "selectColor1": [{ "key": "1" }],
+  "selectColor2": [{ "key": "2" }],
+  "selectColor3": [{ "key": "3" }],
+  "selectColor4": [{ "key": "4" }],
+  "selectColor5": [{ "key": "5" }],
+  "selectColor6": [{ "key": "6" }],
+  "selectColor7": [{ "key": "7" }]
+}
+```
+
 ## Shortcuts
 
 ### General
@@ -152,13 +251,14 @@ board.on('model:change', () => {
 | --- | --- |
 | `Arrow Keys` | ノード間の移動 |
 | `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
-| `F2` / `DblClick` | ノードの編集を開始 |
+| `F2` / `DblClick` / `Space` | ノードの編集を開始 (画像の場合はズーム) |
 | `Enter` | 兄弟ノードを追加 (下) |
 | `Shift + Enter` | 兄弟ノードを追加 (上) |
 | `Tab` | 子ノードを追加 |
 | `Shift + Tab` | 親ノードを挿入 |
 | `Delete` / `Backspace` | ノードを削除 |
-| `Ctrl/Cmd + Z` | 元に戻す (Undo) |
+| `Ctrl/Cmd + z` | 元に戻す (Undo) |
+| `Ctrl/Cmd + Shift + z` / `Ctrl + y` | やり直し (Redo) |
 | `Ctrl/Cmd + C` | コピー |
 | `Ctrl/Cmd + X` | 切り取り |
 | `Ctrl/Cmd + V` | 貼り付け (画像も可) |
@@ -166,6 +266,7 @@ board.on('model:change', () => {
 | `Wheel` | 上下スクロール (パン) |
 | `Shift + Wheel` | 左右スクロール (パン) |
 | `Ctrl/Cmd + Wheel` | ズームイン/アウト |
+| Click `+/-` / `f` | ノードの展開/折り畳み |
 
 ### Editing (Text Input)
 | Key | Description |
@@ -177,8 +278,8 @@ board.on('model:change', () => {
 ### Styling (Since selection)
 | Key | Description |
 | --- | --- |
-| `Ctrl/Cmd + B` | 太字 (Bold) 切り替え |
-| `Ctrl/Cmd + I` | 斜体 (Italic) 切り替え |
+| `b` | 太字 (Bold) 切り替え |
+| `i` | 斜体 (Italic) 切り替え |
 | `+` | フォントサイズ拡大 |
 | `-` | フォントサイズ縮小 |
 | `1` - `7` | ノードの色を変更 (パレット順) |

package/README.md

@@ -25,7 +25,7 @@ Master the shortcuts and expand your mind map at the speed of thought.
   - Keyboard shortcuts for rapid operation.
   - Zoom, Pan (Screen navigation).
 - **Image Support**: Paste images from the clipboard.
-- **Import/Export**: Save and load data in JSON format.
+- **Import/Export**: Save and load data in JSON format (including focus state).
 - **For Developers**:
   - TypeScript support.
   - Read-only mode.
@@ -84,10 +84,10 @@ import { Kakidash } from 'kakidash';
 const container = document.getElementById('mindmap-container');
 
 // Instantiate
-const board = new Kakidash(container);
+const kakidash = new Kakidash(container);
 
 // Add initial data or nodes if needed
-board.addNode(board.getRootId(), 'Hello World');
+kakidash.addNode(kakidash.getRootId(), 'Hello World');
 ```
 
 #### B. Browser Direct Import (Script Tag / CDN)
@@ -107,9 +107,9 @@ Use the built `umd` file. The library will be exposed under the global variable
 
     // Initialize
     const container = document.getElementById('mindmap-container');
-    const board = new Kakidash(container);
+    const kakidash = new Kakidash(container);
     
-    console.log('Kakidash initialized:', board);
+    console.log('Kakidash initialized:', kakidash);
 </script>
 ```
 
@@ -118,28 +118,127 @@ Use the built `umd` file. The library will be exposed under the global variable
 ### Methods
 
 - **`new Kakidash(container: HTMLElement)`**: Creates a new instance.
-- **`board.addNode(parentId, topic)`**: Adds a new child node to the specified parent node.
-- **`board.getData()`**: Retrieves current mindmap data as a JSON object.
-- **`board.loadData(data)`**: Loads JSON data and renders the mindmap.
-- **`board.updateLayout(mode)`**: Changes layout mode ('Standard', 'Left', 'Right').
-- **`board.setReadOnly(boolean)`**: Toggles read-only mode.
+- **`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.
+- **`kakidash.updateLayout(mode)`**: Changes layout mode ('Standard', 'Left', 'Right').
+- **`kakidash.setReadOnly(boolean)`**: Toggles read-only mode.
+- **`kakidash.setMaxNodeWidth(width: number)`**: Sets main node width (-1 for unlimited).
+- **`kakidash.getMaxNodeWidth()`**: Gets current max node width.
+- **`kakidash.undo()`**: Undo the last change.
+- **`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.on(event, listener)`**: Register an event listener.
+- **`kakidash.off(event, listener)`**: Remove an event listener.
 
 ### Events
 
+| Event Name | Payload | Description |
+| --- | --- | --- |
+| `node:select` | `string \| null` | Fired when a node is selected. |
+| `node:add` | `{ id: string; topic: string }` | Fired when a new node is added. |
+| `node:remove` | `string` | Fired when a node is removed. |
+| `node:update` | `{ id: string; topic: string }` | Fired when a node is updated. |
+| `node:move` | `{ nodeId: string; newParentId: string; position?: string }` | Fired when a node is moved. |
+| `model:load` | `MindMapData` | Fired when data is loaded. |
+| `model:change` | `void` | Fired when the data model changes. |
+
 ```typescript
-board.on('node:select', (nodeId) => {
+kakidash.on('node:select', (nodeId) => {
   console.log('Selected:', nodeId);
 });
+```
 
-board.on('node:add', (payload) => {
-  console.log('Added:', payload);
-});
+## Configuration
+
+### Custom Shortcuts
 
-board.on('model:change', () => {
-  console.log('Data changed');
+You can customize keyboard shortcuts by passing an option to the constructor.
+
+```typescript
+const kakidash = new Kakidash(container, {
+  shortcuts: {
+    // Override 'addChild' to Ctrl+N
+    addChild: [{ key: 'n', ctrlKey: true }],
+  }
 });
 ```
 
+### Default Shortcuts Configuration (JSON)
+
+Here is the complete default configuration. You can partially override these keys.
+
+```json
+{
+  "navUp": [
+    { "key": "ArrowUp" },
+    { "key": "k" }
+  ],
+  "navDown": [
+    { "key": "ArrowDown" },
+    { "key": "j" }
+  ],
+  "navLeft": [
+    { "key": "ArrowLeft" },
+    { "key": "h" }
+  ],
+  "navRight": [
+    { "key": "ArrowRight" },
+    { "key": "l" }
+  ],
+  "addChild": [{ "key": "Tab" }],
+  "insertParent": [{ "key": "Tab", "shiftKey": true }],
+  "addSibling": [{ "key": "Enter" }],
+  "addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
+  "deleteNode": [
+    { "key": "Delete" },
+    { "key": "Backspace" }
+  ],
+  "beginEdit": [
+    { "key": "F2" },
+    { "key": " " }
+  ],
+  "copy": [
+    { "key": "c", "ctrlKey": true },
+    { "key": "c", "metaKey": true }
+  ],
+  "paste": [
+    { "key": "v", "ctrlKey": true },
+    { "key": "v", "metaKey": true }
+  ],
+  "cut": [
+    { "key": "x", "ctrlKey": true },
+    { "key": "x", "metaKey": true }
+  ],
+  "undo": [
+    { "key": "z", "ctrlKey": true },
+    { "key": "z", "metaKey": true }
+  ],
+  "redo": [
+    { "key": "Z", "ctrlKey": true, "shiftKey": true },
+    { "key": "Z", "metaKey": true, "shiftKey": true },
+    { "key": "y", "ctrlKey": true },
+    { "key": "y", "metaKey": true }
+  ],
+  "bold": [{ "key": "b" }],
+  "italic": [{ "key": "i" }],
+  "zoomIn": [
+    { "key": "+" },
+    { "key": "=" }
+  ],
+  "zoomOut": [{ "key": "-" }],
+  "toggleFold": [{ "key": "f" }],
+  "selectColor1": [{ "key": "1" }],
+  "selectColor2": [{ "key": "2" }],
+  "selectColor3": [{ "key": "3" }],
+  "selectColor4": [{ "key": "4" }],
+  "selectColor5": [{ "key": "5" }],
+  "selectColor6": [{ "key": "6" }],
+  "selectColor7": [{ "key": "7" }]
+}
+```
+
 ## Shortcuts
 
 ### General
@@ -147,13 +246,14 @@ board.on('model:change', () => {
 | --- | --- |
 | `Arrow Keys` | Navigate between nodes |
 | `h` / `j` / `k` / `l` | Navigate between nodes (Vim-style) |
-| `F2` / `DblClick` | Start editing node |
+| `F2` / `DblClick` / `Space` | Start editing node (Space triggers zoom if image) |
 | `Enter` | Add sibling node (below) |
 | `Shift + Enter` | Add sibling node (above) |
 | `Tab` | Add child node |
 | `Shift + Tab` | Insert parent node |
 | `Delete` / `Backspace` | Delete node |
-| `Ctrl/Cmd + Z` | Undo |
+| `Ctrl/Cmd + z` | Undo |
+| `Ctrl/Cmd + Shift + z` / `Ctrl + y` | Redo |
 | `Ctrl/Cmd + C` | Copy |
 | `Ctrl/Cmd + X` | Cut |
 | `Ctrl/Cmd + V` | Paste (Images supported) |
@@ -161,6 +261,7 @@ board.on('model:change', () => {
 | `Wheel` | Vertical scroll (Pan) |
 | `Shift + Wheel` | Horizontal scroll (Pan) |
 | `Ctrl/Cmd + Wheel` | Zoom in/out |
+| Click `+/-` / `f` | Toggle node folding |
 
 ### Editing (Text Input)
 | Key | Description |
@@ -172,8 +273,8 @@ board.on('model:change', () => {
 ### Styling (Since selection)
 | Key | Description |
 | --- | --- |
-| `Ctrl/Cmd + B` | Toggle Bold |
-| `Ctrl/Cmd + I` | Toggle Italic |
+| `b` | Toggle Bold |
+| `i` | Toggle Italic |
 | `+` | Increase font size |
 | `-` | Decrease font size |
 | `1` - `7` | Change node color (Palette order) |

package/dist/index.d.ts

@@ -21,7 +21,8 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     private scale;
     private isBatching;
     private animationFrameId;
-    constructor(container: HTMLElement);
+    private maxWidth;
+    constructor(container: HTMLElement, options?: KakidashOptions);
     /**
      * Adds a new child node to the specified parent.
      * This is a pure data operation and does not trigger UI actions like auto-focus or scroll.
@@ -61,12 +62,30 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
         topic?: string;
         style?: Partial<NodeStyle>;
     }): void;
+    /**
+     * Undo the last change.
+     */
+    undo(): void;
+    /**
+     * Redo the last undone change.
+     */
+    redo(): void;
+    /**
+     * Toggle fold state of a node.
+     */
+    toggleFold(nodeId: string): void;
+    /**
+     * Get the ID of the currently selected node.
+     */
+    getSelectedNodeId(): string | null;
     updateNodeStyle(nodeId: string, style: Partial<NodeStyle>): void;
     setTheme(theme: Theme): void;
     getMindMap(): MindMap;
     getNode(nodeId: string): Node_2 | undefined;
     getRoot(): Node_2;
     findNodes(predicate: (node: Node_2) => boolean): Node_2[];
+    setMaxNodeWidth(width: number): void;
+    getMaxNodeWidth(): number;
     setReadOnly(readOnly: boolean): void;
     destroy(): void;
     batch(callback: () => void): void;
@@ -103,6 +122,7 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     private getNodeDirection;
     private startAnimationLoop;
     private ensureNodeVisible;
+    private showShortcutModal;
 }
 
 export declare type KakidashEventMap = {
@@ -125,6 +145,18 @@ export declare type KakidashEventMap = {
     'model:change': void;
 };
 
+export declare interface KakidashOptions {
+    shortcuts?: ShortcutConfig;
+}
+
+declare interface KeyBinding {
+    key: string;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+}
+
 export declare type LayoutMode = 'Right' | 'Left' | 'Both';
 
 declare class MindMap {
@@ -144,6 +176,7 @@ export declare interface MindMapData {
     linkData?: any;
     theme?: Theme;
     direction?: number;
+    selectedId?: string;
 }
 
 declare interface MindMapNodeData {
@@ -157,7 +190,7 @@ declare interface MindMapNodeData {
     };
     children?: MindMapNodeData[];
     root?: boolean;
-    expanded?: boolean;
+    isFolded?: boolean;
     parentId?: string;
     image?: string;
     layoutSide?: 'left' | 'right';
@@ -172,7 +205,8 @@ declare class Node_2 {
     isRoot: boolean;
     image?: string;
     layoutSide?: 'left' | 'right';
-    constructor(id: string, topic: string, parentId?: string | null, isRoot?: boolean, image?: string, layoutSide?: 'left' | 'right');
+    isFolded: boolean;
+    constructor(id: string, topic: string, parentId?: string | null, isRoot?: boolean, image?: string, layoutSide?: 'left' | 'right', isFolded?: boolean);
     addChild(node: Node_2): void;
     insertChild(node: Node_2, index: number): void;
     removeChild(nodeId: string): void;
@@ -187,6 +221,10 @@ declare interface NodeStyle {
     fontStyle?: string;
 }
 
+declare type ShortcutAction = 'navUp' | 'navDown' | 'navLeft' | 'navRight' | 'addChild' | 'insertParent' | 'addSibling' | 'addSiblingBefore' | 'deleteNode' | 'beginEdit' | 'copy' | 'paste' | 'cut' | 'undo' | 'redo' | 'bold' | 'italic' | 'zoomIn' | 'zoomOut' | 'toggleFold' | 'centerMap' | 'selectColor1' | 'selectColor2' | 'selectColor3' | 'selectColor4' | 'selectColor5' | 'selectColor6' | 'selectColor7';
+
+export declare type ShortcutConfig = Partial<Record<ShortcutAction, KeyBinding[]>>;
+
 declare type Theme = 'default' | 'simple' | 'colorful';
 
 declare class TypedEventEmitter<EventMap extends Record<string, any>> {