import Event from './Event.svelte'

let snap = false

let grid = 20

let steps = [

{ id: 1, x: 0, width: 60, color: "#800", label: "append"},

{ id: 2, x: 90, width: 70, color: "#008", label: "scroll"},

{ id: 3, x: 160, width: 50, color: "#080", label: "insert"}

]

let selected = null

function toggle(event) {

selected = selected == event ? null : event

}

function intersects(current, x, width) {

return steps.find(step => step.id != current.id && (x + width) > step.x && x < (step.x + step.width))

}

</script>

<div class="container">

<h1>Drag to move or resize with w/snap</h1>

<label>

<input type=checkbox bind:checked={snap}/>

Snap @{grid}px

</label>

<input type="range" bind:value={grid} min=1 step=5 disabled={!snap}/>

<div class="timeline">

<svg viewBox="0 0 400 39" height=44 width=400>