Skip to main content

api.getReactiveState()

Description​

Gets the state object with the reactive properties of Gantt

This method allows you to subscribe to the returned properties in the same way as actions.

Usage​

api.getReactiveState(): object;

Returns​

The method returns an object with the following reactive properties:

{
    tasks,
    links,
    start,
    columns,
    end,
    lengthUnit,
    cellWidth,
    cellHeight,
    scaleHeight,
    scales,
    taskTypes,
    zoom,
    selected,
    activeTask,
    baselines,
};

Example​

In the example below we subscribe to the selected property in order to show toolbar buttons for the selected task:

<script>
    import { getData } from "./common/data";
    import { Gantt, Toolbar } from "wx-svelte-gantt";
    import { Button } from "wx-svelte-wx";

    const data = getData();

    let selected;
    function init(api) {
        selected = api.getReactiveState().selected;
    }


    let api;
    function handleDelete() {
        api.exec("delete-task", { id: $selected });
    }

</script>   

    <Toolbar>
    
        {#if $selected}
            <Button onclick={handleDelete}>Delete task</Button>
        {/if}
    
    </Toolbar>

    <Gantt
        tasks={data.tasks}
        bind:this={api}
        {init}  />

Related articles: