@mogura/moguchart-core 0.9.1 → 0.11.0

package/README.en.md

@@ -32,6 +32,7 @@ A lightweight yet feature-rich Gantt chart Web Component built with Lit. Works w
   - Locale support (Japanese, English, and custom locales)
 - 🏁 **Milestones**: Display milestones (vertical line + name badge) on the chart
 - 📍 **Markers**: Show triangle icons with labels on row timelines
+- 🗺️ **Overview Minimap**: Bird's-eye preview of the entire chart, interactive pan & scroll synchronization, click-to-jump, and collapsible floating window
 - ✨ **Advanced Integration**:
   - External drag & drop for task creation
   - Task move/copy mode

package/README.md

@@ -32,6 +32,7 @@ Vue, React, Angular, Svelte など、どのフレームワークでも動作す
   - ロケール対応（日本語・英語、カスタムロケールも可能）
 - 🏁 **マイルストーン**: チャート上にマイルストーン（縦線＋名前バッジ）を表示
 - 📍 **マーカー**: 行のタイムライン上に三角形アイコンとラベルで目印を表示
+- 🗺️ **ミニマップ（Overview Minimap）**: チャート全体の鳥瞰プレビュー表示、ドラッグによるスクロール同期・パン操作、クリックジャンプ、折りたたみ対応
 - ✨ **高度な連携**:
   - 外部からのドラッグ＆ドロップによるタスク作成
   - タスクの移動/コピーモード

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

@@ -21,6 +21,7 @@ export declare class GanttBarElement extends LitElement {
     private getX;
     private setupDragEvents;
     private onResizeStart;
+    private getGanttChartElement;
     /** ドラッグ開始と判定するための移動閾値（px） */
     private static readonly DRAG_THRESHOLD;
     private onMoveStart;

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

@@ -2,6 +2,7 @@ import type { GanttChartOption, GanttRow, GanttTask } from '../core/types';
 import { LitElement, type PropertyValues } from 'lit';
 import './gantt-calendar';
 import './gantt-row';
+import './gantt-minimap';
 import { type ExportImageOptions } from './gantt-chart-export';
 export declare class GanttChartElement extends LitElement {
     rows: GanttRow[];
@@ -14,6 +15,9 @@ export declare class GanttChartElement extends LitElement {
     private selectedTasks;
     private lastClickedRowId;
     private virtualScrollTop;
+    private currentScrollLeft;
+    private currentScrollTop;
+    private viewportWidth;
     private dragTargetRowIndex;
     private draggingTask;
     private draggingTaskIds;
@@ -77,6 +81,7 @@ export declare class GanttChartElement extends LitElement {
     private stopCurrentTimeTimer;
     private handleHeaderResizeStart;
     private handleScroll;
+    private handleMinimapScroll;
     private updateScrollTop;
     private handleContainerMouseMove;
     private handleContainerMouseLeave;

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

@@ -0,0 +1,105 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { GanttChartOption, GanttRow, MinimapCollapseEventDetail, MinimapMoveEventDetail, MinimapResizeEventDetail } from '../core/types';
+/**
+ * ミニマップスクロールイベントの詳細データ
+ */
+export interface MinimapScrollEventDetail {
+    scrollLeft: number;
+    scrollTop: number;
+}
+export type { MinimapCollapseEventDetail, MinimapMoveEventDetail, MinimapResizeEventDetail };
+/**
+ * ガントチャートの全体俯瞰およびナビゲーションを行うフローティング小窓コンポーネント
+ */
+export declare class GanttMinimapElement extends LitElement {
+    rows: GanttRow[];
+    option: GanttChartOption;
+    theme: 'light' | 'dark';
+    scrollLeft: number;
+    scrollTop: number;
+    viewportWidth: number;
+    viewportHeight: number;
+    contentWidth: number;
+    contentHeight: number;
+    calendarHeight: number;
+    rowHeaderWidth: number;
+    currentTime: Date;
+    private isCollapsed;
+    private isDragging;
+    private isHeaderDragging;
+    private isResizing;
+    private customWidth;
+    private customHeight;
+    private position;
+    private canvasEl?;
+    private dragStartX;
+    private dragStartY;
+    private dragStartScrollLeft;
+    private dragStartScrollTop;
+    private headerDragStartX;
+    private headerDragStartY;
+    private headerDragOriginRight;
+    private headerDragOriginBottom;
+    private resizeHandleType;
+    private resizeStartPointerX;
+    private resizeStartPointerY;
+    private resizeStartWidth;
+    private resizeStartHeight;
+    private resizeStartOriginRight;
+    private resizeStartOriginBottom;
+    private lastParentWidth;
+    private lastParentHeight;
+    private lastMinimapWidth;
+    private lastMinimapHeight;
+    private parentResizeObserver;
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    private initPositionFromOption;
+    firstUpdated(changedProperties: PropertyValues): void;
+    disconnectedCallback(): void;
+    private getParentTarget;
+    private getParentDimensions;
+    private setupParentResizeObserver;
+    private handleParentResize;
+    willUpdate(changedProperties: PropertyValues): void;
+    updated(changedProperties: PropertyValues): void;
+    private updateHostPosition;
+    private handleHeaderPointerDown;
+    private handleHeaderPointerMove;
+    private handleHeaderPointerUp;
+    private get isResizable();
+    private get minMinimapWidth();
+    private get maxMinimapWidth();
+    private get minMinimapHeight();
+    private get baseMinimapWidth();
+    private get baseMinimapHeight();
+    private get maxMinimapHeight();
+    private get preserveAspectRatio();
+    /**
+     * アスペクト比維持（等倍スケーリング）時の共通スケール
+     * baseMinimapWidth x baseMinimapHeight の最大バウンディングボックスに収まる最大の等倍縮尺
+     */
+    private get uniformScale();
+    private get scaleX();
+    private get scaleY();
+    private get minimapWidth();
+    private get minimapHeight();
+    private handleResizePointerDown;
+    private handleResizePointerMove;
+    private handleResizePointerUp;
+    private get effectiveContentWidth();
+    private get effectiveContentHeight();
+    private renderCanvas;
+    private handleBodyPointerDown;
+    private handleViewportPointerDown;
+    private handleViewportPointerMove;
+    private handleViewportPointerUp;
+    private dispatchScroll;
+    private toggleCollapse;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'gantt-minimap': GanttMinimapElement;
+    }
+}

package/dist/core/types.d.ts

@@ -355,6 +355,8 @@ export interface GanttChartOption {
     customTheme?: Partial<ThemeColorPalette>;
     /** 行の並び替えを有効にするかどうか */
     enableRowReordering?: boolean;
+    /** タスクの行間移動を有効にするかどうか (デフォルト: true) */
+    enableCrossRowMove?: boolean;
     /** スナップする時間単位（分）。デフォルトは1440（1日） */
     snapDuration?: number;
     /** 非表示に設定された行を表示するかどうか (デフォルト: false) */
@@ -383,6 +385,76 @@ export interface GanttChartOption {
         /** ホイール1回あたりのズーム倍率 (デフォルト: 1.2) */
         step?: number;
     };
+    /** ミニマップ（Overview Minimap）機能の設定 */
+    minimap?: GanttChartOptionMinimap;
+}
+/**
+ * ミニマップ（Overview Minimap）に関するオプション
+ */
+export interface GanttChartOptionMinimap {
+    /** ミニマップを表示するかどうか (デフォルト: false) */
+    enabled?: boolean;
+    /** ミニマップの幅 (px)。デフォルト: 200 */
+    width?: number;
+    /** ミニマップの高さ (px)。デフォルト: 120 */
+    height?: number;
+    /** 縦横比維持時の最大高さ (px)。デフォルト: height または 120 */
+    maxHeight?: number;
+    /** ガントチャートコンテンツの縦横比（アスペクト比）に合わせて描画するかどうか (デフォルト: true) */
+    preserveAspectRatio?: boolean;
+    /** ユーザーによるドラッグリサイズ（サイズ変更）を許可するかどうか (デフォルト: true) */
+    resizable?: boolean;
+    /** リサイズ時の最小幅 (px)。デフォルト: 120 */
+    minWidth?: number;
+    /** リサイズ時の最大幅 (px)。デフォルト: 600 */
+    maxWidth?: number;
+    /** リサイズ時の最小高さ (px)。デフォルト: 60 */
+    minHeight?: number;
+    /** 折りたたみ（最小化）ボタンを表示するかどうか (デフォルト: true) */
+    collapsible?: boolean;
+    /** 初期状態で折りたたまれているかどうか (デフォルト: false) */
+    collapsed?: boolean;
+    /** マイルストーンを表示するかどうか (デフォルト: true) */
+    showMilestones?: boolean;
+    /** 現在時刻線を表示するかどうか (デフォルト: true) */
+    showCurrentTime?: boolean;
+    /** ミニマップの初期位置（親要素に対する右下基準の座標 px） */
+    position?: MinimapPosition;
+    /** ミニマップの不透明度 (0.1 〜 1.0)。デフォルト: 1.0 */
+    opacity?: number;
+}
+/**
+ * ミニマップの表示位置（親要素の右端・下端からのオフセット距離 px）
+ */
+export interface MinimapPosition {
+    /** 親要素の右端からミニマップ右端までの距離 (px) */
+    right: number;
+    /** 親要素の下端からミニマップ下端までの距離 (px) */
+    bottom: number;
+}
+/**
+ * ミニマップの移動イベントの詳細データ
+ */
+export interface MinimapMoveEventDetail {
+    /** 親要素の右端からミニマップ右端までの距離 (px) */
+    right: number;
+    /** 親要素の下端からミニマップ下端までの距離 (px) */
+    bottom: number;
+}
+/**
+ * ミニマップのリサイズイベントの詳細データ
+ */
+export interface MinimapResizeEventDetail {
+    width: number;
+    height: number;
+    position?: MinimapPosition;
+}
+/**
+ * ミニマップの折りたたみ（最小化）イベントの詳細データ
+ */
+export interface MinimapCollapseEventDetail {
+    /** 最小化されているかどうか */
+    collapsed: boolean;
 }
 /**
  * タスク更新イベントの詳細データ
@@ -400,10 +472,20 @@ export interface TaskUpdateEventDetail extends GanttTask {
     x?: number;
     /** マウスのY座標（ドラッグ中のみ） */
     y?: number;
+    /** タスクバーの中心X座標（ドラッグ中のみ） */
+    barX?: number;
+    /** タスクバーの上端Y座標（ドラッグ中のみ） */
+    barTop?: number;
+    /** タスクバーの下端Y座標（ドラッグ中のみ） */
+    barBottom?: number;
     /** タスク移動モード(move/copy) */
     mode: GanttTaskMoveMode;
     /** 複数選択移動時の対象タスクID配列 */
     selectedTaskIds?: string[];
+    /** ガントチャート外にカーソルがあるかどうか */
+    isOutside?: boolean;
+    /** ドラッグがキャンセルされたかどうか */
+    isCancel?: boolean;
 }
 /**
  * バーのホバーイベント詳細
@@ -590,6 +672,16 @@ export interface ThemeColorPalette {
     friday?: string;
     /** クリティカルパスの色 (オプション) */
     criticalPath?: string;
+    /** ミニマップの背景色 (オプション) */
+    minimapBg?: string;
+    /** ミニマップの枠線色 (オプション) */
+    minimapBorder?: string;
+    /** ミニマップのビューポート枠背景色 (オプション) */
+    minimapViewport?: string;
+    /** ミニマップのビューポート枠ボーダー色 (オプション) */
+    minimapViewportBorder?: string;
+    /** ミニマップのタスク描画色 (オプション) */
+    minimapTask?: string;
 }
 /**
  * テーマセット (light/dark)

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/gantt-bar';
 export * from './components/gantt-calendar';
 export * from './components/gantt-chart';
 export * from './components/gantt-row';
+export * from './components/gantt-minimap';
 export * from './core/types';
 export * from './core/patterns';
 export * from './core/i18n';