waveform-playlist-nartj/lib/render/TimeScaleHook.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 rendering the time scale canvas.
*/
var _default = /*#__PURE__*/function () {
  function _default(tickInfo, offset, samplesPerPixel, duration, colors) {
    (0, _classCallCheck2["default"])(this, _default);
    this.tickInfo = tickInfo;
    this.offset = offset;
    this.samplesPerPixel = samplesPerPixel;
    this.duration = duration;
    this.colors = colors;
  }

  (0, _createClass2["default"])(_default, [{
    key: "hook",
    value: function hook(canvas, prop, prev) {
      var _this = this;

      // canvas is up to date
      if (prev !== undefined && prev.offset === this.offset && prev.duration === this.duration && prev.samplesPerPixel === this.samplesPerPixel) {
        return;
      }

      var width = canvas.width;
      var height = canvas.height;
      var ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, width, height);
      ctx.fillStyle = this.colors.timeColor;
      Object.keys(this.tickInfo).forEach(function (x) {
        var scaleHeight = _this.tickInfo[x];
        var scaleY = height - scaleHeight;
        ctx.fillRect(x, scaleY, 1, scaleHeight);
      });
    }
  }]);
  return _default;
}();

exports["default"] = _default;