Skip to content

Commit

Permalink
Added enablePoints and enableSegment options
Browse files Browse the repository at this point in the history 
These options allow you to control whether points and segments
are shown in the zoomview and overview waveforms
  • Loading branch information
@chrisn
chrisn committed Jun 17, 2023
1 parent de2e8a4 commit 53d3e64
Show file tree
Hide file tree
Showing 5 changed files with 140 additions and 50 deletions.
18 changes: 18 additions & 0 deletions doc/API.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,12 @@ var options = {
// auto-scroll
autoScrollOffset: 100,

// Enables point markers to be shown on the zoomable waveform
enablePoints: true,

// Enables segments to be shown on the zoomable waveform
enableSegments: true,

segmentOptions: {
// Some segment options can be overridden for the zoomable waveform,
// see segmentOptions below
Expand Down Expand Up @@ -271,6 +277,12 @@ var options = {
// (either 'normal', 'bold', or 'italic')
fontStyle: 'normal',

// Enables point markers to be shown on the overview waveform
enablePoints: true,

// Enables segments to be shown on the overview waveform
enableSegments: true,

segmentOptions: {
// Some segment options can be overridden for the overview waveform,
// see segmentOptions below
Expand Down Expand Up @@ -409,6 +421,12 @@ var options = {
// if true, emit cue events on the Peaks instance (see Cue Events)
emitCueEvents: false,

// Enables point markers to be shown on the waveform views
enablePoints: true,

// Enables segments to be shown on the waveform views
enableSegments: true,

segmentOptions: {
// Enable segment markers
markers: true,
Expand Down
36 changes: 19 additions & 17 deletions peaks.js.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,24 +68,24 @@ declare module 'peaks.js' {
type LabelVerticalAlign = 'top' | 'middle' | 'bottom';

interface SegmentDisplayOptions {
markers?: boolean;
overlay?: boolean;
startMarkerColor?: string;
endMarkerColor?: string;
waveformColor?: WaveformColor;
overlayColor?: string;
overlayOpacity?: number;
overlayBorderColor?: string;
overlayBorderWidth?: number;
overlayCornerRadius?: number;
overlayOffset?: number;
overlayLabelAlign?: LabelHorizontalAlign;
markers?: boolean;
overlay?: boolean;
startMarkerColor?: string;
endMarkerColor?: string;
waveformColor?: WaveformColor;
overlayColor?: string;
overlayOpacity?: number;
overlayBorderColor?: string;
overlayBorderWidth?: number;
overlayCornerRadius?: number;
overlayOffset?: number;
overlayLabelAlign?: LabelHorizontalAlign;
overlayLabelVerticalAlign?: LabelVerticalAlign;
overlayLabelPadding?: number;
overlayLabelColor?: string;
overlayFontFamily?: string;
overlayFontSize?: number;
overlayFontStyle?: string;
overlayLabelPadding?: number;
overlayLabelColor?: string;
overlayFontFamily?: string;
overlayFontSize?: number;
overlayFontStyle?: string;
}

/**
Expand Down Expand Up @@ -116,6 +116,8 @@ declare module 'peaks.js' {
showAxisLabels?: boolean;
formatAxisTime?: FormatTimeFunction;
waveformColor?: WaveformColor;
enablePoints?: boolean;
enableSegments?: boolean;
segmentOptions?: SegmentDisplayOptions;
}

Expand Down
13 changes: 9 additions & 4 deletions src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,9 @@ const defaultViewOptions = {
fontFamily: 'sans-serif',
fontSize: 11,
fontStyle: 'normal',
timeLabelPrecision: 2
timeLabelPrecision: 2,
enablePoints: true,
enableSegments: true
};

const defaultZoomviewOptions = {
Expand All @@ -87,7 +89,6 @@ const defaultZoomviewOptions = {
wheelMode: 'none',
autoScroll: true,
autoScrollOffset: 100
// zoomAdapter: 'static'
};

const defaultOverviewOptions = {
Expand Down Expand Up @@ -152,7 +153,9 @@ function getOverviewOptions(opts) {
'highlightStrokeColor',
'highlightOpacity',
'highlightCornerRadius',
'highlightOffset'
'highlightOffset',
'enablePoints',
'enableSegments'
];

optNames.forEach(function(optName) {
Expand Down Expand Up @@ -203,7 +206,9 @@ function getZoomviewOptions(opts) {
'fontStyle',
'wheelMode',
'autoScroll',
'autoScrollOffset'
'autoScrollOffset',
'enablePoints',
'enableSegments'
];

optNames.forEach(function(optName) {
Expand Down
60 changes: 46 additions & 14 deletions src/waveform-overview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,11 +95,15 @@ function WaveformOverview(waveformData, container, peaks) {

self._createWaveform();

self._segmentsLayer = new SegmentsLayer(peaks, self, false);
self._segmentsLayer.addToStage(self._stage);
if (self._viewOptions.enableSegments) {
self._segmentsLayer = new SegmentsLayer(peaks, self, false);
self._segmentsLayer.addToStage(self._stage);
}

self._pointsLayer = new PointsLayer(peaks, self, false);
self._pointsLayer.addToStage(self._stage);
if (self._viewOptions.enablePoints) {
self._pointsLayer = new PointsLayer(peaks, self, false);
self._pointsLayer.addToStage(self._stage);
}

self._highlightLayer = new HighlightLayer(
self,
Expand Down Expand Up @@ -222,7 +226,9 @@ WaveformOverview.prototype._clickHandler = function(event, eventName) {
}
};

this._segmentsLayer.segmentClicked(eventName, clickEvent);
if (this._segmentsLayer) {
this._segmentsLayer.segmentClicked(eventName, clickEvent);
}
}
}
}
Expand Down Expand Up @@ -411,7 +417,10 @@ WaveformOverview.prototype.setAmplitudeScale = function(scale) {
this._amplitudeScale = scale;

this._waveformLayer.draw();
this._segmentsLayer.draw();

if (this._segmentsLayer) {
this._segmentsLayer.draw();
}
};

WaveformOverview.prototype.getAmplitudeScale = function() {
Expand Down Expand Up @@ -504,8 +513,13 @@ WaveformOverview.prototype._updateWaveform = function() {
const frameStartTime = 0;
const frameEndTime = this.pixelsToTime(this._width);

this._pointsLayer.updatePoints(frameStartTime, frameEndTime);
this._segmentsLayer.updateSegments(frameStartTime, frameEndTime);
if (this._pointsLayer) {
this._pointsLayer.updatePoints(frameStartTime, frameEndTime);
}

if (this._segmentsLayer) {
this._segmentsLayer.updateSegments(frameStartTime, frameEndTime);
}
};

WaveformOverview.prototype.setWaveformColor = function(color) {
Expand Down Expand Up @@ -549,8 +563,13 @@ WaveformOverview.prototype.showAxisLabels = function(show) {
};

WaveformOverview.prototype.enableMarkerEditing = function(enable) {
this._segmentsLayer.enableEditing(enable);
this._pointsLayer.enableEditing(enable);
if (this._segmentsLayer) {
this._segmentsLayer.enableEditing(enable);
}

if (this._pointsLayer) {
this._pointsLayer.enableEditing(enable);
}
};

WaveformOverview.prototype.fitToContainer = function() {
Expand Down Expand Up @@ -578,8 +597,15 @@ WaveformOverview.prototype.fitToContainer = function() {

this._waveformShape.fitToView();
this._playheadLayer.fitToView();
this._segmentsLayer.fitToView();
this._pointsLayer.fitToView();

if (this._segmentsLayer) {
this._segmentsLayer.fitToView();
}

if (this._pointsLayer) {
this._pointsLayer.fitToView();
}

this._highlightLayer.fitToView();

if (updateWaveform) {
Expand All @@ -606,8 +632,14 @@ WaveformOverview.prototype.destroy = function() {
this._peaks.off('window_resize', this._onWindowResize);

this._playheadLayer.destroy();
this._segmentsLayer.destroy();
this._pointsLayer.destroy();

if (this._segmentsLayer) {
this._segmentsLayer.destroy();
}

if (this._pointsLayer) {
this._pointsLayer.destroy();
}

if (this._stage) {
this._stage.destroy();
Expand Down
63 changes: 48 additions & 15 deletions src/waveform-zoomview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,11 +108,15 @@ function WaveformZoomView(waveformData, container, peaks) {

self._createWaveform();

self._segmentsLayer = new SegmentsLayer(peaks, self, true);
self._segmentsLayer.addToStage(self._stage);
if (self._viewOptions.enableSegments) {
self._segmentsLayer = new SegmentsLayer(peaks, self, true);
self._segmentsLayer.addToStage(self._stage);
}

self._pointsLayer = new PointsLayer(peaks, self, true);
self._pointsLayer.addToStage(self._stage);
if (self._viewOptions.enablePoints) {
self._pointsLayer = new PointsLayer(peaks, self, true);
self._pointsLayer.addToStage(self._stage);
}

self._createAxisLabels();

Expand Down Expand Up @@ -307,7 +311,9 @@ WaveformZoomView.prototype._clickHandler = function(event, eventName) {
}
};

this._segmentsLayer.segmentClicked(eventName, clickEvent);
if (this._segmentsLayer) {
this._segmentsLayer.segmentClicked(eventName, clickEvent);
}
}
}
}
Expand Down Expand Up @@ -406,7 +412,9 @@ WaveformZoomView.prototype.enableSegmentDragging = function(enable) {
this._enableSegmentDragging = enable;

// Update all existing segments
this._segmentsLayer.enableSegmentDragging(enable);
if (this._segmentsLayer) {
this._segmentsLayer.enableSegmentDragging(enable);
}
};

WaveformZoomView.prototype.isSegmentDraggingEnabled = function() {
Expand Down Expand Up @@ -798,7 +806,10 @@ WaveformZoomView.prototype.setAmplitudeScale = function(scale) {
this._amplitudeScale = scale;

this._drawWaveformLayer();
this._segmentsLayer.draw();

if (this._segmentsLayer) {
this._segmentsLayer.draw();
}
};

WaveformZoomView.prototype.getAmplitudeScale = function() {
Expand Down Expand Up @@ -932,8 +943,13 @@ WaveformZoomView.prototype.updateWaveform = function(frameOffset) {
const frameStartTime = this.getStartTime();
const frameEndTime = this.getEndTime();

this._pointsLayer.updatePoints(frameStartTime, frameEndTime);
this._segmentsLayer.updateSegments(frameStartTime, frameEndTime);
if (this._pointsLayer) {
this._pointsLayer.updatePoints(frameStartTime, frameEndTime);
}

if (this._segmentsLayer) {
this._segmentsLayer.updateSegments(frameStartTime, frameEndTime);
}

this._peaks.emit('zoomview.displaying', frameStartTime, frameEndTime);
};
Expand Down Expand Up @@ -991,8 +1007,13 @@ WaveformZoomView.prototype.enableAutoScroll = function(enable, options) {
};

WaveformZoomView.prototype.enableMarkerEditing = function(enable) {
this._segmentsLayer.enableEditing(enable);
this._pointsLayer.enableEditing(enable);
if (this._segmentsLayer) {
this._segmentsLayer.enableEditing(enable);
}

if (this._pointsLayer) {
this._pointsLayer.enableEditing(enable);
}
};

WaveformZoomView.prototype.getMinSegmentDragWidth = function() {
Expand Down Expand Up @@ -1042,8 +1063,14 @@ WaveformZoomView.prototype.fitToContainer = function() {

this._waveformShape.fitToView();
this._playheadLayer.fitToView();
this._segmentsLayer.fitToView();
this._pointsLayer.fitToView();

if (this._segmentsLayer) {
this._segmentsLayer.fitToView();
}

if (this._pointsLayer) {
this._pointsLayer.fitToView();
}

if (updateWaveform) {
this.updateWaveform(this._frameOffset);
Expand Down Expand Up @@ -1073,8 +1100,14 @@ WaveformZoomView.prototype.destroy = function() {
this._peaks.off('keyboard.shift_right', this._onKeyboardShiftRight);

this._playheadLayer.destroy();
this._segmentsLayer.destroy();
this._pointsLayer.destroy();

if (this._segmentsLayer) {
this._segmentsLayer.destroy();
}

if (this._pointsLayer) {
this._pointsLayer.destroy();
}

if (this._stage) {
this._stage.destroy();
Expand Down

0 comments on commit 53d3e64

Please sign in to comment.