diff --git a/src/points-layer.js b/src/points-layer.js index 068ad4d6..d0818abf 100644 --- a/src/points-layer.js +++ b/src/points-layer.js @@ -63,6 +63,10 @@ PointsLayer.prototype.addToStage = function(stage) { stage.add(this._layer); }; +PointsLayer.prototype.setListening = function(listening) { + this._layer.listening(listening); +}; + PointsLayer.prototype.enableEditing = function(enable) { this._enableEditing = enable; }; diff --git a/src/scroll-mouse-drag-handler.js b/src/scroll-mouse-drag-handler.js index ecce3872..cd5a576e 100644 --- a/src/scroll-mouse-drag-handler.js +++ b/src/scroll-mouse-drag-handler.js @@ -23,6 +23,12 @@ import { clamp } from './utils'; function ScrollMouseDragHandler(peaks, view) { this._peaks = peaks; this._view = view; + this._seeking = false; + this._firstMove = false; + this._segment = null; + this._segmentIsDraggable = false; + this._initialFrameOffset = 0; + this._mouseDownX = 0; this._onMouseDown = this._onMouseDown.bind(this); this._onMouseMove = this._onMouseMove.bind(this); @@ -41,6 +47,7 @@ ScrollMouseDragHandler.prototype.isDragging = function() { ScrollMouseDragHandler.prototype._onMouseDown = function(mousePosX, segment) { this._seeking = false; + this._firstMove = true; if (segment && !segment.attrs.draggable) { this._segment = null; @@ -85,6 +92,11 @@ ScrollMouseDragHandler.prototype._onMouseMove = function(mousePosX) { } if (this._seeking) { + if (this._firstMove) { + this._view.dragSeek(true); + this._firstMove = false; + } + mousePosX = clamp(mousePosX, 0, this._view.getWidth()); const time = this._view.pixelsToTime(mousePosX + this._view.getFrameOffset()); @@ -108,7 +120,10 @@ ScrollMouseDragHandler.prototype._onMouseMove = function(mousePosX) { }; ScrollMouseDragHandler.prototype._onMouseUp = function() { - if (!this._seeking) { + if (this._seeking) { + this._view.dragSeek(false); + } + else { // Set playhead position only on click release, when not dragging. if (this._view._enableSeek && !this._mouseDragHandler.isDragging()) { const time = this._view.pixelOffsetToTime(this._mouseDownX); diff --git a/src/seek-mouse-drag-handler.js b/src/seek-mouse-drag-handler.js index 8eb8b06c..647be008 100644 --- a/src/seek-mouse-drag-handler.js +++ b/src/seek-mouse-drag-handler.js @@ -23,24 +23,37 @@ import { clamp } from './utils'; function SeekMouseDragHandler(peaks, view) { this._peaks = peaks; this._view = view; + this._firstMove = false; this._onMouseDown = this._onMouseDown.bind(this); this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); this._mouseDragHandler = new MouseDragHandler(view._stage, { onMouseDown: this._onMouseDown, - onMouseMove: this._onMouseMove + onMouseMove: this._onMouseMove, + onMouseUp: this._onMouseUp }); } SeekMouseDragHandler.prototype._onMouseDown = function(mousePosX) { + this._firstMove = true; this._seek(mousePosX); }; SeekMouseDragHandler.prototype._onMouseMove = function(mousePosX) { + if (this._firstMove) { + this._view.dragSeek(true); + this._firstMove = false; + } + this._seek(mousePosX); }; +SeekMouseDragHandler.prototype._onMouseUp = function(mousePosX) { + this._view.dragSeek(false); +}; + SeekMouseDragHandler.prototype._seek = function(mousePosX) { if (!this._view.isSeekEnabled()) { return; diff --git a/src/segments-layer.js b/src/segments-layer.js index e8ff32fa..300e34e4 100644 --- a/src/segments-layer.js +++ b/src/segments-layer.js @@ -52,6 +52,10 @@ SegmentsLayer.prototype.addToStage = function(stage) { stage.add(this._layer); }; +SegmentsLayer.prototype.setListening = function(listening) { + this._layer.listening(listening); +}; + SegmentsLayer.prototype.enableEditing = function(enable) { this._enableEditing = enable; }; diff --git a/src/waveform-view.js b/src/waveform-view.js index ea804d6c..a6ac051a 100644 --- a/src/waveform-view.js +++ b/src/waveform-view.js @@ -430,6 +430,23 @@ WaveformView.prototype.enableMarkerEditing = function(enable) { } }; +/** + * Called when the user starts or stops dragging the playhead. + * We use this to disable interaction with the points and segments layers, + * e.g., so that when the user drags the playhead over a marker, the timestamp + * labels don't appear. + */ + +WaveformView.prototype.dragSeek = function(dragging) { + if (this._segmentsLayer) { + this._segmentsLayer.setListening(!dragging); + } + + if (this._pointsLayer) { + this._pointsLayer.setListening(!dragging); + } +}; + WaveformView.prototype.fitToContainer = function() { if (this._container.clientWidth === 0 && this._container.clientHeight === 0) { return; diff --git a/src/waveform-zoomview.js b/src/waveform-zoomview.js index 2c09fbd6..8d90b150 100644 --- a/src/waveform-zoomview.js +++ b/src/waveform-zoomview.js @@ -176,8 +176,9 @@ WaveformZoomView.prototype._onWheelCaptureVerticalScroll = function(event) { }; WaveformZoomView.prototype.setWaveformDragMode = function(mode) { - if (this._viewOptions.enableSegments) { + if (this._segmentsLayer) { this._mouseDragHandler.destroy(); + this._dragSeek(false); if (mode === 'insert-segment') { this._mouseDragHandler = new InsertSegmentMouseDragHandler(this._peaks, this);