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 api;
    let selected;

    $: {
        if (api) selected = api.getReactiveState().selected;
    }

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

    //other settings

</script>   

<Toolbar>
    
        {#if $selected}
            <Button click={handleDelete}>Delete task</Button>
            //other settings
        {/if}
    
</Toolbar>

<Gantt
        bind:api
        tasks={data.tasks}
        //other settings />

Related articles: