Start new region on top of existing region

[justinjhlo]

Is it possible to click-and-drag to create a new region on top of an existing region that cannot be dragged? I can click outside and drag inwards to create overlapping regions, or somehow move the existing region out of its position and back, but I haven't been able to figure out how to click within the existing region then drag, even though the clicking propogates through.

Any advice? Thank you!

[aribradshaw]

drag: false stops the region itself from moving, but the region element still owns the pointer gesture. Its drag stream prevents the wrapper-level stream created by enableDragSelection() from receiving that drag.

If the existing region does not need click or resize interaction, let pointer events pass through it:

const locked = regions.addRegion({
  start: 10,
  end: 20,
  drag: false,
  resize: false,
})

locked.element.style.pointerEvents = 'none'

A drag that begins over locked will then reach the waveform wrapper, so enableDragSelection() can create the overlapping region.

If you still need region clicks, toggle pointerEvents to none only while your UI is in "create region" mode, then restore it afterward. Otherwise, you would need to implement a separate creation gesture on the region element itself.

The relevant behavior is in the region element's drag stream and the wrapper's drag-selection stream: regions.ts.