@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/monitor/fps.js

@@ -1,428 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
-const mean = (values) => {
-    if (values.length === 0) {
-        return null;
-    }
-    let sum = 0;
-    for (const value of values) {
-        sum += value;
-    }
-    return sum / values.length;
-};
-const quantile = (sorted, q) => {
-    if (sorted.length === 0) {
-        return null;
-    }
-    const clamped = clamp(q, 0, 1);
-    const index = Math.floor(clamped * (sorted.length - 1));
-    return sorted[index] ?? null;
-};
-const computePercentile = (values, q) => {
-    if (values.length === 0) {
-        return null;
-    }
-    const sorted = [...values].sort((a, b) => a - b);
-    return quantile(sorted, q);
-};
-const computeMedian = (values) => computePercentile(values, 0.5);
-const formatNumber = (value, decimals = 0) => {
-    if (value === null || !Number.isFinite(value)) {
-        return '—';
-    }
-    return value.toFixed(decimals);
-};
-const formatMs = (value, decimals = 1) => {
-    if (value === null || !Number.isFinite(value)) {
-        return '—';
-    }
-    return `${value.toFixed(decimals)}ms`;
-};
-const rateFps = (fps, targetFps) => {
-    if (fps === null || !Number.isFinite(fps)) {
-        return 'unknown';
-    }
-    const target = targetFps && Number.isFinite(targetFps) ? targetFps : 60;
-    const ratio = fps / target;
-    if (ratio >= 0.92) {
-        return 'good';
-    }
-    if (ratio >= 0.75) {
-        return 'needs-improvement';
-    }
-    return 'poor';
-};
-@Component({
-    tag: 'ease-monitor-fps',
-    autoSlot: false,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: block;
-      width: 100%;
-      color: var(--color-foreground);
-      font-family: var(--ease-font-family, "Instrument Sans", sans-serif);
-      font-variant-numeric: tabular-nums;
-    }
-
-    [part="container"] {
-      display: grid;
-      gap: 8px;
-      width: 100%;
-    }
-
-    [part="header"] {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: 8px;
-      width: 100%;
-    }
-
-    [part="title"] {
-      display: inline-flex;
-      align-items: baseline;
-      gap: 6px;
-      min-width: 0;
-    }
-
-    [part="fps"] {
-      font-size: var(--ease-monitor-fps-font-size, 14px);
-      font-weight: 650;
-      letter-spacing: -0.01em;
-      line-height: 1;
-    }
-
-    [part="fps"][data-rating="good"] {
-      color: #22c55e;
-    }
-    [part="fps"][data-rating="needs-improvement"] {
-      color: #eab308;
-    }
-    [part="fps"][data-rating="poor"] {
-      color: #ef4444;
-    }
-    [part="fps"][data-rating="unknown"] {
-      color: var(--color-gray-600);
-    }
-
-    [part="unit"] {
-      font-size: var(--ease-monitor-unit-font-size, var(--ease-font-size-sm, 12px));
-      color: var(--color-gray-600);
-      font-weight: 500;
-    }
-
-    [part="subtitle"] {
-      font-size: var(--ease-monitor-subtitle-font-size, 11px);
-      color: var(--color-gray-600);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      min-width: 0;
-      text-align: right;
-    }
-
-    canvas[part="graph"] {
-      width: 100%;
-      height: 44px;
-      display: block;
-      background: var(--color-gray-900);
-      box-shadow: inset 0 0 0 1px var(--color-white-4);
-    }
-
-    [part="stats"] {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-      gap: 8px;
-      font-size: var(--ease-monitor-stats-font-size, var(--ease-font-size-sm, 12px));
-      padding-left: var(--ease-monitor-stats-padding-left, 4px);
-      color: var(--color-gray-600);
-    }
-
-    [part="stat"] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 8px;
-      min-width: 0;
-    }
-
-    [part="stat"] strong {
-      font-weight: 550;
-      color: var(--color-gray-700);
-    }
-  `
-})
-export class MonitorFps extends HTMLElement {
-    @Prop({ type: Boolean, reflect: true, defaultValue: false })
-    accessor paused = false;
-    @Query('canvas[part="graph"]')
-    accessor canvasEl;
-    #rafId = null;
-    #lastNow = 0;
-    #lastSampleNow = 0;
-    #framesSinceSample = 0;
-    #frameDeltas = [];
-    #fpsSamples = [];
-    #maxFrameDeltas = 240;
-    #maxFpsSamples = 90; // 90 * 250ms = ~22.5s
-    #sampleIntervalMs = 250;
-    #statsWindowFrames = 120;
-    #data = {
-        fps: null,
-        refreshRate: null,
-        frameTimeAvg: null,
-        frameTimeP95: null,
-        frameTimeMax: null,
-        droppedFrames: 0,
-        jankFrames: 0,
-        longFrames: 0
-    };
-    connectedCallback() {
-        this.#attachVisibilityHandling();
-        if (!this.paused && !document.hidden) {
-            this.#start();
-        }
-    }
-    disconnectedCallback() {
-        this.#stop();
-        document.removeEventListener('visibilitychange', this.#handleVisibilityChange);
-    }
-    afterRender() {
-        this.#syncCanvasSize();
-        this.#draw();
-    }
-    render() {
-        const fps = this.#data.fps;
-        const hz = this.#data.refreshRate;
-        const rating = rateFps(fps, hz);
-        const subtitleParts = [
-            this.#data.frameTimeAvg !== null ? `avg ${formatMs(this.#data.frameTimeAvg)}` : null,
-            this.#data.frameTimeP95 !== null ? `p95 ${formatMs(this.#data.frameTimeP95)}` : null
-        ].filter(Boolean);
-        return html `
-      <div part="container">
-        <div part="header">
-          <div part="title">
-            <span part="fps" data-rating=${rating}>${formatNumber(fps, 0)}</span>
-            <span part="unit">FPS</span>
-          </div>
-          <div part="subtitle">${subtitleParts.join(' · ')}</div>
-        </div>
-
-        <canvas part="graph" aria-label="FPS graph"></canvas>
-
-        <div part="stats">
-          <div part="stat"><span>Refresh</span><strong>${hz ? `~${formatNumber(hz, 0)}Hz` : '—'}</strong></div>
-          <div part="stat"><span>Dropped</span><strong>${this.#data.droppedFrames}</strong></div>
-          <div part="stat"><span>Jank</span><strong>${this.#data.jankFrames}</strong></div>
-          <div part="stat"><span>Long frames</span><strong>${this.#data.longFrames}</strong></div>
-          <div part="stat"><span>Worst</span><strong>${formatMs(this.#data.frameTimeMax)}</strong></div>
-          <div part="stat"><span>Avg</span><strong>${formatMs(this.#data.frameTimeAvg)}</strong></div>
-        </div>
-      </div>
-    `;
-    }
-    #attachVisibilityHandling() {
-        document.removeEventListener('visibilitychange', this.#handleVisibilityChange);
-        document.addEventListener('visibilitychange', this.#handleVisibilityChange, { passive: true });
-    }
-    #handleVisibilityChange = () => {
-        if (document.hidden) {
-            this.#stop();
-            return;
-        }
-        if (!this.paused) {
-            this.#start();
-        }
-    };
-    #start() {
-        if (this.#rafId !== null) {
-            return;
-        }
-        const now = performance.now();
-        this.#lastNow = now;
-        this.#lastSampleNow = now;
-        this.#framesSinceSample = 0;
-        this.#rafId = requestAnimationFrame(this.#tick);
-    }
-    #stop() {
-        if (this.#rafId !== null) {
-            cancelAnimationFrame(this.#rafId);
-            this.#rafId = null;
-        }
-    }
-    #tick = (now) => {
-        if (this.paused) {
-            this.#stop();
-            return;
-        }
-        const delta = now - this.#lastNow;
-        this.#lastNow = now;
-        // Ignore huge deltas (tab switch / breakpoints).
-        if (delta > 0 && delta < 250) {
-            this.#frameDeltas.push(delta);
-            if (this.#frameDeltas.length > this.#maxFrameDeltas) {
-                this.#frameDeltas.shift();
-            }
-        }
-        this.#framesSinceSample += 1;
-        if (now - this.#lastSampleNow >= this.#sampleIntervalMs) {
-            const elapsed = now - this.#lastSampleNow;
-            const fpsSample = elapsed > 0 ? (this.#framesSinceSample * 1000) / elapsed : 0;
-            this.#fpsSamples.push(fpsSample);
-            if (this.#fpsSamples.length > this.#maxFpsSamples) {
-                this.#fpsSamples.shift();
-            }
-            this.#lastSampleNow = now;
-            this.#framesSinceSample = 0;
-            this.#updateStats();
-            this.#emit();
-            this.requestRender();
-        }
-        this.#rafId = requestAnimationFrame(this.#tick);
-    };
-    #updateStats() {
-        const frameWindow = this.#frameDeltas.slice(-this.#statsWindowFrames);
-        const fpsWindow = this.#fpsSamples.slice(-Math.min(4, this.#fpsSamples.length));
-        const frameAvg = mean(frameWindow);
-        const frameP95 = computePercentile(frameWindow, 0.95);
-        const frameMax = frameWindow.length > 0 ? Math.max(...frameWindow) : null;
-        const median = computeMedian(frameWindow);
-        const refreshRate = median && median > 0 ? clamp((1000 / median), 30, 240) : (this.#data.refreshRate ?? null);
-        const ideal = refreshRate ? 1000 / refreshRate : 1000 / 60;
-        let droppedFrames = 0;
-        let jankFrames = 0;
-        let longFrames = 0;
-        for (const ft of frameWindow) {
-            const missed = Math.max(0, Math.round(ft / ideal) - 1);
-            droppedFrames += missed;
-            if (ft > ideal * 1.5) {
-                jankFrames += 1;
-            }
-            if (ft > Math.max(50, ideal * 3)) {
-                longFrames += 1;
-            }
-        }
-        const fps = fpsWindow.length > 0 ? mean(fpsWindow) : null;
-        this.#data = {
-            fps,
-            refreshRate,
-            frameTimeAvg: frameAvg,
-            frameTimeP95: frameP95,
-            frameTimeMax: frameMax,
-            droppedFrames,
-            jankFrames,
-            longFrames
-        };
-    }
-    #emit() {
-        this.dispatchEvent(new CustomEvent('monitor-fps', {
-            detail: this.#data,
-            bubbles: true,
-            composed: true
-        }));
-    }
-    #syncCanvasSize() {
-        const canvas = this.canvasEl;
-        if (!canvas) {
-            return;
-        }
-        const rect = canvas.getBoundingClientRect();
-        const dpr = Math.max(1, window.devicePixelRatio || 1);
-        const width = Math.max(1, Math.floor(rect.width * dpr));
-        const height = Math.max(1, Math.floor(rect.height * dpr));
-        if (canvas.width !== width || canvas.height !== height) {
-            canvas.width = width;
-            canvas.height = height;
-        }
-    }
-    #draw() {
-        const canvas = this.canvasEl;
-        if (!canvas) {
-            return;
-        }
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        const dpr = Math.max(1, window.devicePixelRatio || 1);
-        const width = canvas.width / dpr;
-        const height = canvas.height / dpr;
-        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-        ctx.clearRect(0, 0, width, height);
-        const samples = this.#fpsSamples;
-        if (samples.length < 2) {
-            return;
-        }
-        const target = this.#data.refreshRate ?? 60;
-        const scaleMax = Math.max(60, Math.round(target / 10) * 10);
-        const rating = rateFps(this.#data.fps, this.#data.refreshRate);
-        const stroke = rating === 'good'
-            ? '#22c55e'
-            : rating === 'needs-improvement'
-                ? '#eab308'
-                : rating === 'poor'
-                    ? '#ef4444'
-                    : '#6b7280';
-        // guide lines
-        ctx.save();
-        ctx.globalAlpha = 0.35;
-        ctx.strokeStyle = '#ffffff';
-        ctx.lineWidth = 1;
-        ctx.setLineDash([3, 3]);
-        const drawGuide = (fps) => {
-            const y = height - clamp(fps / scaleMax, 0, 1) * height;
-            ctx.beginPath();
-            ctx.moveTo(0, y);
-            ctx.lineTo(width, y);
-            ctx.stroke();
-        };
-        drawGuide(Math.min(60, scaleMax));
-        drawGuide(Math.min(30, scaleMax));
-        ctx.restore();
-        const toY = (fps) => height - clamp(fps / scaleMax, 0, 1) * height;
-        // area fill
-        ctx.beginPath();
-        for (let i = 0; i < samples.length; i += 1) {
-            const value = samples[i] ?? 0;
-            const x = (i / (samples.length - 1)) * width;
-            const y = toY(value);
-            if (i === 0) {
-                ctx.moveTo(x, y);
-            }
-            else {
-                ctx.lineTo(x, y);
-            }
-        }
-        ctx.lineTo(width, height);
-        ctx.lineTo(0, height);
-        ctx.closePath();
-        ctx.globalAlpha = 0.12;
-        ctx.fillStyle = stroke;
-        ctx.fill();
-        // line
-        ctx.beginPath();
-        for (let i = 0; i < samples.length; i += 1) {
-            const value = samples[i] ?? 0;
-            const x = (i / (samples.length - 1)) * width;
-            const y = toY(value);
-            if (i === 0) {
-                ctx.moveTo(x, y);
-            }
-            else {
-                ctx.lineTo(x, y);
-            }
-        }
-        ctx.globalAlpha = 1;
-        ctx.strokeStyle = stroke;
-        ctx.lineWidth = 1.75;
-        ctx.setLineDash([]);
-        ctx.lineJoin = 'round';
-        ctx.lineCap = 'round';
-        ctx.stroke();
-    }
-}