@mogura/moguchart-core 0.6.0 → 0.8.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

@@ -12,6 +12,7 @@ export declare class GanttBarElement extends LitElement {
     multiDragSameRow: boolean;
     connectorDropTarget: boolean;
     isExporting: boolean;
+    isCriticalPath: boolean;
     private _currentDragCursor;
     private _dragAnimationFrame;
     private _wasDragging;

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

@@ -38,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;
@@ -45,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;
@@ -99,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 を使用)
@@ -106,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

@@ -30,6 +30,7 @@ export declare class GanttRowElement extends LitElement {
     selectedTaskIds: string[];
     focusedTaskId: string | null;
     isExporting: boolean;
+    criticalPathTaskIds: string[];
     private _cachedMonthGridLines;
     private _cachedMonthGridStartTime;
     private _cachedMonthGridEndTime;
@@ -40,6 +41,10 @@ export declare class GanttRowElement extends LitElement {
      * マーカーのSVGパスを生成する
      */
     private getMarkerPath;
+    /**
+     * マーカーのフォントサイズ名をpx値に変換する
+     */
+    private resolveMarkerFontSize;
     /**
      * マーカーの表示幅を推定する（アイコン＋ラベル）
      */
@@ -57,6 +62,10 @@ export declare class GanttRowElement extends LitElement {
     private handleHeaderClick;
     private handleHeaderContextMenu;
     private handleHeaderDblClick;
+    private _rowHeaderTooltipEl;
+    private _rowHeaderTooltipTimer;
+    private handleHeaderMouseEnter;
+    private handleHeaderMouseLeave;
     protected updated(changedProperties: PropertyValues): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -20,6 +20,10 @@ export type MarkerType = 'triangle-up' | 'triangle-down' | 'triangle-left' | 'tr
  * マーカーのアンカー位置
  */
 export type AnchorType = 'start' | 'end' | 'center';
+/**
+ * マーカーのフォントサイズ
+ */
+export type MarkerFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * マーカーの設定
  */
@@ -36,6 +40,8 @@ export interface GanttMarker {
     type: MarkerType;
     /** マーカーの色 (CSS color string) */
     color?: string;
+    /** マーカーのラベルのフォントサイズ ('xs'=極小, 'sm'=小, 'md'=中, 'lg'=大, 'xl'=特大) */
+    fontSize?: MarkerFontSize;
     /** マーカーのカスタムスタイル (CSS文字列) */
     style?: string;
 }
@@ -82,6 +88,8 @@ export interface GanttRow {
     tasks: GanttTask[];
     /** マーカーの配列 */
     markers?: GanttMarker[];
+    /** 現在選択中（編集中）のマーカーID */
+    selectedMarkerId?: string;
     /** 行を表示するかどうか (デフォルト: true) */
     visible?: boolean;
 }
@@ -285,6 +293,8 @@ export interface GanttChartOptionCustomRendering {
     calendarHourContent?: (context: CalendarHourCellContext) => string | unknown;
     /** ガントチャート部の背景セルをレンダリングする関数。各日のセルごとに呼ばれ、HTML文字列またはTemplateResultを返す */
     chartBackground?: (context: ChartBackgroundCellContext) => string | unknown;
+    /** 行ヘッダーのツールチップコンテンツをレンダリングする関数。マウスホバー時に呼ばれる */
+    rowHeaderTooltip?: (row: GanttRow) => string | HTMLElement | unknown;
 }
 /**
  * チャート背景右クリックイベントの詳細データ
@@ -316,6 +326,10 @@ export interface GanttChartOptionDependency {
     lineStyle?: DependencyLineStyle;
     /** orthogonalスタイル時の角丸半径 (px)。デフォルト: 8 */
     cornerRadius?: number;
+    /** 接続ポイント（丸印）を表示するかどうか (デフォルト: true) */
+    showConnectors?: boolean;
+    /** クリティカルパスを表示するかどうか (デフォルト: false) */
+    showCriticalPath?: boolean;
 }
 /**
  * ガントチャート全体のオプション設定
@@ -358,6 +372,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 +586,8 @@ export interface ThemeColorPalette {
     thursday?: string;
     /** 金曜日の背景色 (オプション) */
     friday?: string;
+    /** クリティカルパスの色 (オプション) */
+    criticalPath?: string;
 }
 /**
  * テーマセット (light/dark)
@@ -601,6 +628,28 @@ export interface DependencyClickEventDetail {
     /** 元のマウスイベント */
     event: MouseEvent;
 }
+/**
+ * マーカーダブルクリックイベントの詳細データ
+ */
+export interface MarkerDblClickEventDetail {
+    /** 対象のマーカー */
+    marker: GanttMarker;
+    /** マーカーが属する行ID */
+    rowId: string;
+    /** 元のマウスイベント */
+    event: MouseEvent;
+}
+/**
+ * マーカー右クリック（コンテキストメニュー）イベントの詳細データ
+ */
+export interface MarkerContextMenuEventDetail {
+    /** 対象のマーカー */
+    marker: GanttMarker;
+    /** マーカーが属する行ID */
+    rowId: string;
+    /** 元のマウスイベント */
+    event: MouseEvent;
+}
 /**
  * タスク削除イベントの詳細データ
  */
@@ -610,3 +659,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';