gantt-renderer 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [0.11.0](https://github.com/doberkofler/gantt-renderer/compare/v0.10.0...v0.11.0) (2026-05-13)
+
+
+### Bug Fixes
+
+* **gantt:** default fireCallback to false on select, collapseAll, and expandAll ([2572d4c](https://github.com/doberkofler/gantt-renderer/commit/2572d4c0c75b672b5f2d98d9a1dfde5fb30a421d))
+
+
+### Features
+
+* **gantt:** add getOpenStates instance method ([8c8b09c](https://github.com/doberkofler/gantt-renderer/commit/8c8b09cf323b45cc237e969ea190fb7cd7cb5428))
+
+# [0.10.0](https://github.com/doberkofler/gantt-renderer/compare/v0.9.0...v0.10.0) (2026-05-13)
+
+
+### Features
+
+* **gantt:** add onExpandCollapse/onExpandCollapseAll callbacks and header +/− controls ([652d626](https://github.com/doberkofler/gantt-renderer/commit/652d6261b7d6cdfd74c07acebb54b84708a155b1))
+
 # [0.9.0](https://github.com/doberkofler/gantt-renderer/compare/v0.8.0...v0.9.0) (2026-05-13)
 
 

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as deriveWeekStartsOn, c as formatWeekNumber, i as deriveWeekNumbering, l as resolveChartLocale, n as EN_US_LABELS, o as deriveWeekendDays, r as LocaleLabelKey, s as formatLabel, t as ChartLocale } from "./locale-BQKHOEOx.mjs";
+import { a as deriveWeekStartsOn, c as formatWeekNumber, i as deriveWeekNumbering, l as resolveChartLocale, n as EN_US_LABELS, o as deriveWeekendDays, r as LocaleLabelKey, s as formatLabel, t as ChartLocale } from "./locale-B81kcgPd.mjs";
 import { z } from "zod";
 
 //#region src/lib/validation/schemas.d.ts
@@ -489,6 +489,14 @@ type OnProgressChange<TTaskData = never, TLinkData = never> = (payload: {
   newPercentComplete: number;
   instance: GanttInstance<TTaskData, TLinkData>;
 }) => boolean | Promise<boolean>;
+type OnExpandCollapse<TTaskData = never, TLinkData = never> = (payload: {
+  task: Task<TTaskData>;
+  instance: GanttInstance<TTaskData, TLinkData>;
+}) => void | Promise<void>;
+type OnExpandCollapseAll<TTaskData = never, TLinkData = never> = (payload: {
+  tasks: Task<TTaskData>[];
+  instance: GanttInstance<TTaskData, TLinkData>;
+}) => void | Promise<void>;
 type OnTooltipText<TTaskData = never, TLinkData = never> = (payload: {
   task: Task<TTaskData>;
   instance: GanttInstance<TTaskData, TLinkData>;
@@ -503,6 +511,8 @@ type GanttCallbacks<TTaskData = never, TLinkData = never> = {
   onLinkClick?: OnLinkClick<TTaskData, TLinkData>;
   onLinkDblClick?: OnLinkDblClick<TTaskData, TLinkData>;
   onProgressChange?: OnProgressChange<TTaskData, TLinkData>;
+  onExpandCollapse?: OnExpandCollapse<TTaskData, TLinkData>;
+  onExpandCollapseAll?: OnExpandCollapseAll<TTaskData, TLinkData>;
   onTooltipText?: OnTooltipText<TTaskData, TLinkData>;
   onLeftPaneWidthChange?: (payload: {
     width: number;
@@ -542,8 +552,12 @@ type GanttInstance<TTaskData = never, TLinkData = never> = {
   setOptions: (opts: Partial<GanttOptions>) => void;
   setCallbacks: (cbs: GanttCallbacks<TTaskData, TLinkData>) => void;
   select: (id: number | null, fireCallback?: boolean) => void;
-  collapseAll: () => void;
-  expandAll: () => void;
+  collapseAll: (fireCallback?: boolean) => void;
+  expandAll: (fireCallback?: boolean) => void;
+  getOpenStates: () => {
+    id: number;
+    open: boolean;
+  }[];
   destroy: () => void;
 };
 /**
@@ -602,22 +616,36 @@ declare class GanttChart<TTaskData = never, TLinkData = never> implements GanttI
    * Programmatically selects or deselects a task.
    *
    * @param id - The task ID to select, or `null` to clear the selection.
-   * @param fireCallback - Whether to fire the `onTaskClick` callback. Default `true`.
+   * @param fireCallback - Whether to fire the `onTaskClick` callback. Default `false`.
    * @throws {GanttError} When the instance has been destroyed.
    */
   select(id: number | null, fireCallback?: boolean): void;
   /**
    * Collapses all expandable groups in the task tree.
    *
+   * @param fireCallback - Whether to fire the `onExpandCollapseAll` callback. Default `false`.
    * @throws {GanttError} When the instance has been destroyed.
    */
-  collapseAll(): void;
+  collapseAll(fireCallback?: boolean): void;
   /**
    * Expands all expandable groups in the task tree.
    *
+   * @param fireCallback - Whether to fire the `onExpandCollapseAll` callback. Default `false`.
+   * @throws {GanttError} When the instance has been destroyed.
+   */
+  expandAll(fireCallback?: boolean): void;
+  /**
+   * Returns the current expand/collapse state of every expandable node
+   * (project tasks that have children). The result is ordered by the
+   * input task list order.
+   *
+   * @returns An array of `{id, open}` objects for expandable nodes only.
    * @throws {GanttError} When the instance has been destroyed.
    */
-  expandAll(): void;
+  getOpenStates(): {
+    id: number;
+    open: boolean;
+  }[];
   /**
    * Removes the chart DOM and internal listeners, rendering the instance
    * unusable. Subsequent calls to any public method will throw.
@@ -639,5 +667,5 @@ declare class GanttError extends Error {
   constructor(code: GanttErrorCode, message: string);
 }
 //#endregion
-export { BAR_HEIGHT, BAR_Y_OFFSET, type BarLayout, type ChartLocale, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, type GanttCallbacks, GanttChart, GanttError, type GanttErrorCode, type GanttInput, type GanttInputRaw, type GanttInstance, type GanttOptions, type GridColumn, type Link, type LinkType, type LocaleLabelKey, MILESTONE_HALF, MILESTONE_SIZE, type OnLinkClick, type OnLinkCreate, type OnLinkDblClick, type OnProgressChange, type OnTaskAdd, type OnTaskClick, type OnTaskDoubleClick, type OnTaskMove, type OnTaskResize, type OnTooltipText, type PixelMapper, type Point, ROW_HEIGHT, type RoutedLink, SCALE_CONFIGS, type ScaleConfig, type SpecialDay, type SpecialDayKind, type Task, type TaskDataField, type TaskKind, type TaskNode, type ThemeMode, type TimeScale, addDays, addHours, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, diffHours, flattenTree, formatLabel, formatWeekNumber, gridColumnDefaults, gridNaturalWidth, gridTemplateColumns, isParent, parseDate, resolveChartLocale, routeLinks, validateLinkRefs, visibleColumns };
+export { BAR_HEIGHT, BAR_Y_OFFSET, type BarLayout, type ChartLocale, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, type GanttCallbacks, GanttChart, GanttError, type GanttErrorCode, type GanttInput, type GanttInputRaw, type GanttInstance, type GanttOptions, type GridColumn, type Link, type LinkType, type LocaleLabelKey, MILESTONE_HALF, MILESTONE_SIZE, type OnExpandCollapse, type OnExpandCollapseAll, type OnLinkClick, type OnLinkCreate, type OnLinkDblClick, type OnProgressChange, type OnTaskAdd, type OnTaskClick, type OnTaskDoubleClick, type OnTaskMove, type OnTaskResize, type OnTooltipText, type PixelMapper, type Point, ROW_HEIGHT, type RoutedLink, SCALE_CONFIGS, type ScaleConfig, type SpecialDay, type SpecialDayKind, type Task, type TaskDataField, type TaskKind, type TaskNode, type ThemeMode, type TimeScale, addDays, addHours, buildTaskTree, computeLayout, createPixelMapper, deriveViewport, deriveWeekNumbering, deriveWeekStartsOn, deriveWeekendDays, detectCycles, diffDays, diffHours, flattenTree, formatLabel, formatWeekNumber, gridColumnDefaults, gridNaturalWidth, gridTemplateColumns, isParent, parseDate, resolveChartLocale, routeLinks, validateLinkRefs, visibleColumns };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -303,6 +303,8 @@ const EN_US_LABELS = {
 	ariaTask: "Task {0}",
 	ariaMilestone: "Milestone {0}",
 	addSubtaskTitle: "Add subtask",
+	expandAllTitle: "Expand all",
+	collapseAllTitle: "Collapse all",
 	columnTaskName: "Task name",
 	columnStartDate: "Start",
 	columnEndDate: "End",
@@ -1784,9 +1786,10 @@ function renderLeftPane(container, state, cbs, columns, showAddTaskButton = true
 * Builds the header row for the left pane.
 *
 * @param columns - The grid column schema.
+* @param locale - The current chart locale.
 * @returns The header DOM element.
 */
-function buildLeftPaneHeader(columns) {
+function buildLeftPaneHeader(columns, locale) {
 	const header = el("div");
 	css(header, {
 		display: "grid",
@@ -1809,6 +1812,60 @@ function buildLeftPaneHeader(columns) {
 			display: "flex",
 			alignItems: "flex-end"
 		});
+		if (i === 0 && visible[0]?.id === "name") {
+			const btnContainer = el("div");
+			btnContainer.className = "gantt-header-tree-controls";
+			css(btnContainer, {
+				display: "flex",
+				gap: "4px",
+				marginRight: "6px",
+				paddingBottom: "1px"
+			});
+			const expandBtn = el("button");
+			expandBtn.className = "gantt-header-expand-btn";
+			expandBtn.textContent = "+";
+			expandBtn.title = locale.labels?.expandAllTitle ?? EN_US_LABELS.expandAllTitle;
+			expandBtn.setAttribute("aria-label", expandBtn.title);
+			css(expandBtn, {
+				width: "18px",
+				height: "18px",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "var(--gantt-header-bg)",
+				border: "1px solid var(--gantt-border)",
+				borderRadius: "3px",
+				cursor: "pointer",
+				color: "var(--gantt-text-secondary)",
+				fontSize: "14px",
+				fontWeight: "var(--gantt-font-weight-bold)",
+				lineHeight: "1",
+				padding: "0"
+			});
+			const collapseBtn = el("button");
+			collapseBtn.className = "gantt-header-collapse-btn";
+			collapseBtn.textContent = "−";
+			collapseBtn.title = locale.labels?.collapseAllTitle ?? EN_US_LABELS.collapseAllTitle;
+			collapseBtn.setAttribute("aria-label", collapseBtn.title);
+			css(collapseBtn, {
+				width: "18px",
+				height: "18px",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "var(--gantt-header-bg)",
+				border: "1px solid var(--gantt-border)",
+				borderRadius: "3px",
+				cursor: "pointer",
+				color: "var(--gantt-text-secondary)",
+				fontSize: "14px",
+				fontWeight: "var(--gantt-font-weight-bold)",
+				lineHeight: "1",
+				padding: "0"
+			});
+			btnContainer.append(expandBtn, collapseBtn);
+			wrapper.append(btnContainer);
+		}
 		const cell = el("span");
 		css(cell, {
 			fontSize: "var(--gantt-font-size-xs)",
@@ -3259,10 +3316,10 @@ var GanttChart = class {
 	* Programmatically selects or deselects a task.
 	*
 	* @param id - The task ID to select, or `null` to clear the selection.
-	* @param fireCallback - Whether to fire the `onTaskClick` callback. Default `true`.
+	* @param fireCallback - Whether to fire the `onTaskClick` callback. Default `false`.
 	* @throws {GanttError} When the instance has been destroyed.
 	*/
-	select(id, fireCallback = true) {
+	select(id, fireCallback = false) {
 		this.#assertAlive();
 		if (id === null) this.#selectedId = null;
 		else {
@@ -3283,10 +3340,12 @@ var GanttChart = class {
 	/**
 	* Collapses all expandable groups in the task tree.
 	*
+	* @param fireCallback - Whether to fire the `onExpandCollapseAll` callback. Default `false`.
 	* @throws {GanttError} When the instance has been destroyed.
 	*/
-	collapseAll() {
+	collapseAll(fireCallback = false) {
 		this.#assertAlive();
+		const changed = fireCallback ? this.#buildExpandCollapseAllPayload(false) : [];
 		this.#expandedIds.clear();
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
@@ -3294,14 +3353,20 @@ var GanttChart = class {
 			this.#rafPending = false;
 		}
 		this.#render();
+		if (changed.length > 0) this.#callbacks.onExpandCollapseAll?.({
+			tasks: changed,
+			instance: this
+		});
 	}
 	/**
 	* Expands all expandable groups in the task tree.
 	*
+	* @param fireCallback - Whether to fire the `onExpandCollapseAll` callback. Default `false`.
 	* @throws {GanttError} When the instance has been destroyed.
 	*/
-	expandAll() {
+	expandAll(fireCallback = false) {
 		this.#assertAlive();
+		const changed = fireCallback ? this.#buildExpandCollapseAllPayload(true) : [];
 		this.#expandedIds.clear();
 		if (this.#input !== null) for (const id of getExpandableTaskIds(this.#input.tasks)) this.#expandedIds.add(id);
 		if (this.#rafPending && this.#rafId !== null) {
@@ -3310,6 +3375,42 @@ var GanttChart = class {
 			this.#rafPending = false;
 		}
 		this.#render();
+		if (changed.length > 0) this.#callbacks.onExpandCollapseAll?.({
+			tasks: changed,
+			instance: this
+		});
+	}
+	#buildExpandCollapseAllPayload(open) {
+		if (this.#input === null) return [];
+		const expandableIds = getExpandableTaskIds(this.#input.tasks);
+		const changed = [];
+		for (const id of expandableIds) if (this.#expandedIds.has(id) !== open) {
+			const task = this.#findTask(id);
+			if (task !== void 0) changed.push(task.kind === "project" ? {
+				...task,
+				open
+			} : { ...task });
+		}
+		return changed;
+	}
+	/**
+	* Returns the current expand/collapse state of every expandable node
+	* (project tasks that have children). The result is ordered by the
+	* input task list order.
+	*
+	* @returns An array of `{id, open}` objects for expandable nodes only.
+	* @throws {GanttError} When the instance has been destroyed.
+	*/
+	getOpenStates() {
+		this.#assertAlive();
+		if (this.#input === null) return [];
+		const expandableIds = getExpandableTaskIds(this.#input.tasks);
+		const result = [];
+		for (const task of this.#input.tasks) if (expandableIds.has(task.id)) result.push({
+			id: task.id,
+			open: this.#expandedIds.has(task.id)
+		});
+		return result;
 	}
 	/**
 	* Removes the chart DOM and internal listeners, rendering the instance
@@ -3446,8 +3547,20 @@ var GanttChart = class {
 	#renderGridInternal(state) {
 		renderLeftPane(this.#leftBody, state, {
 			onToggle: (id) => {
-				if (this.#expandedIds.has(id)) this.#expandedIds.delete(id);
-				else this.#expandedIds.add(id);
+				const expanded = !this.#expandedIds.has(id);
+				if (expanded) this.#expandedIds.add(id);
+				else this.#expandedIds.delete(id);
+				const task = this.#findTask(id);
+				if (task !== void 0) {
+					const payload = task.kind === "project" ? {
+						...task,
+						open: expanded
+					} : { ...task };
+					this.#callbacks.onExpandCollapse?.({
+						task: payload,
+						instance: this
+					});
+				}
 				this.#scheduleRender();
 			},
 			onTaskClick: (id) => this.#cbs.onTaskClick?.(id),
@@ -3469,12 +3582,25 @@ var GanttChart = class {
 	#rebuildLeftPaneHeader() {
 		this.#columnResizeCleanup();
 		clearChildren(this.#leftHeader);
-		const headerEl = buildLeftPaneHeader(this.#columns);
+		const headerEl = buildLeftPaneHeader(this.#columns, this.#locale);
+		this.#wireHeaderTreeControls(headerEl);
 		this.#leftHeader.append(headerEl);
 		this.#columnResizeCleanup = setupColumnResize(headerEl, this.#leftBody, this.#columns, (updated) => {
 			this.#cbs.onGridColumnsChange?.(updated);
 		});
 	}
+	#wireHeaderTreeControls(headerEl) {
+		const expandBtn = headerEl.querySelector(".gantt-header-expand-btn");
+		const collapseBtn = headerEl.querySelector(".gantt-header-collapse-btn");
+		if (expandBtn !== null) expandBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.expandAll(true);
+		});
+		if (collapseBtn !== null) collapseBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.collapseAll(true);
+		});
+	}
 	#scheduleRender() {
 		if (this.#rafPending || this.#destroyed) return;
 		this.#rafPending = true;
@@ -3527,7 +3653,8 @@ var GanttChart = class {
 			zIndex: "11",
 			background: "var(--gantt-header-bg)"
 		});
-		const headerEl = buildLeftPaneHeader(this.#columns);
+		const headerEl = buildLeftPaneHeader(this.#columns, this.#locale);
+		this.#wireHeaderTreeControls(headerEl);
 		leftHeader.append(headerEl);
 		leftPane.append(leftHeader);
 		this.#leftHeader = leftHeader;