You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
209 lines
33 KiB
209 lines
33 KiB
2 weeks ago
|
"use strict";
|
||
|
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
||
|
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
||
|
|
};
|
||
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
||
|
|
// @ts-ignore
|
||
|
|
const package_json_1 = __importDefault(require("../../../../package.json"));
|
||
|
|
/** 性能曲线：采样 + Canvas 自绘（无第三方图表依赖）。 */
|
||
|
|
exports.default = {
|
||
|
|
stopPerfSampling() {
|
||
|
|
if (this.perfTimer) {
|
||
|
|
window.clearInterval(this.perfTimer);
|
||
|
|
this.perfTimer = 0;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async samplePerf() {
|
||
|
|
var _a, _b, _c, _d, _e, _f;
|
||
|
|
if (this.state.clients <= 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
try {
|
||
|
|
const s = (await Editor.Message.request(package_json_1.default.name, 'query-command', { cmd: 'get-stats' }));
|
||
|
|
if (s && typeof s === 'object') {
|
||
|
|
this.stats = {
|
||
|
|
drawCall: (_a = s.drawCall) !== null && _a !== void 0 ? _a : 0,
|
||
|
|
triangles: (_c = (_b = s.triangles) !== null && _b !== void 0 ? _b : s.triangle) !== null && _c !== void 0 ? _c : 0,
|
||
|
|
fps: (_d = s.fps) !== null && _d !== void 0 ? _d : 0,
|
||
|
|
memUsed: (_e = s.memUsed) !== null && _e !== void 0 ? _e : 0,
|
||
|
|
memTotal: (_f = s.memTotal) !== null && _f !== void 0 ? _f : 0,
|
||
|
|
};
|
||
|
|
this.perf.push({ fps: this.stats.fps, dc: this.stats.drawCall });
|
||
|
|
// 滑动窗口：满 400 条后移除最旧一条，数组恒定 400，绘制持续进行
|
||
|
|
if (this.perf.length > 400) {
|
||
|
|
this.perf.shift();
|
||
|
|
}
|
||
|
|
this.drawPerf();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
catch (_g) {
|
||
|
|
/* 忽略采样失败 */
|
||
|
|
}
|
||
|
|
},
|
||
|
|
drawPerf() {
|
||
|
|
const el = this.$refs.perfCanvas;
|
||
|
|
if (!el) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const dpr = window.devicePixelRatio || 1;
|
||
|
|
const cw = el.clientWidth;
|
||
|
|
const ch = el.clientHeight;
|
||
|
|
if (cw <= 0 || ch <= 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const W = Math.round(cw * dpr);
|
||
|
|
const H = Math.round(ch * dpr);
|
||
|
|
if (el.width !== W || el.height !== H) {
|
||
|
|
el.width = W;
|
||
|
|
el.height = H;
|
||
|
|
}
|
||
|
|
const ctx = el.getContext('2d');
|
||
|
|
if (!ctx) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||
|
|
ctx.clearRect(0, 0, cw, ch);
|
||
|
|
const pts = this.perf;
|
||
|
|
// 绘图区：左右留刻度空间，顶部留 4，底部留 16 放 x 轴时间标签
|
||
|
|
const plot = { l: 36, r: cw - 44, t: 6, b: ch - 16 };
|
||
|
|
const pw = Math.max(1, plot.r - plot.l);
|
||
|
|
const ph = Math.max(1, plot.b - plot.t);
|
||
|
|
const start = Math.max(0, pts.length - 90);
|
||
|
|
const n = pts.length - start;
|
||
|
|
const stepX = pw / 90;
|
||
|
|
const xAt = (idx) => plot.l + (idx - start) * stepX;
|
||
|
|
const maxFps = 60;
|
||
|
|
const maxDc = Math.max(20, ...pts.map((p) => p.dc)) * 1.1;
|
||
|
|
const dcMax = Math.max(20, Math.ceil(maxDc / 20) * 20);
|
||
|
|
const yAt = (v, max) => plot.b - (Math.min(max, v) / max) * ph;
|
||
|
|
// ---- 网格 + 帧率轴刻度（左，绿 0/20/40/60） ----
|
||
|
|
ctx.font = '10px sans-serif';
|
||
|
|
ctx.textBaseline = 'middle';
|
||
|
|
ctx.strokeStyle = 'rgba(128,128,128,0.18)';
|
||
|
|
ctx.lineWidth = 1;
|
||
|
|
for (const v of [0, 20, 40, 60]) {
|
||
|
|
const y = Math.round(yAt(v, maxFps)) + 0.5;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(plot.l, y);
|
||
|
|
ctx.lineTo(plot.r, y);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.fillStyle = '#4ade80';
|
||
|
|
ctx.textAlign = 'right';
|
||
|
|
ctx.fillText(String(v), plot.l - 4, y);
|
||
|
|
}
|
||
|
|
// ---- 绘制调用轴刻度（右，黄 0/mid/max） ----
|
||
|
|
for (const v of [0, Math.round(dcMax / 2), dcMax]) {
|
||
|
|
const y = Math.round(yAt(v, dcMax)) + 0.5;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(plot.l, y);
|
||
|
|
ctx.lineTo(plot.r, y);
|
||
|
|
ctx.stroke();
|
||
|
|
ctx.fillStyle = '#fbbf24';
|
||
|
|
ctx.textAlign = 'left';
|
||
|
|
ctx.fillText(String(v), plot.r + 4, y);
|
||
|
|
}
|
||
|
|
// ---- x 轴时间标签（底部） ----
|
||
|
|
ctx.fillStyle = '#888';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.fillText('-80s', xAt(start), plot.b + 9);
|
||
|
|
ctx.fillText('-60s', xAt(start + 30), plot.b + 9);
|
||
|
|
ctx.fillText('-40s', xAt(start + 60), plot.b + 9);
|
||
|
|
ctx.fillText('-20s', xAt(start + 80), plot.b + 9);
|
||
|
|
ctx.fillText('0s', plot.r, plot.b + 9);
|
||
|
|
if (n < 2) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// ---- Catmull-Rom → 三次贝塞尔平滑曲线 ----
|
||
|
|
const drawSeries = (get, max, color) => {
|
||
|
|
ctx.strokeStyle = color;
|
||
|
|
ctx.lineWidth = 1.5;
|
||
|
|
ctx.lineJoin = 'round';
|
||
|
|
ctx.lineCap = 'round';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(xAt(start), yAt(get(pts[start]), max));
|
||
|
|
if (n === 2) {
|
||
|
|
ctx.lineTo(xAt(start + 1), yAt(get(pts[start + 1]), max));
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
for (let i = start; i < pts.length - 1; i++) {
|
||
|
|
const p0i = Math.max(start, i - 1);
|
||
|
|
const p2i = i + 1;
|
||
|
|
const p3i = Math.min(pts.length - 1, i + 2);
|
||
|
|
const cp1x = xAt(i) + (xAt(p2i) - xAt(p0i)) / 6;
|
||
|
|
const cp1y = yAt(get(pts[i]), max) + (yAt(get(pts[p2i]), max) - yAt(get(pts[p0i]), max)) / 6;
|
||
|
|
const cp2x = xAt(p2i) - (xAt(p3i) - xAt(i)) / 6;
|
||
|
|
const cp2y = yAt(get(pts[p2i]), max) - (yAt(get(pts[p3i]), max) - yAt(get(pts[i]), max)) / 6;
|
||
|
|
ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, xAt(p2i), yAt(get(pts[p2i]), max));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
ctx.stroke();
|
||
|
|
};
|
||
|
|
drawSeries((p) => p.fps, maxFps, '#4ade80');
|
||
|
|
drawSeries((p) => p.dc, dcMax, '#fbbf24');
|
||
|
|
// ---- 悬停/点击峰值：十字线 + 圆点 + 数值提示框 ----
|
||
|
|
if (this.hoverIdx >= 0 && this.hoverIdx >= start && this.hoverIdx < pts.length) {
|
||
|
|
const p = pts[this.hoverIdx];
|
||
|
|
const x = xAt(this.hoverIdx);
|
||
|
|
ctx.strokeStyle = 'rgba(255,255,255,0.35)';
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.moveTo(Math.round(x) + 0.5, plot.t);
|
||
|
|
ctx.lineTo(Math.round(x) + 0.5, plot.b);
|
||
|
|
ctx.stroke();
|
||
|
|
const hoverSeries = [
|
||
|
|
[(p) => p.fps, maxFps, '#4ade80'],
|
||
|
|
[(p) => p.dc, dcMax, '#fbbf24'],
|
||
|
|
];
|
||
|
|
for (const [get, max, color] of hoverSeries) {
|
||
|
|
ctx.fillStyle = color;
|
||
|
|
ctx.beginPath();
|
||
|
|
ctx.arc(x, yAt(get(p), max), 3, 0, Math.PI * 2);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
const rel = this.hoverIdx - (pts.length - 1);
|
||
|
|
const lines = [`${rel}s`, `帧率 ${p.fps}`, `绘制调用 ${p.dc}`];
|
||
|
|
const lineH = 14;
|
||
|
|
const boxW = 118;
|
||
|
|
const boxH = lines.length * lineH + 8;
|
||
|
|
let bx = plot.l + 4;
|
||
|
|
const by = plot.t + 4;
|
||
|
|
if (x + 140 > cw) {
|
||
|
|
bx = x - boxW - 8;
|
||
|
|
}
|
||
|
|
ctx.fillStyle = 'rgba(25,25,25,0.92)';
|
||
|
|
ctx.strokeStyle = 'rgba(128,128,128,0.5)';
|
||
|
|
ctx.fillRect(bx, by, boxW, boxH);
|
||
|
|
ctx.strokeRect(bx, by, boxW, boxH);
|
||
|
|
ctx.textAlign = 'left';
|
||
|
|
lines.forEach((ln, i) => {
|
||
|
|
ctx.fillStyle = i === 0 ? '#aaa' : i === 1 ? '#4ade80' : '#fbbf24';
|
||
|
|
ctx.fillText(ln, bx + 6, by + 10 + i * lineH);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPerfMove(e) {
|
||
|
|
const el = this.$refs.perfCanvas;
|
||
|
|
if (!el || !this.perf.length) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const rect = el.getBoundingClientRect();
|
||
|
|
const cw = el.clientWidth;
|
||
|
|
// 与 drawPerf 保持一致的绘图区换算
|
||
|
|
const plotL = 36;
|
||
|
|
const plotR = cw - 44;
|
||
|
|
const stepX = Math.max(1, plotR - plotL) / 90;
|
||
|
|
const start = Math.max(0, this.perf.length - 90);
|
||
|
|
const idx = start + Math.round((e.clientX - rect.left - plotL) / stepX);
|
||
|
|
const clamped = Math.max(start, Math.min(this.perf.length - 1, idx));
|
||
|
|
if (clamped !== this.hoverIdx) {
|
||
|
|
this.hoverIdx = clamped;
|
||
|
|
this.drawPerf();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onPerfLeave() {
|
||
|
|
if (this.hoverIdx !== -1) {
|
||
|
|
this.hoverIdx = -1;
|
||
|
|
this.drawPerf();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
};
|
||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGVyZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NvdXJjZS9wYW5lbHMvZGVmYXVsdC9tZXRob2RzL3BlcmYudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7QUFBQSxhQUFhO0FBQ2IsNEVBQW1EO0FBRW5ELHFDQUFxQztBQUNyQyxrQkFBZTtJQUNYLGdCQUFnQjtRQUNaLElBQUksSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2pCLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO1lBQ3JDLElBQUksQ0FBQyxTQUFTLEdBQUcsQ0FBQyxDQUFDO1FBQ3ZCLENBQUM7SUFDTCxDQUFDO0lBQ0QsS0FBSyxDQUFDLFVBQVU7O1FBQ1osSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLE9BQU8sSUFBSSxDQUFDLEVBQUUsQ0FBQztZQUMxQixPQUFPO1FBQ1gsQ0FBQztRQUNELElBQUksQ0FBQztZQUNELE1BQU0sQ0FBQyxHQUFHLENBQUMsTUFBTSxNQUFNLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FDbkMsc0JBQVcsQ0FBQyxJQUFXLEVBQ3ZCLGVBQXNCLEVBQ3RCLEVBQUUsR0FBRyxFQUFFLFdBQVcsRUFBUyxDQUM5QixDQUFRLENBQUM7WUFDVixJQUFJLENBQUMsSUFBSSxPQUFPLENBQUMsS0FBSyxRQUFRLEVBQUUsQ0FBQztnQkFDN0IsSUFBSSxDQUFDLEtBQUssR0FBRztvQkFDVCxRQUFRLEVBQUUsTUFBQSxDQUFDLENBQUMsUUFBUSxtQ0FBSSxDQUFDO29CQUN6QixTQUFTLEVBQUUsTUFBQSxNQUFBLENBQUMsQ0FBQyxTQUFTLG1DQUFJLENBQUMsQ0FBQyxRQUFRLG1DQUFJLENBQUM7b0JBQ3pDLEdBQUcsRUFBRSxNQUFBLENBQUMsQ0FBQyxHQUFHLG1DQUFJLENBQUM7b0JBQ2YsT0FBTyxFQUFFLE1BQUEsQ0FBQyxDQUFDLE9BQU8sbUNBQUksQ0FBQztvQkFDdkIsUUFBUSxFQUFFLE1BQUEsQ0FBQyxDQUFDLFFBQVEsbUNBQUksQ0FBQztpQkFDNUIsQ0FBQztnQkFDRixJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLEdBQUcsRUFBRSxFQUFFLEVBQUUsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLEVBQUUsQ0FBQyxDQUFDO2dCQUNqRSxzQ0FBc0M7Z0JBQ3RDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUM7b0JBQ3pCLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7Z0JBQ3RCLENBQUM7Z0JBQ0QsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDO1lBQ3BCLENBQUM7UUFDTCxDQUFDO1FBQUMsV0FBTSxDQUFDO1lBQ0wsWUFBWTtRQUNoQixDQUFDO0lBQ0wsQ0FBQztJQUNELFFBQVE7UUFDSixNQUFNLEVBQUUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLFVBQTJDLENBQUM7UUFDbEUsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDO1lBQ04sT0FBTztRQUNYLENBQUM7UUFDRCxNQUFNLEdBQUcsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLElBQUksQ0FBQyxDQUFDO1FBQ3pDLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxXQUFXLENBQUM7UUFDMUIsTUFBTSxFQUFFLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQztRQUMzQixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUksRUFBRSxJQUFJLENBQUMsRUFBRSxDQUFDO1lBQ3JCLE9BQU87UUFDWCxDQUFDO1FBQ0QsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEdBQUcsR0FBRyxDQUFDLENBQUM7UUFDL0IsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLEdBQUcsR0FBRyxDQUFDLENBQUM7UUFDL0IsSUFBSSxFQUFFLENBQUMsS0FBSyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRSxDQUFDO1lBQ3BDLEVBQUUsQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1lBQ2IsRUFBRSxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUM7UUFDbEIsQ0FBQztRQUNELE1BQU0sR0FBRyxHQUFHLEVBQUUsQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDaEMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDO1lBQ1AsT0FBTztRQUNYLENBQUM7UUFDRCxHQUFHLENBQUMsWUFBWSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDdkMsR0FBRyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUM1QixNQUFNLEdBQUcsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3RCLHFDQUFxQztRQUNyQyxNQUFNLElBQUksR0FBRyxFQUFFLENBQUMsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLEVBQUUsR0FBRyxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsRUFBRSxHQUFHLEVBQUUsRUFBRSxDQUFDO1FBQ3JELE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sRUFBRSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxNQUFNLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFDM0MsTUFBTSxDQUFDLEdBQUcsR0FBRyxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7UUFDN0IsTUFBTSxLQUFLLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQztRQUN0QixNQUFNLEdBQUcsR0FBRyxDQUFDLEdBQVcsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsR0FBRyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUMsR0FBRyxLQUFLLENBQUM7UUFDNUQsTUFBTSxNQUFNLEdBQUcsRUFBRSxDQUFDO1FBQ2xCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxFQUFFLEdBQUcsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQThCLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQyxHQUFHLEdBQUcsQ0FBQztRQUN2RixNQUFNLEtBQUssR0FBRyxJQUFJL
|