Is it possible - SimpleEditionState on one Track and CenteredZoomState on another?

[justinlevi]

This might seem a bit odd but my use case is that I'd want the user to be able to CenterZoom when interacting with the waveform but have the SimpleEditionState on the segment track. I consider the audio track the master track which allows the user to navigate but the segment track for reordering clips, etc.

I guess the alternative would be synchronizing two timelines, but that feels clunky to me.

[b-ma]

So, you can have this behaviour by switching states on the event event triggered by the timeline on each interaction. This event is triggered before being forwarded to the state so that you can switch states accordingly, this generally looks like this:

timeline.on('event', e => {
  const target = e.target;

  if (segmentLayer.hasElement(target)) {
    timeline.state = simpleEditionState;
  } else if (axisLayer.hasElement(target)) {
    timeline.state = zoomState;
  }
});

Then, the event is propagated to the new state.

[justinlevi]

YES!!! That's exactly what I was trying to do :) I swear I tried doing something just like that... I think I was trying to listen to the event on the track or something though.

@b-ma You're the best - thanks!

[b-ma]

Happy it works for you! just one thing I forgot in my example is that you should check for the mousedown event to prevent changing the state on every event (particularly on mousemove)

timeline.on('event', e => {
  const target = e.target;

  if (e.type === 'mousedown') {
    if (segmentLayer.hasElement(target)) {
      timeline.state = simpleEditionState;
    } else if (axisLayer.hasElement(target)) {
      timeline.state = zoomState;
    }
  } 
});

[justinlevi]

ooo, good call on checking for mousedown. I will definitely add that.