@mogura/moguchart-react 1.3.1 → 1.5.0

package/README.ja.md

@@ -11,7 +11,10 @@ Lit 公式の `@lit/react` をベースに設計されており、Web Components
 - ⚛️ **ネイティブな React 開発体験**: JSX で直感的にプロパティ・イベントハンドラーを記述可能
 - 🎯 **完全な型補完**: TypeScript による強力な型推論と自動補完
 - 🔄 **ライフサイクル同期**: React の状態変更（State / Props）と Web Components のレンダリングを自動同期
-- ⚡ **命令的メソッドへのアクセス**: `ref` を介して `chart.use()`, `chart.exportImage()`, `chart.selectTask()` などを直接呼び出し可能
+- ⚡ **命令的メソッドへのアクセス**: `ref` を介して `chart.use()`, `chart.exportImage()`, `chart.exportExcel()`, `chart.selectTask()` などを直接呼び出し可能
+- 🔌 **プラグイン連携**: `@mogura/moguchart-plugin-export` (PNG/PDF) や `@mogura/moguchart-plugin-excel` (Excel) などの公式プラグインをシームレスに利用可能
+- 📈 **予実管理 (Baseline) 対応**: `task.baseline` と `option.baseline` による計画 vs 実績の同時可視化と遅延検知に対応
+- 📋 **マルチカラムデータグリッド ＆ インライン編集**: `option.grid` による複数列WBSテーブル表示・列幅リサイズ・セル直接編集（`onCellEdit`, `onColumnResize`）に対応
 - 📦 **Re-export**: `@mogura/moguchart-core` の型定義や定数をすべて再エクスポートしているため、本パッケージのみのインストールで開発可能
 
 ---
@@ -126,16 +129,90 @@ export function GanttToolbar() {
       <button onClick={() => chartRef.current?.zoomIn()}>ズームイン</button>
       <button onClick={() => chartRef.current?.zoomOut()}>ズームアウト</button>
       <button onClick={() => chartRef.current?.resetZoom()}>ズームリセット</button>
+      <button onClick={() => chartRef.current?.scrollToTask('task-1')}>タスクへ移動</button>
       <GanttChart ref={chartRef} rows={[]} />
     </div>
   )
 }
 ```
 
+### 利用可能な主なメソッド・プロパティ
+
+`ref.current` 経由で以下のメソッドを直接呼び出すことができます：
+
+- **操作履歴 (Undo / Redo)**: `undo()`, `redo()`, `clearHistory()`, `recordCommand(cmd)`, `canUndo`, `canRedo`
+- **ズーム操作**: `zoomIn()`, `zoomOut()`, `zoomToPercent(percent)`, `zoomToScale(scale)`, `resetZoom()`, `zoomToFit()`, `getZoomPercent()`, `getZoomScale()`
+- **スクロール・選択**: `scrollToTask(taskId)`, `scrollToPosition(pos)`, `resetScroll()`, `selectTask(taskId)`
+- **WBS・折りたたみ**: `toggleRowCollapse(rowId, collapsed?)`, `collapseAll()`, `expandAll()`, `getRowPositions()`
+- **グリッド・インラインセル編集**: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()`
+- **依存関係操作**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `selectDependency(...)`, `clearDependencySelection()`
+- **画像・PDFエクスポート**: `exportImage(format, options)`（`@mogura/moguchart-plugin-export` 導入時）
+- **Excelエクスポート**: `exportExcel(options)`（`@mogura/moguchart-plugin-excel` 導入時）
+
+---
+
+## 予実管理（Baseline / 計画 vs 実績の可視化）
+
+タスクに当初計画（`baseline`）を定義し、`option.baseline` を設定することで、計画日程と現在の実績日程を同一レーン上に同時描画・比較できます。遅延タスク（`task.end > baseline.end`）は視覚的にハイライトされ、ツールチップに遅延日数などが自動表示されます。
+
+```tsx
+import React, { useState } from 'react'
+import {
+  GanttChart,
+  type GanttRow,
+  type GanttChartOption,
+} from '@mogura/moguchart-react'
+
+export function BaselineGanttView() {
+  const [rows] = useState<GanttRow[]>([
+    {
+      id: 'row-1',
+      name: '開発フェーズ',
+      tasks: [
+        {
+          id: 'task-1',
+          name: 'コア機能実装',
+          start: new Date('2026-04-05'),
+          end: new Date('2026-04-18'), // 当初予定より遅延
+          progress: 60,
+          baseline: {
+            start: new Date('2026-04-01'),
+            end: new Date('2026-04-12'),
+            progress: 100,
+          },
+        },
+      ],
+    },
+  ])
+
+  const option: GanttChartOption = {
+    calendar: {
+      start: new Date('2026-04-01'),
+      end: new Date('2026-04-30'),
+      pxPerDay: 40,
+    },
+    baseline: {
+      enabled: true,          // ベースライン表示を有効化
+      position: 'bottom',     // 'bottom' (下部) | 'top' (上部) | 'overlay' (重ねて表示)
+      highlightDelay: true,   // 遅延タスクをハイライト強調
+      delayColor: '#EF4444',  // 遅延強調アクセント色
+    },
+  }
+
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <GanttChart rows={rows} option={option} />
+    </div>
+  )
+}
+```
+
 ---
 
 ## プラグイン（エクスポート機能）との連携
 
+### PNG / PDF エクスポート (`@mogura/moguchart-plugin-export`)
+
 PNG や PDF のエクスポートを行う場合は、`@mogura/moguchart-plugin-export` を組み合わせます。
 
 ```tsx
@@ -164,9 +241,60 @@ export function ExportableGantt() {
     }
   }
 
+  const handleExportPdf = async () => {
+    if (chartRef.current) {
+      await chartRef.current.exportImage('pdf', {
+        filename: 'my-schedule',
+        download: true,
+      })
+    }
+  }
+
   return (
     <div>
       <button onClick={handleExportPng}>PNGダウンロード</button>
+      <button onClick={handleExportPdf}>PDFダウンロード</button>
+      <GanttChart ref={chartRef} rows={[]} option={option} />
+    </div>
+  )
+}
+```
+
+### Excel (.xlsx) タイムライン工程表エクスポート (`@mogura/moguchart-plugin-excel`)
+
+```tsx
+import React, { useRef } from 'react'
+import { GanttChart, type GanttChartElement, type GanttChartOption } from '@mogura/moguchart-react'
+import { excelPlugin } from '@mogura/moguchart-plugin-excel'
+
+export function ExcelExportGantt() {
+  const chartRef = useRef<GanttChartElement>(null)
+
+  const option: GanttChartOption = {
+    calendar: {
+      start: new Date('2026-04-01'),
+      end: new Date('2026-04-30'),
+    },
+    plugins: [excelPlugin({
+      defaultFilename: 'プロジェクト工程表.xlsx',
+      defaultSheetName: '工程表',
+      themeColor: '#3B82F6',
+    })],
+  }
+
+  const handleExportExcel = async () => {
+    if (chartRef.current) {
+      await chartRef.current.exportExcel({
+        filename: '工程表_最新.xlsx',
+        locale: 'ja', // 'ja' | 'en' | 'zh'
+        download: true,
+      })
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={handleExportExcel}>Excel工程表ダウンロード</button>
       <GanttChart ref={chartRef} rows={[]} option={option} />
     </div>
   )
@@ -177,37 +305,42 @@ export function ExportableGantt() {
 
 ## サポートされているイベント
 
-| Prop 名 | 説明 |
-|---|---|
-| `onTaskUpdate` | タスクのドラッグ移動やリサイズ完了時 |
-| `onTaskClick` | タスククリック時 |
-| `onTaskDblClick` | タスクダブルクリック時 |
-| `onTaskContextMenu` | タスク右クリック（コンテキストメニュー）時 |
-| `onTaskDelete` | タスク削除時 |
-| `onTaskDrop` | タスクを行間等にドロップした時 |
-| `onTaskProgressChange` | 進捗率変更時 |
-| `onBarHover` | タスクバーホバー時 |
-| `onBarSelectionChange` | タスク選択状態の変更時 |
-| `onRowHeaderClick` | 行ヘッダークリック時 |
-| `onRowHeaderDblClick` | 行ヘッダーダブルクリック時 |
-| `onRowHeaderContextMenu` | 行ヘッダー右クリック時 |
-| `onRowHeaderResize` | 行ヘッダーリサイズ時 |
-| `onRowReordered` | 行の並び順変更時 |
-| `onRowSelectionChange` | 行選択状態の変更時 |
-| `onRowToggleCollapse` | 行の開閉時（WBS） |
-| `onDependencyCreate` | 依存関係（リンク）作成時 |
-| `onDependencyClick` | 依存関係クリック時 |
-| `onDependencySelect` | 依存関係の選択状態変更時（ハイライト・削除ボタン表示） |
-| `onDependencyDelete` | 依存関係削除時 |
-| `onMarkerDblClick` | マーカーダブルクリック時 |
-| `onMarkerContextMenu` | マーカー右クリック時 |
-| `onZoomChange` | ズーム倍率変更時 |
-| `onCommand` | 操作コマンド実行時（Undo / Redo 対象の操作完了時） |
-| `onHistoryChange` | 履歴スタック変更時（Undo / Redo 可否状態の更新時） |
-| `onMinimapMove` | ミニマップスクロール時 |
-| `onMinimapResize` | ミニマップリサイズ時 |
-| `onMinimapCollapse` | ミニマップ折りたたみ時 |
-| `onChartContextMenu` | チャート背景右クリック時 |
+React では標準のイベント Props としてキャメルケース（`onTaskUpdate` 等）で購読できます：
+
+| Prop 名 | 説明 | イベント引数型 |
+|---|---|---|
+| `onTaskUpdate` | タスクのドラッグ移動やリサイズ完了時 | `CustomEvent<TaskUpdateEventDetail>` |
+| `onTaskClick` | タスククリック時 | `CustomEvent<TaskClickEventDetail>` |
+| `onTaskDblClick` | タスクダブルクリック時 | `CustomEvent<TaskClickEventDetail>` |
+| `onTaskContextMenu` | タスク右クリック（コンテキストメニュー）時 | `CustomEvent<TaskContextMenuEventDetail>` |
+| `onTaskDelete` | タスク削除時 | `CustomEvent<TaskDeleteEventDetail>` |
+| `onTaskDrop` | タスクを行間等にドロップした時 | `CustomEvent<TaskDropEventDetail>` |
+| `onTaskProgressChange` | 進捗率変更時 | `CustomEvent<TaskProgressChangeEventDetail>` |
+| `onBarHover` | タスクバーホバー時 | `CustomEvent<BarHoverEventDetail>` |
+| `onBarSelectionChange` | タスク選択状態の変更時 | `CustomEvent<BarSelectionChangeEventDetail>` |
+| `onRowHeaderClick` | 行ヘッダークリック時 | `CustomEvent<RowHeaderClickEventDetail>` |
+| `onRowHeaderDblClick` | 行ヘッダーダブルクリック時（`contentTarget` で行名要素を参照可能） | `CustomEvent<RowHeaderDblClickEventDetail>` |
+| `onRowHeaderContextMenu` | 行ヘッダー右クリック時 | `CustomEvent<RowHeaderContextMenuEventDetail>` |
+| `onRowHeaderResize` | 行ヘッダーリサイズ時 | `CustomEvent<RowHeaderResizeEventDetail>` |
+| `onColumnResize` | マルチカラムグリッドの列幅リサイズ時 | `CustomEvent<ColumnResizeEventDetail>` |
+| `onCellEdit` | マルチカラムグリッドのインラインセル編集確定時 | `CustomEvent<CellEditEventDetail>` |
+| `onRowsChange` | 行データ変更時 | `CustomEvent<RowsChangeEventDetail>` |
+| `onRowReordered` | 行の並び順変更時 | `CustomEvent<RowReorderEventDetail>` |
+| `onRowSelectionChange` | 行選択状態の変更時 | `CustomEvent<RowSelectionChangeEventDetail>` |
+| `onRowToggleCollapse` | 行の開閉時（WBS） | `CustomEvent<RowToggleCollapseEventDetail>` |
+| `onDependencyCreate` | 依存関係（リンク）作成時 | `CustomEvent<DependencyCreateEventDetail>` |
+| `onDependencyClick` | 依存関係クリック時 | `CustomEvent<DependencyClickEventDetail>` |
+| `onDependencySelect` | 依存関係の選択状態変更時（ハイライト・削除ボタン表示） | `CustomEvent<DependencySelectEventDetail>` |
+| `onDependencyDelete` | 依存関係削除時 | `CustomEvent<DependencyDeleteEventDetail>` |
+| `onMarkerDblClick` | マーカーダブルクリック時 | `CustomEvent<MarkerDblClickEventDetail>` |
+| `onMarkerContextMenu` | マーカー右クリック時 | `CustomEvent<MarkerContextMenuEventDetail>` |
+| `onZoomChange` | ズーム倍率変更時 | `CustomEvent<ZoomChangeEventDetail>` |
+| `onCommand` | 操作コマンド実行時（Undo / Redo 対象の操作完了時） | `CustomEvent<CommandEventDetail>` |
+| `onHistoryChange` | 履歴スタック変更時（Undo / Redo 可否状態の更新時） | `CustomEvent<HistoryChangeEventDetail>` |
+| `onMinimapMove` | ミニマップスクロール時 | `CustomEvent<MinimapMoveEventDetail>` |
+| `onMinimapResize` | ミニマップリサイズ時 | `CustomEvent<MinimapResizeEventDetail>` |
+| `onMinimapCollapse` | ミニマップ折りたたみ時 | `CustomEvent<MinimapCollapseEventDetail>` |
+| `onChartContextMenu` | チャート背景右クリック時 | `CustomEvent<ChartContextMenuEventDetail>` |
 
 ---
 

package/README.md

@@ -13,7 +13,10 @@ Built on top of Lit's official `@lit/react`, it combines the high performance an
 - ⚛️ **Native React Experience**: Declarative JSX props and event handlers
 - 🎯 **Full Type Safety**: Complete TypeScript auto-completion for props and events
 - 🔄 **Lifecycle Synchronization**: Automatic synchronization between React state/props and Web Component rendering
-- ⚡ **Imperative API Access**: Directly access methods like `chart.use()`, `chart.exportImage()`, `chart.selectTask()` via `ref`
+- ⚡ **Imperative API Access**: Directly access methods like `chart.use()`, `chart.exportImage()`, `chart.exportExcel()`, `chart.selectTask()` via `ref`
+- 🔌 **Plugin Support**: Seamless integration with `@mogura/moguchart-plugin-export` (PNG/PDF) and `@mogura/moguchart-plugin-excel` (Excel)
+- 📈 **Baseline & Delay Tracking**: Compare planned schedules (`task.baseline`) against actual timelines with automatic delay highlighting and variance tooltips
+- 📋 **Multi-Column Data Grid & Inline Editing**: WBS data table (`option.grid`) with column resizing and inline cell editing (`onCellEdit`, `onColumnResize`)
 - 📦 **Re-exported Types**: Core types, constants, and utilities are all re-exported from this package
 
 ---
@@ -128,15 +131,89 @@ export function GanttToolbar() {
       <button onClick={() => chartRef.current?.zoomIn()}>Zoom In</button>
       <button onClick={() => chartRef.current?.zoomOut()}>Zoom Out</button>
       <button onClick={() => chartRef.current?.resetZoom()}>Reset Zoom</button>
+      <button onClick={() => chartRef.current?.scrollToTask('task-1')}>Scroll to Task</button>
       <GanttChart ref={chartRef} rows={[]} />
     </div>
   )
 }
 ```
 
+### Available Methods & Properties
+
+The following methods can be invoked directly on `ref.current`:
+
+- **Operation History (Undo / Redo)**: `undo()`, `redo()`, `clearHistory()`, `recordCommand(cmd)`, `canUndo`, `canRedo`
+- **Zoom Operations**: `zoomIn()`, `zoomOut()`, `zoomToPercent(percent)`, `zoomToScale(scale)`, `resetZoom()`, `zoomToFit()`, `getZoomPercent()`, `getZoomScale()`
+- **Scroll & Selection**: `scrollToTask(taskId)`, `scrollToPosition(pos)`, `resetScroll()`, `selectTask(taskId)`
+- **WBS & Collapse**: `toggleRowCollapse(rowId, collapsed?)`, `collapseAll()`, `expandAll()`, `getRowPositions()`
+- **Grid & Inline Cell Editing**: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()`
+- **Dependency Operations**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `selectDependency(...)`, `clearDependencySelection()`
+- **Image & PDF Export**: `exportImage(format, options)` (with `@mogura/moguchart-plugin-export`)
+- **Excel Export**: `exportExcel(options)` (with `@mogura/moguchart-plugin-excel`)
+
 ---
 
-## Using with Plugins (e.g. Export)
+## Baseline & Schedule Variance Tracking (Plan vs. Actual)
+
+Provide a baseline schedule on tasks (`task.baseline`) and configure `option.baseline` to visually compare planned timelines against current actual progress. Delayed tasks (`task.end > baseline.end`) are automatically highlighted with accent indicator lines and detailed variance tooltips.
+
+```tsx
+import React, { useState } from 'react'
+import {
+  GanttChart,
+  type GanttRow,
+  type GanttChartOption,
+} from '@mogura/moguchart-react'
+
+export function BaselineGanttView() {
+  const [rows] = useState<GanttRow[]>([
+    {
+      id: 'row-1',
+      name: 'Development Phase',
+      tasks: [
+        {
+          id: 'task-1',
+          name: 'Core Features',
+          start: new Date('2026-04-05'),
+          end: new Date('2026-04-18'), // Delayed beyond original plan
+          progress: 60,
+          baseline: {
+            start: new Date('2026-04-01'),
+            end: new Date('2026-04-12'),
+            progress: 100,
+          },
+        },
+      ],
+    },
+  ])
+
+  const option: GanttChartOption = {
+    calendar: {
+      start: new Date('2026-04-01'),
+      end: new Date('2026-04-30'),
+      pxPerDay: 40,
+    },
+    baseline: {
+      enabled: true,          // Enable baseline rendering
+      position: 'bottom',     // 'bottom' | 'top' | 'overlay'
+      highlightDelay: true,   // Visually highlight delayed tasks
+      delayColor: '#EF4444',  // Custom accent color for delay indicators
+    },
+  }
+
+  return (
+    <div style={{ width: '100%', height: '500px' }}>
+      <GanttChart rows={rows} option={option} />
+    </div>
+  )
+}
+```
+
+---
+
+## Using with Plugins (Export, Excel, etc.)
+
+### PNG / PDF Export (`@mogura/moguchart-plugin-export`)
 
 To export charts as PNG or PDF, pair with `@mogura/moguchart-plugin-export`:
 
@@ -166,9 +243,60 @@ export function ExportableGantt() {
     }
   }
 
+  const handleExportPdf = async () => {
+    if (chartRef.current) {
+      await chartRef.current.exportImage('pdf', {
+        filename: 'my-schedule',
+        download: true,
+      })
+    }
+  }
+
   return (
     <div>
       <button onClick={handleExportPng}>Download PNG</button>
+      <button onClick={handleExportPdf}>Download PDF</button>
+      <GanttChart ref={chartRef} rows={[]} option={option} />
+    </div>
+  )
+}
+```
+
+### Excel (.xlsx) Timeline Spreadsheet Export (`@mogura/moguchart-plugin-excel`)
+
+```tsx
+import React, { useRef } from 'react'
+import { GanttChart, type GanttChartElement, type GanttChartOption } from '@mogura/moguchart-react'
+import { excelPlugin } from '@mogura/moguchart-plugin-excel'
+
+export function ExcelExportGantt() {
+  const chartRef = useRef<GanttChartElement>(null)
+
+  const option: GanttChartOption = {
+    calendar: {
+      start: new Date('2026-04-01'),
+      end: new Date('2026-04-30'),
+    },
+    plugins: [excelPlugin({
+      defaultFilename: 'project-schedule.xlsx',
+      defaultSheetName: 'Schedule',
+      themeColor: '#3B82F6',
+    })],
+  }
+
+  const handleExportExcel = async () => {
+    if (chartRef.current) {
+      await chartRef.current.exportExcel({
+        filename: 'schedule-latest.xlsx',
+        locale: 'en', // 'en' | 'ja' | 'zh'
+        download: true,
+      })
+    }
+  }
+
+  return (
+    <div>
+      <button onClick={handleExportExcel}>Download Excel Schedule</button>
       <GanttChart ref={chartRef} rows={[]} option={option} />
     </div>
   )
@@ -179,37 +307,42 @@ export function ExportableGantt() {
 
 ## Supported Events
 
-| Prop | Description |
-|---|---|
-| `onTaskUpdate` | Fired when a task is moved or resized |
-| `onTaskClick` | Fired when a task is clicked |
-| `onTaskDblClick` | Fired when a task is double-clicked |
-| `onTaskContextMenu` | Fired on task right-click |
-| `onTaskDelete` | Fired when a task is deleted |
-| `onTaskDrop` | Fired when a task is dropped |
-| `onTaskProgressChange` | Fired when task progress percentage changes |
-| `onBarHover` | Fired when a task bar is hovered |
-| `onBarSelectionChange` | Fired when task bar selection changes |
-| `onRowHeaderClick` | Fired when a row header is clicked |
-| `onRowHeaderDblClick` | Fired when a row header is double-clicked |
-| `onRowHeaderContextMenu` | Fired on row header right-click |
-| `onRowHeaderResize` | Fired when a row header is resized |
-| `onRowReordered` | Fired when rows are reordered |
-| `onRowSelectionChange` | Fired when row selection changes |
-| `onRowToggleCollapse` | Fired when a row is expanded or collapsed (WBS) |
-| `onDependencyCreate` | Fired when a dependency link is created |
-| `onDependencyClick` | Fired when a dependency link is clicked |
-| `onDependencySelect` | Fired when dependency selection changes (highlight / delete button shown) |
-| `onDependencyDelete` | Fired when a dependency link is deleted |
-| `onMarkerDblClick` | Fired when a marker is double-clicked |
-| `onMarkerContextMenu` | Fired on marker right-click |
-| `onZoomChange` | Fired when zoom scale changes |
-| `onCommand` | Fired when a command is executed (tracked for Undo/Redo) |
-| `onHistoryChange` | Fired when history stack changes (`canUndo`/`canRedo` updated) |
-| `onMinimapMove` | Fired when minimap viewport scrolls |
-| `onMinimapResize` | Minimap is resized |
-| `onMinimapCollapse` | Minimap is collapsed or expanded |
-| `onChartContextMenu` | Fired on chart background right-click |
+Events dispatched by `@mogura/moguchart-core` can be listened to via standard camelCase React props:
+
+| Prop | Description | Event Argument Type |
+|---|---|---|
+| `onTaskUpdate` | Fired when a task is moved or resized | `CustomEvent<TaskUpdateEventDetail>` |
+| `onTaskClick` | Fired when a task is clicked | `CustomEvent<TaskClickEventDetail>` |
+| `onTaskDblClick` | Fired when a task is double-clicked | `CustomEvent<TaskClickEventDetail>` |
+| `onTaskContextMenu` | Fired on task right-click | `CustomEvent<TaskContextMenuEventDetail>` |
+| `onTaskDelete` | Fired when a task is deleted | `CustomEvent<TaskDeleteEventDetail>` |
+| `onTaskDrop` | Fired when a task is dropped | `CustomEvent<TaskDropEventDetail>` |
+| `onTaskProgressChange` | Fired when task progress percentage changes | `CustomEvent<TaskProgressChangeEventDetail>` |
+| `onBarHover` | Fired when a task bar is hovered | `CustomEvent<BarHoverEventDetail>` |
+| `onBarSelectionChange` | Fired when task bar selection changes | `CustomEvent<BarSelectionChangeEventDetail>` |
+| `onRowHeaderClick` | Fired when a row header is clicked | `CustomEvent<RowHeaderClickEventDetail>` |
+| `onRowHeaderDblClick` | Fired when a row header is double-clicked (`contentTarget` exposes row name container) | `CustomEvent<RowHeaderDblClickEventDetail>` |
+| `onRowHeaderContextMenu` | Fired on row header right-click | `CustomEvent<RowHeaderContextMenuEventDetail>` |
+| `onRowHeaderResize` | Fired when a row header is resized | `CustomEvent<RowHeaderResizeEventDetail>` |
+| `onColumnResize` | Fired when a grid column is resized | `CustomEvent<ColumnResizeEventDetail>` |
+| `onCellEdit` | Fired when an inline grid cell edit is committed | `CustomEvent<CellEditEventDetail>` |
+| `onRowsChange` | Fired when row data changes | `CustomEvent<RowsChangeEventDetail>` |
+| `onRowReordered` | Fired when rows are reordered | `CustomEvent<RowReorderEventDetail>` |
+| `onRowSelectionChange` | Fired when row selection changes | `CustomEvent<RowSelectionChangeEventDetail>` |
+| `onRowToggleCollapse` | Fired when a row is expanded or collapsed (WBS) | `CustomEvent<RowToggleCollapseEventDetail>` |
+| `onDependencyCreate` | Fired when a dependency link is created | `CustomEvent<DependencyCreateEventDetail>` |
+| `onDependencyClick` | Fired when a dependency link is clicked | `CustomEvent<DependencyClickEventDetail>` |
+| `onDependencySelect` | Fired when dependency selection changes (highlight / delete button shown) | `CustomEvent<DependencySelectEventDetail>` |
+| `onDependencyDelete` | Fired when a dependency link is deleted | `CustomEvent<DependencyDeleteEventDetail>` |
+| `onMarkerDblClick` | Fired when a marker is double-clicked | `CustomEvent<MarkerDblClickEventDetail>` |
+| `onMarkerContextMenu` | Fired on marker right-click | `CustomEvent<MarkerContextMenuEventDetail>` |
+| `onZoomChange` | Fired when zoom scale changes | `CustomEvent<ZoomChangeEventDetail>` |
+| `onCommand` | Fired when a command is executed (tracked for Undo/Redo) | `CustomEvent<CommandEventDetail>` |
+| `onHistoryChange` | Fired when history stack changes (`canUndo`/`canRedo` updated) | `CustomEvent<HistoryChangeEventDetail>` |
+| `onMinimapMove` | Fired when minimap viewport scrolls | `CustomEvent<MinimapMoveEventDetail>` |
+| `onMinimapResize` | Minimap is resized | `CustomEvent<MinimapResizeEventDetail>` |
+| `onMinimapCollapse` | Minimap is collapsed or expanded | `CustomEvent<MinimapCollapseEventDetail>` |
+| `onChartContextMenu` | Fired on chart background right-click | `CustomEvent<ChartContextMenuEventDetail>` |
 
 ---
 

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type EventName } from '@lit/react';
-import { GanttChartElement, type ChartContextMenuEventDetail, type MinimapMoveEventDetail, type MinimapResizeEventDetail, type MinimapCollapseEventDetail, type TaskUpdateEventDetail, type BarHoverEventDetail, type TaskClickEventDetail, type TaskContextMenuEventDetail, type TaskDropEventDetail, type RowReorderEventDetail, type RowHeaderResizeEventDetail, type RowSelectionChangeEventDetail, type BarSelectionChangeEventDetail, type RowHeaderClickEventDetail, type RowHeaderDblClickEventDetail, type RowHeaderContextMenuEventDetail, type RowToggleCollapseEventDetail, type DependencyCreateEventDetail, type DependencyClickEventDetail, type DependencyDeleteEventDetail, type DependencySelectEventDetail, type MarkerDblClickEventDetail, type MarkerContextMenuEventDetail, type TaskDeleteEventDetail, type ZoomChangeEventDetail, type TaskProgressChangeEventDetail, type CommandEventDetail, type HistoryChangeEventDetail } from '@mogura/moguchart-core';
+import { GanttChartElement, type ChartContextMenuEventDetail, type MinimapMoveEventDetail, type MinimapResizeEventDetail, type MinimapCollapseEventDetail, type TaskUpdateEventDetail, type BarHoverEventDetail, type TaskClickEventDetail, type TaskContextMenuEventDetail, type TaskDropEventDetail, type RowReorderEventDetail, type RowHeaderResizeEventDetail, type RowSelectionChangeEventDetail, type BarSelectionChangeEventDetail, type RowHeaderClickEventDetail, type RowHeaderDblClickEventDetail, type RowHeaderContextMenuEventDetail, type RowToggleCollapseEventDetail, type DependencyCreateEventDetail, type DependencyClickEventDetail, type DependencyDeleteEventDetail, type DependencySelectEventDetail, type MarkerDblClickEventDetail, type MarkerContextMenuEventDetail, type TaskDeleteEventDetail, type ZoomChangeEventDetail, type TaskProgressChangeEventDetail, type CommandEventDetail, type HistoryChangeEventDetail, type ColumnResizeEventDetail, type CellEditEventDetail, type RowsChangeEventDetail } from '@mogura/moguchart-core';
 /**
  * @mogura/moguchart-core の GanttChartElement をラップした React コンポーネント。
  * Web Components のライフサイクルと完全同期し、React のプロパティやイベントハンドラー、ref をサポートします。
@@ -35,6 +35,9 @@ export declare const GanttChart: import("@lit/react").ReactWebComponent<GanttCha
     onTaskProgressChange: EventName<CustomEvent<TaskProgressChangeEventDetail>>;
     onCommand: EventName<CustomEvent<CommandEventDetail>>;
     onHistoryChange: EventName<CustomEvent<HistoryChangeEventDetail>>;
+    onColumnResize: EventName<CustomEvent<ColumnResizeEventDetail>>;
+    onCellEdit: EventName<CustomEvent<CellEditEventDetail>>;
+    onRowsChange: EventName<CustomEvent<RowsChangeEventDetail>>;
 }>;
 /** GanttChart コンポーネントの Props 型定義 */
 export type GanttChartProps = React.ComponentProps<typeof GanttChart>;

package/dist/moguchart-react.mjs

@@ -36,7 +36,10 @@ var r = t({
 		onZoomChange: "zoom-change",
 		onTaskProgressChange: "task-progress-change",
 		onCommand: "command",
-		onHistoryChange: "history-change"
+		onHistoryChange: "history-change",
+		onColumnResize: "column-resize",
+		onCellEdit: "cell-edit",
+		onRowsChange: "rows-change"
 	}
 });
 //#endregion

package/dist/moguchart-react.umd.js

@@ -1 +1 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@lit/react"),require("@mogura/moguchart-core")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@lit/react`,`@mogura/moguchart-core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MoguchartReact={},e.React,e.LitReact,e.MoguchartCore))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule||!l.call(e,`default`)?a(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1),e.GanttChart=(0,n.createComponent)({tagName:`gantt-chart`,elementClass:r.GanttChartElement,react:t.default,events:{onChartContextMenu:`chart-contextmenu`,onMinimapMove:`minimap-move`,onMinimapResize:`minimap-resize`,onMinimapCollapse:`minimap-collapse`,onTaskUpdate:`task-update`,onBarHover:`bar-hover`,onTaskClick:`task-click`,onTaskDblClick:`task-dblclick`,onTaskContextMenu:`task-contextmenu`,onTaskDrop:`task-drop`,onRowReordered:`row-reordered`,onRowHeaderResize:`row-header-resize`,onRowSelectionChange:`row-selection-change`,onBarSelectionChange:`bar-selection-change`,onRowHeaderClick:`row-header-click`,onRowHeaderDblClick:`row-header-dblclick`,onRowHeaderContextMenu:`row-header-contextmenu`,onRowToggleCollapse:`row-toggle-collapse`,onDependencyCreate:`dependency-create`,onDependencyClick:`dependency-click`,onDependencyDelete:`dependency-delete`,onDependencySelect:`dependency-select`,onMarkerDblClick:`marker-dblclick`,onMarkerContextMenu:`marker-contextmenu`,onTaskDelete:`task-delete`,onZoomChange:`zoom-change`,onTaskProgressChange:`task-progress-change`,onCommand:`command`,onHistoryChange:`history-change`}}),Object.keys(r).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})});
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@lit/react"),require("@mogura/moguchart-core")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@lit/react`,`@mogura/moguchart-core`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MoguchartReact={},e.React,e.LitReact,e.MoguchartCore))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule||!l.call(e,`default`)?a(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1),e.GanttChart=(0,n.createComponent)({tagName:`gantt-chart`,elementClass:r.GanttChartElement,react:t.default,events:{onChartContextMenu:`chart-contextmenu`,onMinimapMove:`minimap-move`,onMinimapResize:`minimap-resize`,onMinimapCollapse:`minimap-collapse`,onTaskUpdate:`task-update`,onBarHover:`bar-hover`,onTaskClick:`task-click`,onTaskDblClick:`task-dblclick`,onTaskContextMenu:`task-contextmenu`,onTaskDrop:`task-drop`,onRowReordered:`row-reordered`,onRowHeaderResize:`row-header-resize`,onRowSelectionChange:`row-selection-change`,onBarSelectionChange:`bar-selection-change`,onRowHeaderClick:`row-header-click`,onRowHeaderDblClick:`row-header-dblclick`,onRowHeaderContextMenu:`row-header-contextmenu`,onRowToggleCollapse:`row-toggle-collapse`,onDependencyCreate:`dependency-create`,onDependencyClick:`dependency-click`,onDependencyDelete:`dependency-delete`,onDependencySelect:`dependency-select`,onMarkerDblClick:`marker-dblclick`,onMarkerContextMenu:`marker-contextmenu`,onTaskDelete:`task-delete`,onZoomChange:`zoom-change`,onTaskProgressChange:`task-progress-change`,onCommand:`command`,onHistoryChange:`history-change`,onColumnResize:`column-resize`,onCellEdit:`cell-edit`,onRowsChange:`rows-change`}}),Object.keys(r).forEach(function(t){t!=="default"&&!Object.prototype.hasOwnProperty.call(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mogura/moguchart-react",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "React wrapper for @mogura/moguchart-core Gantt chart component",
   "license": "MIT",
   "author": "Murakami Hiroyuki",
@@ -41,7 +41,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@mogura/moguchart-core": "1.3.1"
+    "@mogura/moguchart-core": "1.5.0"
   },
   "dependencies": {
     "@lit/react": "^1.0.8"
@@ -57,7 +57,7 @@
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vitest": "^3.0.0",
-    "@mogura/moguchart-core": "1.3.1"
+    "@mogura/moguchart-core": "1.5.0"
   },
   "scripts": {
     "build": "vite build && pnpm exec tsc -p tsconfig.build.json",