diff --git a/ui/index.html b/ui/index.html
index d19064f..d7681a6 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -38,7 +38,8 @@
"imports": {
"preact": "https://unpkg.com/preact/dist/preact.module.js",
"preact/debug": "https://unpkg.com/preact/debug/dist/debug.module.js",
- "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js"
+ "preact/devtools": "https://unpkg.com/preact@10.5.14/devtools/dist/devtools.module.js",
+ "stats.js": "https://unpkg.com/stats.js@0.17.0/src/Stats.js"
}
}
diff --git a/ui/index.js b/ui/index.js
index 21fd9a1..737610e 100644
--- a/ui/index.js
+++ b/ui/index.js
@@ -8,10 +8,9 @@ import { Widget } from './widget.js';
/** @typedef {import('../libapi.mjs').Config} Config */
/** @typedef {import('./ops').Connection} Connection */
-let isDebug = new URLSearchParams(location.search).has('debug');
+export const isDebug = new URLSearchParams(location.search).has('debug');
if (isDebug) {
- // @ts-ignore
await import('preact/debug');
}
diff --git a/ui/preview.js b/ui/preview.js
index 026d0c1..6b46737 100644
--- a/ui/preview.js
+++ b/ui/preview.js
@@ -1,11 +1,20 @@
import { h, Component, createRef } from 'preact';
+export const isDebug = new URLSearchParams(location.search).has('debug');
+
+const Stats = isDebug
+ ? await import('stats.js').then(
+ res => /** @type {typeof import('stats.js')} */ (res['default'])
+ )
+ : null;
+
/** @extends Component<{ getPreview: () => Promise }, null> */
export class Preview extends Component {
canvasHolderRef = createRef();
canvasRef = createRef();
/** @type {ResizeObserver} */
resizeObserver;
+ stats = isDebug ? new Stats() : null;
render() {
return h(
@@ -19,6 +28,10 @@ export class Preview extends Component {
let canvas = /** @type {HTMLCanvasElement} */ (this.canvasRef.current);
let canvasHolder = this.canvasHolderRef.current;
+ if (isDebug) {
+ canvasHolder.appendChild(this.stats.dom);
+ }
+
let canvasCtx = canvas.getContext('bitmaprenderer');
let ratio = 0;
@@ -70,6 +83,7 @@ export class Preview extends Component {
updateCanvasSize();
}
canvasCtx.transferFromImageBitmap(img);
+ this.stats?.update();
} catch (e) {
console.warn(e);
}
@@ -79,5 +93,8 @@ export class Preview extends Component {
componentWillUnmount() {
this.resizeObserver.disconnect();
+ if (isDebug) {
+ this.canvasHolderRef.current.removeChild(this.stats.dom);
+ }
}
}