Adding a custom editor dialog

To add your custom editor, you should:

• Import the default Form component which is a sidebar modal for adding/editing tasks
• Use the api.intercept method to disable opening the default editor by blocking the show-editor action (return false)
• Add the Form tag, define tasks and taskTypes, and add the action handler function

<script>
    import { getData } from "../data";
    import { Gantt } from "@wx/svelte-gantt";
    import Form from "../custom/Form.svelte";

    const data = getData();
    const taskTypes = [
        { id: "task", label: "Task" },
        { id: "milestone", label: "Milestone" },
        { id: "project", label: "Project" },
    ];

    let task;
    let api;
    let store;

    $: {
        if (api) {
            store = api.getState().tasks;

            api.intercept("show-editor", data => {
                task = store.byId(data.id);
                return false;
            });
        }
    }

    function formAction(ev) {
        const { action, data } = ev.detail;

        switch (action) {
            case "close-form":
                task = null;
                break;

            default:
                api.exec(action, data);
                break;
        }
    }
</script>

    <Gantt
        bind:api
        tasks={data.tasks}
        links={data.links}
        scales={data.scales}
    />

    {#if task}
        <Form {task} {taskTypes} on:action={formAction} />
    {/if}