diff --git a/src/main/waveform/waveform.mixins.js b/src/main/waveform/waveform.mixins.js index 7c8f15fd9..0ec2d3483 100644 --- a/src/main/waveform/waveform.mixins.js +++ b/src/main/waveform/waveform.mixins.js @@ -4,7 +4,7 @@ * Common functions used in multiple modules are * collected here for DRY purposes. */ -define(['konva'], function (Konva) { +define(['konva'], function(Konva) { 'use strict'; // Private methods @@ -16,7 +16,7 @@ define(['konva'], function (Konva) { * @param {Boolean} inMarker Is this marker the inMarker (LHS) or outMarker (RHS) * @return {Function} */ - var createHandle = function (height, color, inMarker) { + var createHandle = function(height, color, inMarker) { /** * @param {Boolean} draggable If true, marker is draggable @@ -25,7 +25,7 @@ define(['konva'], function (Konva) { * @param {Function} onDrag Callback after drag completed * @return {Konva Object} Konva group object of handle marker elements */ - return function (draggable, segment, parent, onDrag) { + return function(draggable, segment, parent, onDrag) { var handleHeight = 20; var handleWidth = handleHeight / 2; var handleY = (height / 2) - 10.5; @@ -38,11 +38,17 @@ define(['konva'], function (Konva) { if (inMarker) { limit = segment.outMarker.getX() - segment.outMarker.getWidth(); - if (pos.x > limit) pos.x = limit; + + if (pos.x > limit) { + pos.x = limit; + } } else { limit = segment.inMarker.getX() + segment.inMarker.getWidth(); - if (pos.x < limit) pos.x = limit; + + if (pos.x < limit) { + pos.x = limit; + } } return { @@ -50,54 +56,57 @@ define(['konva'], function (Konva) { y: this.getAbsolutePosition().y }; } - }).on("dragmove", function (event) { + }); + + group.on('dragmove', function(event) { onDrag(segment, parent); }); var xPosition = inMarker ? -24 : 24; var text = new Konva.Text({ - x: xPosition, - y: (height / 2) - 5, - text: "", - fontSize: 10, + x: xPosition, + y: (height / 2) - 5, + text: '', + fontSize: 10, fontFamily: 'sans-serif', - fill: "#000", - textAlign: "center" + fill: '#000', + textAlign: 'center' }); text.hide(); group.label = text; var handle = new Konva.Rect({ - width: handleWidth, - height: handleHeight, - fill: color, - stroke: color, - strokeWidth: 1, - x: handleX, - y: handleY + x: handleX, + y: handleY, + width: handleWidth, + height: handleHeight, + fill: color, + stroke: color, + strokeWidth: 1 }); - /* - Vertical Line - */ + // Vertical Line + var line = new Konva.Line({ - points: [0.5, 0, 0.5, height], - strokeWidth: 1, - stroke: color, - x: 0, - y: 0 + x: 0, + y: 0, + points: [0.5, 0, 0.5, height], + stroke: color, + strokeWidth: 1 }); - /* - Events - */ - handle.on("mouseover", function (event) { - if (inMarker) text.setX(xPosition - text.getWidth()); + // Events + + handle.on('mouseover', function(event) { + if (inMarker) { + text.setX(xPosition - text.getWidth()); + } text.show(); segment.view.segmentLayer.draw(); }); - handle.on("mouseout", function (event) { + + handle.on('mouseout', function(event) { text.hide(); segment.view.segmentLayer.draw(); }); @@ -118,109 +127,106 @@ define(['konva'], function (Konva) { */ function createPointHandle(height, color) { - /** - * @param {Boolean} draggable If true, marker is draggable - * @param {Konva.Group} point - * @param {Object} parent Parent point object with timestamp - * @param {Function} onDrag Callback after drag completed - * @param {Function} onDblClick - * @param {Function} onDragEnd - * @return {Konva Object} Konva group object of handle marker elements - */ - return function (draggable, point, parent, onDrag, onDblClick, onDragEnd) { - var handleTop = (height / 2) - 10.5; - var handleWidth = 10; - var handleHeight = 20; - var handleX = 0.5; //Place in the middle of the marker - - var handleColor = parent.color ? parent.color : color; - - var group = new Konva.Group({ - draggable: draggable, - dragBoundFunc: function(pos) { - - return { - x: pos.x, //No constraint hoziontally - y: this.getAbsolutePosition().y //Constrained vertical line - }; - } - }).on("dragmove", function (event) { - onDrag(point, parent); - }); - - if(onDblClick) { - group.on('dblclick', function (event) { - onDblClick(parent); - }); - } + /** + * @param {Boolean} draggable If true, marker is draggable + * @param {Konva.Group} point + * @param {Object} parent Parent point object with timestamp + * @param {Function} onDrag Callback after drag completed + * @param {Function} onDblClick + * @param {Function} onDragEnd + * @return {Konva Object} Konva group object of handle marker elements + */ + return function(draggable, point, parent, onDrag, onDblClick, onDragEnd) { + var handleTop = (height / 2) - 10.5; + var handleWidth = 10; + var handleHeight = 20; + var handleX = 0.5; // Place in the middle of the marker - if(onDragEnd) { - group.on('dragend', function (event) { - onDragEnd(parent); - }); - } + var handleColor = parent.color ? parent.color : color; - //Place text to the left of the mark - var xPosition = -handleWidth; - - var text = new Konva.Text({ - x: xPosition, - y: (height / 2) - 5, - text: "", - fontSize: 10, - fontFamily: 'sans-serif', - fill: "#000", - textAlign: "center" - }); - text.hide(); - group.label = text; - - /* - Handle - */ - var handle = new Konva.Rect({ - width: handleWidth, - height: handleHeight, - fill: handleColor, - x: handleX, - y: handleTop - }); - - /* - Line - */ - var line = new Konva.Line({ - points: [0, 0, 0, height], - stroke: handleColor, - strokeWidth: 1, - x: handleX, - y: 0 - }); - - /* - 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); - group.add(line); - group.add(text); - - return group; - }; + var group = new Konva.Group({ + draggable: draggable, + dragBoundFunc: function(pos) { + return { + x: pos.x, // No constraint hoziontally + y: this.getAbsolutePosition().y // Constrained vertical line + }; + } + }); + + group.on('dragmove', function(event) { + onDrag(point, parent); + }); + + if (onDblClick) { + group.on('dblclick', function(event) { + onDblClick(parent); + }); + } + + if (onDragEnd) { + group.on('dragend', function(event) { + onDragEnd(parent); + }); + } + + // Place text to the left of the mark + var xPosition = -handleWidth; + + var text = new Konva.Text({ + x: xPosition, + y: (height / 2) - 5, + text: '', + textAlign: 'center', + fontSize: 10, + fontFamily: 'sans-serif', + fill: '#000' + }); + text.hide(); + group.label = text; + + // Handle + var handle = new Konva.Rect({ + x: handleX, + y: handleTop, + width: handleWidth, + height: handleHeight, + fill: handleColor + }); + + // Line + var line = new Konva.Line({ + x: handleX, + y: 0, + points: [0, 0, 0, height], + stroke: handleColor, + strokeWidth: 1 + }); + + // 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); + group.add(line); + group.add(text); + + return group; + }; } /** * Draw a waveform on a canvas context + * * @param {Konva.Context} ctx Canvas Context to draw on * @param {Array} min Min values for waveform * @param {Array} max Max values for waveform @@ -231,11 +237,11 @@ define(['konva'], function (Konva) { function drawWaveform(ctx, min, max, offset_start, offset_length, y) { ctx.beginPath(); - min.forEach(function(val, x){ + min.forEach(function(val, x) { ctx.lineTo(offset_start + x + 0.5, y(val) + 0.5); }); - max.reverse().forEach(function(val, x){ + max.reverse().forEach(function(val, x) { ctx.lineTo(offset_start + (offset_length - x) + 0.5, y(val) + 0.5); }); @@ -248,18 +254,17 @@ define(['konva'], function (Konva) { * @param {Number} total_height * @returns {interpolateHeight} */ - function interpolateHeightGenerator (total_height){ + function interpolateHeightGenerator(total_height) { var amplitude = 256; - return function interpolateHeight (size){ + return function interpolateHeight(size) { return total_height - ((size + 128) * total_height) / amplitude; }; } // Public API - return { + return { interpolateHeight: interpolateHeightGenerator, - drawWaveform: drawWaveform, /** @@ -268,7 +273,7 @@ define(['konva'], function (Konva) { * @param {WaveformOverview} view * @param {Konva.Context} context */ - waveformDrawFunction: function (view, context) { + waveformDrawFunction: function(view, context) { var waveform = view.intermediateData || view.data; var y = interpolateHeightGenerator(view.height); var offset_length = waveform.offset_length; @@ -287,35 +292,36 @@ define(['konva'], function (Konva) { * @param {Boolean} dropHundredths Don't display hundredths of a second if true * @return {String} Formatted time string */ - niceTime: function (time, dropHundredths) { - var hundredths, seconds, minutes, hours, result = []; + niceTime: function(time, dropHundredths) { + var result = []; - hundredths = Math.floor((time % 1) * 100); - seconds = Math.floor(time); - minutes = Math.floor(seconds / 60); - hours = Math.floor(minutes / 60); + var hundredths = Math.floor((time % 1) * 100); + var seconds = Math.floor(time); + var minutes = Math.floor(seconds / 60); + var hours = Math.floor(minutes / 60); - if (hours>0) result.push(hours); // Hours + if (hours > 0) result.push(hours); // Hours result.push(minutes % 60); // Mins result.push(seconds % 60); // Seconds for (var i = 0; i < result.length; i++) { var x = result[i]; if (x < 10) { - result[i] = "0" + x; - } else { + result[i] = '0' + x; + } + else { result[i] = x; } } - result = result.join(":"); + result = result.join(':'); if (!dropHundredths) { if (hundredths < 10) { - hundredths = "0" + hundredths; + hundredths = '0' + hundredths; } - result += "." + hundredths; // Hundredths of a second + result += '.' + hundredths; } return result; @@ -324,37 +330,46 @@ define(['konva'], function (Konva) { /** * Return a function that on execution creates and returns a new * IN handle object + * * @param {Object} options Root Peaks.js options containing config info for handle * @return {Function} Provides Konva handle group on execution */ - defaultInMarker: function (options) { + defaultInMarker: function(options) { return createHandle(options.height, options.outMarkerColor, true); }, /** * Return a function that on execution creates and returns a new * OUT handle object + * * @param {Object} options Root Peaks.js options containing config info for handle * @return {Function} Provides Konva handle group on execution */ - defaultOutMarker: function (options) { + defaultOutMarker: function(options) { return createHandle(options.height, options.outMarkerColor, false); }, - defaultPointMarker: function (options) { + /** + * Return a function that on execution creates and returns a new + * point marker + * + * @param {Object} options Root Peaks.js options containing config info for marker + * @return {Function} Provides Konva marker group on execution + */ + defaultPointMarker: function(options) { return createPointHandle(options.height, options.pointMarkerColor); }, - defaultSegmentLabelDraw: function (options) { - return function (segment, parent) { + defaultSegmentLabelDraw: function(options) { + return function(segment, parent) { return new Konva.Text({ - x: 12, - y: 12, - text: parent.labelText, - fontSize: 12, + x: 12, + y: 12, + text: parent.labelText, + textAlign: 'center', + fontSize: 12, fontFamily: 'Arial, sans-serif', - fill: "#000", - textAlign: "center" + fill: '#000' }); }; }