@checksub_team/peaks_timeline 1.16.1 → 2.0.0-alpha.2

package/src/{waveform-builder.js → components/waveform-builder.js}

@@ -6,9 +6,9 @@
  * @module waveform-builder
  */
 
- define([
+define([
   'waveform-data',
-  './utils'
+  '../utils'
   ], function(
     WaveformData,
     Utils) {

package/src/{waveform-shape.js → components/waveform-shape.js}

@@ -1,214 +1,214 @@
-/**
- * @file
- *
- * Defines the {@link WaveformShape} class.
- *
- * @module waveform-shape
- */
-
-define(['./utils', 'konva'], function(Utils, Konva) {
-  'use strict';
-
-  /**
-   * Scales the waveform data for drawing on a canvas context.
-   *
-   * @param {Number} amplitude The waveform data point amplitude.
-   * @param {Number} height The height of the waveform, in pixels.
-   * @param {Number} scale Amplitude scaling factor.
-   * @returns {Number} The scaled waveform data point.
-   */
-
-  function scaleY(amplitude, height, scale) {
-    var range = 256;
-    var offset = 128;
-
-    var scaledAmplitude = (amplitude * scale + offset) * height / range;
-
-    return height - Utils.clamp(height - scaledAmplitude, 0, height);
-  }
-
-  /**
-   * Waveform shape options.
-   *
-   * @typedef {Object} WaveformShapeOptions
-   * @global
-   * @property {String} color Waveform color.
-   * @property {WaveformOverview|WaveformZoomView} view The view object
-   *   that contains the waveform shape.
-   * @property {Segment?} segment If given, render a waveform image
-   *   covering the segment's time range. Otherwise, render the entire
-   *   waveform duration.
-   */
-
-  /**
-   * Creates a Konva.Shape object that renders a waveform image.
-   *
-   * @class
-   * @alias WaveformShape
-   *
-   * @param {WaveformShapeOptions} options
-   */
-
-  function WaveformShape(options) {
-    const shape = new Konva.Shape({
-      fill: options.source.color
-    });
-
-    Object.assign(this, shape);
-
-    this._layer = options.layer;
-    this._view = options.view;
-    this._source = options.source;
-    this._height = options.height;
-    this._url = options.url + '-scaled';
-
-    this.sceneFunc(this._sceneFunc);
-
-    this.hitFunc(this._waveformShapeHitFunc);
-  }
-
-  WaveformShape.prototype = Object.create(Konva.Shape.prototype);
-
-  WaveformShape.prototype._sceneFunc = function(context) {
-    var width = this._view.getWidth();
-    var waveformData = this._layer.getLoadedData(this._url).data;
-
-    var startPixel = 0, startOffset = 0;
-
-    if (this._source) {
-      startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
-        this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
-        0
-      );
-
-      startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-    }
-
-    var endPixel = width;
-
-    if (this._source) {
-      endPixel = Math.min(
-        this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
-          this._view.timeToPixels(this._source.endTime)
-            - this._view.getFrameOffset()
-            - this._view.getWidth(),
-          0
-        ),
-        waveformData.length
-      );
-    }
-
-    this._drawWaveform(
-      context,
-      waveformData,
-      startPixel,
-      startOffset,
-      endPixel,
-      this._height
-    );
-  };
-
-  /**
-   * Draws a waveform on a canvas context.
-   *
-   * @param {Konva.Context} context The canvas context to draw on.
-   * @param {WaveformData} waveformData The waveform data to draw.
-   * @param {Number} frameOffset The start position of the waveform shown
-   *   in the view, in pixels.
-   * @param {Number} startPixels The start position of the waveform to draw,
-   *   in pixels.
-   * @param {Number} endPixels The end position of the waveform to draw,
-   *   in pixels.
-   * @param {Number} width The width of the waveform area, in pixels.
-   * @param {Number} height The height of the waveform area, in pixels.
-   */
-
-  WaveformShape.prototype._drawWaveform = function(context, waveformData,
-    startPixel, startOffset, endPixel, height) {
-    var channels = waveformData.channels;
-
-    var waveformTop = 0;
-    var waveformHeight = Math.floor(height / channels);
-
-    for (var i = 0; i < channels; i++) {
-      if (i === channels - 1) {
-        waveformHeight = height - (channels - 1) * waveformHeight;
-      }
-
-      this._drawChannel(
-        context,
-        waveformData.channel(i),
-        startPixel,
-        startOffset,
-        endPixel,
-        waveformTop,
-        waveformHeight
-      );
-
-      waveformTop += waveformHeight;
-    }
-  };
-
-  WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixel, startOffset, endPixel, top, height) {
-    var x, val;
-
-    var amplitudeScale = this._view.getAmplitudeScale();
-
-    context.beginPath();
-
-    for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
-      val = channel.min_sample(x);
-
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
-    }
-
-    for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
-      val = channel.max_sample(x);
-
-      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
-    }
-
-    context.closePath();
-
-    context.fillShape(this);
-  };
-
-  WaveformShape.prototype._waveformShapeHitFunc = function(context) {
-    if (!this._source) {
-      return;
-    }
-
-    var frameOffset = this._view.getFrameOffset();
-    var viewWidth = this._view.getWidth();
-
-    var startPixels = this._view.timeToPixels(this._source.startTime);
-    var endPixels   = this._view.timeToPixels(this._source.endTime);
-
-    var offsetY = 10;
-    var hitRectHeight = this._height;
-
-    if (hitRectHeight < 0) {
-      hitRectHeight = 0;
-    }
-
-    var hitRectLeft = startPixels - frameOffset;
-    var hitRectWidth = endPixels - startPixels;
-
-    if (hitRectLeft < 0) {
-      hitRectWidth -= -hitRectLeft;
-      hitRectLeft = 0;
-    }
-
-    if (hitRectLeft + hitRectWidth > viewWidth) {
-      hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
-    }
-
-    context.beginPath();
-    context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
-    context.closePath();
-    context.fillStrokeShape(this);
-  };
-
-  return WaveformShape;
-});
+/**
+ * @file
+ *
+ * Defines the {@link WaveformShape} class.
+ *
+ * @module waveform-shape
+ */
+
+define(['../utils', 'konva'], function(Utils, Konva) {
+  'use strict';
+
+  /**
+   * Scales the waveform data for drawing on a canvas context.
+   *
+   * @param {Number} amplitude The waveform data point amplitude.
+   * @param {Number} height The height of the waveform, in pixels.
+   * @param {Number} scale Amplitude scaling factor.
+   * @returns {Number} The scaled waveform data point.
+   */
+
+  function scaleY(amplitude, height, scale) {
+    var range = 256;
+    var offset = 128;
+
+    var scaledAmplitude = (amplitude * scale + offset) * height / range;
+
+    return height - Utils.clamp(height - scaledAmplitude, 0, height);
+  }
+
+  /**
+   * Waveform shape options.
+   *
+   * @typedef {Object} WaveformShapeOptions
+   * @global
+   * @property {String} color Waveform color.
+   * @property {WaveformOverview|WaveformZoomView} view The view object
+   *   that contains the waveform shape.
+   * @property {Segment?} segment If given, render a waveform image
+   *   covering the segment's time range. Otherwise, render the entire
+   *   waveform duration.
+   */
+
+  /**
+   * Creates a Konva.Shape object that renders a waveform image.
+   *
+   * @class
+   * @alias WaveformShape
+   *
+   * @param {WaveformShapeOptions} options
+   */
+
+  function WaveformShape(options) {
+    const shape = new Konva.Shape({
+      fill: options.source.color
+    });
+
+    Object.assign(this, shape);
+
+    this._layer = options.layer;
+    this._view = options.view;
+    this._source = options.source;
+    this._height = options.height;
+    this._url = options.url + '-scaled';
+
+    this.sceneFunc(this._sceneFunc);
+
+    this.hitFunc(this._waveformShapeHitFunc);
+  }
+
+  WaveformShape.prototype = Object.create(Konva.Shape.prototype);
+
+  WaveformShape.prototype._sceneFunc = function(context) {
+    var width = this._view.getWidth();
+    var waveformData = this._layer.getLoadedData(this._url).data;
+
+    var startPixel = 0, startOffset = 0;
+
+    if (this._source) {
+      startPixel = this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
+        this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
+        0
+      );
+
+      startOffset = this._view.timeToPixels(this._source.mediaStartTime);
+    }
+
+    var endPixel = width;
+
+    if (this._source) {
+      endPixel = Math.min(
+        this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
+          this._view.timeToPixels(this._source.endTime)
+            - this._view.getFrameOffset()
+            - this._view.getWidth(),
+          0
+        ),
+        waveformData.length
+      );
+    }
+
+    this._drawWaveform(
+      context,
+      waveformData,
+      startPixel,
+      startOffset,
+      endPixel,
+      this._height
+    );
+  };
+
+  /**
+   * Draws a waveform on a canvas context.
+   *
+   * @param {Konva.Context} context The canvas context to draw on.
+   * @param {WaveformData} waveformData The waveform data to draw.
+   * @param {Number} frameOffset The start position of the waveform shown
+   *   in the view, in pixels.
+   * @param {Number} startPixels The start position of the waveform to draw,
+   *   in pixels.
+   * @param {Number} endPixels The end position of the waveform to draw,
+   *   in pixels.
+   * @param {Number} width The width of the waveform area, in pixels.
+   * @param {Number} height The height of the waveform area, in pixels.
+   */
+
+  WaveformShape.prototype._drawWaveform = function(context, waveformData,
+    startPixel, startOffset, endPixel, height) {
+    var channels = waveformData.channels;
+
+    var waveformTop = 0;
+    var waveformHeight = Math.floor(height / channels);
+
+    for (var i = 0; i < channels; i++) {
+      if (i === channels - 1) {
+        waveformHeight = height - (channels - 1) * waveformHeight;
+      }
+
+      this._drawChannel(
+        context,
+        waveformData.channel(i),
+        startPixel,
+        startOffset,
+        endPixel,
+        waveformTop,
+        waveformHeight
+      );
+
+      waveformTop += waveformHeight;
+    }
+  };
+
+  WaveformShape.prototype._drawChannel = function(context, channel,
+    startPixel, startOffset, endPixel, top, height) {
+    var x, val;
+
+    var amplitudeScale = this._view.getAmplitudeScale();
+
+    context.beginPath();
+
+    for (x = Math.floor(startPixel); x < Math.ceil(endPixel); x++) {
+      val = channel.min_sample(x);
+
+      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    }
+
+    for (x = Math.ceil(endPixel) - 1; x >= Math.floor(startPixel); x--) {
+      val = channel.max_sample(x);
+
+      context.lineTo(x - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    }
+
+    context.closePath();
+
+    context.fillShape(this);
+  };
+
+  WaveformShape.prototype._waveformShapeHitFunc = function(context) {
+    if (!this._source) {
+      return;
+    }
+
+    var frameOffset = this._view.getFrameOffset();
+    var viewWidth = this._view.getWidth();
+
+    var startPixels = this._view.timeToPixels(this._source.startTime);
+    var endPixels   = this._view.timeToPixels(this._source.endTime);
+
+    var offsetY = 10;
+    var hitRectHeight = this._height;
+
+    if (hitRectHeight < 0) {
+      hitRectHeight = 0;
+    }
+
+    var hitRectLeft = startPixels - frameOffset;
+    var hitRectWidth = endPixels - startPixels;
+
+    if (hitRectLeft < 0) {
+      hitRectWidth -= -hitRectLeft;
+      hitRectLeft = 0;
+    }
+
+    if (hitRectLeft + hitRectWidth > viewWidth) {
+      hitRectWidth -= hitRectLeft + hitRectWidth - viewWidth;
+    }
+
+    context.beginPath();
+    context.rect(hitRectLeft, offsetY, hitRectWidth, hitRectHeight);
+    context.closePath();
+    context.fillStrokeShape(this);
+  };
+
+  return WaveformShape;
+});

package/src/keyboard-handler.js

@@ -55,47 +55,47 @@ define([], function() {
 
       if (event.type === 'keydown' || event.type === 'keypress') {
         if ((event.ctrlKey || event.metaKey) && !this._ctrlCmdPressed) {
-          this.eventEmitter.emit('keyboard.ctrlCmdDown');
+          this.eventEmitter.emit('handler.keyboard.ctrlCmdDown');
           this._ctrlCmdPressed = true;
         }
         switch (event.code) {
           case 'Spacebar':
           case ' ':
-            this.eventEmitter.emit('keyboard.space');
+            this.eventEmitter.emit('handler.keyboard.space');
             break;
 
           case 'Tab':
-            this.eventEmitter.emit('keyboard.tab');
+            this.eventEmitter.emit('handler.keyboard.tab');
             break;
         }
       }
       else if (event.type === 'keyup') {
         if (!(event.ctrlKey || event.metaKey) && this._ctrlCmdPressed) {
-          this.eventEmitter.emit('keyboard.ctrlCmdUp');
+          this.eventEmitter.emit('handler.keyboard.ctrlCmdUp');
           this._ctrlCmdPressed = false;
         }
         switch (event.code) {
           case 'ArrowLeft':
             if (event.shiftKey) {
-              this.eventEmitter.emit('keyboard.shift_left');
+              this.eventEmitter.emit('handler.keyboard.shiftleft');
             }
             else {
-              this.eventEmitter.emit('keyboard.left');
+              this.eventEmitter.emit('handler.keyboard.left');
             }
             break;
 
           case 'ArrowRight':
             if (event.shiftKey) {
-              this.eventEmitter.emit('keyboard.shift_right');
+              this.eventEmitter.emit('handler.keyboard.shiftright');
             }
             else {
-              this.eventEmitter.emit('keyboard.right');
+              this.eventEmitter.emit('handler.keyboard.right');
             }
             break;
 
           case 'Delete':
           case 'Backspace':
-            this.eventEmitter.emit('keyboard.delete');
+            this.eventEmitter.emit('handler.keyboard.delete');
             break;
         }
       }

package/src/line-handler.js

@@ -0,0 +1,179 @@
+/**
+ * @file
+ *
+ * Defines the {@link LineHandler} class.
+ *
+ * @module line-handler
+ */
+
+define([
+  './models/line',
+  './utils'
+], function(Line, Utils) {
+  'use strict';
+
+  /**
+   * Line parameters.
+   *
+   * @typedef {Object} LineOptions
+   * @global
+   * @param {String} id A unique identifier for the line.
+   * @param {Number} position Position of the line on the timeline.
+   * @param {String} indicatorType Type of the line indicator.
+   * @param {String} indicatorText Text to display above the line indicator.
+   */
+
+  /**
+   * Handles all functionality related to the adding, removing and manipulation
+   * of lines.
+   *
+   * @class
+   * @alias LineHandler
+   *
+   * @param {Peaks} peaks The parent Peaks object.
+   */
+
+  function LineHandler(peaks) {
+    this._peaks = peaks;
+    this._lines = [];
+    this._linesById = {};
+  }
+
+  /**
+   * Adds a new line object.
+   *
+   * @private
+   * @param {Line} line
+   */
+
+  LineHandler.prototype._addLine = function(line) {
+    this._linesById[line.id] = line;
+  };
+
+  /**
+   * Creates a new line object.
+   *
+   * @private
+   * @param {LineOptions} options
+   * @return {Line}
+   */
+
+  LineHandler.prototype._createLine = function(options) {
+    if (!Utils.isObject(options)) {
+      throw new TypeError('peaks.lines.add(): expected a Line object parameter');
+    }
+
+    var line = new Line(
+      this._peaks,
+      Utils.isNullOrUndefined(options.id) ? Utils.createUuidv4() : options.id,
+      options.position,
+      options.indicatorType,
+      options.indicatorText
+    );
+
+    return line;
+  };
+
+  /**
+   * Returns all lines.
+   *
+   * @returns {Array<Line>}
+   */
+
+  LineHandler.prototype.getLines = function() {
+    return Object.values(this._linesById);
+  };
+
+  /**
+   * Returns all lines, indexed by their id.
+   *
+   * @returns {Object<String, Line>}
+   */
+  LineHandler.prototype.getLinesById = function() {
+    return this._linesById;
+  };
+
+  /**
+   * Returns the line with the given id, or <code>null</code> if not found.
+   *
+   * @param {String} id
+   * @returns {Line|null}
+   */
+
+  LineHandler.prototype.getLine = function(id) {
+    return this._linesById[id] || null;
+  };
+
+  /**
+   * Adds one or more lines to the timeline.
+   *
+   * @param {LineOptions|Array<LineOptions>} lineOrLines
+   */
+
+  LineHandler.prototype.add = function(/* lineOrLines */) {
+    var lines = Array.isArray(arguments[0]) ?
+                  arguments[0] :
+                  Array.prototype.slice.call(arguments);
+
+    lines = lines.map(function(lineOptions) {
+      var line = this._createLine(lineOptions);
+
+      if (Utils.objectHasProperty(this._linesById, line.id)) {
+        var existingLine = this._linesById[line.id];
+
+        throw new Error('peaks.lines.add(): duplicate id. \n\n Line I = ' +
+          JSON.stringify(
+            existingLine.toSerializable()
+          ) + ' Line II = ' +
+          JSON.stringify(
+            line.toSerializable()
+          )
+        );
+      }
+
+      return line;
+    }.bind(this));
+
+    lines.forEach(function(line) {
+      this._addLine(line);
+    }.bind(this));
+
+    this._peaks.emit('handler.lines.add', lines);
+
+    return lines;
+  };
+
+  /**
+   * Removes any lines with the given id(s).
+   *
+   * @param {String} id
+   * @param {Array<String>} ids
+   * @returns {Array<Line>} The removed {@link Line} objects.
+   */
+
+  LineHandler.prototype.removeById = function(/* lineIdOrIds */) {
+    var lineIds = Array.isArray(arguments[0]) ?
+                  arguments[0] :
+                  Array.prototype.slice.call(arguments);
+
+    const lines = lineIds.map(function(lineId) {
+      const line = this._linesById[lineId];
+
+      if (!line) {
+        throw new Error('peaks.lines.removeById(): line with id ' + lineId + ' not found');
+      }
+
+      return line;
+    }.bind(this));
+
+    lines.forEach(function(line) {
+      delete this._linesById[line.id];
+    }.bind(this));
+
+    this._peaks.emit('handler.lines.remove', lines);
+
+    return lines;
+  };
+
+  return LineHandler;
+});