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); + } } }