Fix marker handle activation when dragging the playhead

This change disables interaction with the points and segments
layers when the user drags the playhead, e.g., so that when
dragging over a marker, the timestamp labels don't appear.

Author: chrisn

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;
 };

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);

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() {
+  this._view.dragSeek(false);
+};
+
 SeekMouseDragHandler.prototype._seek = function(mousePosX) {
   if (!this._view.isSeekEnabled()) {
     return;

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;
 };

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;

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);