@checksub_team/peaks_timeline 2.3.0-alpha.1 → 2.3.0-alpha.2

package/src/components/waveform-shape.js

@@ -51,64 +51,102 @@ define(['../utils', 'konva'], function(Utils, Konva) {
 
   function WaveformShape(options) {
     const shape = new Konva.Shape({
-      fill: options.source.color
+      fill: options.color,
+      listening: false
     });
 
     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._waveformDataFunc = options.waveformDataFunc;
 
-    this.sceneFunc(this._sceneFunc);
+    this.sceneFunc(function(context) {
+      var waveformPoints = this._waveformDataFunc ? this._waveformDataFunc() : null;
 
-    this.hitFunc(this._waveformShapeHitFunc);
+      this._sceneFunc(context, waveformPoints);
+    });
   }
 
   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;
+  WaveformShape.prototype._sceneFunc = function(context, waveformPoints) {
+    if (!waveformPoints) {
+      return;
+    }
 
-    var startPixel = 0, startOffset = 0, endPixel = width, targetSpeed = 1.0;
+    var xPoints = [];
+    var minByChannel = [];
+    var maxByChannel = [];
+    var channels = 0;
 
-    if (this._source) {
-      targetSpeed = this._source.targetSpeed || 1.0;
+    this._forEachWaveformPoint(waveformPoints, function(point) {
+      if (!point || !point.min || !point.max) {
+        return;
+      }
 
-      startPixel = Math.floor(
-        (this._view.timeToPixels(this._source.mediaStartTime) + Math.max(
-          this._view.getFrameOffset() - this._view.timeToPixels(this._source.startTime),
-          0
-        )) * targetSpeed
-      );
+      if (channels === 0) {
+        channels = point.min.length;
+        for (var c = 0; c < channels; c++) {
+          minByChannel[c] = [];
+          maxByChannel[c] = [];
+        }
+      }
 
-      startOffset = this._view.timeToPixels(this._source.mediaStartTime);
-
-      endPixel = Math.min(
-        Math.ceil(
-          (this._view.timeToPixels(this._source.mediaEndTime) - Math.max(
-            this._view.timeToPixels(this._source.endTime)
-              - this._view.getFrameOffset()
-              - this._view.getWidth(),
-            0
-          )) * targetSpeed
-        ),
-        waveformData.length
-      );
+      xPoints.push(point.x);
+
+      for (var i = 0; i < channels; i++) {
+        minByChannel[i].push(point.min[i]);
+        maxByChannel[i].push(point.max[i]);
+      }
+    });
+
+    if (channels === 0 || xPoints.length === 0) {
+      return;
+    }
+
+    this._drawWaveformFromPoints(context, xPoints, minByChannel, maxByChannel, channels, this._height);
+  };
+
+  WaveformShape.prototype._forEachWaveformPoint = function(waveformPoints, callback) {
+    if (!waveformPoints) {
+      return;
+    }
+
+    // Support iterators ({ next() }) without requiring Symbol.iterator.
+    if (typeof waveformPoints.next === 'function') {
+      while (true) {
+        var result = waveformPoints.next();
+
+        if (!result || result.done) {
+          break;
+        }
+        callback(result.value);
+      }
+      return;
+    }
+
+    // Support ES6 iterables if available.
+    if (typeof Symbol !== 'undefined' && waveformPoints[Symbol.iterator]) {
+      var iterator = waveformPoints[Symbol.iterator]();
+
+      while (true) {
+        var iterResult = iterator.next();
+
+        if (iterResult.done) {
+          break;
+        }
+        callback(iterResult.value);
+      }
+      return;
     }
 
-    this._drawWaveform(
-      context,
-      waveformData,
-      startPixel,
-      startOffset,
-      endPixel,
-      targetSpeed,
-      this._height
-    );
+    // Fallback for arrays.
+    if (Array.isArray(waveformPoints)) {
+      for (var i = 0; i < waveformPoints.length; i++) {
+        callback(waveformPoints[i]);
+      }
+    }
   };
 
   /**
@@ -126,10 +164,14 @@ define(['../utils', 'konva'], function(Utils, Konva) {
    * @param {Number} height The height of the waveform area, in pixels.
    */
 
-  WaveformShape.prototype._drawWaveform = function(context, waveformData,
-    startPixel, startOffset, endPixel, targetSpeed, height) {
-    var channels = waveformData.channels;
-
+  WaveformShape.prototype._drawWaveformFromPoints = function(
+    context,
+    xPoints,
+    minByChannel,
+    maxByChannel,
+    channels,
+    height
+  ) {
     var waveformTop = 0;
     var waveformHeight = Math.floor(height / channels);
 
@@ -138,81 +180,35 @@ define(['../utils', 'konva'], function(Utils, Konva) {
         waveformHeight = height - (channels - 1) * waveformHeight;
       }
 
-      this._drawChannel(
+      this._drawChannelFromPoints(
         context,
-        waveformData.channel(i),
-        startPixel,
-        startOffset,
-        endPixel,
+        xPoints,
+        minByChannel[i],
+        maxByChannel[i],
         waveformTop,
-        waveformHeight,
-        targetSpeed
+        waveformHeight
       );
 
       waveformTop += waveformHeight;
     }
   };
 
-  WaveformShape.prototype._drawChannel = function(context, channel,
-    startPixel, startOffset, endPixel, top, height, targetSpeed) {
-    var x, val;
-
+  WaveformShape.prototype._drawChannelFromPoints = function(context, xPoints, minValues, maxValues, top, height) {
     var amplitudeScale = this._view.getAmplitudeScale();
 
     context.beginPath();
 
-    for (x = startPixel; x < endPixel; x++) {
-      val = channel.min_sample(x);
-
-      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    for (var i = 0; i < xPoints.length; i++) {
+      context.lineTo(xPoints[i], top + scaleY(minValues[i], height, amplitudeScale) + 0.5);
     }
 
-    for (x = endPixel - 1; x >= startPixel; x--) {
-      val = channel.max_sample(x);
-
-      context.lineTo(x / targetSpeed - startOffset + 0.5, top + scaleY(val, height, amplitudeScale) + 0.5);
+    for (var j = xPoints.length - 1; j >= 0; j--) {
+      context.lineTo(xPoints[j], top + scaleY(maxValues[j], 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;
 });