svar-widgets/gantt/skill

Use when building, configuring, styling, or modifying SVAR Svelte Gantt / @wx/svelte-gantt timelines, grids, task editors, toolbars, context menus, tooltips, scales, links, and Gantt data actions.

Package

import {
	Gantt,
	ContextMenu,
	HeaderMenu,
	Toolbar,
	Tooltip,
	Editor,
	Willow,
	WillowDark,
	version,
	defaultEditorItems,
	defaultToolbarButtons,
	defaultMenuOptions,
	defaultColumns,
	defaultTaskTypes,
	getEditorItems,
	getToolbarButtons,
	getMenuOptions,
	registerScaleUnit,
	registerEditorItem,
} from "@wx/svelte-gantt";

Components

• Gantt - main grid plus timeline chart; bind:this exposes the Gantt API object from source.
• Toolbar - Gantt-aware wrapper around @wx/svelte-toolbar; accepts api and optional items.
• ContextMenu - Gantt-aware wrapper around @wx/svelte-menu context menu; resolves tasks from Gantt data-id.
• Editor - Gantt-aware wrapper around @wx/svelte-editor; opens for activeTask / show-editor.
• Tooltip - wraps a Gantt and displays task text or a custom content component from data-tooltip-id.
• HeaderMenu - wraps @wx/svelte-grid header menu and passes api.getTable() to it.
• Willow, WillowDark - theme wrappers; each accepts fonts?: boolean and optional children.

Supported functionality

Gantt Data

• tasks is an array of task objects; common fields are id, text, start, end, duration, progress, parent, type, open, details, data, unscheduled, segments, base_start, base_end, base_duration, rollup.
• links is an array of dependency links with id, source, target, type, optional lag.
• link type values are s2s, s2e, e2s, e2e.
• task type defaults are task, summary, milestone; custom types are supported through taskTypes.
• milestone tasks are normalized with duration = 0 and no end.
• summary task dates are calculated from children when start / end are missing.
• parseTaskDates(tasks, { durationUnit, splitTasks, calendar }) runs inside Gantt and mutates task date fields unless _export is set.

Common data objects:

const tasks = [
	{
		id: 1,
		text: "Project",
		type: "summary",
		parent: 0,
		open: true,
	},
	{
		id: 10,
		text: "Task",
		type: "task",
		parent: 1,
		start: new Date(2026, 3, 2),
		duration: 3,
		progress: 40,
	},
	{
		id: 11,
		text: "Milestone",
		type: "milestone",
		parent: 1,
		start: new Date(2026, 3, 8),
	},
];
const links = [{ id: 1, source: 10, target: 11, type: "e2s" }];

Gantt Config

• default scales: [{ unit: "month", step: 1, format: "%F %Y" }, { unit: "day", step: 1, format: "%j" }].
• scales rows accept unit, step, format?: string | (date, next) => string, css?: (date) => string.
• start, end, and autoScale control timeline bounds; autoScale includes tasks, markers, baselines, projectStart, and projectEnd.
• zoom accepts true or IZoomConfig; chart zoom is handled by Ctrl/Command + wheel and emits zoom-scale.
• columns defaults to defaultColumns; columns={false} hides the grid and resizer.
• the text column is rendered with the built-in TextCell; add-task uses ActionCell, is removed in readonly, and moves to the first column in compact chart mode.
• cellWidth, cellHeight, scaleHeight control timeline width, row height, and scale row height.
• lengthUnit controls chart math; durationUnit controls task duration calculation and is "day" or "hour".
• cellBorders is "column" or "full".
• readonly disables task drag, progress editing, link editing, grid add column behavior, and editor opening from double click.
• selected and activeTask are config inputs, not $bindable() props; read or change live selection through api.getReactiveState() and api.exec("select-task", ...).
• highlightTime(date, unit) can return a CSS class for timescale cells and chart background cells when min unit is day or hour.
• compact mode is driven by a ResizeObserver on document.body; width <= 650 switches the layout to grid/chart modes.

Common config objects:

const columns = [
	{ id: "text", header: "Task name", flexgrow: 1, editor: "text" },
	{
		id: "start",
		header: "Start date",
		align: "center",
		editor: "datepicker",
	},
	{ id: "duration", header: "Duration", width: 100, align: "center" },
	{ id: "add-task", header: "Add task", width: 50, align: "center" },
];
const scales = [
	{ unit: "month", step: 1, format: "%F %Y" },
	{ unit: "week", step: 1, format: "Week %w" },
	{
		unit: "day",
		step: 1,
		format: "%j",
		css: date => (date.getDay() === 0 ? "wx-weekend" : ""),
	},
];
const zoom = {
	level: 2,
	minCellWidth: 40,
	maxCellWidth: 180,
};

Pro And Advanced Config

• baselines shows base_start / base_end / base_duration.
• rollups accepts true or { type: "all" | "closest" }; tasks with rollup: true are drawn on summary rows.
• markers is an array of { start: Date, text?: string, css?: string }.
• criticalPath={{ type: "strict" | "flexible" }} marks critical tasks and links.
• schedule={{ type?: "forward", auto?: boolean }} enables scheduling behavior; projectStart and projectEnd provide bounds.
• calendar accepts a Calendar from @wx/gantt-store; Gantt then creates default weekend highlighting when calendar is set.
• undo enables history state plus undo / redo actions and toolbar buttons.
• splitTasks enables task segments editing, split toolbar/menu actions, and segment-aware editor/context-menu targets.
• summary={{ autoProgress?: boolean, autoConvert?: boolean }} controls summary progress and summary type conversion behavior.
• slack shows task slack visuals.
• unscheduledTasks enables task unscheduled support and editor scheduling controls.
• api.exec("export-data", config) supports format: "pdf" | "png" | "xlsx" | "mspx" through IExportConfig.
• api.exec("import-data", { data, format: "mspx" }) imports MS Project XML.

API And Events

Gantt exposes this API from source through bind:this or init(api):

• state: getState(), getReactiveState(), getStores()
• events/actions: exec(action, data), on(action, callback, config?), intercept(action, callback, config?), detach(tag), setNext(eventBusOrProvider)
• task/table helpers: getTask(id), getTable(waitRender?), serialize(), getHistory()

Component callback props are generated from action names by removing hyphens and prefixing on:

• add-task -> onaddtask
• update-task -> onupdatetask
• select-task -> onselecttask
• custom taskTemplate action "custom-click" -> oncustomclick

Source routes actions through DataStore first, then calls the matching component callback prop if present.

Common actions:

api.exec("add-task", {
	task: { text: "New task", type: "task" },
	target: 10,
	mode: "after",
	show: true,
});
api.exec("update-task", {
	id: 10,
	task: { text: "Updated", progress: 75 },
});
api.exec("select-task", {
	id: 10,
	toggle: false,
	range: false,
	show: "xy",
	focus: "grid",
});
api.exec("move-task", { id: 10, target: 1, mode: "child" });
api.exec("filter-tasks", {
	filter: task => task.text?.includes("API"),
	open: true,
});
api.exec("scroll-chart", { date: new Date(2026, 4, 1) });

Use api.intercept(action, cb) to block or replace built-in behavior; returning false blocks the action. Use api.setNext(provider) to forward data changes to a provider such as RestDataProvider.

Saving

• RestDataProvider from @wx/gantt-data-provider persists data changes to a REST backend.
• Wire it once with api.setNext(provider) in init; the provider then forwards every data action (add-task, update-task, delete-task, move-task, add-link, update-link, delete-link, etc.) emitted on the event bus as the matching REST call. No per-action save handlers needed.
• Initial load uses provider.getData(); lazy branches use provider.getData(id) inside request-data and dispatch back through provide-data.
• Optional { batchURL } constructor option batches concurrent writes into a single endpoint.

import { RestDataProvider } from "@wx/gantt-data-provider";
const provider = new RestDataProvider("/api/gantt");
function init(api) {
	api.setNext(provider); // forwards all task/link mutations to REST
}

Toolbar

• Toolbar source props are api = null and items = [].
• default items come from getToolbarButtons({ undo: $undo, splitTasks: $splitTasks }).
• default handled ids are wired through handleAction(api, item.id, null, _).
• custom item handler functions are preserved only when the id is not one of the handled default action ids.
• if no task is selected, default toolbar keeps only targetless items such as add-task and history controls.
• undo adds undo and redo; splitTasks adds split-task.

Default toolbar ids:

[
	"add-task",
	"edit-task",
	"delete-task",
	"move-task:up",
	"move-task:down",
	"copy-task",
	"cut-task",
	"paste-task",
	"indent-task:add",
	"indent-task:remove",
];

Context Menu

• ContextMenu source props are options, api, resolver, filter, at = "point", children, onclick, css.
• the wrapper passes dataKey="id" to @wx/svelte-menu; Gantt grid rows and bars expose data-id.
• built-in menu options are from getMenuOptions({ splitTasks, taskTypes, summary }).
• right-clicking a task selects it when it is not already selected.
• resolver(id, event) can return true to use the default task, return a replacement context object, or return a falsy value to prevent task resolution.
• filter(option, task) is applied across selected tasks; built-in isHidden and isDisabled are also applied.
• wrapper onclick receives the menu event used in demos as { context, action }.
• built-in handled action.id values are executed through handleAction(api, action.id, activeId, _) before user onclick.
• with splitTasks, segment targets use { id, segmentIndex } internally for edit/delete/split actions.

Default menu ids:

[
	"add-task:child",
	"add-task:before",
	"add-task:after",
	"convert-task:<taskType>",
	"edit-task",
	"cut-task",
	"copy-task",
	"paste-task",
	"move-task:up",
	"move-task:down",
	"indent-task:add",
	"indent-task:remove",
	"delete-task",
];

Editor

• Editor source props are api, items = [], css = "", layout = "default", readonly = false, placement = "sidebar", bottomBar = true, topBar = true, autoSave = true, focus = false, hotkeys = {}.
• editor renders only when api.getReactiveState()._activeTask exists.
• default items come from getEditorItems({ unscheduledTasks, rollups, summary, taskTypes }).
• built-in editor comps registered by the wrapper: select, date, twostate, slider, counter, links, checkbox.
• registerEditorItem(name, Component) registers custom comps for items.
• item key is the task field; editor values are task objects keyed by those key values.
• autoSave={true} saves valid changes on field change; autoSave={false} stores local values and saves from a save top/bottom bar action.
• saved task payload removes links and data; duration may be removed when no duration editor is present.
• links editor changes are batched in the wrapper and saved through link actions.
• default topBar={true} in editable mode creates close/spacer/delete buttons, plus save when autoSave={false}.

Default editor keys:

["text", "details", "type", "start", "end", "duration", "progress", "links"];

Tooltip