import Timeline from './Timeline.svelte'

let events = []

function add({detail: {type, point}}) {

events = [...events, { type, x: point ? point.x : 0 }]

}

function del({detail: selected}) {

events = events.filter(e => e != selected)

}

</script>

<h1>Timeline with keyboard &amp; mouse events</h1>

<p>Type [insert] to add an item or right-click for more options.</p>

<Timeline on:add={add} on:delete={del} {events}/>

<style>

:global(body) {

display: flex;

justify-content: center;

flex-direction: column;

place-items: center;

}

</style>