@ganttloom/gantt-core 0.2.1 → 0.4.3

package/dist/index.d.cts

@@ -123,7 +123,7 @@ interface GanttTask {
     /** the date the constraint is relative to (ignored for "asap"/"alap") */
     constraintDate?: Date;
     assignees?: GanttAssignee[];
-    /** shown as a native hover tooltip on the bar (an SVG <title>, so it works with zero extra markup/JS) */
+    /** shown as an extra line in the default hover tooltip (see GanttOptions.showTooltip/renderTooltip) */
     notes?: string;
     /** additional named baseline snapshots beyond baselineStart/baselineEnd (e.g. "as of last Friday") - rendered as extra faint bars, oldest furthest back */
     baselines?: {
@@ -152,6 +152,14 @@ interface GanttColumn {
     /** anchor target, defaults to "_blank" */
     linkTarget?: string;
     align?: "left" | "center" | "right";
+    /**
+     * Lets clicking this column's header cycle sort asc -> desc -> none. Sorting reorders
+     * siblings at every tree level by this column's value (via `accessor`, or `task.name` for
+     * the conventional unaccessored "name" column) - the group/parent hierarchy itself is
+     * never reshuffled, only the order within it. A column with neither `accessor` nor the id
+     * "name" has nothing sortable to read and is a no-op if marked sortable.
+     */
+    sortable?: boolean;
 }
 interface GanttTheme {
     rowHeight: number;
@@ -174,6 +182,7 @@ interface GanttTheme {
     fontFamily: string;
     fontSize: number;
     borderRadius: number;
+    borderColor?: string;
 }
 /**
  * Fully-resolved, framework-agnostic geometry for one render pass.
@@ -245,6 +254,7 @@ interface GanttRenderMarker {
 interface GanttRenderTick {
     x: number;
     label: string;
+    parentLabel: string;
     isWeekend: boolean;
     /** weekend OR a calendar holiday; only meaningful when a WorkingCalendar was supplied */
     isNonWorking: boolean;
@@ -265,6 +275,10 @@ interface GanttRenderModel {
     markers: GanttRenderMarker[];
     /** start of the timeline's date range, in real time - lets callers convert chart-space x back to a Date */
     rangeStart: Date;
+    sort: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
 }
 interface GanttOptions {
     viewMode?: ViewMode;
@@ -274,6 +288,8 @@ interface GanttOptions {
     colorScheme?: "light" | "dark" | "auto";
     /** px per smallest time unit column, auto if omitted */
     columnWidth?: number;
+    /** Positions the grid and timeline headers. Default is "top". */
+    headerPosition?: "top" | "bottom" | "none";
     readonly?: boolean;
     showProgress?: boolean;
     showDependencies?: boolean;
@@ -281,6 +297,24 @@ interface GanttOptions {
     showCriticalPath?: boolean;
     showBaseline?: boolean;
     showDeadlines?: boolean;
+    /**
+     * Stretch (never shrink) the timeline so it fills the container's width instead of leaving
+     * empty space to the right - the common "short project at month/year zoom" or "just a
+     * handful of tasks" case, where the natural columnWidth would otherwise render a narrow
+     * chart floating in a mostly-empty viewport. Re-evaluated on viewMode/task changes and on
+     * container resize (via ResizeObserver). Never applied if the content is already wider than
+     * the container (that's what normal horizontal scrolling is for). Default false.
+     */
+    autoFitToViewport?: boolean;
+    /** hover tooltip on task bars, defaults to true. A floating, CSS-customizable element (see `.gantt-tooltip` in styles.css) - not the browser's native title tooltip. */
+    showTooltip?: boolean;
+    /**
+     * Fully control tooltip content/markup. Return an HTMLElement to mount directly, or a plain
+     * string rendered as text (never parsed as HTML, same XSS-safe contract as GanttColumn.render);
+     * return null/undefined to suppress the tooltip for that specific task. Defaults to task name,
+     * dates, progress, assignees, and notes.
+     */
+    renderTooltip?: (task: GanttTask) => HTMLElement | string | null | undefined;
     showAssigneeAvatars?: boolean;
     /** working-day/holiday definition used to shade non-working time and (with autoSchedule) skip it when cascading */
     calendar?: WorkingCalendar;
@@ -291,6 +325,11 @@ interface GanttOptions {
     /** enables click/ctrl-click/shift-click multi-selection of task bars, and chart.bulkShiftDates()/bulkDelete() */
     selectable?: boolean;
     onSelectionChange?: (taskIds: string[]) => void;
+    /** fired whenever the sort state changes, via a sortable column header click or chart.setSort() */
+    onSortChange?: (sort: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null) => void;
     /** enable Ctrl+Z / Ctrl+Y undo-redo history for move/resize/link actions */
     enableHistory?: boolean;
     /** enable arrow-key task movement + ARIA labels on bars/rows */
@@ -314,6 +353,8 @@ interface GanttOptions {
     /** called on double-click of a dependency link, for building your own "edit this link" UI (see chart.updateDependency) */
     onDependencyDblClick?: (dep: GanttDependency) => void;
     onTaskClick?: (task: GanttTask) => void;
+    /** called on double-click of a task bar (distinct from onDependencyDblClick, which is for links) */
+    onTaskDblClick?: (task: GanttTask) => void;
     onGroupToggle?: (task: GanttTask, collapsed: boolean) => void;
     /** called when a task is created via drag-to-create on an empty timeline row */
     onTaskCreate?: (task: GanttTask) => void;
@@ -369,6 +410,9 @@ type GanttEventMap = {
         order: string[];
     };
     "dependency-dblclick": GanttDependency;
+    "task-dblclick": {
+        task: GanttTask;
+    };
     "task-reorder": {
         draggedTaskId: string;
         targetTaskId: string;
@@ -377,6 +421,12 @@ type GanttEventMap = {
     "selection-change": {
         taskIds: string[];
     };
+    "sort-change": {
+        sort: {
+            columnId: string;
+            direction: "asc" | "desc";
+        } | null;
+    };
 };
 
 interface ResourceLevelingOptions {
@@ -479,6 +529,13 @@ interface LayoutInput {
         pageSize: number;
         page: number;
     };
+    /** sort siblings at every tree level by a column's value, preserving the group/parent hierarchy */
+    sort?: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
+    /** available pixel width of the scrolling timeline area, used to pad empty grids if chart is too short */
+    timelineViewportWidth?: number;
 }
 declare function computeLayout(input: LayoutInput): GanttRenderModel;
 
@@ -552,6 +609,7 @@ interface GeneratedTick {
     date: Date;
     x: number;
     label: string;
+    parentLabel: string;
     isWeekend: boolean;
     isNonWorking: boolean;
     isToday: boolean;
@@ -657,6 +715,9 @@ declare class GanttChart {
     private history;
     private renderer;
     private interactions;
+    private tooltip;
+    private resizeObserver;
+    private sort;
     private renderModel;
     private rafHandle;
     private currentPage;
@@ -676,6 +737,7 @@ declare class GanttChart {
     updateDependency(fromId: string, toId: string, partial: Partial<GanttDependency>): void;
     private handleProgressDrag;
     private handleCreateTaskDrag;
+    private handleAddChild;
     private handleBarClick;
     /** Replace (default) or add to (`additive: true`) the current selection. Requires `selectable`. */
     selectTask(id: string, options?: {
@@ -690,6 +752,14 @@ declare class GanttChart {
     private runCommand;
     private handleColumnResize;
     private handleColumnReorder;
+    /** Cycles a sortable column's header through asc -> desc -> none; clicking a different column starts it fresh at asc. */
+    private handleSortClick;
+    /** Sorts siblings at every tree level by a column's value (see GanttColumn.sortable); `direction: null`/omitted `columnId` clears it. */
+    setSort(columnId: string | null, direction?: "asc" | "desc" | null): void;
+    getSort(): {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
     private handleRowReorder;
     toggleGroup(taskId: string): void;
     expandAll(): void;
@@ -727,6 +797,12 @@ declare class GanttChart {
     private computeModel;
     private scheduleRender;
     private doRender;
+    /**
+     * Stretch-only fit: bump columnWidth up so the timeline fills the container's available
+     * width, but never shrink it below what the current zoom level already implies - a project
+     * wider than the container should still scroll normally, not get crammed to fit.
+     */
+    private applyAutoFit;
     undo(): void;
     redo(): void;
     get canUndo(): boolean;

package/dist/index.d.ts

@@ -123,7 +123,7 @@ interface GanttTask {
     /** the date the constraint is relative to (ignored for "asap"/"alap") */
     constraintDate?: Date;
     assignees?: GanttAssignee[];
-    /** shown as a native hover tooltip on the bar (an SVG <title>, so it works with zero extra markup/JS) */
+    /** shown as an extra line in the default hover tooltip (see GanttOptions.showTooltip/renderTooltip) */
     notes?: string;
     /** additional named baseline snapshots beyond baselineStart/baselineEnd (e.g. "as of last Friday") - rendered as extra faint bars, oldest furthest back */
     baselines?: {
@@ -152,6 +152,14 @@ interface GanttColumn {
     /** anchor target, defaults to "_blank" */
     linkTarget?: string;
     align?: "left" | "center" | "right";
+    /**
+     * Lets clicking this column's header cycle sort asc -> desc -> none. Sorting reorders
+     * siblings at every tree level by this column's value (via `accessor`, or `task.name` for
+     * the conventional unaccessored "name" column) - the group/parent hierarchy itself is
+     * never reshuffled, only the order within it. A column with neither `accessor` nor the id
+     * "name" has nothing sortable to read and is a no-op if marked sortable.
+     */
+    sortable?: boolean;
 }
 interface GanttTheme {
     rowHeight: number;
@@ -174,6 +182,7 @@ interface GanttTheme {
     fontFamily: string;
     fontSize: number;
     borderRadius: number;
+    borderColor?: string;
 }
 /**
  * Fully-resolved, framework-agnostic geometry for one render pass.
@@ -245,6 +254,7 @@ interface GanttRenderMarker {
 interface GanttRenderTick {
     x: number;
     label: string;
+    parentLabel: string;
     isWeekend: boolean;
     /** weekend OR a calendar holiday; only meaningful when a WorkingCalendar was supplied */
     isNonWorking: boolean;
@@ -265,6 +275,10 @@ interface GanttRenderModel {
     markers: GanttRenderMarker[];
     /** start of the timeline's date range, in real time - lets callers convert chart-space x back to a Date */
     rangeStart: Date;
+    sort: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
 }
 interface GanttOptions {
     viewMode?: ViewMode;
@@ -274,6 +288,8 @@ interface GanttOptions {
     colorScheme?: "light" | "dark" | "auto";
     /** px per smallest time unit column, auto if omitted */
     columnWidth?: number;
+    /** Positions the grid and timeline headers. Default is "top". */
+    headerPosition?: "top" | "bottom" | "none";
     readonly?: boolean;
     showProgress?: boolean;
     showDependencies?: boolean;
@@ -281,6 +297,24 @@ interface GanttOptions {
     showCriticalPath?: boolean;
     showBaseline?: boolean;
     showDeadlines?: boolean;
+    /**
+     * Stretch (never shrink) the timeline so it fills the container's width instead of leaving
+     * empty space to the right - the common "short project at month/year zoom" or "just a
+     * handful of tasks" case, where the natural columnWidth would otherwise render a narrow
+     * chart floating in a mostly-empty viewport. Re-evaluated on viewMode/task changes and on
+     * container resize (via ResizeObserver). Never applied if the content is already wider than
+     * the container (that's what normal horizontal scrolling is for). Default false.
+     */
+    autoFitToViewport?: boolean;
+    /** hover tooltip on task bars, defaults to true. A floating, CSS-customizable element (see `.gantt-tooltip` in styles.css) - not the browser's native title tooltip. */
+    showTooltip?: boolean;
+    /**
+     * Fully control tooltip content/markup. Return an HTMLElement to mount directly, or a plain
+     * string rendered as text (never parsed as HTML, same XSS-safe contract as GanttColumn.render);
+     * return null/undefined to suppress the tooltip for that specific task. Defaults to task name,
+     * dates, progress, assignees, and notes.
+     */
+    renderTooltip?: (task: GanttTask) => HTMLElement | string | null | undefined;
     showAssigneeAvatars?: boolean;
     /** working-day/holiday definition used to shade non-working time and (with autoSchedule) skip it when cascading */
     calendar?: WorkingCalendar;
@@ -291,6 +325,11 @@ interface GanttOptions {
     /** enables click/ctrl-click/shift-click multi-selection of task bars, and chart.bulkShiftDates()/bulkDelete() */
     selectable?: boolean;
     onSelectionChange?: (taskIds: string[]) => void;
+    /** fired whenever the sort state changes, via a sortable column header click or chart.setSort() */
+    onSortChange?: (sort: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null) => void;
     /** enable Ctrl+Z / Ctrl+Y undo-redo history for move/resize/link actions */
     enableHistory?: boolean;
     /** enable arrow-key task movement + ARIA labels on bars/rows */
@@ -314,6 +353,8 @@ interface GanttOptions {
     /** called on double-click of a dependency link, for building your own "edit this link" UI (see chart.updateDependency) */
     onDependencyDblClick?: (dep: GanttDependency) => void;
     onTaskClick?: (task: GanttTask) => void;
+    /** called on double-click of a task bar (distinct from onDependencyDblClick, which is for links) */
+    onTaskDblClick?: (task: GanttTask) => void;
     onGroupToggle?: (task: GanttTask, collapsed: boolean) => void;
     /** called when a task is created via drag-to-create on an empty timeline row */
     onTaskCreate?: (task: GanttTask) => void;
@@ -369,6 +410,9 @@ type GanttEventMap = {
         order: string[];
     };
     "dependency-dblclick": GanttDependency;
+    "task-dblclick": {
+        task: GanttTask;
+    };
     "task-reorder": {
         draggedTaskId: string;
         targetTaskId: string;
@@ -377,6 +421,12 @@ type GanttEventMap = {
     "selection-change": {
         taskIds: string[];
     };
+    "sort-change": {
+        sort: {
+            columnId: string;
+            direction: "asc" | "desc";
+        } | null;
+    };
 };
 
 interface ResourceLevelingOptions {
@@ -479,6 +529,13 @@ interface LayoutInput {
         pageSize: number;
         page: number;
     };
+    /** sort siblings at every tree level by a column's value, preserving the group/parent hierarchy */
+    sort?: {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
+    /** available pixel width of the scrolling timeline area, used to pad empty grids if chart is too short */
+    timelineViewportWidth?: number;
 }
 declare function computeLayout(input: LayoutInput): GanttRenderModel;
 
@@ -552,6 +609,7 @@ interface GeneratedTick {
     date: Date;
     x: number;
     label: string;
+    parentLabel: string;
     isWeekend: boolean;
     isNonWorking: boolean;
     isToday: boolean;
@@ -657,6 +715,9 @@ declare class GanttChart {
     private history;
     private renderer;
     private interactions;
+    private tooltip;
+    private resizeObserver;
+    private sort;
     private renderModel;
     private rafHandle;
     private currentPage;
@@ -676,6 +737,7 @@ declare class GanttChart {
     updateDependency(fromId: string, toId: string, partial: Partial<GanttDependency>): void;
     private handleProgressDrag;
     private handleCreateTaskDrag;
+    private handleAddChild;
     private handleBarClick;
     /** Replace (default) or add to (`additive: true`) the current selection. Requires `selectable`. */
     selectTask(id: string, options?: {
@@ -690,6 +752,14 @@ declare class GanttChart {
     private runCommand;
     private handleColumnResize;
     private handleColumnReorder;
+    /** Cycles a sortable column's header through asc -> desc -> none; clicking a different column starts it fresh at asc. */
+    private handleSortClick;
+    /** Sorts siblings at every tree level by a column's value (see GanttColumn.sortable); `direction: null`/omitted `columnId` clears it. */
+    setSort(columnId: string | null, direction?: "asc" | "desc" | null): void;
+    getSort(): {
+        columnId: string;
+        direction: "asc" | "desc";
+    } | null;
     private handleRowReorder;
     toggleGroup(taskId: string): void;
     expandAll(): void;
@@ -727,6 +797,12 @@ declare class GanttChart {
     private computeModel;
     private scheduleRender;
     private doRender;
+    /**
+     * Stretch-only fit: bump columnWidth up so the timeline fills the container's available
+     * width, but never shrink it below what the current zoom level already implies - a project
+     * wider than the container should still scroll normally, not get crammed to fit.
+     */
+    private applyAutoFit;
     undo(): void;
     redo(): void;
     get canUndo(): boolean;