awv3/misc/stats.js

⚡ AWV3 embedded CAD

export default class Stats {
    constructor() {
        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 = event => {
            event.preventDefault();
            showPanel(++this.mode % this.dom.children.length);
        };

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

        let addPanel = panel => {
            this.dom.appendChild(panel.dom);
            return panel;
        };

        let showPanel = id => {
            for (let 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);
    }

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

    end() {
        this.frames++;
        let 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) {
                let memory = performance.memory;
                this.memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
            }
        }
        return time;
    }

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

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

    static Panel(name, fg, bg) {
        let min = Infinity, max = 0, round = Math.round;
        let PR = round(window.devicePixelRatio || 1);

        let 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;

        let canvas = document.createElement('canvas');
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        canvas.style.cssText = 'width:80px;height:33px';

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