awv3/misc/stats.js

⚡ AWV3 embedded CAD

var Stats =
/*#__PURE__*/
function () {
  function Stats() {
    var _this = this;

    this.mode = 0;
    this.beginTime = (performance || Date).now();
    this.prevTime = this.beginTime;
    this.frames = 0;
    this.dom = document.createElement('div');
    this.dom.style.cssText = 'position:absolute;top:10px;left:10px;cursor:pointer;opacity:0.9;z-index:10000;transform: translate3d(0,0,0);';

    this.callback = function (event) {
      event.preventDefault();
      showPanel(++_this.mode % _this.dom.children.length);
    };

    this.dom.addEventListener('click', this.callback, false);

    var addPanel = function addPanel(panel) {
      _this.dom.appendChild(panel.dom);

      return panel;
    };

    var showPanel = function showPanel(id) {
      for (var i = 0; i < _this.dom.children.length; i++) {
        _this.dom.children[i].style.display = i === id ? 'block' : 'none';
      }

      _this.mode = id;
    };

    this.fpsPanel = addPanel(new Stats.Panel('FPS', '#28b4d7', '#efefef'));
    this.msPanel = addPanel(new Stats.Panel('MS', '#28d79f', '#efefef'));
    if (self.performance && self.performance.memory) this.memPanel = addPanel(new Stats.Panel('MB', '#c23369', '#efefef'));
    showPanel(0);
  }

  var _proto = Stats.prototype;

  _proto.begin = function begin() {
    this.beginTime = (performance || Date).now();
  };

  _proto.end = function end() {
    this.frames++;
    var time = (performance || Date).now();
    this.msPanel.update(time - this.beginTime, 200);

    if (time > this.prevTime + 1000) {
      this.fpsPanel.update(this.frames * 1000 / (time - this.prevTime), 100);
      this.prevTime = time;
      this.frames = 0;

      if (this.memPanel) {
        var memory = performance.memory;
        this.memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
      }
    }

    return time;
  };

  _proto.update = function update() {
    this.beginTime = this.end();
  };

  _proto.remove = function remove() {
    this.dom.removeEventListener('click', this.callback);
    this.dom.parentNode && this.dom.parentNode.removeChild(this.dom);
  };

  Stats.Panel = function Panel(name, fg, bg) {
    var min = Infinity,
        max = 0,
        round = Math.round;
    var PR = round(window.devicePixelRatio || 1);
    var WIDTH = 80 * PR,
        HEIGHT = 33 * PR,
        TEXT_X = 3 * PR,
        TEXT_Y = 2 * PR,
        GRAPH_X = 3 * PR,
        GRAPH_Y = 15 * PR,
        GRAPH_WIDTH = 74 * PR,
        GRAPH_HEIGHT = 15 * PR;
    var canvas = document.createElement('canvas');
    canvas.width = WIDTH;
    canvas.height = HEIGHT;
    canvas.style.cssText = 'width:80px;height:33px';
    var context = canvas.getContext('2d');
    context.font = 10 * PR + 'px monospace';
    context.textBaseline = 'top';
    context.fillStyle = bg;
    context.fillRect(0, 0, WIDTH, HEIGHT);
    context.fillStyle = fg;
    context.fillText(name, TEXT_X, TEXT_Y);
    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
    context.fillStyle = bg;
    context.globalAlpha = 0.9;
    context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
    return {
      dom: canvas,
      update: function update(value, maxValue) {
        min = Math.min(min, value);
        max = Math.max(max, value);
        context.fillStyle = bg;
        context.globalAlpha = 1;
        context.fillRect(0, 0, WIDTH, GRAPH_Y);
        context.fillStyle = fg;
        context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);
        context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
        context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
        context.fillStyle = bg;
        context.globalAlpha = 0.9;
        context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - value / maxValue) * GRAPH_HEIGHT));
      }
    };
  };

  return Stats;
}();

export { Stats as default };