Added segment 'markers' and 'overlay' options

This allows individual segments to be created as
marker-style or overlay-style.

This commit also adds a click event handler to
marker handles, to bring the segment to the
top of the z-order, so it can be dragged.

See #544

Author: chrisn

doc/API.md

@@ -601,9 +601,7 @@ The top level `Peaks` object exposes a factory function to create new `Peaks` in
 
 ### `Peaks.init(options, callback)`
 
-Creates a new `Peaks` instance with the [assigned options](#Configuration).
-The callback is invoked after the instance has been created and initialized, or if any errors occur during initialization.
-You can create and manage several `Peaks` instances within a single page with one or several configurations.
+Creates a new `Peaks` instance with the given [options](#Configuration). The callback is invoked after the instance has been created and initialized, or if any errors occur during initialization. You can create and manage several `Peaks` instances within a single page, each with its own configuration.
 
 ```js
 const options = { ... };
@@ -1233,9 +1231,11 @@ Adds a segment to the waveform timeline. Accepts an object containing the follow
 * `startTime`: the segment start time (seconds)
 * `endTime`: the segment end time (seconds)
 * `editable`: (optional) sets whether the segment is user editable (boolean, defaults to `false`)
-* `color`: (optional) the segment color. If not specified, the segment is given a default color (set by the [`segmentoptions.waveformColor` option](#Configuration) for marker-style segments or the [`segmentOptions.overlayColor` option](#Configuration) for overlay-style segments)
-* `borderColor`: (optional) the segment border color. This applies only to overlay style segments. If not specified, the segment is given a default border color (set by the [`segmentOptions.overlayBorderColor` option](#Configuration))
-* `labelText`: (option) a text label which is displayed when the user hovers the mouse pointer over the segment
+* `color`: (optional) the segment color. If not specified, the segment is given a default color set by the [`segmentOptions.overlayColor`](#configuration) option for segments with overlays, or [`segmentoptions.waveformColor`](#configuration) option for segments without overlays
+* `borderColor`: (optional) the segment border color. This applies only to segments with overlays. If not specified, the segment is given a default border color (set by the [`segmentOptions.overlayBorderColor` option](#configuration))
+* `markers`: (optional) sets whether the segment has markers. If not specified, the default is set by the [`segmentOptions.markers`](#configuration) option
+* `overlay`: (optional) sets whether the segment has an overlay. If not specified, the default is set by the [`segmentOptions.overlay`](#configuration) option
+* `labelText`: (optional) a text label which is displayed when the user hovers the mouse pointer over the segment
 * `id`: (optional) the segment identifier. If not specified, the segment is automatically given a unique identifier
 
 ```js

src/segment-marker.js

@@ -37,15 +37,16 @@ import Konva from 'konva/lib/Core';
 function SegmentMarker(options) {
   const self = this;
 
-  self._segment       = options.segment;
-  self._marker        = options.marker;
-  self._segmentShape  = options.segmentShape;
-  self._editable      = options.editable;
-  self._startMarker   = options.startMarker;
+  self._segment      = options.segment;
+  self._marker       = options.marker;
+  self._segmentShape = options.segmentShape;
+  self._editable     = options.editable;
+  self._startMarker  = options.startMarker;
 
-  self._onDragStart   = options.onDragStart;
-  self._onDragMove    = options.onDragMove;
-  self._onDragEnd     = options.onDragEnd;
+  self._onClick      = options.onClick;
+  self._onDragStart  = options.onDragStart;
+  self._onDragMove   = options.onDragMove;
+  self._onDragEnd    = options.onDragEnd;
 
   self._group = new Konva.Group({
     name:          'segment-marker',
@@ -65,6 +66,10 @@ function SegmentMarker(options) {
 SegmentMarker.prototype._bindDefaultEventHandlers = function() {
   const self = this;
 
+  self._group.on('click', function(event) {
+    self._onClick(self, event);
+  });
+
   self._group.on('dragstart', function(event) {
     self._onDragStart(self, event);
   });

src/segment-shape.js

@@ -71,25 +71,26 @@ function SegmentShape(segment, peaks, layer, view) {
 
   this._overlayOffset = segmentOptions.overlayOffset;
 
-  if (!segmentOptions.overlay) {
+  if (!segment.overlay) {
     this._waveformShape = new WaveformShape({
       color:   segment.color,
       view:    view,
       segment: segment
     });
   }
 
-  this._onMouseEnter  = this._onMouseEnter.bind(this);
-  this._onMouseLeave  = this._onMouseLeave.bind(this);
-  this._onMouseDown   = this._onMouseDown.bind(this);
-  this._onMouseUp     = this._onMouseUp.bind(this);
+  this._onMouseEnter = this._onMouseEnter.bind(this);
+  this._onMouseLeave = this._onMouseLeave.bind(this);
+  this._onMouseDown  = this._onMouseDown.bind(this);
+  this._onMouseUp    = this._onMouseUp.bind(this);
 
   this._dragBoundFunc      = this._dragBoundFunc.bind(this);
   this._onSegmentDragStart = this._onSegmentDragStart.bind(this);
   this._onSegmentDragMove  = this._onSegmentDragMove.bind(this);
   this._onSegmentDragEnd   = this._onSegmentDragEnd.bind(this);
 
   // Event handlers for markers
+  this._onSegmentMarkerClick       = this._onSegmentMarkerClick.bind(this);
   this._onSegmentMarkerDragStart   = this._onSegmentMarkerDragStart.bind(this);
   this._onSegmentMarkerDragMove    = this._onSegmentMarkerDragMove.bind(this);
   this._onSegmentMarkerDragEnd     = this._onSegmentMarkerDragEnd.bind(this);
@@ -134,7 +135,7 @@ function SegmentShape(segment, peaks, layer, view) {
 
   let overlayBorderColor, overlayBorderWidth, overlayColor, overlayOpacity, overlayCornerRadius;
 
-  if (segmentOptions.overlay) {
+  if (segment.overlay) {
     overlayBorderColor  = this._borderColor || segmentOptions.overlayBorderColor;
     overlayBorderWidth  = segmentOptions.overlayBorderWidth;
     overlayColor        = this._color || segmentOptions.overlayColor;
@@ -156,7 +157,7 @@ function SegmentShape(segment, peaks, layer, view) {
 
   this._overlay.add(this._overlayRect);
 
-  if (segmentOptions.overlay) {
+  if (segment.overlay) {
     this._overlayText = new Konva.Text({
       x:             0,
       y:             this._overlayOffset,
@@ -201,22 +202,29 @@ SegmentShape.prototype._createMarkers = function() {
   const editable = this._layer.isEditingEnabled() && this._segment.editable;
   const segmentOptions = this._view.getViewOptions().segmentOptions;
 
-  const createSegmentMarker = segmentOptions.markers ?
-    this._peaks.options.createSegmentMarker :
-    createOverlayMarker;
-
-  const startMarker = createSegmentMarker({
-    segment:        this._segment,
-    editable:       editable,
-    startMarker:    true,
-    color:          segmentOptions.startMarkerColor,
-    fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
-    fontSize:       this._peaks.options.fontSize || defaultFontSize,
-    fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
-    layer:          this._layer,
-    view:           this._view.getName(),
-    segmentOptions: this._view.getViewOptions().segmentOptions
-  });
+  let createSegmentMarker, startMarker, endMarker;
+
+  if (this._segment.markers) {
+    createSegmentMarker = this._peaks.options.createSegmentMarker;
+  }
+  else if (this._segment.overlay) {
+    createSegmentMarker = createOverlayMarker;
+  }
+
+  if (createSegmentMarker) {
+    startMarker = createSegmentMarker({
+      segment:        this._segment,
+      editable:       editable,
+      startMarker:    true,
+      color:          segmentOptions.startMarkerColor,
+      fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
+      fontSize:       this._peaks.options.fontSize || defaultFontSize,
+      fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
+      layer:          this._layer,
+      view:           this._view.getName(),
+      segmentOptions: this._view.getViewOptions().segmentOptions
+    });
+  }
 
   if (startMarker) {
     this._startMarker = new SegmentMarker({
@@ -225,25 +233,28 @@ SegmentShape.prototype._createMarkers = function() {
       editable:      editable,
       startMarker:   true,
       marker:        startMarker,
+      onClick:       this._onSegmentMarkerClick,
       onDragStart:   this._onSegmentMarkerDragStart,
       onDragMove:    this._onSegmentMarkerDragMove,
       onDragEnd:     this._onSegmentMarkerDragEnd,
       dragBoundFunc: this._segmentMarkerDragBoundFunc
     });
   }
 
-  const endMarker = createSegmentMarker({
-    segment:        this._segment,
-    editable:       editable,
-    startMarker:    false,
-    color:          segmentOptions.endMarkerColor,
-    fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
-    fontSize:       this._peaks.options.fontSize || defaultFontSize,
-    fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
-    layer:          this._layer,
-    view:           this._view.getName(),
-    segmentOptions: this._view.getViewOptions().segmentOptions
-  });
+  if (createSegmentMarker) {
+    endMarker = createSegmentMarker({
+      segment:        this._segment,
+      editable:       editable,
+      startMarker:    false,
+      color:          segmentOptions.endMarkerColor,
+      fontFamily:     this._peaks.options.fontFamily || defaultFontFamily,
+      fontSize:       this._peaks.options.fontSize || defaultFontSize,
+      fontStyle:      this._peaks.options.fontStyle || defaultFontShape,
+      layer:          this._layer,
+      view:           this._view.getName(),
+      segmentOptions: this._view.getViewOptions().segmentOptions
+    });
+  }
 
   if (endMarker) {
     this._endMarker = new SegmentMarker({
@@ -252,6 +263,7 @@ SegmentShape.prototype._createMarkers = function() {
       editable:      editable,
       startMarker:   false,
       marker:        endMarker,
+      onClick:       this._onSegmentMarkerClick,
       onDragStart:   this._onSegmentMarkerDragStart,
       onDragMove:    this._onSegmentMarkerDragMove,
       onDragEnd:     this._onSegmentMarkerDragEnd,
@@ -301,9 +313,7 @@ SegmentShape.prototype.update = function(options) {
     this._overlayText.text(this._segment.labelText);
   }
 
-  const segmentOptions = this._view.getViewOptions().segmentOptions;
-
-  if (segmentOptions.overlay) {
+  if (this._segment.overlay) {
     if (this._color) {
       this._overlayRect.fill(this._color);
     }
@@ -941,6 +951,11 @@ SegmentShape.prototype._segmentMarkerDragBoundFunc = function(segmentMarker, pos
   };
 };
 
+SegmentShape.prototype._onSegmentMarkerClick = function() {
+  // Move this segment to the top of the z-order.
+  this._moveToTop();
+};
+
 SegmentShape.prototype.fitToView = function() {
   if (this._startMarker) {
     this._startMarker.fitToView();

src/segment.js

@@ -12,7 +12,8 @@ import {
 } from './utils';
 
 const segmentOptions = [
-  'id', 'pid', 'startTime', 'endTime', 'labelText', 'color', 'borderColor', 'editable'
+  'id', 'pid', 'startTime', 'endTime', 'labelText', 'color', 'borderColor',
+  'markers', 'overlay', 'editable'
 ];
 
 const invalidOptions = [
@@ -37,6 +38,14 @@ function setDefaultSegmentOptions(options, globalSegmentOptions) {
     options.labelText = '';
   }
 
+  if (isNullOrUndefined(options.markers)) {
+    options.markers = globalSegmentOptions.markers;
+  }
+
+  if (isNullOrUndefined(options.overlay)) {
+    options.overlay = globalSegmentOptions.overlay;
+  }
+
   if (isNullOrUndefined(options.editable)) {
     options.editable = false;
   }
@@ -80,6 +89,22 @@ function validateSegmentOptions(options, updating) {
     throw new TypeError('peaks.segments.' + context + ': labelText must be a string');
   }
 
+  if (updating && objectHasProperty(options, 'markers')) {
+    throw new TypeError('peaks.segments.' + context + ': cannot update markers attribute');
+  }
+
+  if (objectHasProperty(options, 'markers') && !isBoolean(options.markers)) {
+    throw new TypeError('peaks.segments.' + context + ': markers must be true or false');
+  }
+
+  if (updating && objectHasProperty(options, 'overlay')) {
+    throw new TypeError('peaks.segments.' + context + ': cannot update overlay attribute');
+  }
+
+  if (objectHasProperty(options, 'overlay') && !isBoolean(options.overlay)) {
+    throw new TypeError('peaks.segments.' + context + ': overlay must be true or false');
+  }
+
   if (objectHasProperty(options, 'editable') && !isBoolean(options.editable)) {
     throw new TypeError('peaks.segments.' + context + ': editable must be true or false');
   }
@@ -130,6 +155,8 @@ function Segment(peaks, pid, options) {
   this._color       = options.color;
   this._borderColor = options.borderColor;
   this._editable    = options.editable;
+  this._markers     = options.markers;
+  this._overlay     = options.overlay;
 
   this._setUserData(options);
 }
@@ -190,6 +217,18 @@ Object.defineProperties(Segment.prototype, {
       return this._borderColor;
     }
   },
+  markers: {
+    enumerable: true,
+    get: function() {
+      return this._markers;
+    }
+  },
+  overlay: {
+    enumerable: true,
+    get: function() {
+      return this._overlay;
+    }
+  },
   editable: {
     enumerable: true,
     get: function() {

test/segment-spec.js

@@ -199,6 +199,26 @@ describe('Segment', function() {
       }).to.throw(Error);
     });
 
+    it('should not allow the overlay attribute to be updated', function() {
+      p.segments.add({ startTime: 0, endTime: 10, labelText: 'test' });
+
+      const segment = p.segments.getSegments()[0];
+
+      expect(function() {
+        segment.update({ overlay: false });
+      }).to.throw(TypeError);
+    });
+
+    it('should not allow the markers attribute to be updated', function() {
+      p.segments.add({ startTime: 0, endTime: 10, labelText: 'test' });
+
+      const segment = p.segments.getSegments()[0];
+
+      expect(function() {
+        segment.update({ markers: false });
+      }).to.throw(TypeError);
+    });
+
     it('should allow a user data attribute to be created', function() {
       const peaks = { emit: function() {} };
       const pid = 0;
@@ -246,6 +266,8 @@ describe('Segment', function() {
       '_labelText',
       '_color',
       '_borderColor',
+      '_overlay',
+      '_markers',
       '_editable'
     ].forEach(function(name) {
       it('should not allow an invalid user data attribute name: ' + name, function() {