gantt-renderer 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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;
@@ -639,5 +649,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)",
@@ -3287,6 +3344,7 @@ var GanttChart = class {
 	*/
 	collapseAll() {
 		this.#assertAlive();
+		const changed = this.#buildExpandCollapseAllPayload(false);
 		this.#expandedIds.clear();
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
@@ -3294,6 +3352,10 @@ 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.
@@ -3302,6 +3364,7 @@ var GanttChart = class {
 	*/
 	expandAll() {
 		this.#assertAlive();
+		const changed = 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 +3373,23 @@ 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;
 	}
 	/**
 	* Removes the chart DOM and internal listeners, rendering the instance
@@ -3446,8 +3526,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 +3561,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();
+		});
+		if (collapseBtn !== null) collapseBtn.addEventListener("click", (e) => {
+			e.stopPropagation();
+			this.collapseAll();
+		});
+	}
 	#scheduleRender() {
 		if (this.#rafPending || this.#destroyed) return;
 		this.#rafPending = true;
@@ -3527,7 +3632,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;