From ba3c78f6b2c68e6e972c59e9a16b84f394eb4973 Mon Sep 17 00:00:00 2001 From: Chris Needham Date: Wed, 30 Aug 2023 15:55:27 +0100 Subject: [PATCH] Added axis marker options --- doc/API.md | 39 +++++++++++++++++++++++++++++++--- peaks.js.d.ts | 7 +++++- src/main.js | 28 ++++++++++++++---------- src/waveform-axis.js | 46 +++++++++++++++++++++++++++------------- src/waveform-overview.js | 4 ++-- src/waveform-zoomview.js | 4 ++-- 6 files changed, 94 insertions(+), 34 deletions(-) diff --git a/doc/API.md b/doc/API.md index 75f1fba9..f22840de 100644 --- a/doc/API.md +++ b/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])` diff --git a/peaks.js.d.ts b/peaks.js.d.ts index 640dd342..a87d90ce 100644 --- a/peaks.js.d.ts +++ b/peaks.js.d.ts @@ -492,13 +492,18 @@ declare module 'peaks.js' { type EventData = [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; diff --git a/src/main.js b/src/main.js index 8c0401ed..48b9e4bf 100644 --- a/src/main.js +++ b/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', diff --git a/src/waveform-axis.js b/src/waveform-axis.js index bfd82432..2c56d24f 100644 --- a/src/waveform-axis.js +++ b/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); diff --git a/src/waveform-overview.js b/src/waveform-overview.js index 60fb2d1c..210209b2 100644 --- a/src/waveform-overview.js +++ b/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(); }; diff --git a/src/waveform-zoomview.js b/src/waveform-zoomview.js index 2327e14c..171fc631 100644 --- a/src/waveform-zoomview.js +++ b/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(); };