@mogura/moguchart-react 1.4.0 → 1.6.0

package/README.ja.md

@@ -4,6 +4,8 @@
 
 Lit 公式の `@lit/react` をベースに設計されており、Web Components の高いパフォーマンスとフレームワーク非依存の柔軟性を保ちつつ、React アプリケーションで型安全かつ直感的にガントチャートを扱うことができます。
 
+[English Documentation](./README.md)
+
 ---
 
 ## 特徴
@@ -14,6 +16,8 @@ Lit 公式の `@lit/react` をベースに設計されており、Web Components
 - ⚡ **命令的メソッドへのアクセス**: `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`）に対応
+- 🔗 **自動スケジューリング ＆ FS/SS/FF/SF 依存関係対応**: `GanttDependencyLink` による4種類の依存関係・ラグ指定と、営業日ベース（土日・祝日除外 `calendarMode`）にも対応した後続タスクの自動カスケード移動（`option.dependency.autoSchedule`, `autoSchedule()`）に対応
 - 📦 **Re-export**: `@mogura/moguchart-core` の型定義や定数をすべて再エクスポートしているため、本パッケージのみのインストールで開発可能
 
 ---
@@ -143,7 +147,8 @@ export function GanttToolbar() {
 - **ズーム操作**: `zoomIn()`, `zoomOut()`, `zoomToPercent(percent)`, `zoomToScale(scale)`, `resetZoom()`, `zoomToFit()`, `getZoomPercent()`, `getZoomScale()`
 - **スクロール・選択**: `scrollToTask(taskId)`, `scrollToPosition(pos)`, `resetScroll()`, `selectTask(taskId)`
 - **WBS・折りたたみ**: `toggleRowCollapse(rowId, collapsed?)`, `collapseAll()`, `expandAll()`, `getRowPositions()`
-- **依存関係操作**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `selectDependency(...)`, `clearDependencySelection()`
+- **グリッド・インラインセル編集**: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()`
+- **依存関係・自動スケジュール操作**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `autoSchedule(changedTaskIds?, options?)`, `selectDependency(...)`, `clearDependencySelection()`
 - **画像・PDFエクスポート**: `exportImage(format, options)`（`@mogura/moguchart-plugin-export` 導入時）
 - **Excelエクスポート**: `exportExcel(options)`（`@mogura/moguchart-plugin-excel` 導入時）
 
@@ -190,7 +195,7 @@ export function BaselineGanttView() {
       pxPerDay: 40,
     },
     baseline: {
-      visible: true,          // ベースライン表示
+      enabled: true,          // ベースライン表示を有効化
       position: 'bottom',     // 'bottom' (下部) | 'top' (上部) | 'overlay' (重ねて表示)
       highlightDelay: true,   // 遅延タスクをハイライト強調
       delayColor: '#EF4444',  // 遅延強調アクセント色
@@ -320,11 +325,14 @@ React では標準のイベント Props としてキャメルケース（`onTask
 | `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>` |
+| `onDependencyClick` | 依存関係クリック・ダブルクリック・右クリック時 | `CustomEvent<DependencyClickEventDetail>` |
 | `onDependencySelect` | 依存関係の選択状態変更時（ハイライト・削除ボタン表示） | `CustomEvent<DependencySelectEventDetail>` |
 | `onDependencyDelete` | 依存関係削除時 | `CustomEvent<DependencyDeleteEventDetail>` |
 | `onMarkerDblClick` | マーカーダブルクリック時 | `CustomEvent<MarkerDblClickEventDetail>` |

package/README.md

@@ -16,6 +16,8 @@ Built on top of Lit's official `@lit/react`, it combines the high performance an
 - ⚡ **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`)
+- 🔗 **Auto-Scheduling & FS/SS/FF/SF Dependencies**: Support for `FS`/`SS`/`FF`/`SF` dependency links with lag (`GanttDependencyLink`), working-day/holiday-aware (`calendarMode: 'calendar' | 'weekends' | 'weekends-holidays'`) topological cascade scheduling (`option.dependency.autoSchedule`, `autoSchedule()`)
 - 📦 **Re-exported Types**: Core types, constants, and utilities are all re-exported from this package
 
 ---
@@ -145,7 +147,8 @@ The following methods can be invoked directly on `ref.current`:
 - **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()`
-- **Dependency Operations**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `selectDependency(...)`, `clearDependencySelection()`
+- **Grid & Inline Cell Editing**: `startCellEdit(rowId, columnId)`, `commitCellEdit(overrideValue?)`, `cancelCellEdit()`
+- **Dependency & Auto-Schedule Operations**: `triggerDependencyDelete(sourceTaskId, targetTaskId)`, `autoSchedule(changedTaskIds?, options?)`, `selectDependency(...)`, `clearDependencySelection()`
 - **Image & PDF Export**: `exportImage(format, options)` (with `@mogura/moguchart-plugin-export`)
 - **Excel Export**: `exportExcel(options)` (with `@mogura/moguchart-plugin-excel`)
 
@@ -192,7 +195,7 @@ export function BaselineGanttView() {
       pxPerDay: 40,
     },
     baseline: {
-      visible: true,          // Enable baseline rendering
+      enabled: true,          // Enable baseline rendering
       position: 'bottom',     // 'bottom' | 'top' | 'overlay'
       highlightDelay: true,   // Visually highlight delayed tasks
       delayColor: '#EF4444',  // Custom accent color for delay indicators
@@ -322,11 +325,14 @@ Events dispatched by `@mogura/moguchart-core` can be listened to via standard ca
 | `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>` |
+| `onDependencyClick` | Fired when a dependency link is clicked, double-clicked, or right-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>` |

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

@@ -2,7 +2,7 @@ import e from "react";
 import { createComponent as t } from "@lit/react";
 import { GanttChartElement as n } from "@mogura/moguchart-core";
 export * from "@mogura/moguchart-core";
-//#region src/index.ts
+// src/index.ts
 var r = t({
 	tagName: "gantt-chart",
 	elementClass: n,
@@ -36,8 +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
 export { r as GanttChart };

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(a(n,`default`,{value:e,enumerable:!0}),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.4.0",
+  "version": "1.6.0",
   "description": "React wrapper for @mogura/moguchart-core Gantt chart component",
   "license": "MIT",
   "author": "Murakami Hiroyuki",
@@ -39,14 +39,15 @@
     }
   },
   "peerDependencies": {
+    "@mogura/moguchart-core": "1.6.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "@mogura/moguchart-core": "1.4.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@lit/react": "^1.0.8"
   },
   "devDependencies": {
+    "@mogura/moguchart-core": "1.6.0",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^24.12.0",
     "@types/react": "^19.0.0",
@@ -56,8 +57,7 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
-    "vitest": "^3.0.0",
-    "@mogura/moguchart-core": "1.4.0"
+    "vitest": "^3.0.0"
   },
   "scripts": {
     "build": "vite build && pnpm exec tsc -p tsconfig.build.json",