Skip to main content

Undo/redo

PRO

The functionality is available in PRO Edition only

Undo/redo support requires enabling the undo property. Once enabled, users can also use Ctrl/Meta + Z to undo.

<Gantt bind:this={api} {tasks} {links} undo />

The following actions can be undone: adding, updating, deleting, moving, and copying tasks and links.

Custom buttons​

To trigger undo/redo programmatically, call api.exec() with the "undo" or "redo" action:

<script>
  import { Gantt } from "@svar-ui/svelte-gantt";
  import { Button } from "@svar-ui/svelte-core";
  import { getData } from "../data";

  const { tasks, links } = getData();
  let api = $state();

  function undo() { api.exec("undo"); }
  function redo() { api.exec("redo"); }
</script>

<Button onclick={undo}>Undo</Button>
<Button onclick={redo}>Redo</Button>
<Gantt bind:this={api} {tasks} {links} undo />

Toolbar buttons​

First, import Toolbar and getToolbarButtons() with Gantt. To add undo/redo buttons to the Toolbar, pass { undo: true } to getToolbarButtons(). This appends the Undo and Redo icon buttons to the default toolbar configuration:

<script>
  import { Gantt, Toolbar, getToolbarButtons } from "@svar-ui/svelte-gantt";
  import { getData } from "../data";

  const { tasks, links } = getData();
  const items = getToolbarButtons({ undo: true });
  let api = $state();
</script>

<Toolbar {api} {items} />
<Gantt bind:this={api} {tasks} {links} undo />

Related samples: