Wavesurfer.js multiple regions overlap issue

Question

i am creating a video editor with wavesurfer.js with multiple regions for each subtitle line the region is draggable but i want to prevent overlapping of regions when dragging or resizing.

  let waveSurfer = useRef(null);
  let wsRegions = useRef(null);
const createRegion = () => {
    if (wsRegions.current) {
      wsRegions.current.clearRegions();
      segments.forEach((segment, index) => {
        const region = {
          start: segment.startTime,
          end: segment.endTime,
          data: segment,
          id: index.toString(),
          content: segment.styledText ? segment.styledText : segment[textType]
        }
        wsRegions.current.addRegion(region);
      });
    }
  }

i tried indexing it with this function,(regions is a array of object with start and end time)

 const handleRegionDrag = async () => {
    if (!wsRegions.current) {
      return;
    }

    const regions = await wsRegions.current.regions;
    console.log(regions)

    if (regions.length === 0) {
      return;
    }
    regions.sort((a, b) => a.start - b.start);

    for (let i = 0; i < regions.length; i++) {
      const currentRegion = regions[i];
      const previousRegion = regions[i - 1];
      const nextRegion = regions[i + 1];

      currentRegion.on("click", () => {
        console.log("Clicked on region with ID:", currentRegion.id);
        console.log(previousRegion, nextRegion)
      });
      if (nextRegion && currentRegion.end > nextRegion.start) {
        currentRegion.end = nextRegion.start;
      }

      if (previousRegion && currentRegion.start < previousRegion.end) {
        currentRegion.start = previousRegion.end;
      }
    }
  };

but it's not working, if someone can help, please do reply

Answer 1

i worked around a solution to this, not a perfect solution, we can drag and resize the region into another and it comes back to the border, and the amount we dragged initially get reduced from the current-region, if someone has a perfect solution, for when dragging and resizing it stops at the border of adjacent region and do not move inside, please do share

const handleRegionUpdateEnd = (region) => {
    const regions = wsRegions.current.getRegions();
    const currentRegion = region;
    const { previous, next } = findAdjacentRegions(currentRegion, regions);
    const { start, end } = currentRegion;
    if (next && end > next.start) {
      currentRegion.end = next.start;
    }

    if (previous && start < previous.end) {
      currentRegion.start = previous.end;
    }
    updateSegmentTimeStamp(currentRegion);
  };

  useEffect(() => {
    wsRegions.current?.on("region-updated", handleRegionUpdateEnd)
    return () => {
      wsRegions.current?.un("region-updated", handleRegionUpdateEnd)
    }
  }, [ref.current, segments])
``