@mogura/moguchart-react 1.1.0 → 1.2.0

package/README.ja.md

@@ -94,6 +94,46 @@ export function MyGanttView() {
 
 ---
 
+## 主な Props
+
+| Prop 名 | 型 | 説明 |
+|---|---|---|
+| `rows` | `GanttRow[]` | ガントチャートの行・タスクデータ |
+| `option` | `GanttChartOption` | カレンダー、ズーム、履歴、依存関係等の各種設定 |
+| `theme` | `'light' \| 'dark'` | カラーテーマ |
+| `selectedRowIds` | `string[]` | 選択中の行ID一覧 |
+| `selectedTaskIds` | `string[]` | 選択中のタスクID一覧 |
+| `selectedDependency` | `{ sourceTaskId: string; targetTaskId: string } \| null` | 選択中の依存関係線（ハイライト状態） |
+| `externalDraggingTask` | `GanttTask \| null` | 外部からドラッグ中のタスクプレビュー |
+
+---
+
+## 命令的 API（ref を介した操作）
+
+`ref` を介して `GanttChartElement` インスタンスを取得することで、Undo / Redo やズーム、エクスポートなどの命令的メソッドを呼び出せます。
+
+```tsx
+import React, { useRef } from 'react'
+import { GanttChart, type GanttChartElement } from '@mogura/moguchart-react'
+
+export function GanttToolbar() {
+  const chartRef = useRef<GanttChartElement>(null)
+
+  return (
+    <div>
+      <button onClick={() => chartRef.current?.undo()}>取り消し (Undo)</button>
+      <button onClick={() => chartRef.current?.redo()}>やり直し (Redo)</button>
+      <button onClick={() => chartRef.current?.zoomIn()}>ズームイン</button>
+      <button onClick={() => chartRef.current?.zoomOut()}>ズームアウト</button>
+      <button onClick={() => chartRef.current?.resetZoom()}>ズームリセット</button>
+      <GanttChart ref={chartRef} rows={[]} />
+    </div>
+  )
+}
+```
+
+---
+
 ## プラグイン（エクスポート機能）との連携
 
 PNG や PDF のエクスポートを行う場合は、`@mogura/moguchart-plugin-export` を組み合わせます。
@@ -119,6 +159,7 @@ export function ExportableGantt() {
       await chartRef.current.exportImage('png', {
         filename: 'my-schedule',
         download: true,
+        normalizeZoom: true, // ズーム倍率に関わらず標準スケールで出力
       })
     }
   }
@@ -156,9 +197,13 @@ export function ExportableGantt() {
 | `onRowToggleCollapse` | 行の開閉時（WBS） |
 | `onDependencyCreate` | 依存関係（リンク）作成時 |
 | `onDependencyClick` | 依存関係クリック時 |
+| `onDependencySelect` | 依存関係の選択状態変更時（ハイライト・削除ボタン表示） |
+| `onDependencyDelete` | 依存関係削除時 |
 | `onMarkerDblClick` | マーカーダブルクリック時 |
 | `onMarkerContextMenu` | マーカー右クリック時 |
 | `onZoomChange` | ズーム倍率変更時 |
+| `onCommand` | 操作コマンド実行時（Undo / Redo 対象の操作完了時） |
+| `onHistoryChange` | 履歴スタック変更時（Undo / Redo 可否状態の更新時） |
 | `onMinimapMove` | ミニマップスクロール時 |
 | `onMinimapResize` | ミニマップリサイズ時 |
 | `onMinimapCollapse` | ミニマップ折りたたみ時 |

package/README.md

@@ -4,6 +4,8 @@ Official React wrapper component for [`@mogura/moguchart-core`](https://github.c
 
 Built on top of Lit's official `@lit/react`, it combines the high performance and framework independence of Web Components with a type-safe, idiomatic React developer experience.
 
+[日本語版ドキュメントはこちら (Japanese documentation)](./README.ja.md)
+
 ---
 
 ## Features
@@ -94,6 +96,46 @@ export function MyGanttView() {
 
 ---
 
+## Main Props
+
+| Prop | Type | Description |
+|---|---|---|
+| `rows` | `GanttRow[]` | Gantt chart row and task data |
+| `option` | `GanttChartOption` | Configuration for calendar, zoom, history, dependencies, etc. |
+| `theme` | `'light' \| 'dark'` | Color theme |
+| `selectedRowIds` | `string[]` | Array of selected row IDs |
+| `selectedTaskIds` | `string[]` | Array of selected task IDs |
+| `selectedDependency` | `{ sourceTaskId: string; targetTaskId: string } \| null` | Currently selected dependency connection (highlighted) |
+| `externalDraggingTask` | `GanttTask \| null` | External task data currently being dragged over the chart |
+
+---
+
+## Imperative API (via `ref`)
+
+Access the underlying `GanttChartElement` instance via `ref` to invoke methods such as Undo/Redo, zoom, and exports:
+
+```tsx
+import React, { useRef } from 'react'
+import { GanttChart, type GanttChartElement } from '@mogura/moguchart-react'
+
+export function GanttToolbar() {
+  const chartRef = useRef<GanttChartElement>(null)
+
+  return (
+    <div>
+      <button onClick={() => chartRef.current?.undo()}>Undo</button>
+      <button onClick={() => chartRef.current?.redo()}>Redo</button>
+      <button onClick={() => chartRef.current?.zoomIn()}>Zoom In</button>
+      <button onClick={() => chartRef.current?.zoomOut()}>Zoom Out</button>
+      <button onClick={() => chartRef.current?.resetZoom()}>Reset Zoom</button>
+      <GanttChart ref={chartRef} rows={[]} />
+    </div>
+  )
+}
+```
+
+---
+
 ## Using with Plugins (e.g. Export)
 
 To export charts as PNG or PDF, pair with `@mogura/moguchart-plugin-export`:
@@ -119,6 +161,7 @@ export function ExportableGantt() {
       await chartRef.current.exportImage('png', {
         filename: 'my-schedule',
         download: true,
+        normalizeZoom: true, // Export at baseline 100% scale regardless of current zoom
       })
     }
   }
@@ -156,12 +199,16 @@ export function ExportableGantt() {
 | `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` | Fired when minimap is resized |
-| `onMinimapCollapse` | Fired when minimap is collapsed or expanded |
+| `onMinimapResize` | Minimap is resized |
+| `onMinimapCollapse` | Minimap is collapsed or expanded |
 | `onChartContextMenu` | Fired on chart background right-click |
 
 ---

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 MarkerDblClickEventDetail, type MarkerContextMenuEventDetail, type TaskDeleteEventDetail, type ZoomChangeEventDetail, type TaskProgressChangeEventDetail } 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 } from '@mogura/moguchart-core';
 /**
  * @mogura/moguchart-core の GanttChartElement をラップした React コンポーネント。
  * Web Components のライフサイクルと完全同期し、React のプロパティやイベントハンドラー、ref をサポートします。
@@ -26,11 +26,15 @@ export declare const GanttChart: import("@lit/react").ReactWebComponent<GanttCha
     onRowToggleCollapse: EventName<CustomEvent<RowToggleCollapseEventDetail>>;
     onDependencyCreate: EventName<CustomEvent<DependencyCreateEventDetail>>;
     onDependencyClick: EventName<CustomEvent<DependencyClickEventDetail>>;
+    onDependencyDelete: EventName<CustomEvent<DependencyDeleteEventDetail>>;
+    onDependencySelect: EventName<CustomEvent<DependencySelectEventDetail>>;
     onMarkerDblClick: EventName<CustomEvent<MarkerDblClickEventDetail>>;
     onMarkerContextMenu: EventName<CustomEvent<MarkerContextMenuEventDetail>>;
     onTaskDelete: EventName<CustomEvent<TaskDeleteEventDetail>>;
     onZoomChange: EventName<CustomEvent<ZoomChangeEventDetail>>;
     onTaskProgressChange: EventName<CustomEvent<TaskProgressChangeEventDetail>>;
+    onCommand: EventName<CustomEvent<CommandEventDetail>>;
+    onHistoryChange: EventName<CustomEvent<HistoryChangeEventDetail>>;
 }>;
 /** GanttChart コンポーネントの Props 型定義 */
 export type GanttChartProps = React.ComponentProps<typeof GanttChart>;

package/dist/moguchart-react.mjs

@@ -28,11 +28,15 @@ var r = t({
 		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"
+		onTaskProgressChange: "task-progress-change",
+		onCommand: "command",
+		onHistoryChange: "history-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`,onMarkerDblClick:`marker-dblclick`,onMarkerContextMenu:`marker-contextmenu`,onTaskDelete:`task-delete`,onZoomChange:`zoom-change`,onTaskProgressChange:`task-progress-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`}}),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.1.0",
+  "version": "1.2.0",
   "description": "React wrapper for @mogura/moguchart-core Gantt chart component",
   "license": "MIT",
   "author": "Murakami Hiroyuki",
@@ -24,6 +24,7 @@
   ],
   "files": [
     "dist",
+    "LICENSE",
     "README.md",
     "README.ja.md"
   ],
@@ -40,7 +41,7 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@mogura/moguchart-core": "1.1.0"
+    "@mogura/moguchart-core": "1.2.0"
   },
   "dependencies": {
     "@lit/react": "^1.0.8"
@@ -56,7 +57,7 @@
     "typescript": "^5.9.3",
     "vite": "^8.0.0",
     "vitest": "^3.0.0",
-    "@mogura/moguchart-core": "1.1.0"
+    "@mogura/moguchart-core": "1.2.0"
   },
   "scripts": {
     "build": "vite build && pnpm exec tsc -p tsconfig.build.json",