<script>
import Event from './Event.svelte'
let snap = false
let grid = 10
let steps = [
{ id: 1, x: 60, width: 60, color: "#800", label: "append"},
{ id: 2, x: 180, width: 70, color: "#008", label: "scroll"},
{ id: 3, x: 270, width: 50, color: "#080", label: "insert"}
]
let selected = null
let control = 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 = start-event.pageX
const snapPoint = calcSnap(initial.x - delta)
const snapDelta = initial.x - snapPoint
const x = initial.x - snapDelta
const width = initial.width + snapDelta
const snapDeltaLast = x - step.x
if (control) {
const before = steps.filter(s => s.x < step.x)
if (before.some(s => (s.x + snapDeltaLast) < 0))
return
before.forEach(s => s.x += snapDeltaLast)