wema

Web上に付箋を絵馬のように貼って並べる、フレームワーク非依存のTypeScriptライブラリ。

付箋の作成・編集・自由配置・接続線描画を提供する。1ファイルで完結するスタンドアロンHTML版もあり、ブラウザで開くだけで使える。

デモを試す

使い方

スタンドアロン版（最も簡単）

デモページでそのまま使うか、Releases から wema.html をダウンロードしてブラウザで開く。

• 付箋の追加・編集・ドラッグ移動・リサイズ・削除
• 接続線（Edge）の作成・スタイル編集
• 接続線を空白にドロップ → そこに新しい付箋を自動作成して接続
• 部分木の折り畳み → 付箋にカーソルを乗せると折り畳みボタン（−）が出現。クリックで全ての接続先とその子孫を一括非表示。数字バッジをクリックで再展開
• リッチテキスト（太字、テキスト色、箇条書き、チェックボックス、リンク、画像、Embed）
• 複数選択・整列・均等配置・自動レイアウト
• Undo/Redo（Ctrl+Z / Ctrl+Y）
• autoSize モード（コンテンツに合わせて付箋サイズを自動調整）
• 5色のカラーパレット
• IndexedDB による自動保存
• JSON エクスポート/インポート

npm パッケージ

npm install @kanf/wema

import { WemaBoard } from '@kanf/wema';
import '@kanf/wema/style.css';

const board = new WemaBoard({
  container: document.getElementById('board'),
});

// 付箋を追加
const note = board.addNote({ x: 100, y: 80, text: 'Hello!' });

// 接続線を追加
const note2 = board.addNote({ x: 400, y: 80, text: 'World!' });
board.addEdge(note.id, note2.id);

// データをエクスポート
const data = board.exportData();

// イベントを購読
board.on('change', ({ data }) => {
  console.log('Board changed:', data);
});

API

WemaBoard

const board = new WemaBoard({
  container: HTMLElement,       // マウント先
  data?: WemaBoardData,        // 初期データ
  defaultNoteWidth?: number,   // default: 200
  defaultNoteHeight?: number,  // default: 150
  defaultNoteColor?: string,   // default: '#FFF9C4'
  createOnDblClick?: boolean,  // default: true
  readOnly?: boolean,          // default: false
  viewOnly?: boolean,          // default: false
  theme?: NoteTheme,           // default: 'default' ('default' | 'card')
});

付箋

| メソッド | 説明 | |---------|------| | addNote(params?) | 付箋を追加 | | updateNote(id, params) | 付箋を更新 | | deleteNote(id) | 付箋を削除 | | getNote(id) | IDで取得 | | getNotes() | 全付箋を取得 |

接続線（Edge）

| メソッド | 説明 | |---------|------| | addEdge(from, to, params?) | 接続線を追加 | | updateEdge(id, params) | 接続線を更新（線種・矢印・太さ・折り畳み等） | | deleteEdge(id) | 接続線を削除 | | getEdges() | 全接続線を取得 | | getEdgesOf(noteId) | 指定付箋に接続された線を取得 | | getSelectedEdge() | 選択中の接続線IDを取得 |

選択

| メソッド | 説明 | |---------|------| | select(noteIds) | 付箋を選択 | | selectAll() | 全選択 | | getSelection() | 選択中のIDを取得 |

レイアウト・整列

| メソッド | 説明 | |---------|------| | alignNotes(noteIds, alignment) | 付箋を整列（left/center/right/top/middle/bottom） | | distributeNotes(noteIds, direction) | 付箋を均等配置（horizontal/vertical） | | autoLayout(noteIds?) | 自動レイアウト（BFS階層） |

Undo/Redo

| メソッド | 説明 | |---------|------| | undo() | 元に戻す | | redo() | やり直す | | canUndo() | undo可能か | | canRedo() | redo可能か |

状態管理

| メソッド | 説明 | |---------|------| | setReadOnly(readOnly) | 読み取り専用モードを設定 | | isReadOnly() | 読み取り専用か | | setViewOnly(viewOnly) | 閲覧専用モードを設定（UIも非表示） | | isViewOnly() | 閲覧専用か | | setTheme(theme) | テーマを設定（'default' / 'card'） | | getTheme() | 現在のテーマを取得 |

データ入出力

| メソッド | 説明 | |---------|------| | exportData() | ボードデータをオブジェクトで返す | | importData(data) | データを読み込み（現在の内容を置換） |

イベント

| イベント | ペイロード | |---------|-----------| | note:create | { note } | | note:update | { note, prev } | | note:delete | { note } | | note:select | { noteIds } | | edge:create | { edge } | | edge:update | { edge, prev } | | edge:delete | { edge } | | readOnly:change | { readOnly } | | viewOnly:change | { viewOnly } | | history:change | { canUndo, canRedo } | | change | { data } |

board.on('change', ({ data }) => { /* ... */ });
board.off('change', handler);

モード

ロックモード（readOnly）

付箋の作成・編集・移動・削除、接続線の操作をすべて禁止する。付箋の閲覧と選択は可能。

const board = new WemaBoard({ container, readOnly: true });
// または実行時に切り替え
board.setReadOnly(true);
board.setReadOnly(false);

スタンドアロン版では 🔒 ボタン（Ctrl+L）で切替。状態はリロード後も保持される。

参照モード（viewOnly）

アンカー・リサイズハンドル・ポップアップなど編集 UI をすべて非表示にする。ロックモードより表示がクリーンで、ボードを「見せる」用途に向く。

const board = new WemaBoard({ container, viewOnly: true });
// または実行時に切り替え
board.setViewOnly(true);
board.setViewOnly(false);

参照モード中も可能な操作（一時的・データは変更されない）:

• 付箋のドラッグ移動 — モード終了時に元の位置に戻る
• 部分木の折り畳み/展開 — モード終了時に元の状態に戻る

スタンドアロン版では 👁 ボタン（Ctrl+Shift+L）で切替。状態はリロード後も保持される。

モード比較

| 操作 | 通常 | ロック | 参照 | |------|:----:|:------:|:----:| | 付箋の閲覧 | ✓ | ✓ | ✓ | | 付箋の移動 | ✓ | ✗ | ✓（一時的） | | 付箋の編集 | ✓ | ✗ | ✗ | | 付箋の追加・削除 | ✓ | ✗ | ✗ | | 接続線の操作 | ✓ | ✗ | ✗ | | 折り畳み/展開 | ✓ | ✗ | ✓（一時的） | | Undo/Redo | ✓ | ✗ | ✗ |

データモデル

interface WemaNote {
  id: string;
  x: number; y: number;
  width: number; height: number;
  text: string;         // HTML文字列
  color: string;
  zIndex: number;
  autoSize?: boolean;   // コンテンツに合わせてサイズ自動調整
}

interface WemaEdge {
  id: string;
  from: string; to: string;
  fromAnchor: 'top' | 'right' | 'bottom' | 'left' | 'auto';
  toAnchor:   'top' | 'right' | 'bottom' | 'left' | 'auto';
  style: 'arrow' | 'line' | 'dashed';
  lineStyle?: 'solid' | 'dashed' | 'dotted';
  arrowHead?: 'none' | 'start' | 'end' | 'both';
  strokeWidth?: number;
  arrowSize?: number;
  routing?: 'curve' | 'polyline';
  label?: string;
  collapsed?: boolean;  // true のとき接続先の部分木を非表示
}

CSS カスタマイズ

CSS変数でスタイルを調整できる:

.wema-board {
  --wema-note-border-radius: 4px;
  --wema-note-shadow: 0 2px 8px rgba(0,0,0,0.15);
  --wema-note-font-size: 14px;
  --wema-note-color-text: #333;
  --wema-anchor-size: 12px;
  --wema-anchor-color: #4A90D9;
  --wema-edge-color: #555;
  --wema-edge-width: 2px;
}

開発

npm install          # 依存インストール
npm run dev          # 開発サーバー (HMR)
npm run build        # ビルド (dist/)
npm test             # テスト
npm run lint         # 型チェック

ライセンス

MIT