Skip to content
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

Jump to bottom

Enable rendering of non-editable marker lines #126

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Enable rendering of non-editable marker lines #126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0f1583
Allow points and segments to show up if not editable too
johvet Jul 1, 2015
3de98fa
Add a config option to control uneditable markers
johvet Jul 2, 2015
4ea5f24
Remove duplicated YUIDoc
ziggythehamster Jul 2, 2015
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
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,6 +209,10 @@ var options = {
// Zoom view adapter to use. Valid adapters are: 'animated' (default) and 'static'
zoomAdapter: 'animated',

// Show marker lines for uneditable segments and points on the following waveforms: 'overview', 'zoomview'.
// Default is none of them.
showMarkerLinesWhenUneditable: [],

// Array of initial segment objects with startTime and
// endTime in seconds and a boolean for editable.
// See below.
Expand Down
6 changes: 6 additions & 0 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,12 @@ define('peaks', [
pointDblClickHandler: null, //Handler called when point handle double clicked.
pointDragEndHandler: null, // Called when the point handle has finished dragging

/**
* Show marker lines for uneditable segments and points on the following waveforms: 'overview', 'zoomview'.
* Default is none of them.
*/
showMarkerLinesWhenUneditable: [],

/**
* WaveformData WebAudio Decoder Options
*
Expand Down
21 changes: 12 additions & 9 deletions src/main/markers/waveform.points.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,21 @@ define([
function constructPoint(point) {
var pointZoomGroup = new Konva.Group();
var pointOverviewGroup = new Konva.Group();
var pointGroups = [pointZoomGroup, pointOverviewGroup];
var pointGroups = [ { group: pointZoomGroup, view: 'zoomview' }, { group: pointOverviewGroup, view: 'overview' }];

point.editable = Boolean(point.editable);

pointGroups.forEach(function(pointGroup, i){
pointGroups.forEach(function(item, i){
var view = self.views[i];
var pointGroup = item.group;

if (point.editable) {
pointGroup.marker = new peaks.options.pointMarker(true, pointGroup, point, pointHandleDrag, peaks.options.pointDblClickHandler, peaks.options.pointDragEndHandler);
pointGroup.add(pointGroup.marker);

} else if (peaks.options.showMarkerLinesWhenUneditable.indexOf(item.view) > -1) {
pointGroup.marker = new peaks.options.pointMarker(false, pointGroup, point);
pointGroup.add(pointGroup.marker);
}

view.pointLayer.add(pointGroup);
Expand All @@ -59,9 +64,8 @@ define([
// Overview
var overviewtimestampOffset = waveformView.waveformOverview.data.at_time(point.timestamp);

if (point.editable) {
if (point.overview.marker) point.overview.marker.show().setX(overviewtimestampOffset - point.overview.marker.getWidth());

if (point.overview.marker) {
point.overview.marker.show().setX(overviewtimestampOffset - point.overview.marker.getWidth());
// Change Text
point.overview.marker.label.setText(mixins.niceTime(point.timestamp, false));
}
Expand All @@ -79,9 +83,8 @@ define([

point.zoom.show();

if (point.editable) {
if (point.zoom.marker) point.zoom.marker.show().setX(startPixel - point.zoom.marker.getWidth());

if (point.zoom.marker) {
point.zoom.marker.show().setX(startPixel - point.zoom.marker.getWidth());
// Change Text
point.zoom.marker.label.setText(mixins.niceTime(point.timestamp, false));
}
Expand Down Expand Up @@ -164,4 +167,4 @@ define([
});
};
};
});
});
38 changes: 25 additions & 13 deletions src/main/markers/waveform.segments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ define([
var segmentZoomGroup = new Konva.Group();
var segmentOverviewGroup = new Konva.Group();

var segmentGroups = [segmentZoomGroup, segmentOverviewGroup];
var segmentGroups = [{ group: segmentZoomGroup, view: 'zoomview' }, { group: segmentOverviewGroup, view: 'overview' }];

var menter = function (event) {
this.parent.label.show();
Expand All @@ -50,8 +50,9 @@ define([
this.parent.view.segmentLayer.draw();
};

segmentGroups.forEach(function(segmentGroup, i){
segmentGroups.forEach(function(item, i){
var view = self.views[i];
var segmentGroup = item.group;

segmentGroup.waveformShape = SegmentShape.createShape(segment, view);

Expand All @@ -64,12 +65,17 @@ define([
segmentGroup.add(segmentGroup.label.hide());

if (editable) {
var draggable = true;
segmentGroup.inMarker = new peaks.options.segmentInMarker(editable, segmentGroup, segment, segmentHandleDrag);
segmentGroup.outMarker = new peaks.options.segmentOutMarker(editable, segmentGroup, segment, segmentHandleDrag);

segmentGroup.inMarker = new peaks.options.segmentInMarker(draggable, segmentGroup, segment, segmentHandleDrag);
segmentGroup.add(segmentGroup.inMarker);
segmentGroup.add(segmentGroup.outMarker);

} else if (peaks.options.showMarkerLinesWhenUneditable.indexOf(item.view) > -1) {
segmentGroup.inMarker = new peaks.options.segmentInMarker(false, segmentGroup, segment);
segmentGroup.outMarker = new peaks.options.segmentOutMarker(false, segmentGroup, segment);

segmentGroup.outMarker = new peaks.options.segmentOutMarker(draggable, segmentGroup, segment, segmentHandleDrag);
segmentGroup.add(segmentGroup.inMarker);
segmentGroup.add(segmentGroup.outMarker);
}

Expand All @@ -95,12 +101,15 @@ define([

segment.overview.setWidth(overviewEndOffset - overviewStartOffset);

if (segment.editable) {
if (segment.overview.inMarker) segment.overview.inMarker.show().setX(overviewStartOffset - segment.overview.inMarker.getWidth());
if (segment.overview.outMarker) segment.overview.outMarker.show().setX(overviewEndOffset);

if (segment.overview.inMarker) {
segment.overview.inMarker.show().setX(overviewStartOffset - segment.overview.inMarker.getWidth());
// Change Text
segment.overview.inMarker.label.setText(mixins.niceTime(segment.startTime, false));
}

if (segment.overview.outMarker) {
segment.overview.outMarker.show().setX(overviewEndOffset);
// Change Text
segment.overview.outMarker.label.setText(mixins.niceTime(segment.endTime, false));
}

Expand All @@ -125,12 +134,15 @@ define([

segment.zoom.show();

if (segment.editable) {
if (segment.zoom.inMarker) segment.zoom.inMarker.show().setX(startPixel - segment.zoom.inMarker.getWidth());
if (segment.zoom.outMarker) segment.zoom.outMarker.show().setX(endPixel);

if (segment.zoom.inMarker) {
segment.zoom.inMarker.show().setX(startPixel - segment.zoom.inMarker.getWidth());
// Change Text
segment.zoom.inMarker.label.setText(mixins.niceTime(segment.startTime, false));
}

if (segment.zoom.outMarker) {
segment.zoom.outMarker.show().setX(endPixel);
// Change Text
segment.zoom.outMarker.label.setText(mixins.niceTime(segment.endTime, false));
}

Expand Down
75 changes: 45 additions & 30 deletions src/main/waveform/waveform.mixins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ define(['konva'], function (Konva) {
};
}
}).on("dragmove", function (event) {
onDrag(segment, parent);
if (typeof(onDrag) === 'function') {
onDrag(segment, parent);
}
});

var xPosition = inMarker ? -24 : 24;
Expand Down Expand Up @@ -92,19 +94,22 @@ define(['konva'], function (Konva) {
/*
Events
*/
handle.on("mouseover", function (event) {
if (inMarker) text.setX(xPosition - text.getWidth());
text.show();
segment.view.segmentLayer.draw();
});
handle.on("mouseout", function (event) {
text.hide();
segment.view.segmentLayer.draw();
});
if (draggable) {
handle.on("mouseover", function (event) {
if (inMarker) text.setX(xPosition - text.getWidth());
text.show();
segment.view.segmentLayer.draw();
});
handle.on("mouseout", function (event) {
text.hide();
segment.view.segmentLayer.draw();
});

group.add(handle);
}

group.add(text);
group.add(line);
group.add(handle);

return group;
};
Expand All @@ -118,11 +123,13 @@ define(['konva'], function (Konva) {
*/
function createPointHandle(height, color) {
/**
* @param {Boolean} draggable If true, marker is draggable
* @param {Object} point Parent point object with in times
* @param {Object} parent Parent context
* @param {Function} onDrag Callback after drag completed
* @return {Konva Object} Konva group object of handle marker elements
* @param {Boolean} draggable If true, marker is draggable
* @param {Object} point Parent point object with in times
* @param {Object} parent Parent context
* @param {Function} onDrag Callback while dragging
* @param {Function} onDblClick Callback on double click
* @param {Function} onDragEnd Callback after drag completed
* @return {Konva Object} Konva group object of handle marker elements
*/
return function (draggable, point, parent, onDrag, onDblClick, onDragEnd) {
var handleTop = (height / 2) - 10.5;
Expand All @@ -140,18 +147,24 @@ define(['konva'], function (Konva) {
};
}
}).on("dragmove", function (event) {
onDrag(point, parent);
if (typeof(onDrag) === 'function') {
onDrag(point, parent);
}
});

if(onDblClick) {
group.on('dblclick', function (event) {
onDblClick(parent);
if (typeof(onDblClick) === 'function') {
onDblClick(parent);
}
});
}

if(onDragEnd) {
group.on('dragend', function (event) {
onDragEnd(parent);
if (typeof(onDragEnd) === 'function') {
onDragEnd(parent);
}
});
}

Expand Down Expand Up @@ -195,17 +208,19 @@ define(['konva'], function (Konva) {
/*
Events
*/
handle.on("mouseover", function (event) {
text.show();
text.setX(xPosition - text.getWidth()); //Position text to the left of the mark
point.view.pointLayer.draw();
});
handle.on("mouseout", function (event) {
text.hide();
point.view.pointLayer.draw();
});

group.add(handle);
if (draggable) {
handle.on("mouseover", function (event) {
text.show();
text.setX(xPosition - text.getWidth()); //Position text to the left of the mark
point.view.pointLayer.draw();
});
handle.on("mouseout", function (event) {
text.hide();
point.view.pointLayer.draw();
});

group.add(handle);
}
group.add(line);
group.add(text);

Expand Down