waveform-playlist-nartj/lib/render/CanvasHook.js

Multiple track web audio editor and player with waveform preview

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

/*
* virtual-dom hook for drawing to the canvas element.
*/
var CanvasHook = /*#__PURE__*/function () {
  function CanvasHook(peaks, offset, bits, color, scale, forceDraw) {
    (0, _classCallCheck2["default"])(this, CanvasHook);
    this.peaks = peaks; // http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element

    this.offset = offset;
    this.color = color;
    this.bits = bits;
    this.scale = scale;
    this.forceDraw = forceDraw;
  }

  (0, _createClass2["default"])(CanvasHook, [{
    key: "hook",
    value: function hook(canvas, prop, prev) {
      // canvas is up to date
      if (!this.forceDraw && prev !== undefined && prev.peaks === this.peaks) {
        return;
      }

      if (this.forceDraw) {
        this.forceDraw = false;
      }

      var scale = this.scale;
      var len = canvas.width / scale;
      var cc = canvas.getContext('2d');
      var h2 = canvas.height / scale / 2;
      var maxValue = Math.pow(2, this.bits - 1);
      cc.clearRect(0, 0, canvas.width, canvas.height);
      cc.fillStyle = this.color;
      cc.scale(scale, scale);

      for (var i = 0; i < len; i += 1) {
        var minPeak = this.peaks[(i + this.offset) * 2] / maxValue;
        var maxPeak = this.peaks[(i + this.offset) * 2 + 1] / maxValue;
        CanvasHook.drawFrame(cc, h2, i, minPeak, maxPeak);
      }
    }
  }], [{
    key: "drawFrame",
    value: function drawFrame(cc, h2, x, minPeak, maxPeak) {
      var min = Math.abs(minPeak * h2);
      var max = Math.abs(maxPeak * h2); // draw max

      cc.fillRect(x, 0, 1, h2 - max); // draw min

      cc.fillRect(x, h2 + min, 1, h2 - min);
    }
  }]);
  return CanvasHook;
}();

var _default = CanvasHook;
exports["default"] = _default;