@mogura/moguchart-core 1.1.1 → 1.2.0

package/README.ja.md

@@ -13,6 +13,8 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
 
 - 🚀 **フレームワーク非依存**: Web Components (Custom Elements) として実装されており、あらゆる環境で動作します。
 - ⚡ **仮想スクロール**: 大量のタスクや行があってもスムーズに動作します。
+- ↩️ **操作履歴管理 (Undo / Redo)**: コマンドパターンによる直感的な履歴管理。タスクの移動・リサイズ・進捗変更・削除、行の並び替え、依存関係の作成・削除など主要な編集操作の取り消し・やり直しを完全サポート（`Ctrl+Z` / `Ctrl+Y` 対応）。
+- 🔍 **包括的なズーム制御**: パーセンテージ（50%〜200%）やスケール倍率（0.5〜2.0）に基づく柔軟な拡大縮小。カレンダー列幅・行ヘッダー幅・タスクバー高さ・フォントサイズ（`--moguchart-font-scale`）の一括連動スケーリング。ショートカットキー（`Ctrl/Cmd + + / - / 0`）やホイール操作に対応。
 - 🖱️ **インタラクティブ**:
   - ドラッグ＆ドロップによるタスク移動（行間移動対応）
   - ハンドル操作による期間リサイズ
@@ -26,7 +28,11 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - ライト/ダーク/システムテーマの切り替え＋カスタムカラーテーマ
   - タスクバーの塗りつぶしパターン（ストライプ、ドット、チェッカーボードなど13種類）
   - CSSによるスタイリング
-- 🔗 **依存関係の表示**: タスク間の依存関係を矢印付き曲線で可視化（S字カーブ対応）。クリティカルパス（最長チェーン）の自動検出＋ハイライト表示
+- 🔗 **依存関係の対話的操作**:
+  - タスク間の依存関係を矢印付き直線・曲線（直角折れ線/ベジェ曲線）で可視化
+  - 依存関係線のクリック選択とハイライト表示
+  - 選択中の線上の削除「×」ボタンまたは `Delete` / `Backspace` キーによるワンクリック削除
+  - クリティカルパス（最長チェーン）の自動検出＋ハイライト表示
 - 📅 **柔軟なカレンダー**:
   - 日単位 / 週単位 / 月単位の表示切り替え
   - ズームレベル（1日・1ヶ月あたりの幅）や表示期間の調整が可能
@@ -42,10 +48,11 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - タスクバー上への進捗バー（オーバーレイ/下部・上部インジケーター）描画
   - ハンドル操作による直感的な進捗率のドラッグ編集（スナップ対応）
   - 進捗ラベル表示（配置カスタマイズ・カスタムフォーマット対応）
+  - サマリータスク（親集計バー）への進捗ラベル自動表示および専用カスタム色（`summaryColor`）対応
   - 進捗変更イベント（`task-progress-change`）の発火
   - 行・プロジェクト全体の進捗率計算ユーティリティ関数
 - 🧩 **プラグインアーキテクチャ**: コア本体を超軽量（数十KB）に保ちつつ、画像・PDFエクスポート等の機能をプラグインとして柔軟に拡張可能
-- 📷 **エクスポート（プラグイン）**: `@mogura/moguchart-plugin-export` による PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、スクロール位置保持）
+- 📷 **エクスポート（プラグイン）**: `@mogura/moguchart-plugin-export` による PNG画像およびPDF形式でのガントチャート全体エクスポート（自動ダウンロード対応、エクスポート時のズーム正規化 `normalizeZoom`、スクロール位置保持）
   - 外部からのドラッグ＆ドロップによるタスク作成
   - タスクの移動/コピーモード
   - スナップ機能（時間単位でのグリッドスナップ）
@@ -57,11 +64,10 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - 配下の子タスクから自動計算されるサマリータスクバー（ブラケット形状）
   - サマリータスクバーの色設定（プロジェクト既定色および行単位の個別色指定）
   - 親行におけるサマリータスクと通常タスクの共存・同時描画
-  - サマリータスクへの進捗率ラベル表示設定
   - 仮想スクロールやミニマップと完全に連動する折りたたみ
   - 階層を壊さない安全なD&D並び替え（子タスクのブロック連動移動・循環参照防止）
   - プログラムからの開閉操作（`toggleRowCollapse`, `collapseAll`, `expandAll`）
-- ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでの削除
+- ⌨️ **キーボード操作**: 矢印キーでのナビゲーション・選択・Shift+矢印キーでのタスク移動・Deleteキーでのタスク/依存関係線削除・Undo/Redo・ズームショートカット
 
 ## パッケージ一覧（エコシステム）
 
@@ -486,24 +492,38 @@ gantt-chart {
 
 ### 依存関係線の設定
 
-`dependency` オプションで依存関係線の表示をカスタマイズできます。矢印の表示/非表示や大きさ、接続コネクターの表示、最長チェーン（クリティカルパス）の自動検出ハイライトを制御できます。
-右→左方向の依存関係では自動的にS字カーブで描画され、接触箇所は常に水平に接続します。
+`dependency` オプションで依存関係線の表示や操作をカスタマイズできます。
+矢印の表示/非表示や大きさ、接続コネクター、最長チェーン（クリティカルパス）の自動検出ハイライトを制御できます。
+線のクリックによる選択（ハイライト表示）、選択時の削除「×」ボタン、`Delete` / `Backspace` キーによる直感的な削除に対応しています。
 
 ```javascript
 const option = {
   dependency: {
+    lineStyle: 'orthogonal', // 接続線の形状 ('orthogonal': 角丸直角折れ線, 'curve': ベジェ曲線)
+    cornerRadius: 8, // 直角折れ線時の角丸半径 (px)
     showArrows: true, // 矢印を表示するかどうか (デフォルト: true)
     arrowSize: 10, // 矢印の大きさ (px、デフォルト: 8)
     showConnectors: true, // コネクター接続ポイント（丸印）を表示するかどうか (デフォルト: true)
     showCriticalPath: true, // クリティカルパス（最長チェーン）を自動計算しハイライト表示
+    creatable: true, // コネクタからのドラッグによる依存関係作成を許可 (デフォルト: true)
+    deletable: true, // 依存関係の削除を許可 (デフォルト: true)
+    showDeleteButton: true, // 選択時の削除「×」ボタンを表示 (デフォルト: true)
   },
   // ...
 }
+
+// 依存関係の選択・削除イベント
+chart.addEventListener('dependency-select', (e) => {
+  console.log('選択された依存関係:', e.detail.selected)
+})
+chart.addEventListener('dependency-delete', (e) => {
+  console.log('削除された依存関係:', e.detail.sourceTaskId, '->', e.detail.targetTaskId)
+})
 ```
 
 ### タスク進捗管理
 
-各タスクの `progress` プロパティ（`0` 〜 `100`）を設定することで、タスクバー上に進捗状況を視覚的に表示できます。`editable: true` を設定すると、進捗ハンドルのドラッグによる直感的な進捗率変更が可能になります。
+各タスクの `progress` プロパティ（`0` 〜 `100`）を設定することで、タスクバー上に進捗状況を視覚的に表示できます。`editable: true` を設定すると、進捗ハンドルのドラッグによる直感的な進捗率変更が可能になります。また、`showLabel: true` の場合、サマリータスクにも自動的に進捗ラベルが表示されます。
 
 ```javascript
 import {
@@ -517,8 +537,10 @@ const option = {
   progress: {
     enabled: true,
     editable: true, // ドラッグによる進捗編集を有効化
+    color: '#3b82f6', // 通常タスクの進捗バー色
+    summaryColor: 'rgba(255, 255, 255, 0.35)', // サマリータスク専用の進捗バー色
     showLabel: true, // 進捗ラベルを表示 (例: "50%")
-    showSummaryLabel: false, // サマリータスクにも進捗ラベルを表示するかどうか (デフォルト: false)
+    showSummaryLabel: true, // サマリータスクにも進捗ラベルを表示するかどうか (デフォルト: true)
     labelPosition: 'inside', // 'inside' | 'right' | 'left' | 'center'
     snapStep: 5, // 5%刻みでスナップ
     indicatorPosition: 'full', // 'full' | 'bottom' | 'top'
@@ -753,31 +775,80 @@ const { exportChart } = await import('@mogura/moguchart-plugin-export')
 await exportChart(chart, 'png', { download: true })
 ```
 
-#### ズーム操作 (zoomTo / zoomToFit / resetZoom)
+#### ズーム操作 (zoomToPercent / zoomToScale / zoomIn / zoomOut / resetZoom)
 
-`zoom` オプションを有効にすることで、Ctrl/Cmd + マウスホイールによるズームイン・ズームアウトが可能になります。また、メソッドによる動的なズーム制御にも対応しています。
+`zoom` オプションを有効にすることで、Ctrl/Cmd + マウスホイール、ショートカットキー（`Ctrl/Cmd + + / - / 0`）、またはパブリックメソッドによる柔軟なズーム（50%〜200%）が可能になります。カレンダー列幅・行ヘッダー幅・バー高さ・フォントサイズ（`scaleElements`）が一括連動します。
 
 ```javascript
 const option = {
   zoom: {
     enabled: true, // ズーム機能を有効化 (デフォルト: false)
-    min: 5, // 最小 pxPerDay (または pxPerMonth)
-    max: 150, // 最大 pxPerDay (または pxPerMonth)
-    step: 1.2, // 1回あたりのズーム倍率
+    minPercent: 50, // 最小倍率 (50%)
+    maxPercent: 200, // 最大倍率 (200%)
+    initialPercent: 100, // 初期倍率 (100%)
+    shortcuts: true, // キーボードショートカット有効化
+    scaleElements: {
+      calendar: true,
+      rowHeader: true,
+      barHeight: true,
+      fontScale: true,
+    },
   },
 }
 
 // プログラムによるズーム操作
-chart.zoomTo(50) // 1日あたり50pxにズーム
+chart.zoomIn() // 1段階拡大 (Chrome準拠レベル)
+chart.zoomOut() // 1段階縮小
+chart.zoomToPercent(125) // 125% にズーム
+chart.zoomToScale(1.5) // 1.5倍 にズーム
 chart.zoomToFit() // 全タスクが表示領域に収まるよう自動調整
-chart.resetZoom() // 初期設定のスケールにリセット
+chart.resetZoom() // 100%（標準スケール）にリセット
 
 // ズーム変更イベント
 chart.addEventListener('zoom-change', (e) => {
-  console.log('変更後のスケール:', e.detail.pxPerDay || e.detail.pxPerMonth)
+  console.log('ズーム変更:', e.detail.zoomPercent + '%', 'scale:', e.detail.zoomScale)
+})
+```
+
+#### 操作履歴・Undo / Redo (undo / redo / clearHistory)
+
+ユーザーによる各種操作（タスク移動・リサイズ・進捗変更・削除、行並び替え、依存関係作成/削除）を自動記録し、プログラムまたはキーボード（`Ctrl+Z` / `Ctrl+Y`）から取り消し・やり直しが可能です。
+
+```javascript
+const option = {
+  history: {
+    enabled: true, // 履歴管理を有効化 (デフォルト: true)
+    maxDepth: 50, // 保持する最大履歴数
+    keyboard: true, // ショートカットを有効化
+  },
+}
+
+// Undo / Redo の実行
+if (chart.canUndo) {
+  await chart.undo()
+}
+if (chart.canRedo) {
+  await chart.redo()
+}
+
+// 履歴クリア
+chart.clearHistory()
+
+// 履歴状態の変更検知
+chart.addEventListener('history-change', (e) => {
+  undoBtn.disabled = !e.detail.canUndo
+  redoBtn.disabled = !e.detail.canRedo
 })
 ```
 
+#### 依存関係の削除 (triggerDependencyDelete)
+
+プログラムから特定の依存関係線を削除できます。
+
+```javascript
+chart.triggerDependencyDelete('task-1', 'task-2')
+```
+
 #### WBS・折りたたみ操作 (toggleRowCollapse / collapseAll / expandAll)
 
 ```javascript
@@ -847,7 +918,7 @@ const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
 
 ### キーボード操作
 
-ガントチャートにフォーカスがある状態で、キーボードによるタスクのナビゲーション・選択・移動・削除が可能です。
+ガントチャートにフォーカスがある状態で、キーボードによるタスクのナビゲーション・選択・移動・削除・Undo/Redo・ズームが可能です。
 
 | キー                   | 動作                         |
 | :--------------------- | :--------------------------- |
@@ -856,7 +927,13 @@ const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
 | `Enter` / `Space`      | フォーカス中のタスクを選択   |
 | `Ctrl/Cmd + Enter`     | 選択をトグル（複数選択）     |
 | `Shift + ←` `→`        | 選択中のタスクを移動         |
-| `Delete` / `Backspace` | `task-delete` イベントを発火 |
+| `Delete` / `Backspace` | 選択中のタスクまたは依存関係線を削除 |
+| `Ctrl+Z` / `Cmd+Z`     | 直前の操作を取り消す (Undo)  |
+| `Ctrl+Y` / `Cmd+Shift+Z` | 直前の操作をやり直す (Redo)  |
+| `Ctrl/Cmd + +`         | ズームイン（拡大）           |
+| `Ctrl/Cmd + -`         | ズームアウト（縮小）         |
+| `Ctrl/Cmd + 0`         | ズーム倍率を100%にリセット   |
+| `Ctrl/Cmd + ホイール`  | ズームイン / ズームアウト    |
 | `Escape`               | 選択・フォーカスをクリア     |
 
 ```javascript
@@ -865,6 +942,12 @@ const option = {
     enabled: true, // デフォルト: true
     moveStep: 60, // Shift+矢印キーでの移動量（分）
   },
+  history: {
+    keyboard: true, // Undo/Redo ショートカット (デフォルト: true)
+  },
+  zoom: {
+    shortcuts: true, // ズームショートカット (デフォルト: true)
+  },
   // ...
 }
 ```

package/README.md

@@ -13,6 +13,8 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
 
 - 🚀 **Framework-agnostic**: Built as standard Web Components (Custom Elements), easily integrated into any frontend framework.
 - ⚡ **Virtual Scrolling**: Smooth 60fps rendering even with extensive tasks and rows.
+- ↩️ **Operation History (Undo / Redo)**: Command pattern-based history manager. Complete undo/redo support for task movement, duration resizing, progress adjustments, deletion, row reordering, and dependency editing (`Ctrl+Z` / `Ctrl+Y`).
+- 🔍 **Comprehensive Zoom Controls**: Smooth magnification adjustments based on percentage (50% to 200%) and scale factors (0.5 to 2.0). Coordinated synchronization across calendar width, row header width, bar height, and font scale (`--moguchart-font-scale`). Keyboard shortcuts (`Ctrl/Cmd + + / - / 0`) and mouse wheel zoom.
 - 🖱️ **Rich Interactive Controls**:
   - Drag & drop task movement (with optional cross-row vertical movement)
   - Handle-based task duration resizing
@@ -27,9 +29,10 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Light / Dark / System theme switching + custom color palettes
   - 13 built-in task bar fill patterns (stripes, dots, checkerboard, grid, etc.)
   - Native CSS variable-driven styling
-- 🔗 **Dependency Visualization**:
-  - Smooth curved lines with directional arrows showing task dependencies
-  - Automatic S-curve calculation for reverse-direction dependencies
+- 🔗 **Interactive Dependencies**:
+  - Direct task dependencies visualised with orthogonal segmented lines or Bezier curves
+  - Click-to-select dependency lines with dedicated highlight styling
+  - One-click deletion via on-line "×" button or `Delete` / `Backspace` key
   - Proximity connector toggle (`showConnectors`)
   - Automatic critical path detection and highlighted visualization (`showCriticalPath`)
 - 📅 **Flexible Calendar & Timeline**:
@@ -47,11 +50,12 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Task bar progress overlay (full, bottom, or top indicator styles)
   - Interactive drag-adjust handle for quick progress modification (with snap increments)
   - Configurable progress labels (custom positioning & formatters)
+  - Automatic progress label display for summary tasks and customizable summary progress bar color (`summaryColor`)
   - `task-progress-change` custom event
   - Progress calculation utility functions (simple & duration-weighted row/project averages)
   - Automatic progress visualization on the overview minimap
 - 🧩 **Plugin Architecture**: Modular architecture keeping the core bundle ultra-lightweight (tens of KBs) while allowing rich extensions like PNG/PDF exports.
-- 📷 **Export Plugin**: Full Gantt chart PNG image and multi-page PDF export powered by `@mogura/moguchart-plugin-export` (with scroll position preservation and auto-download support).
+- 📷 **Export Plugin**: Full Gantt chart PNG image and multi-page PDF export powered by `@mogura/moguchart-plugin-export` (with automatic zoom normalization `normalizeZoom`, scroll position preservation, and auto-download support).
 - ✨ **Advanced Integration**:
   - External drag & drop for task creation
   - Task move / copy modes
@@ -69,7 +73,7 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works s
   - Collapsing seamlessly integrated with virtual scrolling and overview minimap
   - Safe drag & drop reordering preserving hierarchy (prevents circular nesting, moves subtrees together)
   - Programmatic expand/collapse methods (`toggleRowCollapse`, `collapseAll`, `expandAll`)
-- ⌨️ **Keyboard Navigation**: Arrow key navigation & selection, Shift + Arrow task movement, Delete / Backspace deletion.
+- ⌨️ **Keyboard Navigation & Shortcuts**: Arrow key navigation & selection, Shift + Arrow task movement, Delete / Backspace task & dependency deletion, Undo / Redo (`Ctrl+Z` / `Ctrl+Y`), and zoom controls.
 
 ## Packages (Ecosystem)
 
@@ -497,30 +501,47 @@ Font scaling is automatically applied to calendar headers (year/month, weeks, da
 
 ### Dependency Line Settings
 
-Configure task dependency curves with the `dependency` option:
+Configure task dependency curves and interactive operations with the `dependency` option:
 
+- `lineStyle`: `'orthogonal'` (rounded segmented lines, default) or `'curve'` (Bezier curves).
 - `showArrows`: Toggle directional arrow heads (default: `true`).
 - `arrowSize`: Arrow dimensions in pixels (default: `8`).
-- `showConnectors`: Control whether circular connection handles appear on hover (default: `true`). Set to `false` to prevent creating new dependencies.
-- `showCriticalPath`: Automatically detect the longest chain (critical path) and highlight connected tasks and lines in a distinct color (configurable via `theme.criticalPath`).
+- `showConnectors`: Control whether circular connection handles appear on hover (default: `true`).
+- `showCriticalPath`: Automatically detect the longest chain (critical path) and highlight connected tasks and lines.
+- `creatable`: Allow creating links via connector drag (default: `true`).
+- `deletable`: Allow deleting links via keyboard or button (default: `true`).
+- `showDeleteButton`: Display "×" delete button on selected link (default: `true`).
 
-Reverse dependencies (right-to-left) automatically render smooth S-curves with perpendicular contact alignment.
+Lines can be clicked to select (highlighted with distinct stroke & shadow), and deleted by clicking the "×" button or pressing `Delete` / `Backspace`.
 
 ```javascript
 const option = {
   dependency: {
+    lineStyle: 'orthogonal',
+    cornerRadius: 8,
     showArrows: true,
     arrowSize: 10,
     showConnectors: true,
-    showCriticalPath: true, // Highlight critical path tasks and links
+    showCriticalPath: true,
+    creatable: true,
+    deletable: true,
+    showDeleteButton: true,
   },
   // ...
 }
+
+// Dependency selection and deletion events
+chart.addEventListener('dependency-select', (e) => {
+  console.log('Selected dependency:', e.detail.selected)
+})
+chart.addEventListener('dependency-delete', (e) => {
+  console.log('Deleted dependency:', e.detail.sourceTaskId, '->', e.detail.targetTaskId)
+})
 ```
 
 ### Task Progress Management
 
-Visualize and interactively edit progress on task bars by specifying `progress` (`0` to `100`). Set `editable: true` to enable dragging the progress adjustment handle on the task bar.
+Visualize and interactively edit progress on task bars by specifying `progress` (`0` to `100`). Set `editable: true` to enable dragging the progress adjustment handle on the task bar. When `showLabel: true` is enabled, summary tasks also display their aggregated progress labels automatically.
 
 ```javascript
 import {
@@ -534,8 +555,10 @@ const option = {
   progress: {
     enabled: true,
     editable: true, // Allow interactive handle dragging
+    color: '#3b82f6', // Progress bar color for normal tasks
+    summaryColor: 'rgba(255, 255, 255, 0.35)', // Progress bar color for summary tasks
     showLabel: true, // Display progress text (e.g. "50%")
-    showSummaryLabel: false, // Whether to show progress label on summary tasks (default: false)
+    showSummaryLabel: true, // Show progress label on summary tasks (default: true)
     labelPosition: 'inside', // 'inside' | 'right' | 'left' | 'center'
     snapStep: 5, // Snap in 5% increments
     indicatorPosition: 'full', // 'full' | 'bottom' | 'top'
@@ -771,31 +794,80 @@ const { exportChart } = await import('@mogura/moguchart-plugin-export')
 await exportChart(chart, 'png', { download: true })
 ```
 
-#### Zoom Operations (`zoomTo`, `zoomToFit`, `resetZoom`)
+#### Zoom Operations (`zoomIn`, `zoomOut`, `zoomToPercent`, `zoomToScale`, `zoomToFit`, `resetZoom`)
 
-Enable zoom via `option.zoom` (wheel zoom with Ctrl / Cmd key) and control zoom level programmatically:
+Enable zoom via `option.zoom` (wheel zoom with Ctrl / Cmd key, keyboard shortcuts `Ctrl/Cmd + + / - / 0`) and control zoom level programmatically:
 
 ```javascript
 const option = {
   zoom: {
-    enabled: true,
-    min: 5,
-    max: 150,
-    step: 1.2,
+    enabled: true, // Enable zoom features (default: false)
+    minPercent: 50, // Minimum zoom percentage (default: 50)
+    maxPercent: 200, // Maximum zoom percentage (default: 200)
+    initialPercent: 100, // Initial zoom percentage (default: 100)
+    shortcuts: true, // Enable keyboard shortcuts (default: true)
+    scaleElements: {
+      calendar: true,
+      rowHeader: true,
+      barHeight: true,
+      fontScale: true,
+    },
   },
 }
 
 // Programmatic zoom control
-chart.zoomTo(50) // Set zoom level to 50px per day (or month)
+chart.zoomIn() // Zoom in by one step (Chrome-compliant preset)
+chart.zoomOut() // Zoom out by one step
+chart.zoomToPercent(125) // Zoom to 125%
+chart.zoomToScale(1.5) // Zoom to 1.5x
 chart.zoomToFit() // Auto-fit all tasks into the visible container width
-chart.resetZoom() // Reset to original configuration scale
+chart.resetZoom() // Reset to 100% (default scale)
 
 // Listen to zoom level changes
 chart.addEventListener('zoom-change', (e) => {
-  console.log('New zoom level:', e.detail.pxPerDay || e.detail.pxPerMonth)
+  console.log('Zoom changed:', e.detail.zoomPercent + '%', 'scale:', e.detail.zoomScale)
 })
 ```
 
+#### Operation History / Undo & Redo (`undo`, `redo`, `clearHistory`)
+
+User actions (task moving, resizing, progress editing, deleting, row reordering, dependency creation and deletion) are automatically recorded. You can undo and redo them programmatically or via keyboard shortcuts (`Ctrl+Z` / `Ctrl+Y` / `Cmd+Shift+Z`).
+
+```javascript
+const option = {
+  history: {
+    enabled: true, // Enable history tracking (default: true)
+    maxDepth: 50, // Maximum history steps to retain (default: 50)
+    keyboard: true, // Enable undo/redo keyboard shortcuts (default: true)
+  },
+}
+
+// Perform Undo / Redo
+if (chart.canUndo) {
+  await chart.undo()
+}
+if (chart.canRedo) {
+  await chart.redo()
+}
+
+// Clear history
+chart.clearHistory()
+
+// Listen to history state changes
+chart.addEventListener('history-change', (e) => {
+  undoBtn.disabled = !e.detail.canUndo
+  redoBtn.disabled = !e.detail.canRedo
+})
+```
+
+#### Dependency Deletion (`triggerDependencyDelete`)
+
+Programmatically remove a dependency connection between two tasks:
+
+```javascript
+chart.triggerDependencyDelete('task-1', 'task-2')
+```
+
 #### WBS & Collapse Operations (`toggleRowCollapse`, `collapseAll`, `expandAll`)
 
 ```javascript
@@ -842,40 +914,40 @@ import {
 
 // 1. Calculate depth level for all rows
 const levels = computeRowLevels(rows) // Map<string, number> (rowId -> level: 0, 1, 2...)
-
 // 2. Generate WBS hierarchical numbering codes ("1", "1.1", "1.2", etc.)
 const wbsCodes = computeRowWbsCodes(rows) // Map<string, string> (rowId -> wbsCode)
-
 // 3. Get child / descendant row IDs for a row
 const allDescendants = computeChildRowIds('project-1', rows, true) // Recursively get all descendants
 const directChildren = computeChildRowIds('project-1', rows, false) // Direct children only
-
 // 4. Extract rows currently visible based on collapse states
 const visibleRows = computeVisibleTreeRows(rows)
-
 // 5. Aggregate child tasks into a summary task
 const summaryTask = computeSummaryTask(childTasks, 'project-1') // Min start, max end, weighted average progress
-
 // 6. Safe D&D check to prevent circular parent-child nesting
 const isDropAllowed = canDropRow('source-row-id', 'target-row-id', rows) // boolean
-
 // 7. Find longest task dependency chains (critical path)
 const criticalTaskIds = computeCriticalPath(allTasks) // Set<string>
 ```
 
 ### Keyboard Operations
 
-When the Gantt chart element is focused, keyboard shortcuts allow fast navigation, selection, movement, and deletion:
-
-| Key                    | Action                                 |
-| :--------------------- | :------------------------------------- |
-| `←` `→`                | Move focus between tasks               |
-| `↑` `↓`                | Move focus to another row              |
-| `Enter` / `Space`      | Select the focused task                |
-| `Ctrl/Cmd + Enter`     | Toggle selection state (multi-select)  |
-| `Shift + ←` `→`        | Move selected tasks backward / forward |
-| `Delete` / `Backspace` | Trigger `task-delete` event            |
-| `Escape`               | Clear current selection and focus      |
+When the Gantt chart element is focused, keyboard shortcuts allow fast navigation, task manipulation, undo/redo, and zooming:
+
+| Key                    | Action                                      |
+| :--------------------- | :------------------------------------------ |
+| `←` `→`                | Move focus between tasks                    |
+| `↑` `↓`                | Move focus to another row                   |
+| `Enter` / `Space`      | Select the focused task                     |
+| `Ctrl/Cmd + Enter`     | Toggle selection state (multi-select)       |
+| `Shift + ←` `→`        | Move selected tasks backward / forward      |
+| `Delete` / `Backspace` | Delete selected task or selected dependency |
+| `Ctrl+Z` / `Cmd+Z`     | Undo last operation                        |
+| `Ctrl+Y` / `Cmd+Shift+Z` | Redo last undone operation                |
+| `Ctrl/Cmd + +`         | Zoom in                                     |
+| `Ctrl/Cmd + -`         | Zoom out                                    |
+| `Ctrl/Cmd + 0`         | Reset zoom to 100%                          |
+| `Ctrl/Cmd + Wheel`     | Zoom in / Zoom out                          |
+| `Escape`               | Clear current selection and focus           |
 
 ```javascript
 const option = {
@@ -883,7 +955,12 @@ const option = {
     enabled: true, // Default: true
     moveStep: 60, // Move distance per Shift+Arrow key press (minutes)
   },
-  // ...
+  history: {
+    keyboard: true, // Enable Undo/Redo shortcuts (default: true)
+  },
+  zoom: {
+    shortcuts: true, // Enable Zoom shortcuts (default: true)
+  },
 }
 ```
 

package/dist/components/controllers/dependency-controller.d.ts

@@ -0,0 +1,75 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { DependencyEndpoint, GanttChartOption, GanttRow } from '../../core/types';
+import type { GanttCommandType } from '../../core/history';
+export interface ConnectorDragState {
+    sourceTaskId: string;
+    sourceEndpoint: DependencyEndpoint;
+    startX: number;
+    startY: number;
+    currentClientX: number;
+    currentClientY: number;
+    targetTaskId: string | null;
+    targetEndpoint: DependencyEndpoint | null;
+}
+export interface DependencyControllerHost extends ReactiveControllerHost, HTMLElement {
+    option: GanttChartOption;
+    rows: GanttRow[];
+    displayRows: GanttRow[];
+    currentRowHeaderWidth: number;
+    calendarHeight: number;
+    selectedRows: Set<string>;
+    selectedTasks: Set<string>;
+    calculateLayout(): {
+        layouts: any;
+        taskCoords: Map<string, any>;
+        totalHeight: number;
+    };
+    applyRowsChangeWithCommand(previousRows: GanttRow[], newRows: GanttRow[], commandInfo: {
+        type: GanttCommandType;
+        description: string;
+    }): void;
+    clearTooltip(): void;
+}
+export declare class DependencyController implements ReactiveController {
+    private host;
+    selectedDependency: {
+        sourceTaskId: string;
+        targetTaskId: string;
+    } | null;
+    connectorDrag: ConnectorDragState | null;
+    constructor(host: DependencyControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * 依存関係線の選択状態を解除する
+     */
+    clearDependencySelection(): void;
+    /**
+     * 依存関係線を選択状態にする
+     */
+    selectDependency(sourceTaskId: string, targetTaskId: string): void;
+    /**
+     * 依存関係の削除リクエストイベントを発火する
+     */
+    triggerDependencyDelete(sourceTaskId: string, targetTaskId: string, originalEvent?: Event): void;
+    /**
+     * コネクタードラッグ開始ハンドラ
+     */
+    handleConnectorDragStart(e: CustomEvent): void;
+    /**
+     * コネクタードラッグ中ハンドラ
+     */
+    handleConnectorDragMove(e: CustomEvent): void;
+    /**
+     * コネクタードラッグ終了ハンドラ
+     */
+    handleConnectorDragEnd(e: CustomEvent): void;
+    /**
+     * 指定タスクIDのgantt-bar要素にconnectorDropTarget属性をセットする
+     */
+    setConnectorDropTarget(taskId: string, value: boolean): void;
+    /**
+     * 依存関係線クリックハンドラ
+     */
+    handleDependencyLineClick(event: MouseEvent, targetTaskId: string, sourceTaskId: string): void;
+}

package/dist/components/controllers/drag-drop-controller.d.ts

@@ -0,0 +1,84 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { GanttChartOption, GanttRow, GanttTask, GanttTaskMoveMode, TaskUpdateEventDetail } from '../../core/types';
+import type { GanttCommandType } from '../../core/history';
+import { type DragOverlayInfo, type DragPreviewState, type DraggingTaskState, type TaskDragControllerHost } from './task-drag-controller';
+import { type RowReorderControllerHost } from './row-reorder-controller';
+export type { DragOverlayInfo, DragPreviewState, DraggingTaskState };
+export interface DragDropControllerHost extends ReactiveControllerHost, HTMLElement, TaskDragControllerHost, RowReorderControllerHost {
+    rows: GanttRow[];
+    displayRows: GanttRow[];
+    option: GanttChartOption;
+    theme: 'light' | 'dark';
+    selectedTasks: Set<string>;
+    selectedRows: Set<string>;
+    effectivePxPerDay: number;
+    effectivePxPerMonth: number | undefined;
+    effectiveBarHeight: number;
+    calendarHeight: number;
+    currentRowHeaderWidth: number;
+    externalDraggingTask: GanttTask | null;
+    _collapsedRowIds: Set<string>;
+    calculateLayout(): {
+        layouts: Array<{
+            top: number;
+            height: number;
+        }>;
+        totalHeight: number;
+    };
+    getDateX(date: Date): number;
+    applyRowsChangeWithCommand(previousRows: GanttRow[], newRows: GanttRow[], commandInfo: {
+        type: GanttCommandType;
+        description: string;
+    }): void;
+    clearTooltip?(): void;
+}
+/**
+ * @deprecated 後方互換性のためのファサードコントローラー。
+ * 個別には TaskDragController または RowReorderController を使用してください。
+ */
+export declare class DragDropController implements ReactiveController {
+    private taskDrag;
+    private rowReorder;
+    constructor(host: DragDropControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    get draggingTask(): DraggingTaskState | null;
+    set draggingTask(val: DraggingTaskState | null);
+    get draggingTaskIds(): string[];
+    set draggingTaskIds(val: string[]);
+    get multiDragDx(): number;
+    set multiDragDx(val: number);
+    get multiDragDy(): number;
+    set multiDragDy(val: number);
+    get multiDragSameRow(): boolean;
+    set multiDragSameRow(val: boolean);
+    get dragTargetRowIndex(): number | null;
+    set dragTargetRowIndex(val: number | null);
+    get dragOverlayInfo(): DragOverlayInfo | null;
+    set dragOverlayInfo(val: DragOverlayInfo | null);
+    get dragPreview(): DragPreviewState | null;
+    set dragPreview(val: DragPreviewState | null);
+    get dragOverRowId(): string | null;
+    set dragOverRowId(val: string | null);
+    get dragOverPosition(): 'top' | 'bottom' | null;
+    set dragOverPosition(val: 'top' | 'bottom' | null);
+    get _draggingRowId(): string | null;
+    set _draggingRowId(val: string | null);
+    isMultiDrag(taskId: string): boolean;
+    isMultiDragSameRow(): boolean;
+    cleanupDragState(): void;
+    updateDragOverlay(): void;
+    hideDragOverlay(): void;
+    handleTaskUpdate(e: CustomEvent<TaskUpdateEventDetail & {
+        mode?: GanttTaskMoveMode;
+    }>): void;
+    handleExternalTaskDrop(e: DragEvent, taskJson: string): void;
+    reorderRows(sourceIds: string | string[], targetId: string, position: 'top' | 'bottom'): Promise<void>;
+    handleRowDragStart(e: CustomEvent<{
+        rowId: string;
+    }>): void;
+    handleRowDragEnd(): void;
+    handleContainerDragOver(e: DragEvent): void;
+    handleContainerDragLeave(e: DragEvent): void;
+    handleContainerDrop(e: DragEvent): void;
+}