Added axis marker options

doc/API.md

@@ -33,6 +33,7 @@ This document describes the Peaks.js API, including configuration options, funct
     - [view.setPlayedWaveformColor()](#viewsetplayedwaveformcolorcolor)
     - [view.showPlayheadTime()](#viewshowplayheadtimeshow)
     - [view.setTimeLabelPrecision()](#viewsettimeLabelPrecisionprecision)
+    - [view.showAxisLabels()](#viewshowaxislabelsshow-options)
     - [view.enableAutoScroll()](#viewenableautoscrollenable-options)
     - [view.enableMarkerEditing()](#viewenablemarkereditingenable)
     - [view.enableSegmentDragging()](#viewenablesegmentdraggingenable)
@@ -179,6 +180,12 @@ var options = {
     // Show or hide the axis label timestamps
     showAxisLabels: true,
 
+    // Height of the axis markers at the top of the waveform
+    axisTopMarkerHeight: 10,
+
+    // Height of the axis markers at the top of the waveform
+    axisBottomMarkerHeight: 10,
+
     // Font family for axis labels, playhead, and point and segment markers
     fontFamily: 'sans-serif',
 
@@ -272,6 +279,12 @@ var options = {
     // Show or hide the axis label timestamps
     showAxisLabels: true,
 
+    // Height of the axis markers at the top of the waveform
+    axisTopMarkerHeight: 10,
+
+    // Height of the axis markers at the top of the waveform
+    axisBottomMarkerHeight: 10,
+
     // Font family for axis labels, playhead, and point and segment markers
     fontFamily: 'sans-serif',
 
@@ -853,16 +866,36 @@ const view = instance.views.getView('zoomview');
 view.setTimeLabelPrecision(3); // Displays time of playhead/marker as hh:mm:ss.sss
 ```
 
-### `view.showAxisLabels(show)`
+### `view.showAxisLabels(show[, options])`
 
 Shows or hides the time axis timestamp labels.
 
+The `options` object can be used to set the the height of the time axis markers on the top and bottom of the waveform.
+
+
 The initial setting is controlled by the `showAxisLabels` configuration option
-(default: `true`).
+(default: `true`) and the `axisTopMarkerHeight` and `axisBottomMarkerHeight` options (default: 10).
 
 ```js
 const view = instance.views.getView('zoomview');
-view.showAxisLabels(false); // Remove the time axis labels.
+
+// Remove the time axis labels.
+view.showAxisLabels(false);
+
+// Show the time axis labels with default markers.
+view.showAxisLabels(true);
+
+// Show the time axis labels but remove the markers.
+view.showAxisLabels(true, {
+  topMarkerHeight: 0,
+  bottomMarkerHeight: 0
+});
+
+// Show the time axis labels and set the marker height.
+view.showAxisLabels(true, {
+  topMarkerHeight: 10,
+  bottomMarkerHeight: 10
+});
 ```
 
 ### `view.enableAutoScroll(enable[, options])`

peaks.js.d.ts

@@ -492,13 +492,18 @@ declare module 'peaks.js' {
 
   type EventData<T> = [T] extends [(...eventData: infer U) => any] ? U : [T] extends [void] ? [] : [T];
 
+  interface ShowAxisLabelOptions {
+    topMarkerHeight?: number;
+    bottomMarkerHeight?: number;
+  }
+
   interface WaveformView {
     setAmplitudeScale: (scale: number) => void;
     setWaveformColor: (color: WaveformColor) => void;
     setPlayedWaveformColor: (color: WaveformColor | null) => void;
     showPlayheadTime: (show: boolean) => void;
     setTimeLabelPrecision: (precision: number) => void;
-    showAxisLabels: (show: boolean) => void;
+    showAxisLabels: (show: boolean, options?: ShowAxisLabelOptions) => void;
     enableMarkerEditing: (enable: boolean) => void;
     enableSeek: (enable: boolean) => void;
     fitToContainer: () => void;

src/main.js

@@ -67,17 +67,19 @@ function Peaks() {
 Peaks.prototype = Object.create(EventEmitter.prototype);
 
 const defaultViewOptions = {
-  playheadColor:       '#111111',
-  playheadTextColor:   '#aaaaaa',
-  axisGridlineColor:   '#cccccc',
-  showAxisLabels:      true,
-  axisLabelColor:      '#aaaaaa',
-  fontFamily:          'sans-serif',
-  fontSize:            11,
-  fontStyle:           'normal',
-  timeLabelPrecision:  2,
-  enablePoints:        true,
-  enableSegments:      true
+  playheadColor:          '#111111',
+  playheadTextColor:      '#aaaaaa',
+  axisGridlineColor:      '#cccccc',
+  showAxisLabels:         true,
+  axisTopMarkerHeight:    10,
+  axisBottomMarkerHeight: 10,
+  axisLabelColor:         '#aaaaaa',
+  fontFamily:             'sans-serif',
+  fontSize:               11,
+  fontStyle:              'normal',
+  timeLabelPrecision:     2,
+  enablePoints:           true,
+  enableSegments:         true
 };
 
 const defaultZoomviewOptions = {
@@ -142,6 +144,8 @@ function getOverviewOptions(opts) {
     'timeLabelPrecision',
     'axisGridlineColor',
     'showAxisLabels',
+    'axisTopMarkerHeight',
+    'axisBottomMarkerHeight',
     'axisLabelColor',
     'formatAxisTime',
     'fontFamily',
@@ -197,6 +201,8 @@ function getZoomviewOptions(opts) {
     'timeLabelPrecision',
     'axisGridlineColor',
     'showAxisLabels',
+    'axisTopMarkerHeight',
+    'axisBottomMarkerHeight',
     'axisLabelColor',
     'formatAxisTime',
     'fontFamily',

src/waveform-axis.js

@@ -6,7 +6,7 @@
  * @module waveform-axis
  */
 
-import { formatTime, roundUpToNearest } from './utils';
+import { formatTime, objectHasProperty, roundUpToNearest } from './utils';
 import Konva from 'konva/lib/Core';
 
 /**
@@ -29,9 +29,11 @@ import Konva from 'konva/lib/Core';
 function WaveformAxis(view, options) {
   const self = this;
 
-  self._axisGridlineColor = options.axisGridlineColor;
-  self._axisLabelColor    = options.axisLabelColor;
-  self._showAxisLabels    = options.showAxisLabels;
+  self._axisGridlineColor      = options.axisGridlineColor;
+  self._axisLabelColor         = options.axisLabelColor;
+  self._showAxisLabels         = options.showAxisLabels;
+  self._axisTopMarkerHeight    = options.axisTopMarkerHeight;
+  self._axisBottomMarkerHeight = options.axisBottomMarkerHeight;
 
   if (options.formatAxisTime) {
     self._formatAxisTime = options.formatAxisTime;
@@ -76,8 +78,18 @@ WaveformAxis.prototype.addToLayer = function(layer) {
   layer.add(this._axisShape);
 };
 
-WaveformAxis.prototype.showAxisLabels = function(show) {
+WaveformAxis.prototype.showAxisLabels = function(show, options) {
   this._showAxisLabels = show;
+
+  if (options) {
+    if (objectHasProperty(options, 'topMarkerHeight')) {
+      this._axisTopMarkerHeight = options.topMarkerHeight;
+    }
+
+    if (objectHasProperty(options, 'bottomMarkerHeight')) {
+      this._axisBottomMarkerHeight = options.bottomMarkerHeight;
+    }
+  }
 };
 
 /**
@@ -127,9 +139,6 @@ WaveformAxis.prototype._getAxisLabelScale = function(view) {
 WaveformAxis.prototype._drawAxis = function(context, view) {
   const currentFrameStartTime = view.getStartTime();
 
-  // Draw axis markers
-  const markerHeight = 10;
-
   // Time interval between axis markers (seconds)
   const axisLabelIntervalSecs = this._getAxisLabelScale(view);
 
@@ -164,18 +173,25 @@ WaveformAxis.prototype._drawAxis = function(context, view) {
       break;
     }
 
-    context.beginPath();
-    context.moveTo(x + 0.5, 0);
-    context.lineTo(x + 0.5, 0 + markerHeight);
-    context.moveTo(x + 0.5, height);
-    context.lineTo(x + 0.5, height - markerHeight);
-    context.stroke();
+    if (this._axisTopMarkerHeight > 0) {
+      context.beginPath();
+      context.moveTo(x + 0.5, 0);
+      context.lineTo(x + 0.5, 0 + this._axisTopMarkerHeight);
+      context.stroke();
+    }
+
+    if (this._axisBottomMarkerHeight) {
+      context.beginPath();
+      context.moveTo(x + 0.5, height);
+      context.lineTo(x + 0.5, height - this._axisBottomMarkerHeight);
+      context.stroke();
+    }
 
     if (this._showAxisLabels) {
       const label      = this._formatAxisTime(secs);
       const labelWidth = context.measureText(label).width;
       const labelX     = x - labelWidth / 2;
-      const labelY     = height - 1 - markerHeight;
+      const labelY     = height - 1 - this._axisBottomMarkerHeight;
 
       if (labelX >= 0) {
         context.fillText(label, labelX, labelY);

src/waveform-overview.js

@@ -510,8 +510,8 @@ WaveformOverview.prototype.formatTime = function(time) {
   return this._formatPlayheadTime(time);
 };
 
-WaveformOverview.prototype.showAxisLabels = function(show) {
-  this._axis.showAxisLabels(show);
+WaveformOverview.prototype.showAxisLabels = function(show, options) {
+  this._axis.showAxisLabels(show, options);
   this._axisLayer.draw();
 };
 

src/waveform-zoomview.js

@@ -894,8 +894,8 @@ WaveformZoomView.prototype.formatTime = function(time) {
   return this._formatPlayheadTime(time);
 };
 
-WaveformZoomView.prototype.showAxisLabels = function(show) {
-  this._axis.showAxisLabels(show);
+WaveformZoomView.prototype.showAxisLabels = function(show, options) {
+  this._axis.showAxisLabels(show, options);
   this._axisLayer.draw();
 };