<script>
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
let expandAll = false
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))
}
function expandLeft(event, step, start, initial, last) {
const delta = calcSnap(start-event.pageX)
const x = initial.x - delta
const width = initial.width + delta
if (expandAll) {
const before = steps.filter(s => s.x < step.x)
if (before.some(s => (s.x + event.pageX-last) < 0))
return
before.forEach(s => s.x += event.pageX-last)
} else {
if (intersects(step, x, width)) return
}