kakidash 0.0.8 → 0.0.10

package/README.ja.md

@@ -87,7 +87,13 @@ import { Kakidash } from 'kakidash';
 const container = document.getElementById('mindmap-container');
 
 // インスタンス化
-const kakidash = new Kakidash(container);
+// インスタンス化 (オプション指定可能)
+const kakidash = new Kakidash(container, {
+    maxNodeWidth: 200, // オプション: ノードの最大幅
+    customStyles: {    // オプション: 初期のカスタムスタイル
+        rootNode: { border: '2px solid red' }
+    }
+});
 
 // 必要に応じて初期データをロードしたり、ノードを追加したりします
 kakidash.addNode(kakidash.getRootId(), 'Hello World');
@@ -113,19 +119,73 @@ kakidash.addNode(kakidash.getRootId(), 'Hello World');
     const container = document.getElementById('mindmap-container');
     const kakidash = new Kakidash(container);
     
+    // 動作確認
     // 動作確認
     console.log('Kakidash initialized:', kakidash);
 </script>
 ```
 
+## スタイルのカスタマイズ
+
+`updateGlobalStyles` を使用してカスタムスタイルを定義できます。設定は保存され、テーマが `'custom'` の場合に適用されます。
+
+```javascript
+// 1. カスタムスタイルを定義（いつでも実行可能）
+// 設定は内部に保存されます
+kakidash.updateGlobalStyles({
+  // ルートノード（中心）のスタイル
+  rootNode: { 
+    border: '4px solid gold',
+    background: '#ffeeee',
+    color: '#333' // フォント色
+  },
+  
+  // 子ノード（枝）のスタイル
+  childNode: { 
+    border: '2px dashed blue', 
+    background: 'white',
+    color: '#555' // フォント色
+  },
+  
+  // 接続線の色
+  connection: { 
+    color: 'orange' 
+  },
+  
+  // マインドマップ全体の背景
+  canvas: {
+    background: '#fafafa' // 透明にする場合は 'transparent'
+  }
+});
+
+// 2. カスタムテーマを有効化してスタイルを反映
+kakidash.setTheme('custom');
+```
+
+### 指定可能なプロパティ一覧
+
+すべての値は標準的なCSSの文字列として指定可能です。
+
+| オブジェクト | プロパティ | 説明 | 例 |
+| --- | --- | --- | --- |
+| `rootNode`, `childNode` | `border` | 枠線の指定 | `'2px solid red'`, `'none'` |
+| | `background` | 背景色 | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
+| | `color` | 文字色 | `'#333'`, `'black'` |
+| `connection` | `color` | 接続線の色 | `'#ccc'`, `'orange'` |
+| `canvas` | `background` | キャンバス全体の背景 | `'#f0f0f0'`, `'transparent'` |
+
 ## API Reference
 
 ### Methods
 
-- **`new Kakidash(container: HTMLElement)`**: インスタンスを生成します。
+- **`new Kakidash(container: HTMLElement, options?: KakidashOptions)`**: インスタンスを生成します。
+  - `options.shortcuts`: キーボードショートカットのカスタマイズ。
+  - `options.maxNodeWidth`: テキストノードの最大幅 (ピクセル)。
+  - `options.customStyles`: 初期のカスタムスタイル。
 - **`kakidash.addNode(parentId, topic)`**: 指定した親ノードに新しい子ノードを追加します。
 - **`kakidash.getData()`**: 現在のマインドマップデータをJSONオブジェクトとして取得します。
 - **`kakidash.loadData(data)`**: JSONデータを読み込み、マインドマップを描画します。
+- **`kakidash.updateGlobalStyles(styles)`**: グローバルスタイルを更新します ('custom' テーマ選択時のみ有効)。
 - **`kakidash.updateLayout(mode)`**: レイアウトモードを変更します ('Standard', 'Left', 'Right')。
 - **`kakidash.setReadOnly(boolean)`**: 読み取り専用モードを切り替えます。
 - **`kakidash.setMaxNodeWidth(width: number)`**: テキストノードの最大幅を設定します（-1で無制限）。
@@ -315,3 +375,13 @@ npm test
 ```bash
 npm run lint
 ```
+
+### Documentation
+
+TypeDocを使用してAPIドキュメントを生成します:
+
+```bash
+npm run docs
+```
+
+`docs/` ディレクトリにドキュメントが生成されます。

package/README.md

@@ -84,7 +84,13 @@ import { Kakidash } from 'kakidash';
 const container = document.getElementById('mindmap-container');
 
 // Instantiate
-const kakidash = new Kakidash(container);
+// Instantiate with optional configuration
+const kakidash = new Kakidash(container, {
+    maxNodeWidth: 200, // Optional: Maximum width for nodes
+    customStyles: {    // Optional: Initial custom styles
+        rootNode: { border: '2px solid red' }
+    }
+});
 
 // Add initial data or nodes if needed
 kakidash.addNode(kakidash.getRootId(), 'Hello World');
@@ -113,14 +119,67 @@ Use the built `umd` file. The library will be exposed under the global variable
 </script>
 ```
 
+## Custom Styling
+
+You can define custom styles using `updateGlobalStyles`. These settings are persisted and applied whenever the theme is `'custom'`.
+
+```javascript
+// 1. Apply custom styles (Can be done anytime)
+// These settings are saved internally.
+kakidash.updateGlobalStyles({
+  // Root node style
+  rootNode: { 
+    border: '4px solid gold',
+    background: '#ffeeee',
+    color: '#333' // Font color
+  },
+  
+  // Child nodes style
+  childNode: { 
+    border: '2px dashed blue', 
+    background: 'white',
+    color: '#555' // Font color
+  },
+  
+  // Connection line color
+  connection: { 
+    color: 'orange' 
+  },
+  
+  // Entire canvas background
+  canvas: {
+    background: '#fafafa' // Use 'transparent' for transparency
+  }
+});
+
+// 2. Activate the custom theme to see your changes
+kakidash.setTheme('custom');
+```
+
+### Supported Properties
+
+All values accept standard CSS strings.
+
+| Object | Property | Description | Example |
+| --- | --- | --- | --- |
+| `rootNode`, `childNode` | `border` | Node border | `'2px solid red'`, `'none'` |
+| | `background` | Node background | `'#ffffff'`, `'rgba(0,0,0,0.5)'`, `'transparent'` |
+| | `color` | Text color | `'#333'`, `'black'` |
+| `connection` | `color` | Connection line color | `'#ccc'`, `'orange'` |
+| `canvas` | `background` | Canvas background | `'#f0f0f0'`, `'transparent'` |
+
 ## API Reference
 
 ### Methods
 
-- **`new Kakidash(container: HTMLElement)`**: Creates a new instance.
+- **`new Kakidash(container: HTMLElement, options?: KakidashOptions)`**: Creates a new instance.
+  - `options.shortcuts`: Custom keyboard shortcuts.
+  - `options.maxNodeWidth`: Maximum width for text nodes (pixels).
+  - `options.customStyles`: Initial custom styles.
 - **`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.updateGlobalStyles(styles)`**: Updates global styles (only active when theme is 'custom').
 - **`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).
@@ -310,3 +369,13 @@ npm test
 ```bash
 npm run lint
 ```
+
+### Documentation
+
+Generate API documentation using TypeDoc:
+
+```bash
+npm run docs
+```
+
+The documentation will be generated in `docs/` directory.

package/dist/index.d.ts

@@ -1,5 +1,9 @@
 declare type Direction = 'Up' | 'Down' | 'Left' | 'Right';
 
+/**
+ * The main class for the Kakidash mind map library.
+ * It manages the mind map data, interaction, and rendering.
+ */
 export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     private mindMap;
     private service;
@@ -22,10 +26,23 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     private isBatching;
     private animationFrameId;
     private maxWidth;
+    private savedCustomStyles;
+    /**
+     * Creates a new Kakidash instance.
+     *
+     * @param container - The HTML element to mount the mind map into. Must have defined width and height.
+     * @param options - Optional configuration options.
+     */
     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.
+     *
+     * @param parentId - The ID of the parent node.
+     * @param topic - The content of the new node.
+     * @param layoutSide - For 'Both' layout mode, which side to place the node (root children only).
+     * @param options - Options for the operation.
+     * @returns The newly created Node object, or null if failed.
      */
     addNode(parentId: string, topic?: string, layoutSide?: 'left' | 'right', options?: {
         emitChange?: boolean;
@@ -53,10 +70,18 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     /**
      * Updates a node's topic or style.
      * This is a pure data operation.
-     */
-    /**
-     * Updates a node's topic or style.
-     * This is a pure data operation.
+     *
+     * @param nodeId - The ID of the node to update.
+     * @param updates - Object containing the fields to update.
+     *
+     * @example
+     * **Rename and style a node:**
+     * ```typescript
+     * kakidash.updateNode('node-1', {
+     *   topic: 'Important Idea',
+     *   style: { background: '#ffff00', color: 'black' }
+     * });
+     * ```
      */
     updateNode(nodeId: string, updates: {
         topic?: string;
@@ -78,7 +103,30 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
      * Get the ID of the currently selected node.
      */
     getSelectedNodeId(): string | null;
+    /**
+     * Updates the style of a specific node.
+     * This applies styles directly to the node instance, overriding global themes.
+     *
+     * @param nodeId - The ID of the node to update.
+     * @param style - Partial style object. Properties set to `undefined` or empty strings might reset to default depending on implementation.
+     *
+     * @example
+     * **Highlight a node:**
+     * ```typescript
+     * kakidash.updateNodeStyle('node-id-123', {
+     *   color: 'red',
+     *   fontWeight: 'bold',
+     *   fontSize: '20px'
+     * });
+     * ```
+     */
     updateNodeStyle(nodeId: string, style: Partial<NodeStyle>): void;
+    /**
+     * Sets the theme of the mind map.
+     *
+     * @param theme - The theme name ('default' | 'simple' | 'colorful' | 'custom').
+     * If 'custom' is selected, previously saved custom styles (via updateGlobalStyles) are applied.
+     */
     setTheme(theme: Theme): void;
     getMindMap(): MindMap;
     getNode(nodeId: string): Node_2 | undefined;
@@ -86,6 +134,50 @@ export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
     findNodes(predicate: (node: Node_2) => boolean): Node_2[];
     setMaxNodeWidth(width: number): void;
     getMaxNodeWidth(): number;
+    /**
+     * Updates global styles for the mind map using CSS variables.
+     * This allows batch updating of visual appearance without deep re-renders.
+     * Styles are persisted in `savedCustomStyles` and applied immediately if the current theme is 'custom'.
+     *
+     * @param styles - Object containing style definitions for various elements.
+     *
+     * @example
+     * **Apply a dark theme style:**
+     * ```typescript
+     * kakidash.updateGlobalStyles({
+     *   rootNode: {
+     *     border: '2px solid #555',
+     *     background: '#333',
+     *     color: '#fff'
+     *   },
+     *   childNode: {
+     *     border: '1px solid #444',
+     *     background: '#222',
+     *     color: '#eee'
+     *   },
+     *   connection: {
+     *     color: '#666'
+     *   },
+     *   canvas: {
+     *     background: '#1a1a1a'
+     *   }
+     * });
+     * ```
+     *
+     * @example
+     * **Reset specific local styles (by passing empty string):**
+     * ```typescript
+     * // Reverts root node border to default
+     * kakidash.updateGlobalStyles({
+     *   rootNode: { border: '' }
+     * });
+     * ```
+     */
+    updateGlobalStyles(styles: MindMapStyles): void;
+    /**
+     * Helper to apply a set of styles to the DOM via CSS variables.
+     */
+    private applyCustomStylesToDOM;
     setReadOnly(readOnly: boolean): void;
     destroy(): void;
     batch(callback: () => void): void;
@@ -147,6 +239,15 @@ export declare type KakidashEventMap = {
 
 export declare interface KakidashOptions {
     shortcuts?: ShortcutConfig;
+    /**
+     * Maximum width for mind map nodes in pixels.
+     * If not provided, defaults to unlimited (fitting content).
+     */
+    maxNodeWidth?: number;
+    /**
+     * Custom styles to apply to the mind map initially.
+     */
+    customStyles?: MindMapStyles;
 }
 
 declare interface KeyBinding {
@@ -196,6 +297,33 @@ declare interface MindMapNodeData {
     layoutSide?: 'left' | 'right';
 }
 
+/**
+ * Configuration for global mind map styles.
+ * All properties accept standard CSS value strings (e.g., "blue", "1px solid red", "#ff0000").
+ */
+export declare interface MindMapStyles {
+    /** Styles for the root node. */
+    rootNode?: {
+        border?: string;
+        background?: string;
+        color?: string;
+    };
+    /** Styles for all child nodes (non-root). */
+    childNode?: {
+        border?: string;
+        background?: string;
+        color?: string;
+    };
+    /** Styles for connection lines. */
+    connection?: {
+        color?: string;
+    };
+    /** Styles for the canvas/background. */
+    canvas?: {
+        background?: string;
+    };
+}
+
 declare class Node_2 {
     id: string;
     topic: string;
@@ -225,7 +353,7 @@ declare type ShortcutAction = 'navUp' | 'navDown' | 'navLeft' | 'navRight' | 'ad
 
 export declare type ShortcutConfig = Partial<Record<ShortcutAction, KeyBinding[]>>;
 
-declare type Theme = 'default' | 'simple' | 'colorful';
+declare type Theme = 'default' | 'simple' | 'colorful' | 'custom';
 
 declare class TypedEventEmitter<EventMap extends Record<string, any>> {
     private listeners;