awv3/dist/misc/stats.js

⚡ AWV3 embedded CAD

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.default = undefined;

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

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

var Stats = function () {
    function Stats() {
        var _this = this;

        (0, _classCallCheck3.default)(this, Stats);

        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);
    }

    (0, _createClass3.default)(Stats, [{
        key: 'begin',
        value: function begin() {
            this.beginTime = (performance || Date).now();
        }
    }, {
        key: 'end',
        value: 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;
        }
    }, {
        key: 'update',
        value: function update() {
            this.beginTime = this.end();
        }
    }, {
        key: 'remove',
        value: function remove() {
            this.dom.removeEventListener('click', this.callback);
            this.dom.parentNode && this.dom.parentNode.removeChild(this.dom);
        }
    }], [{
        key: 'Panel',
        value: 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;
}();

exports.default = Stats;