Fix mouse click and segment insert at edge of waveform view

See #545

Author: chrisn

src/mouse-drag-handler.js

@@ -169,7 +169,7 @@ MouseDragHandler.prototype._mouseUp = function(event) {
 MouseDragHandler.prototype._getMousePosX = function(clientX) {
   const containerPos = this._stage.getContainer().getBoundingClientRect();
 
-  return clientX - containerPos.left;
+  return Math.floor(clientX - containerPos.left);
 };
 
 /**

src/scrollbar.js

@@ -178,7 +178,7 @@ Scrollbar.prototype._onScrollbarClick = function(event) {
   if (event.target === this._stage) {
     if (this._zoomview) {
       // Centre the scrollbox where the user clicked.
-      let x = Math.floor(event.evt.layerX - this._scrollboxWidth / 2);
+      let x = Math.floor(event.evt.offsetX - this._scrollboxWidth / 2);
 
       if (x < 0) {
         x = 0;

src/segment.js

@@ -220,12 +220,26 @@ Segment.prototype.update = function(options) {
  * @param {Number} startTime The start of the time region, in seconds.
  * @param {Number} endTime The end of the time region, in seconds.
  * @returns {Boolean}
- *
- * @see http://wiki.c2.com/?TestIfDateRangesOverlap
  */
 
 Segment.prototype.isVisible = function(startTime, endTime) {
-  return this.startTime < endTime && startTime < this.endTime;
+  // A special case, where the segment has zero duration
+  // and is at the start of the region.
+  if (this.startTime === this.endTime && this.startTime === startTime) {
+    return true;
+  }
+
+  // Segment ends before start of region.
+  if (this.endTime <= startTime) {
+    return false;
+  }
+
+  // Segment starts after end of region
+  if (this.startTime >= endTime) {
+    return false;
+  }
+
+  return true;
 };
 
 Segment.prototype._setStartTime = function(time) {

src/waveform-view.js

@@ -347,6 +347,12 @@ WaveformView.prototype._onContextMenu = function(event) {
 };
 
 WaveformView.prototype._clickHandler = function(event, eventName) {
+  let offsetX = event.evt.offsetX;
+
+  if (offsetX < 0) {
+    offsetX = 0;
+  }
+
   let emitViewEvent = true;
 
   if (event.target !== this._stage) {
@@ -387,8 +393,7 @@ WaveformView.prototype._clickHandler = function(event, eventName) {
   }
 
   if (emitViewEvent) {
-    const mousePosX = event.evt.layerX;
-    const time = this.pixelOffsetToTime(mousePosX);
+    const time = this.pixelOffsetToTime(offsetX);
     const viewName = this.getName();
 
     this._peaks.emit(viewName + '.' + eventName, {

test/helpers/input-controller.js

@@ -32,7 +32,9 @@ InputController.prototype._dispatchMouseEvent = function(type, pos) {
   const event = new MouseEvent(type, {
     bubbles: true,
     clientX: this._left + pos.x,
-    clientY: this._top  + pos.y
+    clientY: this._top  + pos.y,
+    offsetX: pos.x,
+    offsetY: pos.y
   });
 
   this._target.dispatchEvent(event);

test/segment-spec.js

@@ -406,5 +406,20 @@ describe('Segment', function() {
 
       expect(segment.isVisible(10.0, 20.0)).to.equal(true);
     });
+
+    it('should return true if segment starts at time zero and has zero end time', function() {
+      const peaks = { emit: function() {} };
+      const pid = 0;
+
+      const segment = new Segment(peaks, pid, {
+        id: 'segment.1',
+        labelText: '',
+        editable: true,
+        startTime: 0.0,
+        endTime: 0.0
+      });
+
+      expect(segment.isVisible(0.0, 10.0)).to.equal(true);
+    });
   });
 });