Initial project import

node_modules/stats-gl/lib/panel.ts

@@ -0,0 +1,167 @@
+class Panel {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D | null;
+    name: string;
+    fg: string;
+    bg: string;
+    gradient: CanvasGradient | null;
+    PR: number;
+    WIDTH: number;
+    HEIGHT: number;
+    TEXT_X: number;
+    TEXT_Y: number;
+    GRAPH_X: number;
+    GRAPH_Y: number;
+    GRAPH_WIDTH: number;
+    GRAPH_HEIGHT: number;
+
+    constructor(name: string, fg: string, bg: string) {
+        this.name = name;
+        this.fg = fg;
+        this.bg = bg;
+        this.gradient = null;
+        this.PR = Math.round(window.devicePixelRatio || 1);
+
+        this.WIDTH = 90 * this.PR;
+        this.HEIGHT = 48 * this.PR;
+        this.TEXT_X = 3 * this.PR;
+        this.TEXT_Y = 2 * this.PR;
+        this.GRAPH_X = 3 * this.PR;
+        this.GRAPH_Y = 15 * this.PR;
+        this.GRAPH_WIDTH = 84 * this.PR;
+        this.GRAPH_HEIGHT = 30 * this.PR;
+
+        this.canvas = document.createElement('canvas');
+        this.canvas.width = this.WIDTH;
+        this.canvas.height = this.HEIGHT;
+        this.canvas.style.width = '90px';
+        this.canvas.style.height = '48px';
+        this.canvas.style.position = 'absolute';
+        this.canvas.style.cssText = 'width:90px;height:48px';
+
+        this.context = this.canvas.getContext('2d');
+        this.initializeCanvas();
+    }
+
+    private createGradient(): CanvasGradient {
+        if (!this.context) throw new Error('No context');
+
+        const gradient = this.context.createLinearGradient(
+            0,
+            this.GRAPH_Y,
+            0,
+            this.GRAPH_Y + this.GRAPH_HEIGHT
+        );
+
+        let startColor: string;
+        const endColor: string = this.fg;
+
+        switch (this.fg.toLowerCase()) {
+            case '#0ff': // Cyan
+                startColor = '#006666'; // Dark Cyan
+                break;
+            case '#0f0': // Green
+                startColor = '#006600'; // Dark Green
+                break;
+            case '#ff0': // Yellow
+                startColor = '#666600'; // Dark Yellow
+                break;
+            case '#e1e1e1': // Light Gray
+                startColor = '#666666'; // Medium Gray
+                break;
+            default:
+                startColor = this.bg;
+                break;
+        }
+
+        gradient.addColorStop(0, startColor);
+        gradient.addColorStop(1, endColor);
+
+        return gradient;
+    }
+
+    private initializeCanvas() {
+        if (!this.context) return;
+
+        this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
+        this.context.textBaseline = 'top';
+
+        // Create gradient
+        this.gradient = this.createGradient();
+
+        // Fill background
+        this.context.fillStyle = this.bg;
+        this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
+
+        // Draw text
+        this.context.fillStyle = this.fg;
+        this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
+
+        // Draw initial graph area
+        this.context.fillStyle = this.fg;
+        this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+
+        // Apply semi-transparent background
+        this.context.fillStyle = this.bg;
+        this.context.globalAlpha = 0.9;
+        this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
+    }
+
+    update(
+        value: number,
+        valueGraph: number,
+        maxValue: number,
+        maxGraph: number,
+        decimals = 0
+    ) {
+        if (!this.context || !this.gradient) return;
+
+        const min = Math.min(Infinity, value);
+        const max = Math.max(maxValue, value);
+        maxGraph = Math.max(maxGraph, valueGraph);
+
+        // Clear and redraw background
+        this.context.globalAlpha = 1;
+        this.context.fillStyle = this.bg;
+        this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
+
+        // Draw text
+        this.context.fillStyle = this.fg;
+        this.context.fillText(
+            `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
+                max.toFixed(decimals)
+            )})`,
+            this.TEXT_X,
+            this.TEXT_Y
+        );
+
+        // Shift the graph left
+        this.context.drawImage(
+            this.canvas,
+            this.GRAPH_X + this.PR,
+            this.GRAPH_Y,
+            this.GRAPH_WIDTH - this.PR,
+            this.GRAPH_HEIGHT,
+            this.GRAPH_X,
+            this.GRAPH_Y,
+            this.GRAPH_WIDTH - this.PR,
+            this.GRAPH_HEIGHT
+        );
+
+        // Draw new column with gradient
+        const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
+
+        if (columnHeight > 0) {
+            this.context.globalAlpha = 1;
+            this.context.fillStyle = this.gradient;
+            this.context.fillRect(
+                this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
+                this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
+                this.PR,
+                columnHeight
+            );
+        }
+    }
+}
+
+export { Panel };