gantt-renderer 0.8.0 → 0.10.0

package/dist/index.mjs

@@ -19,12 +19,10 @@ var GanttError = class extends Error {
 //#region src/lib/domain/tree.ts
 function detectParentCycles(tasks) {
 	const adj = /* @__PURE__ */ new Map();
-	for (const task of tasks) {
-		adj.set(task.id, []);
-		if (task.parent !== void 0) {
-			const parents = adj.get(task.parent);
-			if (parents !== void 0) parents.push(task.id);
-		}
+	for (const task of tasks) adj.set(task.id, []);
+	for (const task of tasks) if (task.parent !== void 0) {
+		const parents = adj.get(task.parent);
+		if (parents !== void 0) parents.push(task.id);
 	}
 	const WHITE = 0, GRAY = 1, BLACK = 2;
 	const color = /* @__PURE__ */ new Map();
@@ -305,147 +303,14 @@ 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",
 	columnDuration: "Duration",
 	columnQuarter: "Q"
 };
-const CHART_LOCALE_EN_US = {
-	code: "en-US",
-	labels: EN_US_LABELS,
-	weekStartsOn: 0,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_EN_GB = {
-	code: "en-GB",
-	labels: {
-		ariaTask: "Task {0}",
-		ariaMilestone: "Milestone {0}",
-		addSubtaskTitle: "Add subtask",
-		columnTaskName: "Task name",
-		columnStartDate: "Start",
-		columnEndDate: "End",
-		columnDuration: "Duration",
-		columnQuarter: "Q"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_DE_DE = {
-	code: "de-DE",
-	labels: {
-		ariaTask: "Aufgabe {0}",
-		ariaMilestone: "Meilenstein {0}",
-		addSubtaskTitle: "Teilaufgabe hinzufügen",
-		columnTaskName: "Aufgabenname",
-		columnStartDate: "Start",
-		columnEndDate: "Ende",
-		columnDuration: "Dauer",
-		columnQuarter: "Q"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_FR_FR = {
-	code: "fr-FR",
-	labels: {
-		ariaTask: "Tâche {0}",
-		ariaMilestone: "Jalon {0}",
-		addSubtaskTitle: "Ajouter une sous-tâche",
-		columnTaskName: "Nom de la tâche",
-		columnStartDate: "Début",
-		columnEndDate: "Fin",
-		columnDuration: "Durée",
-		columnQuarter: "T"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_ES_ES = {
-	code: "es-ES",
-	labels: {
-		ariaTask: "Tarea {0}",
-		ariaMilestone: "Hito {0}",
-		addSubtaskTitle: "Añadir subtarea",
-		columnTaskName: "Nombre de tarea",
-		columnStartDate: "Inicio",
-		columnEndDate: "Fin",
-		columnDuration: "Duración",
-		columnQuarter: "T"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_IT_IT = {
-	code: "it-IT",
-	labels: {
-		ariaTask: "Attività {0}",
-		ariaMilestone: "Pietra miliare {0}",
-		addSubtaskTitle: "Aggiungi sottoattività",
-		columnTaskName: "Nome attività",
-		columnStartDate: "Inizio",
-		columnEndDate: "Fine",
-		columnDuration: "Durata",
-		columnQuarter: "T"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_PT_PT = {
-	code: "pt-PT",
-	labels: {
-		ariaTask: "Tarefa {0}",
-		ariaMilestone: "Marco {0}",
-		addSubtaskTitle: "Adicionar subtarefa",
-		columnTaskName: "Nome da tarefa",
-		columnStartDate: "Início",
-		columnEndDate: "Fim",
-		columnDuration: "Duração",
-		columnQuarter: "T"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "iso",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_ZH_CN = {
-	code: "zh-CN",
-	labels: {
-		ariaTask: "任务 {0}",
-		ariaMilestone: "里程碑 {0}",
-		addSubtaskTitle: "添加子任务",
-		columnTaskName: "任务名称",
-		columnStartDate: "开始",
-		columnEndDate: "结束",
-		columnDuration: "工期",
-		columnQuarter: "季"
-	},
-	weekStartsOn: 1,
-	weekNumbering: "us",
-	weekendDays: [0, 6]
-};
-const CHART_LOCALE_JA_JP = {
-	code: "ja-JP",
-	labels: {
-		ariaTask: "タスク {0}",
-		ariaMilestone: "マイルストーン {0}",
-		addSubtaskTitle: "サブタスクを追加",
-		columnTaskName: "タスク名",
-		columnStartDate: "開始",
-		columnEndDate: "終了",
-		columnDuration: "期間",
-		columnQuarter: "Q"
-	},
-	weekStartsOn: 0,
-	weekNumbering: "us",
-	weekendDays: [0, 6]
-};
 function tryGetWeekInfo(code) {
 	try {
 		if (typeof Intl !== "undefined" && typeof Intl.Locale === "function") {
@@ -533,7 +398,13 @@ function deriveWeekendDays(code) {
 * @returns A fully resolved {@link ChartLocale} with defaults applied.
 */
 function resolveChartLocale(raw) {
-	if (raw === void 0) return CHART_LOCALE_EN_US;
+	if (raw === void 0) return {
+		code: "en",
+		labels: EN_US_LABELS,
+		weekStartsOn: 0,
+		weekNumbering: "iso",
+		weekendDays: [0, 6]
+	};
 	if (typeof raw !== "string") {
 		const locale = {
 			code: raw.code,
@@ -1915,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",
@@ -1940,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)",
@@ -2904,7 +2830,7 @@ function renderRightPane(refs, state, cbs) {
 	}
 	const todayX = mapper.toX(/* @__PURE__ */ new Date());
 	const todayLineWidth = 2;
-	if (todayX >= 0 && todayX <= totalWidth - todayLineWidth) {
+	if (state.showTodayMarker && todayX >= 0 && todayX <= totalWidth - todayLineWidth) {
 		const todayLine = el("div");
 		todayLine.className = "gantt-today-marker";
 		css(todayLine, {
@@ -3375,7 +3301,7 @@ var GanttChart = class {
 		const hasLayoutChange = opts.leftPaneWidth !== void 0 || opts.responsiveSplitPane !== void 0 || opts.mobileBreakpoint !== void 0 || opts.mobileLeftPaneMinWidth !== void 0 || opts.mobileLeftPaneMaxRatio !== void 0 || opts.timelineMinWidth !== void 0;
 		if (hasLayoutChange) this.#applyResponsivePaneStyles();
 		const hasLeftPaneChange = columnsChanged || opts.locale !== void 0 || opts.showAddTaskButton !== void 0;
-		const hasRightPaneChange = opts.scale !== void 0 || opts.showWeekends !== void 0 || opts.weekendDays !== void 0 || opts.specialDays !== void 0 || opts.highlightLinkedDependenciesOnSelect !== void 0 || opts.linkCreationEnabled !== void 0 || opts.progressDragEnabled !== void 0 || opts.viewportStart !== void 0 || opts.viewportEnd !== void 0 || opts.locale !== void 0 || opts.timelineMinWidth !== void 0;
+		const hasRightPaneChange = opts.scale !== void 0 || opts.showTodayMarker !== void 0 || opts.showWeekends !== void 0 || opts.weekendDays !== void 0 || opts.specialDays !== void 0 || opts.highlightLinkedDependenciesOnSelect !== void 0 || opts.linkCreationEnabled !== void 0 || opts.progressDragEnabled !== void 0 || opts.viewportStart !== void 0 || opts.viewportEnd !== void 0 || opts.locale !== void 0 || opts.timelineMinWidth !== void 0;
 		if (!(hasLeftPaneChange || hasRightPaneChange || hasLayoutChange)) return;
 		if (this.#rafPending && this.#rafId !== null) {
 			cancelAnimationFrame(this.#rafId);
@@ -3418,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);
@@ -3425,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.
@@ -3433,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) {
@@ -3441,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
@@ -3553,6 +3502,7 @@ var GanttChart = class {
 			paddingTop,
 			paddingBottom,
 			showWeekends: this.#opts.showWeekends ?? true,
+			showTodayMarker: this.#opts.showTodayMarker ?? true,
 			weekendDays: this.#weekendDays,
 			specialDaysByDate: this.#specialDaysByDate,
 			locale: this.#locale
@@ -3576,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),
@@ -3599,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;
@@ -3657,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;
@@ -3730,6 +3706,6 @@ var GanttChart = class {
 	}
 };
 //#endregion
-export { BAR_HEIGHT, BAR_Y_OFFSET, CHART_LOCALE_DE_DE, CHART_LOCALE_EN_GB, CHART_LOCALE_EN_US, CHART_LOCALE_ES_ES, CHART_LOCALE_FR_FR, CHART_LOCALE_IT_IT, CHART_LOCALE_JA_JP, CHART_LOCALE_PT_PT, CHART_LOCALE_ZH_CN, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, GanttChart, GanttError, MILESTONE_HALF, MILESTONE_SIZE, ROW_HEIGHT, SCALE_CONFIGS, 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, DEFAULT_GRID_COLUMNS, DENSITY, EN_US_LABELS, GRID_COLUMN_FR_MIN_WIDTH, GanttChart, GanttError, MILESTONE_HALF, MILESTONE_SIZE, ROW_HEIGHT, SCALE_CONFIGS, 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.mjs.map