@mogura/moguchart-core 0.5.3 → 0.7.0

package/README.en.md

@@ -18,7 +18,7 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works w
   - Light/Dark/System theme switching + custom color themes
   - Task bar fill patterns (13 types including stripes, dots, checkerboard, etc.)
   - CSS styling
-- 🔗 **Dependency Visualization**: Curved lines with arrows showing task dependencies (S-curve support for reverse direction)
+- 🔗 **Dependency Visualization**: Curved lines with arrows showing task dependencies (S-curve support for reverse direction). Automatic critical path detection and highlighting
 - 📅 **Flexible Calendar**:
   - Day / Week / Month view switching
   - Adjustable zoom level (pixels per day or per month) and display period

package/README.md

@@ -20,7 +20,7 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - ライト/ダーク/システムテーマの切り替え＋カスタムカラーテーマ
   - タスクバーの塗りつぶしパターン（ストライプ、ドット、チェッカーボードなど13種類）
   - CSSによるスタイリング
-- 🔗 **依存関係の表示**: タスク間の依存関係を矢印付き曲線で可視化（S字カーブ対応）
+- 🔗 **依存関係の表示**: タスク間の依存関係を矢印付き曲線で可視化（S字カーブ対応）。クリティカルパス（最長チェーン）の自動検出＋ハイライト表示
 - 📅 **柔軟なカレンダー**:
   - 日単位 / 週単位 / 月単位の表示切り替え
   - ズームレベル（1日・1ヶ月あたりの幅）や表示期間の調整が可能

package/dist/components/gantt-bar.d.ts

@@ -7,12 +7,16 @@ export declare class GanttBarElement extends LitElement {
     selected: boolean;
     focused: boolean;
     multiDragDx: number;
+    multiDragDy: number;
     multiDragActive: boolean;
+    multiDragSameRow: boolean;
     connectorDropTarget: boolean;
     isExporting: boolean;
+    isCriticalPath: boolean;
     private _currentDragCursor;
     private _dragAnimationFrame;
     private _wasDragging;
+    private _connectorEdgeThreshold;
     static styles: import("lit").CSSResult;
     private getX;
     private setupDragEvents;
@@ -23,6 +27,7 @@ export declare class GanttBarElement extends LitElement {
     private handleKeyDown;
     private handleKeyUp;
     private updateCursor;
+    private onMouseMoveOnBar;
     private onMouseEnter;
     private onMouseLeave;
     private onDblClick;

package/dist/components/gantt-calendar.d.ts

@@ -4,6 +4,7 @@ export declare class GanttCalendarElement extends LitElement {
     option: GanttChartOption;
     theme: 'light' | 'dark';
     currentTime: Date;
+    isExporting: boolean;
     hoveredMilestoneId: string | null;
     cornerContent?: () => string | unknown;
     calendarMonthContent?: (context: CalendarMonthCellContext) => string | unknown;

package/dist/components/gantt-chart-export.d.ts

@@ -4,6 +4,7 @@
  * Shadow DOM の cloneNode では内部コンテンツがコピーされないため、
  * rows / option / theme などのデータから SVG を直接描画します。
  */
+import type { GanttChartElement } from './gantt-chart';
 export interface ExportImageOptions {
     /** ダウンロード時のファイル名（拡張子なし）。省略時は 'gantt-chart' */
     filename?: string;
@@ -17,4 +18,4 @@ export interface ExportImageOptions {
 /**
  * html2canvas-pro を使用してエクスポートする（Shadow DOMネイティブ対応版）
  */
-export declare function exportGanttWithHtml2Canvas(chartElement: HTMLElement, format?: 'png' | 'pdf', options?: ExportImageOptions): Promise<string | Blob>;
+export declare function exportGanttWithHtml2Canvas(chartElement: GanttChartElement, format?: 'png' | 'pdf', options?: ExportImageOptions): Promise<string | Blob>;

package/dist/components/gantt-chart.d.ts

@@ -18,6 +18,8 @@ export declare class GanttChartElement extends LitElement {
     private draggingTask;
     private draggingTaskIds;
     private multiDragDx;
+    private multiDragDy;
+    private multiDragSameRow;
     private viewportHeight;
     private dragOverlayInfo;
     private calendarHeight;
@@ -36,6 +38,8 @@ export declare class GanttChartElement extends LitElement {
     private isExporting;
     private focusedTaskId;
     private focusedRowId;
+    private zoomPxPerDay;
+    private zoomPxPerMonth;
     private _layoutCache;
     private resizeObserver;
     private _cachedSelectedTaskIds;
@@ -43,7 +47,18 @@ export declare class GanttChartElement extends LitElement {
     private _cachedCurrentOption;
     private _lastOptionRef;
     private _lastLabelWidth;
+    private _lastZoomPxPerDay;
+    private _lastZoomPxPerMonth;
+    private _scrollContainer;
     private get displayRows();
+    /**
+     * 現在有効な pxPerDay（ズームオーバーライドがあればそちらを優先）
+     */
+    private get effectivePxPerDay();
+    /**
+     * 現在有効な pxPerMonth（ズームオーバーライドがあればそちらを優先）
+     */
+    private get effectivePxPerMonth();
     static styles: import("lit").CSSResult;
     protected firstUpdated(): void;
     connectedCallback(): void;
@@ -72,6 +87,11 @@ export declare class GanttChartElement extends LitElement {
      * ドラッグ中のバーが選択中バーに含まれ、選択数が2以上の場合にtrue。
      */
     private isMultiDrag;
+    /**
+     * 選択中の全タスクが同じ行に属しているかを判定する。
+     * 同じ行なら縦方向（行間）の移動を許可する。
+     */
+    private isMultiDragSameRow;
     private handleTaskUpdate;
     private handleBarMouseEnter;
     private handleBarMouseLeave;
@@ -92,6 +112,15 @@ export declare class GanttChartElement extends LitElement {
         rowId: string;
         date: Date;
     } | null;
+    /**
+     * 各行のY座標（カレンダーヘッダーを含まない、行領域の上端からの相対位置）
+     * のレイアウト情報を取得します。
+     */
+    getRowPositions(): {
+        top: number;
+        height: number;
+        bottom: number;
+    }[];
     /**
      * html2canvas を使用してガントチャートを画像としてエクスポートする。
      * (Shadow DOMネイティブ対応版 html2canvas-pro を使用)
@@ -99,6 +128,23 @@ export declare class GanttChartElement extends LitElement {
      * @param options エクスポートオプション。
      */
     exportImage(format?: 'png' | 'pdf', options?: ExportImageOptions): Promise<string | Blob>;
+    /**
+     * Ctrl/Cmd + マウスホイールによるズーム処理
+     */
+    private handleWheel;
+    /**
+     * 指定した pxPerDay（または pxPerMonth）にズームを設定する。
+     * @param value ズーム先の pxPerDay（月単位モード時は pxPerMonth）
+     */
+    zoomTo(value: number): void;
+    /**
+     * 全タスクが表示領域に収まるようにズームレベルを自動調整する。
+     */
+    zoomToFit(): void;
+    /**
+     * ズームをリセットし、option で設定された元のスケールに戻す。
+     */
+    resetZoom(): void;
     private clearSelection;
     private handleKeyDown;
     /**

package/dist/components/gantt-row.d.ts

@@ -17,6 +17,8 @@ export declare class GanttRowElement extends LitElement {
     } | null;
     draggingTaskIds: string[];
     multiDragDx: number;
+    multiDragDy: number;
+    multiDragSameRow: boolean;
     externalDragTask: {
         task: GanttTask;
         currentStart: Date;
@@ -28,6 +30,7 @@ export declare class GanttRowElement extends LitElement {
     selectedTaskIds: string[];
     focusedTaskId: string | null;
     isExporting: boolean;
+    criticalPathTaskIds: string[];
     private _cachedMonthGridLines;
     private _cachedMonthGridStartTime;
     private _cachedMonthGridEndTime;
@@ -38,6 +41,18 @@ export declare class GanttRowElement extends LitElement {
      * マーカーのSVGパスを生成する
      */
     private getMarkerPath;
+    /**
+     * マーカーの表示幅を推定する（アイコン＋ラベル）
+     */
+    private estimateMarkerWidth;
+    /**
+     * マーカーのX方向の占有範囲を計算する
+     */
+    private getMarkerXRange;
+    /**
+     * マーカー群のレーン（段）を計算して重なりを回避する
+     */
+    private calculateMarkerLanes;
     static styles: import("lit").CSSResult;
     private handleDragStart;
     private handleHeaderClick;

package/dist/core/critical-path.d.ts

@@ -0,0 +1,18 @@
+import type { GanttRow } from './types';
+/**
+ * 依存関係グラフからクリティカルパス上のタスクIDの集合を計算する。
+ *
+ * 手動スケジュールのガントチャート向けに最適化:
+ * - 依存関係グラフの中で最長のチェーン（最終タスクの終了時刻が最も遅いパス）を検出する
+ * - 依存関係に参加していない独立タスクはクリティカルパス計算から除外する
+ *
+ * アルゴリズム:
+ * 1. 全タスクを走査し依存関係グラフを構築
+ * 2. 依存関係に参加しているタスクのみを抽出
+ * 3. トポロジカルソート順に前方パス（最早終了時刻 EF）を計算
+ * 4. 最終タスクから逆方向にバックトラックし、最長パスを構成するタスクを収集
+ *
+ * @param rows ガントチャートの全行データ
+ * @returns クリティカルパス上のタスクID集合
+ */
+export declare function computeCriticalPath(rows: GanttRow[]): Set<string>;

package/dist/core/types.d.ts

@@ -316,6 +316,10 @@ export interface GanttChartOptionDependency {
     lineStyle?: DependencyLineStyle;
     /** orthogonalスタイル時の角丸半径 (px)。デフォルト: 8 */
     cornerRadius?: number;
+    /** 接続ポイント（丸印）を表示するかどうか (デフォルト: true) */
+    showConnectors?: boolean;
+    /** クリティカルパスを表示するかどうか (デフォルト: false) */
+    showCriticalPath?: boolean;
 }
 /**
  * ガントチャート全体のオプション設定
@@ -358,6 +362,17 @@ export interface GanttChartOption {
         /** Shift+矢印キーでのタスク移動量（分）。省略時は snapDuration を使用 */
         moveStep?: number;
     };
+    /** ズーム機能の設定 */
+    zoom?: {
+        /** ズーム機能を有効にするか (デフォルト: false) */
+        enabled?: boolean;
+        /** 最小 pxPerDay (デフォルト: 2)。pxPerMonth モードの場合は最小 pxPerMonth */
+        min?: number;
+        /** 最大 pxPerDay (デフォルト: 200)。pxPerMonth モードの場合は最大 pxPerMonth */
+        max?: number;
+        /** ホイール1回あたりのズーム倍率 (デフォルト: 1.2) */
+        step?: number;
+    };
 }
 /**
  * タスク更新イベントの詳細データ
@@ -561,6 +576,8 @@ export interface ThemeColorPalette {
     thursday?: string;
     /** 金曜日の背景色 (オプション) */
     friday?: string;
+    /** クリティカルパスの色 (オプション) */
+    criticalPath?: string;
 }
 /**
  * テーマセット (light/dark)
@@ -610,3 +627,12 @@ export interface TaskDeleteEventDetail {
     /** 元のキーボードイベント */
     event: KeyboardEvent;
 }
+/**
+ * ズーム変更イベントの詳細データ
+ */
+export interface ZoomChangeEventDetail {
+    /** ズーム後の pxPerDay */
+    pxPerDay: number;
+    /** ズーム後の pxPerMonth（月単位モード時のみ） */
+    pxPerMonth?: number;
+}

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './components/gantt-row';
 export * from './core/types';
 export * from './core/patterns';
 export * from './core/i18n';
+export { computeCriticalPath } from './core/critical-path';