diff --git a/peaks.js.d.ts b/peaks.js.d.ts index 74bf31e8..f9e7296d 100644 --- a/peaks.js.d.ts +++ b/peaks.js.d.ts @@ -81,7 +81,7 @@ declare module 'peaks.js' { interface GlobalSegmentDisplayOptions extends SegmentDisplayOptions { waveformColor?: WaveformColor; - overlayColor?: string; + overlayColor?: string; } type FormatTimeFunction = (time: number) => string; @@ -108,6 +108,7 @@ declare module 'peaks.js' { enablePoints?: boolean; enableSegments?: boolean; segmentOptions?: SegmentDisplayOptions; + filterPoints?: ((p: Point) => boolean) | null; } interface ZoomViewOptions extends ViewOptions { diff --git a/src/main.js b/src/main.js index c0b95688..a3dcdf54 100644 --- a/src/main.js +++ b/src/main.js @@ -82,7 +82,8 @@ const defaultViewOptions = { fontStyle: 'normal', timeLabelPrecision: 2, enablePoints: true, - enableSegments: true + enableSegments: true, + filterPoints: null }; const defaultZoomviewOptions = { @@ -166,7 +167,8 @@ function getOverviewOptions(opts) { 'highlightOffset', 'enablePoints', 'enableSegments', - 'enableEditing' + 'enableEditing', + 'filterPoints' ]; optNames.forEach(function(optName) { @@ -225,7 +227,8 @@ function getZoomviewOptions(opts) { 'autoScrollOffset', 'enablePoints', 'enableSegments', - 'enableEditing' + 'enableEditing', + 'filterPoints' ]; optNames.forEach(function(optName) { diff --git a/src/points-layer.js b/src/points-layer.js index d0818abf..63e6a2b7 100644 --- a/src/points-layer.js +++ b/src/points-layer.js @@ -22,11 +22,12 @@ import Konva from 'konva/lib/Core'; * @param {Boolean} enableEditing */ -function PointsLayer(peaks, view, enableEditing) { +function PointsLayer(peaks, view, enableEditing, filterPoints) { this._peaks = peaks; this._view = view; this._enableEditing = enableEditing; this._pointMarkers = {}; + this._filterPoints = filterPoints; this._layer = new Konva.Layer(); this._onPointsDrag = this._onPointsDrag.bind(this); @@ -38,6 +39,7 @@ function PointsLayer(peaks, view, enableEditing) { this._onPointMarkerMouseEnter = this._onPointMarkerMouseEnter.bind(this); this._onPointMarkerMouseLeave = this._onPointMarkerMouseLeave.bind(this); + this._isPointVisible = this._isPointVisible.bind(this); this._onPointsUpdate = this._onPointsUpdate.bind(this); this._onPointsAdd = this._onPointsAdd.bind(this); this._onPointsRemove = this._onPointsRemove.bind(this); @@ -79,12 +81,17 @@ PointsLayer.prototype.formatTime = function(time) { return this._view.formatTime(time); }; +PointsLayer.prototype._isPointVisible = function(point, startTime, endTime) { + const isInFrame = point.isVisible(startTime, endTime); + + return isInFrame && (!this._filterPoints || this._filterPoints(point)); +}; + PointsLayer.prototype._onPointsUpdate = function(point, options) { + const pointMarker = this.getPointMarker(point); const frameStartTime = this._view.getStartTime(); const frameEndTime = this._view.getEndTime(); - - const pointMarker = this.getPointMarker(point); - const isVisible = point.isVisible(frameStartTime, frameEndTime); + const isVisible = this._isPointVisible(point, frameStartTime, frameEndTime); if (pointMarker && !isVisible) { // Remove point marker that is no longer visible. @@ -115,7 +122,9 @@ PointsLayer.prototype._onPointsAdd = function(event) { const frameEndTime = self._view.getEndTime(); event.points.forEach(function(point) { - if (point.isVisible(frameStartTime, frameEndTime)) { + const isVisible = self._isPointVisible(point, frameStartTime, frameEndTime); + + if (isVisible) { self._updatePoint(point); } }); @@ -331,7 +340,7 @@ PointsLayer.prototype._removeInvisiblePoints = function(startTime, endTime) { if (objectHasProperty(this._pointMarkers, pointPid)) { const point = this._pointMarkers[pointPid].getPoint(); - if (!point.isVisible(startTime, endTime)) { + if (!this._isPointVisible(point, startTime, endTime)) { this._removePoint(point); } } diff --git a/src/waveform-points.js b/src/waveform-points.js index d611b9c9..d9c46c26 100644 --- a/src/waveform-points.js +++ b/src/waveform-points.js @@ -180,6 +180,9 @@ WaveformPoints.prototype.add = function(/* pointOrPoints */) { }; WaveformPoints.prototype.updatePointId = function(point, newPointId) { + if (point.id === newPointId) { + return; + } if (this._pointsById[point.id]) { if (this._pointsById[newPointId]) { throw new Error('point.update(): duplicate id'); diff --git a/src/waveform-view.js b/src/waveform-view.js index 28be92e6..833088a4 100644 --- a/src/waveform-view.js +++ b/src/waveform-view.js @@ -70,7 +70,8 @@ function WaveformView(waveformData, container, peaks, viewOptions) { } if (self._viewOptions.enablePoints) { - self._pointsLayer = new PointsLayer(peaks, self, self._viewOptions.enableEditing); + self._pointsLayer = new PointsLayer(peaks, self, self._viewOptions.enableEditing, + self._viewOptions.filterPoints); self._pointsLayer.addToStage(self._stage); }