laya-coreui-es
Version:
laya核心库、ui库es版本，剔除了媒体、TTF等功能。基于 LayaAir-release_2.12.0 修改
204 lines (203 loc) • 9.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StatUI = void 0;
const IStatRender_1 = require("./IStatRender");
const Browser_1 = require("./Browser");
const Sprite_1 = require("../display/Sprite");
const Text_1 = require("../display/Text");
const Render_1 = require("../renders/Render");
const HTMLCanvas_1 = require("../resource/HTMLCanvas");
const Resource_1 = require("../resource/Resource");
const Stat_1 = require("./Stat");
const ILaya_1 = require("../../ILaya");
class StatUI extends IStatRender_1.IStatRender {
constructor() {
super(...arguments);
this._show = false;
this._useCanvas = false;
this._height = 100;
this._view = [];
}
show(x = 0, y = 0) {
var dt = Stat_1.Stat;
if (!Browser_1.Browser._isMiniGame && !ILaya_1.ILaya.Render.isConchApp)
this._useCanvas = true;
this._show = true;
Stat_1.Stat._fpsData.length = 60;
this._view[0] = { title: "FPS(WebGL)", value: "_fpsStr", color: "yellow", units: "int" };
this._view[1] = { title: "Sprite", value: "_spriteStr", color: "white", units: "int" };
this._view[2] = { title: "RenderBatches", value: "renderBatches", color: "white", units: "int" };
this._view[3] = { title: "SavedRenderBatches", value: "savedRenderBatches", color: "white", units: "int" };
this._view[4] = { title: "CPUMemory", value: "cpuMemory", color: "yellow", units: "M" };
this._view[5] = { title: "GPUMemory", value: "gpuMemory", color: "yellow", units: "M" };
this._view[6] = { title: "Shader", value: "shaderCall", color: "white", units: "int" };
this._view[7] = { title: "Canvas", value: "_canvasStr", color: "white", units: "int" };
if (Render_1.Render.is3DMode) {
this._view[0].title = "FPS(3D)";
this._view[8] = { title: "TriFaces", value: "trianglesFaces", color: "white", units: "int" };
this._view[9] = { title: "FrustumCulling", value: "frustumCulling", color: "white", units: "int" };
this._view[10] = { title: "OctreeNodeCulling", value: "octreeNodeCulling", color: "white", units: "int" };
}
if (this._useCanvas) {
this.createUIPre(x, y);
}
else
this.createUI(x, y);
this.enable();
}
createUIPre(x, y) {
var pixel = Browser_1.Browser.pixelRatio;
this._width = pixel * 180;
this._vx = pixel * 120;
this._height = pixel * (this._view.length * 12 + 3 * pixel) + 4;
StatUI._fontSize = 12 * pixel;
for (var i = 0; i < this._view.length; i++) {
this._view[i].x = 4;
this._view[i].y = i * StatUI._fontSize + 2 * pixel;
}
if (!this._canvas) {
this._canvas = new HTMLCanvas_1.HTMLCanvas(true);
this._canvas.size(this._width, this._height);
this._ctx = this._canvas.getContext('2d');
this._ctx.textBaseline = "top";
this._ctx.font = StatUI._fontSize + "px Arial";
this._canvas.source.style.cssText = "pointer-events:none;background:rgba(150,150,150,0.8);z-index:100000;position: absolute;direction:ltr;left:" + x + "px;top:" + y + "px;width:" + (this._width / pixel) + "px;height:" + (this._height / pixel) + "px;";
}
if (!Browser_1.Browser.onKGMiniGame) {
Browser_1.Browser.container.appendChild(this._canvas.source);
}
this._first = true;
this.loop();
this._first = false;
}
createUI(x, y) {
var stat = this._sp;
var pixel = Browser_1.Browser.pixelRatio;
if (!stat) {
stat = new Sprite_1.Sprite();
this._leftText = new Text_1.Text();
this._leftText.pos(5, 5);
this._leftText.color = "#ffffff";
stat.addChild(this._leftText);
this._txt = new Text_1.Text();
this._txt.pos(130 * pixel, 5);
this._txt.color = "#ffffff";
stat.addChild(this._txt);
this._sp = stat;
}
stat.pos(x, y);
var text = "";
for (var i = 0; i < this._view.length; i++) {
var one = this._view[i];
text += one.title + "\n";
}
this._leftText.text = text;
var width = pixel * 138;
var height = pixel * (this._view.length * 12 + 3 * pixel) + 4;
this._txt.fontSize = StatUI._fontSize * pixel;
this._leftText.fontSize = StatUI._fontSize * pixel;
stat.size(width, height);
stat.graphics.clear();
stat.graphics.alpha(0.5);
stat.graphics.drawRect(0, 0, width + 110, height + 30, "#999999");
stat.graphics.alpha(2);
this.loop();
}
enable() {
ILaya_1.ILaya.systemTimer.frameLoop(1, this, this.loop);
}
hide() {
this._show = false;
ILaya_1.ILaya.systemTimer.clear(this, this.loop);
if (this._canvas) {
Browser_1.Browser.removeElement(this._canvas.source);
}
}
set_onclick(fn) {
if (this._sp) {
this._sp.on("click", this._sp, fn);
}
if (this._canvas) {
this._canvas.source.onclick = fn;
this._canvas.source.style.pointerEvents = '';
}
}
loop() {
Stat_1.Stat._count++;
var timer = Browser_1.Browser.now();
if (timer - Stat_1.Stat._timer < 1000)
return;
var count = Stat_1.Stat._count;
Stat_1.Stat.FPS = Math.round((count * 1000) / (timer - Stat_1.Stat._timer));
if (this._show) {
Stat_1.Stat.trianglesFaces = Math.round(Stat_1.Stat.trianglesFaces / count);
if (!this._useCanvas) {
Stat_1.Stat.renderBatches = Math.round(Stat_1.Stat.renderBatches / count) - 1;
}
else {
Stat_1.Stat.renderBatches = Math.round(Stat_1.Stat.renderBatches / count);
}
Stat_1.Stat.savedRenderBatches = Math.round(Stat_1.Stat.savedRenderBatches / count);
Stat_1.Stat.shaderCall = Math.round(Stat_1.Stat.shaderCall / count);
Stat_1.Stat.spriteRenderUseCacheCount = Math.round(Stat_1.Stat.spriteRenderUseCacheCount / count);
Stat_1.Stat.canvasNormal = Math.round(Stat_1.Stat.canvasNormal / count);
Stat_1.Stat.canvasBitmap = Math.round(Stat_1.Stat.canvasBitmap / count);
Stat_1.Stat.canvasReCache = Math.ceil(Stat_1.Stat.canvasReCache / count);
Stat_1.Stat.frustumCulling = Math.round(Stat_1.Stat.frustumCulling / count);
Stat_1.Stat.octreeNodeCulling = Math.round(Stat_1.Stat.octreeNodeCulling / count);
var delay = Stat_1.Stat.FPS > 0 ? Math.floor(1000 / Stat_1.Stat.FPS).toString() : " ";
Stat_1.Stat._fpsStr = Stat_1.Stat.FPS + (Stat_1.Stat.renderSlow ? " slow" : "") + " " + delay;
Stat_1.Stat._spriteStr = Stat_1.Stat.spriteCount + (Stat_1.Stat.spriteRenderUseCacheCount ? ("/" + Stat_1.Stat.spriteRenderUseCacheCount) : '');
Stat_1.Stat._canvasStr = Stat_1.Stat.canvasReCache + "/" + Stat_1.Stat.canvasNormal + "/" + Stat_1.Stat.canvasBitmap;
Stat_1.Stat.cpuMemory = Resource_1.Resource.cpuMemory;
Stat_1.Stat.gpuMemory = Resource_1.Resource.gpuMemory;
if (this._useCanvas) {
this.renderInfoPre();
}
else
this.renderInfo();
Stat_1.Stat.clear();
}
Stat_1.Stat._count = 0;
Stat_1.Stat._timer = timer;
}
renderInfoPre() {
var i = 0;
var one;
var value;
if (this._canvas) {
var ctx = this._ctx;
ctx.clearRect(this._first ? 0 : this._vx, 0, this._width, this._height);
for (i = 0; i < this._view.length; i++) {
one = this._view[i];
if (this._first) {
ctx.fillStyle = "white";
ctx.fillText(one.title, one.x, one.y);
}
ctx.fillStyle = one.color;
value = Stat_1.Stat[one.value];
(one.units == "M") && (value = Math.floor(value / (1024 * 1024) * 100) / 100 + " M");
ctx.fillText(value + "", one.x + this._vx, one.y);
}
}
}
renderInfo() {
var text = "";
for (var i = 0; i < this._view.length; i++) {
var one = this._view[i];
var value = Stat_1.Stat[one.value];
(one.units == "M") && (value = Math.floor(value / (1024 * 1024) * 100) / 100 + " M");
(one.units == "K") && (value = Math.floor(value / (1024) * 100) / 100 + " K");
text += value + "\n";
}
this._txt.text = text;
}
isCanvasRender() {
return this._useCanvas;
}
renderNotCanvas(ctx, x, y) {
this._show && this._sp && this._sp.render(ctx, 0, 0);
}
}
exports.StatUI = StatUI;
StatUI._fontSize = 12;