ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
299 lines (298 loc) • 10.3 kB
JavaScript
import { defineComponent as q, ref as s, onMounted as j, onUnmounted as J, computed as K, createVNode as t, Fragment as Q, createTextVNode as a } from "vue";
/* empty css */
const ne = /* @__PURE__ */ q({
name: "AXXMarkdownDebugPanel",
__name: "DebugPanel",
setup(Z) {
const l = {
FPS_THRESHOLD: {
GOOD: 55,
WARNING: 40
},
COLORS: {
GOOD: "#52c41a",
WARNING: "#faad14",
DANGER: "#ff4d4f"
},
CHART: {
WIDTH: 750,
HEIGHT: 400,
PADDING: 80
}
}, E = () => typeof window > "u" ? {
x: 12,
y: 12
} : {
x: window.innerWidth - 220,
y: window.innerHeight / 2 - 100
}, W = () => {
const e = performance;
return e.memory ? Math.round(e.memory.usedJSHeapSize / 1024 / 1024) : 0;
}, f = (e) => e < 1 ? `${Math.round(e * 1024)} KB` : e >= 1024 ? `${(e / 1024).toFixed(2)} GB` : `${e.toFixed(2)} MB`, k = (e) => e >= l.FPS_THRESHOLD.GOOD ? l.COLORS.GOOD : e >= l.FPS_THRESHOLD.WARNING ? l.COLORS.WARNING : l.COLORS.DANGER, x = s(0), G = s(0), i = s(!1), c = s(!1), D = s([]), m = s(E()), p = s(!1), w = s([]), b = s(0), y = s(0), v = s(void 0), d = s({
isDragging: !1,
startX: 0,
startY: 0,
initialX: 0,
initialY: 0
}), I = () => {
const e = performance.now(), n = e - y.value;
if (b.value++, n >= 1e3) {
const u = Math.round(b.value * 1e3 / n), r = W();
x.value = u, G.value = r, i.value && w.value.push({
timestamp: Date.now(),
fps: u,
memory: r
}), b.value = 0, y.value = e;
}
v.value = requestAnimationFrame(I);
}, P = (e) => {
if (!d.value.isDragging) return;
const n = e.clientX - d.value.startX, u = e.clientY - d.value.startY;
m.value = {
x: d.value.initialX + n,
y: d.value.initialY + u
};
}, A = () => {
d.value.isDragging = !1, p.value = !1;
};
j(() => {
typeof window > "u" || (y.value = performance.now(), v.value = requestAnimationFrame(I), document.addEventListener("mousemove", P), document.addEventListener("mouseup", A));
}), J(() => {
v.value !== void 0 && cancelAnimationFrame(v.value), document.removeEventListener("mousemove", P), document.removeEventListener("mouseup", A);
});
const L = () => {
i.value ? (i.value = !1, D.value = [...w.value], c.value = !0) : (w.value = [], i.value = !0);
}, z = (e) => {
e.target.closest(".x-markdown-debug-action") || (d.value = {
isDragging: !0,
startX: e.clientX,
startY: e.clientY,
initialX: m.value.x,
initialY: m.value.y
}, p.value = !0);
}, X = K(() => {
var S, T;
const e = D.value;
if (!e.length) return null;
const {
WIDTH: n,
HEIGHT: u,
PADDING: r
} = l.CHART, N = n - r * 2, h = u - r * 2, O = ((S = e[0]) == null ? void 0 : S.timestamp) ?? 0, H = (((T = e[e.length - 1]) == null ? void 0 : T.timestamp) ?? 0) - O || 1, F = Math.max(...e.map((o) => o.fps), 60), R = Math.max(...e.map((o) => o.memory), 0) * 1.1, _ = e.reduce((o, g) => o + g.fps, 0) / e.length, Y = e.reduce((o, g) => o + g.memory, 0) / e.length, $ = Math.min(...e.map((o) => o.fps)), V = Math.max(...e.map((o) => o.fps)), M = (o, g) => e.map((C) => {
const B = r + (C.timestamp - O) / H * N, U = r + h - C[o] / g * h;
return `${B},${U}`;
}).join(" ");
return {
WIDTH: n,
HEIGHT: u,
PADDING: r,
chartWidth: N,
chartHeight: h,
duration: H,
maxFps: F,
maxMemory: R,
avgFps: _,
avgMemory: Y,
minFps: $,
maxFpsValue: V,
fpsPoints: M("fps", F),
memoryPoints: M("memory", R)
};
});
return () => {
const e = X.value;
return t(Q, null, [t("div", {
class: "x-markdown-debug-panel",
style: {
left: `${m.value.x}px`,
top: `${m.value.y}px`,
cursor: p.value ? "grabbing" : "grab"
},
onMousedown: z
}, [t("div", {
class: "x-markdown-debug-row"
}, [t("span", {
class: "x-markdown-debug-label"
}, [a("FPS")]), t("span", {
class: "x-markdown-debug-value",
style: {
color: k(x.value)
}
}, [x.value])]), t("div", {
class: "x-markdown-debug-row"
}, [t("span", {
class: "x-markdown-debug-label"
}, [a("Memory")]), t("span", {
class: "x-markdown-debug-value"
}, [f(G.value)])]), t("div", {
class: "x-markdown-debug-actions"
}, [t("button", {
type: "button",
class: ["x-markdown-debug-action", "x-markdown-debug-record-btn", i.value ? "recording" : ""],
onClick: L
}, [i.value ? "Stop" : "Record"]), D.value.length > 0 && !i.value ? t("button", {
type: "button",
class: "x-markdown-debug-action",
onClick: () => {
c.value = !0;
}
}, [a("View")]) : null])]), c.value && e ? t("div", {
class: "x-markdown-debug-modal-overlay",
onClick: () => {
c.value = !1;
}
}, [t("div", {
class: "x-markdown-debug-modal",
onClick: (n) => n.stopPropagation()
}, [t("div", {
class: "x-markdown-debug-modal-header"
}, [t("span", {
style: {
color: "#fff",
fontSize: "18px",
fontWeight: "600"
}
}, [a("Performance Recording")]), t("button", {
type: "button",
class: "x-markdown-debug-close-btn",
onClick: () => {
c.value = !1;
}
}, [a("x")])]), t("div", {
class: "x-markdown-debug-modal-content"
}, [t("div", {
class: "x-markdown-debug-stats-summary"
}, [t("div", {
class: "x-markdown-debug-stat-item"
}, [t("div", {
class: "x-markdown-debug-stat-label"
}, [a("Duration")]), t("div", {
class: "x-markdown-debug-stat-value"
}, [(e.duration / 1e3).toFixed(2), a("s")])]), t("div", {
class: "x-markdown-debug-stat-item"
}, [t("div", {
class: "x-markdown-debug-stat-label"
}, [a("FPS Avg")]), t("div", {
class: "x-markdown-debug-stat-value",
style: {
color: k(e.avgFps)
}
}, [e.avgFps.toFixed(1)])]), t("div", {
class: "x-markdown-debug-stat-item"
}, [t("div", {
class: "x-markdown-debug-stat-label"
}, [a("FPS Range")]), t("div", {
class: "x-markdown-debug-stat-value"
}, [e.minFps, a(" - "), e.maxFpsValue])]), t("div", {
class: "x-markdown-debug-stat-item"
}, [t("div", {
class: "x-markdown-debug-stat-label"
}, [a("Memory Avg")]), t("div", {
class: "x-markdown-debug-stat-value"
}, [f(e.avgMemory)])])]), t("svg", {
width: e.WIDTH,
height: e.HEIGHT,
class: "x-markdown-debug-chart-full",
role: "img",
"aria-label": "Performance chart showing FPS and memory usage over time"
}, [t("title", null, [a("Performance Chart")]), [0, 0.25, 0.5, 0.75, 1].map((n) => t("g", {
key: String(n)
}, [t("line", {
x1: e.PADDING,
y1: e.PADDING + e.chartHeight * n,
x2: e.WIDTH - e.PADDING,
y2: e.PADDING + e.chartHeight * n,
stroke: "rgba(255,255,255,0.1)",
"stroke-width": "1"
}, null), t("line", {
x1: e.PADDING + e.chartWidth * n,
y1: e.PADDING,
x2: e.PADDING + e.chartWidth * n,
y2: e.HEIGHT - e.PADDING,
stroke: "rgba(255,255,255,0.1)",
"stroke-width": "1"
}, null)])), t("polyline", {
points: e.fpsPoints,
fill: "none",
stroke: l.COLORS.GOOD,
"stroke-width": "2",
class: "fps-line"
}, null), t("polyline", {
points: e.memoryPoints,
fill: "none",
stroke: "#1890ff",
"stroke-width": "2",
class: "memory-line"
}, null), t("text", {
x: e.PADDING - 10,
y: e.PADDING,
fill: l.COLORS.GOOD,
"font-size": "12",
"text-anchor": "end"
}, [e.maxFps.toFixed(0)]), t("text", {
x: e.PADDING - 10,
y: e.HEIGHT - e.PADDING,
fill: l.COLORS.GOOD,
"font-size": "12",
"text-anchor": "end"
}, [a("0")]), t("text", {
x: e.PADDING - 10,
y: e.PADDING - 15,
fill: l.COLORS.GOOD,
"font-size": "14",
"font-weight": "bold",
"text-anchor": "end"
}, [a("FPS")]), t("text", {
x: e.WIDTH - e.PADDING + 10,
y: e.PADDING + 20,
fill: "#1890ff",
"font-size": "12",
"text-anchor": "start"
}, [f(e.maxMemory)]), t("text", {
x: e.WIDTH - e.PADDING + 10,
y: e.HEIGHT - e.PADDING,
fill: "#1890ff",
"font-size": "12",
"text-anchor": "start"
}, [f(0)]), t("text", {
x: e.WIDTH - e.PADDING + 10,
y: e.PADDING + 5,
fill: "#1890ff",
"font-size": "14",
"font-weight": "bold",
"text-anchor": "start"
}, [a("Memory")]), t("text", {
x: e.PADDING,
y: e.HEIGHT - e.PADDING + 20,
fill: "rgba(255,255,255,0.6)",
"font-size": "12",
"text-anchor": "middle"
}, [a("0s")]), t("text", {
x: e.WIDTH - e.PADDING,
y: e.HEIGHT - e.PADDING + 20,
fill: "rgba(255,255,255,0.6)",
"font-size": "12",
"text-anchor": "middle"
}, [(e.duration / 1e3).toFixed(1), a("s")])]), t("div", {
class: "x-markdown-debug-legend"
}, [t("div", {
class: "x-markdown-debug-legend-item"
}, [t("span", {
class: "x-markdown-debug-legend-color",
style: {
backgroundColor: l.COLORS.GOOD
}
}, null), t("span", null, [a("FPS")])]), t("div", {
class: "x-markdown-debug-legend-item"
}, [t("span", {
class: "x-markdown-debug-legend-color",
style: {
backgroundColor: "#1890ff"
}
}, null), t("span", null, [a("Memory")])])])])])]) : null]);
};
}
});
export {
ne as default
};