fps-now/lib/dom.js

FPS meter for evergreen browsers

"use strict";

exports.__esModule = true;
exports.createElements = createElements;
exports.renderGraph = renderGraph;

var _canvasFit = _interopRequireDefault(require("canvas-fit"));

var _constants = require("./constants");

var _utils = require("./utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function createElements(id, shape) {
  if (id === void 0) {
    id = 'fps';
  }

  var container = document.createElement('div');
  container.setAttribute('id', id);
  Object.assign(container.style, {
    position: 'absolute',
    top: '3px',
    right: '3px',
    zIndex: '1000',
    width: shape[0] + 'px',
    height: shape[1] + 'px',
    background: 'rgba(255, 255, 255, .95)',
    border: '3px solid rgba(255, 255, 255, 1)'
  });
  var title = document.createElement('span');
  Object.assign(title.style, {
    position: 'absolute',
    top: '0px',
    left: '0px',
    right: '0px',
    zIndex: '10',
    height: '12px',
    fontSize: '12px',
    fontWeight: '600',
    lineHeight: '1',
    fontFamily: 'monospace',
    textAlign: 'right',
    boxSizing: 'border-box'
  });
  var canvas = document.createElement('canvas');
  window.addEventListener('resize', (0, _canvasFit.default)(canvas, container, _constants.scale), false);
  container.appendChild(title);
  container.appendChild(canvas);
  document.body.appendChild(container);
  return {
    container: container,
    title: title,
    canvas: canvas
  };
}

function renderGraph(ctx, shape, graph) {
  ctx.save();
  ctx.scale(_constants.scale, _constants.scale);
  ctx.clearRect.apply(ctx, [0, 0].concat(shape));
  ctx.fillStyle = 'rgba(192, 192, 192, .95)';
  ctx.beginPath();
  ctx.moveTo(shape[0], (0, _utils.normalize)(shape[1], (0, _utils.tail)(graph)));
  ctx.lineTo(shape[0], shape[1]);
  ctx.lineTo(0, shape[1]);
  ctx.lineTo(0, (0, _utils.normalize)(shape[1], (0, _utils.head)(graph)));

  for (var i = 0; i < graph.length - 1; i++) {
    ctx.lineTo(i, (0, _utils.normalize)(shape[1], graph[i]));
  }

  ctx.fill();
  ctx.restore();
}