Update segment by overview

[jason30704]

Hello, I set the overview's enableMarkerEditing to true based on peaks js-react-example.

This allows me to drag segments on the overview, but it does not update the range. I can only update segments on zoomview.

Also, I will get the error by dragging segments on the overview.

[chrisn]

Thanks for reporting this, I'll look into it. Originally, segments could be dragged in the zoomview only, and the overview waveform was just to give a visualisation of the complete duration, but with only minimal interaction (seek).

[jason30704]

Thanks you! If I may, I have another question. I would like to ask how to draw a square segment similar to the picture below.

I've seen it in other issues. You previously provided an example of drawing a square area segment in the view, but I can't seem to see it now.

I have tried to modify CustomSegmentMarker, but I don't know how to dynamically obtain the width between startMarker and endMarker. Or is there any example that I can refer to?

https://github.com/user-attachments/assets/13fcc20d-b657-443f-9169-9460beac1709

[chrisn]

You can use the segmentOptions (documentation) to control how the segment is drawn. The CustomSegmentMarker only implements the start/end markers, not the region between them.

[jason30704]

I have tried using segmentOptions to draw square areas. But segmentOptions seems to only change the color of the waveform? I tried setting background-Color but it got an error.

[chrisn]

Try using these options:

segmentOptions: {
  overlayColor: '#ff0000',
  overlayOpacity: 0.3,
  overlayBorderColor: '#ff0000',
  overlayBorderWidth: 2,
  overlayCornerRadius: 5
}

background-color isn't a valid option - see the Configuration section in the API documentation for the available options.

[jason30704]

Thanks a lot! I tried adding " overlay: true ", and it worked.

[chrisn]

I'd like to keep this open, because of the original issue you reported. Those errors can be avoided by not creating custom segment markers in the overview waveform, but it needs fixing properly.