| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167 | var Stats = function () {	var mode = 0;	var container = document.createElement( 'div' );	container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';	container.addEventListener( 'click', function ( event ) {		event.preventDefault();		showPanel( ++ mode % container.children.length );	}, false );	//	function addPanel( panel ) {		container.appendChild( panel.dom );		return panel;	}	function showPanel( id ) {		for ( var i = 0; i < container.children.length; i ++ ) {			container.children[ i ].style.display = i === id ? 'block' : 'none';		}		mode = id;	}	//	var beginTime = ( performance || Date ).now(), prevTime = beginTime, frames = 0;	var fpsPanel = addPanel( new Stats.Panel( 'FPS', '#0ff', '#002' ) );	var msPanel = addPanel( new Stats.Panel( 'MS', '#0f0', '#020' ) );	if ( self.performance && self.performance.memory ) {		var memPanel = addPanel( new Stats.Panel( 'MB', '#f08', '#201' ) );	}	showPanel( 0 );	return {		REVISION: 16,		dom: container,		addPanel: addPanel,		showPanel: showPanel,		begin: function () {			beginTime = ( performance || Date ).now();		},		end: function () {			frames ++;			var time = ( performance || Date ).now();			msPanel.update( time - beginTime, 200 );			if ( time >= prevTime + 1000 ) {				fpsPanel.update( ( frames * 1000 ) / ( time - prevTime ), 100 );				prevTime = time;				frames = 0;				if ( memPanel ) {					var memory = performance.memory;					memPanel.update( memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576 );				}			}			return time;		},		update: function () {			beginTime = this.end();		},		// Backwards Compatibility		domElement: container,		setMode: showPanel	};};Stats.Panel = function ( name, fg, bg ) {	var min = Infinity, max = 0, round = Math.round;	var PR = round( window.devicePixelRatio || 1 );	var WIDTH = 80 * PR, HEIGHT = 48 * PR,		TEXT_X = 3 * PR, TEXT_Y = 2 * PR,		GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,		GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;	var canvas = document.createElement( 'canvas' );	canvas.width = WIDTH;	canvas.height = HEIGHT;	canvas.style.cssText = 'width:80px;height:48px';	var context = canvas.getContext( '2d' );	context.font = 'bold ' + ( 9 * PR ) + 'px Helvetica,Arial,sans-serif';	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 ) );		}	};};export default Stats;
 |