* Creates a waveform segment shape with optional start and end markers. * * @class * @alias SegmentShape * * @param {Segment} segment * @param {Peaks} peaks * @param {SegmentsLayer} layer * @param {WaveformOverview|WaveformZoomView} view
(segment, peaks, layer, view)
| 55 | */ |
| 56 | |
| 57 | function SegmentShape(segment, peaks, layer, view) { |
| 58 | this._segment = segment; |
| 59 | this._peaks = peaks; |
| 60 | this._layer = layer; |
| 61 | this._view = view; |
| 62 | this._label = null; |
| 63 | this._startMarker = null; |
| 64 | this._endMarker = null; |
| 65 | this._color = segment.color; |
| 66 | this._borderColor = segment.borderColor; |
| 67 | this._draggable = this._segment.editable && this._view.isSegmentDraggingEnabled(); |
| 68 | this._dragging = false; |
| 69 | |
| 70 | const segmentOptions = view.getViewOptions().segmentOptions; |
| 71 | |
| 72 | this._overlayOffset = segmentOptions.overlayOffset; |
| 73 | |
| 74 | if (!segmentOptions.overlay) { |
| 75 | this._waveformShape = new WaveformShape({ |
| 76 | color: segment.color, |
| 77 | view: view, |
| 78 | segment: segment |
| 79 | }); |
| 80 | } |
| 81 | |
| 82 | this._onMouseEnter = this._onMouseEnter.bind(this); |
| 83 | this._onMouseLeave = this._onMouseLeave.bind(this); |
| 84 | this._onMouseDown = this._onMouseDown.bind(this); |
| 85 | this._onMouseUp = this._onMouseUp.bind(this); |
| 86 | |
| 87 | this._dragBoundFunc = this._dragBoundFunc.bind(this); |
| 88 | this._onSegmentDragStart = this._onSegmentDragStart.bind(this); |
| 89 | this._onSegmentDragMove = this._onSegmentDragMove.bind(this); |
| 90 | this._onSegmentDragEnd = this._onSegmentDragEnd.bind(this); |
| 91 | |
| 92 | // Event handlers for markers |
| 93 | this._onSegmentMarkerDragStart = this._onSegmentMarkerDragStart.bind(this); |
| 94 | this._onSegmentMarkerDragMove = this._onSegmentMarkerDragMove.bind(this); |
| 95 | this._onSegmentMarkerDragEnd = this._onSegmentMarkerDragEnd.bind(this); |
| 96 | this._segmentMarkerDragBoundFunc = this._segmentMarkerDragBoundFunc.bind(this); |
| 97 | |
| 98 | this._label = this._peaks.options.createSegmentLabel({ |
| 99 | segment: segment, |
| 100 | view: this._view.getName(), |
| 101 | layer: this._layer, |
| 102 | fontFamily: this._peaks.options.fontFamily, |
| 103 | fontSize: this._peaks.options.fontSize, |
| 104 | fontStyle: this._peaks.options.fontStyle |
| 105 | }); |
| 106 | |
| 107 | if (this._label) { |
| 108 | this._label.hide(); |
| 109 | } |
| 110 | |
| 111 | // Create with default y and height, the real values are set in fitToView(). |
| 112 | const segmentStartOffset = this._view.timeToPixelOffset(this._segment.startTime); |
| 113 | const segmentEndOffset = this._view.timeToPixelOffset(this._segment.endTime); |
| 114 |