Skip to content

Added filterPoints option to WaveformView #567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added filterPoints option to WaveformView #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion peaks.js.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ declare module 'peaks.js' {

interface GlobalSegmentDisplayOptions extends SegmentDisplayOptions {
waveformColor?: WaveformColor;
overlayColor?: string;
overlayColor?: string;
}

type FormatTimeFunction = (time: number) => string;
Expand All @@ -108,6 +108,7 @@ declare module 'peaks.js' {
enablePoints?: boolean;
enableSegments?: boolean;
segmentOptions?: SegmentDisplayOptions;
filterPoints?: ((p: Point) => boolean) | null;
}

interface ZoomViewOptions extends ViewOptions {
Expand Down
9 changes: 6 additions & 3 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ const defaultViewOptions = {
fontStyle: 'normal',
timeLabelPrecision: 2,
enablePoints: true,
enableSegments: true
enableSegments: true,
filterPoints: null
};

const defaultZoomviewOptions = {
Expand Down Expand Up @@ -166,7 +167,8 @@ function getOverviewOptions(opts) {
'highlightOffset',
'enablePoints',
'enableSegments',
'enableEditing'
'enableEditing',
'filterPoints'
];

optNames.forEach(function(optName) {
Expand Down Expand Up @@ -225,7 +227,8 @@ function getZoomviewOptions(opts) {
'autoScrollOffset',
'enablePoints',
'enableSegments',
'enableEditing'
'enableEditing',
'filterPoints'
];

optNames.forEach(function(optName) {
Expand Down
21 changes: 15 additions & 6 deletions src/points-layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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);
}
});
Expand Down Expand Up @@ -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);
}
}
Expand Down
3 changes: 2 additions & 1 deletion src/waveform-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down