From a0f15833fee31a29f3f1ec114c0ecef652148c08 Mon Sep 17 00:00:00 2001 From: Johannes Vetter Date: Wed, 1 Jul 2015 13:25:02 -0700 Subject: [PATCH 1/3] Allow points and segments to show up if not editable too --- src/main/markers/waveform.points.js | 16 +++--- src/main/markers/waveform.segments.js | 35 +++++++------ src/main/waveform/waveform.mixins.js | 71 +++++++++++++++++---------- 3 files changed, 72 insertions(+), 50 deletions(-) diff --git a/src/main/markers/waveform.points.js b/src/main/markers/waveform.points.js index 1ecd5acc0..ca3f03d1a 100644 --- a/src/main/markers/waveform.points.js +++ b/src/main/markers/waveform.points.js @@ -37,8 +37,10 @@ define([ if (point.editable) { pointGroup.marker = new peaks.options.pointMarker(true, pointGroup, point, pointHandleDrag, peaks.options.pointDblClickHandler, peaks.options.pointDragEndHandler); - pointGroup.add(pointGroup.marker); + } else { + pointGroup.marker = new peaks.options.pointMarker(false, pointGroup, point); } + pointGroup.add(pointGroup.marker); view.pointLayer.add(pointGroup); }); @@ -59,9 +61,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)); } @@ -79,9 +80,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)); } @@ -164,4 +164,4 @@ define([ }); }; }; -}); \ No newline at end of file +}); diff --git a/src/main/markers/waveform.segments.js b/src/main/markers/waveform.segments.js index 5e631f519..a6f42b6ee 100644 --- a/src/main/markers/waveform.segments.js +++ b/src/main/markers/waveform.segments.js @@ -63,15 +63,12 @@ define([ segmentGroup.label = new peaks.options.segmentLabelDraw(segmentGroup, segment); segmentGroup.add(segmentGroup.label.hide()); - if (editable) { - var draggable = true; + var handleDrag = editable ? segmentHandleDrag : undefined; + segmentGroup.inMarker = new peaks.options.segmentInMarker(editable, segmentGroup, segment, handleDrag); + segmentGroup.outMarker = new peaks.options.segmentOutMarker(editable, segmentGroup, segment, handleDrag); - segmentGroup.inMarker = new peaks.options.segmentInMarker(draggable, segmentGroup, segment, segmentHandleDrag); - segmentGroup.add(segmentGroup.inMarker); - - segmentGroup.outMarker = new peaks.options.segmentOutMarker(draggable, segmentGroup, segment, segmentHandleDrag); - segmentGroup.add(segmentGroup.outMarker); - } + segmentGroup.add(segmentGroup.inMarker); + segmentGroup.add(segmentGroup.outMarker); view.segmentLayer.add(segmentGroup); }); @@ -95,12 +92,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)); } @@ -125,12 +125,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)); } diff --git a/src/main/waveform/waveform.mixins.js b/src/main/waveform/waveform.mixins.js index 8a8a45375..c13f98b51 100644 --- a/src/main/waveform/waveform.mixins.js +++ b/src/main/waveform/waveform.mixins.js @@ -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; @@ -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; }; @@ -122,7 +127,13 @@ define(['konva'], function (Konva) { * @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; @@ -140,18 +151,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); + } }); } @@ -195,17 +212,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); From 3de98fa8697b6990df590bace631bd415d9f4305 Mon Sep 17 00:00:00 2001 From: Johannes Vetter Date: Wed, 1 Jul 2015 17:24:41 -0700 Subject: [PATCH 2/3] Add a config option to control uneditable markers --- README.md | 4 ++++ src/main.js | 6 ++++++ src/main/markers/waveform.points.js | 11 +++++++---- src/main/markers/waveform.segments.js | 23 ++++++++++++++++------- 4 files changed, 33 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 479e82726..dbb6be7f4 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/src/main.js b/src/main.js index 7134c2f2c..8aeaed5f2 100644 --- a/src/main.js +++ b/src/main.js @@ -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 * diff --git a/src/main/markers/waveform.points.js b/src/main/markers/waveform.points.js index ca3f03d1a..b53b36103 100644 --- a/src/main/markers/waveform.points.js +++ b/src/main/markers/waveform.points.js @@ -28,19 +28,22 @@ 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); - } else { + 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); } - pointGroup.add(pointGroup.marker); view.pointLayer.add(pointGroup); }); diff --git a/src/main/markers/waveform.segments.js b/src/main/markers/waveform.segments.js index a6f42b6ee..04a545748 100644 --- a/src/main/markers/waveform.segments.js +++ b/src/main/markers/waveform.segments.js @@ -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(); @@ -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); @@ -63,12 +64,20 @@ define([ segmentGroup.label = new peaks.options.segmentLabelDraw(segmentGroup, segment); segmentGroup.add(segmentGroup.label.hide()); - var handleDrag = editable ? segmentHandleDrag : undefined; - segmentGroup.inMarker = new peaks.options.segmentInMarker(editable, segmentGroup, segment, handleDrag); - segmentGroup.outMarker = new peaks.options.segmentOutMarker(editable, segmentGroup, segment, handleDrag); + if (editable) { + segmentGroup.inMarker = new peaks.options.segmentInMarker(editable, segmentGroup, segment, segmentHandleDrag); + segmentGroup.outMarker = new peaks.options.segmentOutMarker(editable, segmentGroup, segment, segmentHandleDrag); - segmentGroup.add(segmentGroup.inMarker); - segmentGroup.add(segmentGroup.outMarker); + 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.add(segmentGroup.inMarker); + segmentGroup.add(segmentGroup.outMarker); + } view.segmentLayer.add(segmentGroup); }); From 4ea5f24ee3bc6722dcac63985bb367cc048b9dea Mon Sep 17 00:00:00 2001 From: Keith Gable Date: Thu, 2 Jul 2015 11:39:20 -0700 Subject: [PATCH 3/3] Remove duplicated YUIDoc --- src/main/waveform/waveform.mixins.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/main/waveform/waveform.mixins.js b/src/main/waveform/waveform.mixins.js index c13f98b51..cc760ea42 100644 --- a/src/main/waveform/waveform.mixins.js +++ b/src/main/waveform/waveform.mixins.js @@ -123,10 +123,6 @@ 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 * @param {Boolean} draggable If true, marker is draggable * @param {Object} point Parent point object with in times * @param {Object} parent Parent context