npm - kakidash - Versions diffs - 0.0.1 - Mend

kakidash 0.0.1

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

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 hiroooo000
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md ADDED Viewed

@@ -0,0 +1,216 @@
+[English](./README.md)
+# kakidash
+Mindmap Typescript/Javascript Library.
+## Concept
+**「思考を、ダッシュで書き出す」**
+Kakidashのミッションは、**アウトプット速度の最大化**です。
+脳内に浮かぶ膨大な思考やアイデアを、ボトルネックなくすべて書き出し切るために。
+キーボードショートカットを駆使し、思考のスピードでマインドマップを広げていく体験を提供します。
+## Features
+- **マインドマップ作成**: ノードの追加、兄弟ノード、子ノードの操作
+- **レイアウト**: 標準 (Standard/Both)、左揃え (Left)、右揃え (Right)
+- **スタイリング**:
+  - フォントサイズ変更
+  - 太字 (Bold)、斜体 (Italic)
+  - カラーパレットによる色変更 (Style Editor)
+- **インタラクション**:
+  - ドラッグ＆ドロップによるノード移動・並び替え
+  - キーボードショートカットによる高速操作
+  - ズーム、パン (画面移動)
+- **画像対応**: クリップボードからの画像貼り付け
+- **インポート/エクスポート**: JSON形式でのデータ保存・読み込み
+- **開発者向け**:
+  - TypeScript対応
+  - 読み取り専用 (Read-only) モード
+  - イベントシステム
+## Installation
+```bash
+npm install kakidash
+```
+## Usage
+### 1. HTMLの準備
+`kakidash` を表示するためのコンテナ要素 (`div` など) を用意します。
+**重要**: コンテナには必ず `width` と `height` を CSS で指定してください。
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <title>Kakidash Demo</title>
+    <style>
+        /* コンテナのサイズ指定は必須です */
+        #mindmap-container {
+            width: 100vw;
+            height: 100vh;
+            border: 1px solid #ccc; /* 境界線はお好みで */
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* コンテナ内でのスクロールを防ぐため */
+        }
+        body { margin: 0; }
+    </style>
+</head>
+<body>
+    <div id="mindmap-container"></div>
+    <!-- Script挿入場所 -->
+</body>
+</html>
+```
+### 2. ライブラリの読み込みと初期化
+#### A. NPM プロジェクト (Vite / Webpack など)
+```bash
+npm install kakidash
+```
+```typescript
+import { Kakidash } from 'kakidash';
+// コンテナ取得
+const container = document.getElementById('mindmap-container');
+// インスタンス化
+const board = new Kakidash(container);
+// 必要に応じて初期データをロードしたり、ノードを追加したりします
+board.addNode(board.getRootId(), 'Hello World');
+```
+#### B. ブラウザ直接読み込み (Script Tag / CDN)
+ビルド済みの `umd` ファイルを使用します。
+グローバル変数 `window.kakidash` にライブラリが格納されます。
+```html
+<!-- ローカルのビルド済みファイルを読み込む場合 -->
+<script src="./dist/kakidash.umd.js"></script>
+<!-- または CDN (例: unpkg) 経由 (パッケージ公開後) -->
+<!-- <script src="https://unpkg.com/kakidash/dist/kakidash.umd.js"></script> -->
+<script>
+    // UMDビルドでは window.kakidash オブジェクトの下にクラスがエクスポートされます
+    const { Kakidash } = window.kakidash;
+    // 初期化
+    const container = document.getElementById('mindmap-container');
+    const board = new Kakidash(container);
+    // 動作確認
+    console.log('Kakidash initialized:', board);
+</script>
+```
+## API Reference
+### 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)`**: 読み取り専用モードを切り替えます。
+### Events
+```typescript
+board.on('node:select', (nodeId) => {
+  console.log('Selected:', nodeId);
+});
+board.on('node:add', (payload) => {
+  console.log('Added:', payload);
+});
+board.on('model:change', () => {
+  console.log('Data changed');
+});
+```
+## Shortcuts
+### General
+| Key | Description |
+| --- | --- |
+| `Arrow Keys` | ノード間の移動 |
+| `h` / `j` / `k` / `l` | ノード間の移動 (Vim風) |
+| `F2` / `DblClick` | ノードの編集を開始 |
+| `Enter` | 兄弟ノードを追加 (下) |
+| `Shift + Enter` | 兄弟ノードを追加 (上) |
+| `Tab` | 子ノードを追加 |
+| `Shift + Tab` | 親ノードを挿入 |
+| `Delete` / `Backspace` | ノードを削除 |
+| `Ctrl/Cmd + Z` | 元に戻す (Undo) |
+| `Ctrl/Cmd + C` | コピー |
+| `Ctrl/Cmd + X` | 切り取り |
+| `Ctrl/Cmd + V` | 貼り付け (画像も可) |
+| `Drag` (Canvas) | 画面のパン (移動) |
+| `Wheel` | 上下スクロール (パン) |
+| `Shift + Wheel` | 左右スクロール (パン) |
+| `Ctrl/Cmd + Wheel` | ズームイン/アウト |
+### Editing (Text Input)
+| Key | Description |
+| --- | --- |
+| `Enter` | 編集を確定 |
+| `Shift + Enter` | 改行 |
+| `Esc` | 編集をキャンセル |
+### Styling (Since selection)
+| Key | Description |
+| --- | --- |
+| `Ctrl/Cmd + B` | 太字 (Bold) 切り替え |
+| `Ctrl/Cmd + I` | 斜体 (Italic) 切り替え |
+| `+` | フォントサイズ拡大 |
+| `-` | フォントサイズ縮小 |
+| `1` - `7` | ノードの色を変更 (パレット順) |
+## Development
+### Setup
+```bash
+npm install
+```
+### Dev Server
+```bash
+npm run dev
+```
+### Build
+```bash
+npm run build
+```
+### Test
+```bash
+npm test
+```
+### Lint
+```bash
+npm run lint
+```

package/README.md ADDED Viewed

@@ -0,0 +1,211 @@
+[日本語](./README.ja.md)
+# kakidash
+Mindmap Typescript / Javascript Library.
+## Concept
+**"Dash through your thoughts"**
+Kakidash's mission is to **maximize output speed**.
+It is designed to capture every fleeing thought and vast idea without bottlenecks.
+Master the shortcuts and expand your mind map at the speed of thought.
+## Features
+- **Mindmap Creation**: Add nodes, manipulate siblings and child nodes.
+- **Layouts**: Standard (Standard/Both), Left aligned (Left), Right aligned (Right).
+- **Styling**:
+  - Font size adjustment.
+  - Bold (`Bold`), Italic (`Italic`).
+  - Color changes via palette (Style Editor).
+- **Interaction**:
+  - Drag and drop for node movement and reordering.
+  - 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.
+- **For Developers**:
+  - TypeScript support.
+  - Read-only mode.
+  - Event system.
+## Installation
+```bash
+npm install kakidash
+```
+## Usage
+### 1. HTML Preparation
+Prepare a container element (e.g., `div`) to display `kakidash`.
+**Important**: You MUST specify `width` and `height` for the container via CSS.
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Kakidash Demo</title>
+    <style>
+        /* Container size is required */
+        #mindmap-container {
+            width: 100vw;
+            height: 100vh;
+            border: 1px solid #ccc;
+            margin: 0;
+            padding: 0;
+            overflow: hidden; /* Prevent scrolling within container */
+        }
+        body { margin: 0; }
+    </style>
+</head>
+<body>
+    <div id="mindmap-container"></div>
+    <!-- Script Injection Here -->
+</body>
+</html>
+```
+### 2. Loading and Initialization
+#### A. NPM Project (Vite / Webpack etc.)
+```bash
+npm install kakidash
+```
+```typescript
+import { Kakidash } from 'kakidash';
+// Get container
+const container = document.getElementById('mindmap-container');
+// Instantiate
+const board = new Kakidash(container);
+// Add initial data or nodes if needed
+board.addNode(board.getRootId(), 'Hello World');
+```
+#### B. Browser Direct Import (Script Tag / CDN)
+Use the built `umd` file. The library will be exposed under the global variable `window.kakidash`.
+```html
+<!-- Load local built file -->
+<script src="./dist/kakidash.umd.js"></script>
+<!-- Or via CDN (e.g. unpkg) once published -->
+<!-- <script src="https://unpkg.com/kakidash/dist/kakidash.umd.js"></script> -->
+<script>
+    // In UMD build, classes are exported under window.kakidash object
+    const { Kakidash } = window.kakidash;
+    // Initialize
+    const container = document.getElementById('mindmap-container');
+    const board = new Kakidash(container);
+    console.log('Kakidash initialized:', board);
+</script>
+```
+## API Reference
+### 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.
+### Events
+```typescript
+board.on('node:select', (nodeId) => {
+  console.log('Selected:', nodeId);
+});
+board.on('node:add', (payload) => {
+  console.log('Added:', payload);
+});
+board.on('model:change', () => {
+  console.log('Data changed');
+});
+```
+## Shortcuts
+### General
+| Key | Description |
+| --- | --- |
+| `Arrow Keys` | Navigate between nodes |
+| `h` / `j` / `k` / `l` | Navigate between nodes (Vim-style) |
+| `F2` / `DblClick` | Start editing node |
+| `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 + C` | Copy |
+| `Ctrl/Cmd + X` | Cut |
+| `Ctrl/Cmd + V` | Paste (Images supported) |
+| `Drag` (Canvas) | Pan screen |
+| `Wheel` | Vertical scroll (Pan) |
+| `Shift + Wheel` | Horizontal scroll (Pan) |
+| `Ctrl/Cmd + Wheel` | Zoom in/out |
+### Editing (Text Input)
+| Key | Description |
+| --- | --- |
+| `Enter` | Confirm edit |
+| `Shift + Enter` | New line |
+| `Esc` | Cancel edit |
+### Styling (Since selection)
+| Key | Description |
+| --- | --- |
+| `Ctrl/Cmd + B` | Toggle Bold |
+| `Ctrl/Cmd + I` | Toggle Italic |
+| `+` | Increase font size |
+| `-` | Decrease font size |
+| `1` - `7` | Change node color (Palette order) |
+## Development
+### Setup
+```bash
+npm install
+```
+### Dev Server
+```bash
+npm run dev
+```
+### Build
+```bash
+npm run build
+```
+### Test
+```bash
+npm test
+```
+### Lint
+```bash
+npm run lint
+```

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,190 @@
+declare type Direction = 'Up' | 'Down' | 'Left' | 'Right';
+export declare class Kakidash extends TypedEventEmitter<KakidashEventMap> {
+    private mindMap;
+    private service;
+    private renderer;
+    private interactionHandler;
+    private styleEditor;
+    private layoutSwitcher;
+    private layoutMode;
+    private selectedNodeId;
+    private panX;
+    private panY;
+    private targetPanX;
+    private targetPanY;
+    private scale;
+    private isBatching;
+    private animationFrameId;
+    constructor(container: HTMLElement);
+    /**
+     * 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.
+     */
+    addNode(parentId: string, topic?: string, layoutSide?: 'left' | 'right'): Node_2 | null;
+    /**
+     * Adds a sibling node relative to the reference node.
+     * This is a pure data operation.
+     */
+    addSibling(referenceId: string, position?: 'before' | 'after', topic?: string): Node_2 | null;
+    /**
+     * Inserts a parent node above the specified node.
+     * This is a pure data operation.
+     */
+    insertParent(targetId: string, topic?: string): Node_2 | null;
+    /**
+     * Removes a node.
+     * This is a pure data operation.
+     * (Previously removeNode, keeping alias or usage consistent)
+     */
+    deleteNode(nodeId: string): void;
+    /**
+     * 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.
+     */
+    updateNode(nodeId: string, updates: {
+        topic?: string;
+        style?: Partial<NodeStyle>;
+    }): void;
+    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[];
+    setReadOnly(readOnly: boolean): void;
+    destroy(): void;
+    batch(callback: () => void): void;
+    addChildNode(parentId: string): void;
+    addSiblingNode(nodeId: string, position?: 'before' | 'after'): void;
+    insertParentNode(nodeId: string): void;
+    /**
+     * Wrapper for deleteNode that handles selection update (Interaction concern).
+     */
+    removeNode(nodeId: string): void;
+    /**
+     * Helper to ensure sides are locked when modifying Root children in Both mode.
+     * (Kept as private helper for internal use)
+     */
+    private ensureExplicitLayoutSides;
+    moveNode(nodeId: string, targetId: string, position: 'top' | 'bottom' | 'left' | 'right'): void;
+    updateNodeTopic(nodeId: string, topic: string): void;
+    selectNode(nodeId: string | null): void;
+    panBoard(dx: number, dy: number): void;
+    zoomBoard(delta: number, clientX: number, clientY: number): void;
+    resetZoom(): void;
+    copyNode(nodeId: string): void;
+    pasteNode(parentId: string): void;
+    pasteImage(parentId: string, imageData: string): void;
+    cutNode(nodeId: string): void;
+    private render;
+    updateLayout(mode: 'Standard' | 'Left' | 'Right'): void;
+    setLayoutMode(mode: LayoutMode): void;
+    getLayoutMode(): LayoutMode;
+    navigateNode(nodeId: string, direction: Direction): void;
+    getData(): MindMapData;
+    loadData(data: MindMapData): void;
+    getRootId(): string;
+    private getNodeDirection;
+    private startAnimationLoop;
+    private ensureNodeVisible;
+}
+export declare type KakidashEventMap = {
+    '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;
+};
+export declare type LayoutMode = 'Right' | 'Left' | 'Both';
+declare class MindMap {
+    root: Node_2;
+    theme: Theme;
+    constructor(rootNode: Node_2);
+    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;
+    private isDescendant;
+}
+export declare interface MindMapData {
+    nodeData: MindMapNodeData;
+    linkData?: any;
+    theme?: Theme;
+    direction?: number;
+}
+declare interface MindMapNodeData {
+    id: string;
+    topic: string;
+    style?: {
+        fontSize?: string;
+        color?: string;
+        background?: string;
+        fontWeight?: string;
+    };
+    children?: MindMapNodeData[];
+    root?: boolean;
+    expanded?: boolean;
+    parentId?: string;
+    image?: string;
+    layoutSide?: 'left' | 'right';
+}
+declare class Node_2 {
+    id: string;
+    topic: string;
+    children: Node_2[];
+    style: NodeStyle;
+    parentId: string | null;
+    isRoot: boolean;
+    image?: string;
+    layoutSide?: 'left' | 'right';
+    constructor(id: string, topic: string, parentId?: string | null, isRoot?: boolean, image?: string, layoutSide?: 'left' | 'right');
+    addChild(node: Node_2): void;
+    insertChild(node: Node_2, index: number): void;
+    removeChild(nodeId: string): void;
+    updateTopic(topic: string): void;
+}
+declare interface NodeStyle {
+    color?: string;
+    background?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fontStyle?: string;
+}
+declare type Theme = 'default' | 'simple' | 'colorful';
+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;
+    off<K extends keyof EventMap>(event: K, listener: (payload: EventMap[K]) => void): void;
+    removeListener<K extends keyof EventMap>(event: K, listener: (payload: EventMap[K]) => void): void;
+    protected emit<K extends keyof EventMap>(event: K, payload: EventMap[K]): void;
+}
+export { }