@codexo/exojs 0.13.0 → 0.14.0

package/dist/exo.debug.esm.js

@@ -1,949 +1,2 @@
-import { Color } from '@codexo/exojs';
-import { Graphics } from '@codexo/exojs';
-import { Keyboard } from '@codexo/exojs';
-import { View } from '@codexo/exojs';
-import { Container } from '@codexo/exojs';
-import { Text } from '@codexo/exojs';
-import { TextStyle } from '@codexo/exojs';
-import { RenderPipeline } from '@codexo/exojs';
-
-/**
- * Abstract base for a single diagnostic overlay layer. Subclasses produce a
- * visual (outlines, text panels, sparklines, etc.) that
- * {@link DebugOverlay} composites each frame when {@link visible} is `true`.
- *
- * Concrete layers are tree-shakeable via the `@codexo/exojs/debug` subpath
- * and are not loaded unless explicitly imported.
- */
-class DebugLayer {
-    _app;
-    visible = false;
-    constructor(_app) {
-        this._app = _app;
-    }
-    /**
-     * Whether this layer renders in the scene's world-space view or in a
-     * screen-space (canvas-pixel) view. Defaults to 'screen'. Subclasses
-     * override to return 'world' when rendering at actual scene positions.
-     */
-    get viewMode() {
-        return 'screen';
-    }
-    /**
-     * Release any scene-graph nodes or resources owned by this layer.
-     * Called by {@link DebugOverlay.destroy}. The base implementation is a
-     * no-op; subclasses override to tear down their {@link Container} subtrees.
-     */
-    destroy() {
-        // Default: nothing. Subclasses override to release Container subtrees etc.
-    }
-}
-
-// ---------------------------------------------------------------------------
-// HSL → RGB helper
-// ---------------------------------------------------------------------------
-/**
- * Convert HSL (hue 0-360, saturation 0-1, lightness 0-1) to a Color instance.
- * Returns an RGB Color (alpha = alpha parameter).
- */
-function hslToColor(h, s, l, alpha) {
-    const c = (1 - Math.abs(2 * l - 1)) * s;
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-    const m = l - c / 2;
-    let r;
-    let g;
-    let b;
-    if (h < 60) {
-        r = c;
-        g = x;
-        b = 0;
-    }
-    else if (h < 120) {
-        r = x;
-        g = c;
-        b = 0;
-    }
-    else if (h < 180) {
-        r = 0;
-        g = c;
-        b = x;
-    }
-    else if (h < 240) {
-        r = 0;
-        g = x;
-        b = c;
-    }
-    else if (h < 300) {
-        r = x;
-        g = 0;
-        b = c;
-    }
-    else {
-        r = c;
-        g = 0;
-        b = x;
-    }
-    return new Color(r + m, g + m, b + m, alpha);
-}
-// ---------------------------------------------------------------------------
-/**
- * Debug layer that draws a bounding-box outline around every visible
- * RenderNode in the scene. Colours cycle by zIndex (HSL hue). World-space.
- */
-class BoundingBoxesLayer extends DebugLayer {
-    _graphics = null;
-    constructor(app) {
-        super(app);
-    }
-    /** Renders in world-space so outlines align with scene node positions. */
-    get viewMode() {
-        return 'world';
-    }
-    /** No per-frame pre-computation required; all state is derived in {@link render}. */
-    update(_delta) {
-        // State is built in render() each frame; nothing to pre-compute here.
-    }
-    /**
-     * Walk the scene tree and draw a colored rectangle outline around every
-     * visible node that has non-zero bounds. Outline hue cycles by `zIndex`
-     * so overlapping nodes are visually distinguishable.
-     */
-    render(backend) {
-        const root = this._app.scene.currentScene?.root;
-        if (!root) {
-            return;
-        }
-        if (this._graphics === null) {
-            this._graphics = new Graphics();
-        }
-        const gfx = this._graphics;
-        gfx.clear();
-        gfx.lineWidth = 1;
-        this._walkNode(root, gfx);
-        gfx.render(backend);
-    }
-    /** Release the internal {@link Graphics} primitive. */
-    destroy() {
-        if (this._graphics !== null) {
-            this._graphics.destroy();
-            this._graphics = null;
-        }
-    }
-    // -----------------------------------------------------------------------
-    _walkNode(node, gfx) {
-        if (!node.visible) {
-            return;
-        }
-        const bounds = node.getBounds();
-        // Skip zero-area bounds (defensive).
-        if (bounds.width > 0 && bounds.height > 0) {
-            const hue = (((node.zIndex * 30) % 360) + 360) % 360;
-            const color = hslToColor(hue, 0.7, 0.5, 0.7);
-            gfx.lineColor = color;
-            // Draw the rectangle outline as four line segments.
-            const l = bounds.left;
-            const t = bounds.top;
-            const r = bounds.right;
-            const bo = bounds.bottom;
-            gfx.moveTo(l, t);
-            gfx.lineTo(r, t);
-            gfx.lineTo(r, bo);
-            gfx.lineTo(l, bo);
-            gfx.lineTo(l, t);
-            color.destroy();
-        }
-        // Recurse into Container children.
-        const container = node;
-        if (Array.isArray(container.children)) {
-            for (const child of container.children) {
-                this._walkNode(child, gfx);
-            }
-        }
-    }
-}
-
-// Color constants (created once, reused).
-const colorIdle = new Color(1, 0, 1, 0.6); // magenta
-const colorHovered = new Color(1, 1, 0, 0.9); // yellow
-const colorCaptured = new Color(0, 1, 1, 0.9); // cyan
-const colorQuadrant = new Color(0.5, 0.5, 0.5, 0.3); // faint gray
-/**
- * Debug layer that draws outlines around interactive scene nodes.
- * - Magenta: interactive but idle.
- * - Yellow: currently hovered.
- * - Cyan: pointer-captured (drag in progress).
- * - Faint gray quadrant outlines when the spatial index is active (i.e.
- *   at least one interactive node is present in the scene).
- * World-space.
- */
-class HitTestLayer extends DebugLayer {
-    _graphics = null;
-    constructor(app) {
-        super(app);
-    }
-    /** Renders in world-space so outlines align with interactive node positions. */
-    get viewMode() {
-        return 'world';
-    }
-    /** No per-frame pre-computation required; all state is derived in {@link render}. */
-    update(_delta) {
-        // Nothing to pre-compute; all state is read in render().
-    }
-    /**
-     * Walk the scene tree and draw color-coded outlines around interactive
-     * nodes (magenta = idle, yellow = hovered, cyan = pointer-captured).
-     * Also draws faint gray quadrant boundaries when the spatial index is
-     * active, helping diagnose partitioning behavior.
-     */
-    render(backend) {
-        const root = this._app.scene.currentScene?.root;
-        if (!root) {
-            return;
-        }
-        if (this._graphics === null) {
-            this._graphics = new Graphics();
-        }
-        const gfx = this._graphics;
-        gfx.clear();
-        gfx.lineWidth = 1;
-        // Determine hovered and captured sets for color-coding.
-        const interaction = this._app.interaction;
-        const hoveredNode = interaction.getHoveredNode();
-        const capturedNodes = new Set(interaction.getCapturedNodes());
-        // Walk scene and draw outlines for interactive nodes.
-        this._walkNode(root, gfx, hoveredNode, capturedNodes);
-        // Draw quadtree regions when the spatial index is active.
-        const quadtree = interaction._getDebugQuadtree();
-        if (quadtree !== null) {
-            gfx.lineColor = colorQuadrant;
-            quadtree._walkBounds(rect => {
-                gfx.moveTo(rect.left, rect.top);
-                gfx.lineTo(rect.right, rect.top);
-                gfx.lineTo(rect.right, rect.bottom);
-                gfx.lineTo(rect.left, rect.bottom);
-                gfx.lineTo(rect.left, rect.top);
-            });
-        }
-        gfx.render(backend);
-    }
-    /** Release the internal {@link Graphics} primitive. */
-    destroy() {
-        if (this._graphics !== null) {
-            this._graphics.destroy();
-            this._graphics = null;
-        }
-    }
-    // -----------------------------------------------------------------------
-    _walkNode(node, gfx, hovered, captured) {
-        if (!node.visible) {
-            return;
-        }
-        if (node.interactive) {
-            const bounds = node.getBounds();
-            if (bounds.width > 0 && bounds.height > 0) {
-                if (captured.has(node)) {
-                    gfx.lineColor = colorCaptured;
-                }
-                else if (node === hovered) {
-                    gfx.lineColor = colorHovered;
-                }
-                else {
-                    gfx.lineColor = colorIdle;
-                }
-                gfx.moveTo(bounds.left, bounds.top);
-                gfx.lineTo(bounds.right, bounds.top);
-                gfx.lineTo(bounds.right, bounds.bottom);
-                gfx.lineTo(bounds.left, bounds.bottom);
-                gfx.lineTo(bounds.left, bounds.top);
-            }
-        }
-        // Recurse into Container children.
-        const container = node;
-        if (Array.isArray(container.children)) {
-            for (const child of container.children) {
-                this._walkNode(child, gfx, hovered, captured);
-            }
-        }
-    }
-}
-
-// --- layout constants (camelCase to satisfy lint naming convention) ----------
-const panelX$1 = 8;
-const panelY$1 = 8;
-const panelW$1 = 180;
-const panelH$1 = 130;
-const lineH$1 = 14;
-const textSize$2 = 11;
-const textRowCount = 4;
-const sparklineY = panelY$1 + 8 + textRowCount * lineH$1 + 4;
-const sparklineH = panelH$1 - (sparklineY - panelY$1) - 4;
-const sparklineW = panelW$1 - 16;
-const sparklineX = panelX$1 + 8;
-const fpsSampleCount = 60;
-const sparklineSampleCount = 120;
-const sparklineMaxMs = 33; // 100% height = 33ms (~30 fps)
-// Semi-transparent dark background.
-const bgColor$2 = new Color(0, 0, 0, 0.7);
-// Bright text color (light blue-white).
-const textColor$2 = Color.white.clone();
-// Cyan sparkline.
-const sparklineColor = new Color(0, 1, 1, 1);
-// -----------------------------------------------------------------------------
-/** Recursively count nodes under a RenderNode. */
-function countNodes(node) {
-    let count = 1;
-    const container = node;
-    if (Array.isArray(container.children)) {
-        for (const child of container.children) {
-            count += countNodes(child);
-        }
-    }
-    return count;
-}
-/**
- * Debug layer that renders a compact screen-space HUD (top-left) showing
- * rolling-average FPS, per-frame time in milliseconds, draw-call count, and
- * scene-node count, alongside a 120-sample frame-time sparkline.
- *
- * Enable via {@link DebugOverlay} or by pressing F1 while the canvas has focus.
- */
-class PerformanceLayer extends DebugLayer {
-    // Rolling FPS sample buffer (60 samples).
-    _fpsSamples = new Float32Array(fpsSampleCount);
-    _fpsSampleIndex = 0;
-    // Rolling frame-time buffer (120 samples) for sparkline.
-    _sparkSamples = new Float32Array(sparklineSampleCount);
-    _sparkSampleIndex = 0;
-    // Root container — lazily initialized on first update() call so the
-    // glyph atlas is not touched in environments where canvas 2D is absent.
-    _root = null;
-    _textFps = null;
-    _textFrame = null;
-    _textDraws = null;
-    _textNodes = null;
-    _sparkline = null;
-    constructor(app) {
-        super(app);
-    }
-    get viewMode() {
-        return 'screen';
-    }
-    /**
-     * Sample the current frame time, recompute the rolling FPS average,
-     * update stat text nodes, and rebuild the sparkline geometry. Lazily
-     * initializes the panel scene graph on first call to avoid touching the
-     * glyph atlas until the layer is actually shown.
-     */
-    update(delta) {
-        // Lazily build the scene graph on first update so that Text (which
-        // touches the glyph atlas immediately) is only constructed when the
-        // layer is first made visible — not at DebugOverlay construction time.
-        if (this._root === null) {
-            this._build();
-        }
-        // --- FPS rolling average ---
-        const frameMs = delta.milliseconds;
-        this._fpsSamples[this._fpsSampleIndex] = frameMs;
-        this._fpsSampleIndex = (this._fpsSampleIndex + 1) % fpsSampleCount;
-        let totalMs = 0;
-        let validSamples = 0;
-        for (let i = 0; i < fpsSampleCount; i++) {
-            const s = this._fpsSamples[i];
-            if (s > 0) {
-                totalMs += s;
-                validSamples++;
-            }
-        }
-        const avgMs = validSamples > 0 ? totalMs / validSamples : 0;
-        const fps = avgMs > 0 ? 1000 / avgMs : 0;
-        // --- Sparkline sample ---
-        this._sparkSamples[this._sparkSampleIndex] = frameMs;
-        this._sparkSampleIndex = (this._sparkSampleIndex + 1) % sparklineSampleCount;
-        // --- Stats ---
-        const stats = this._app.backend.stats;
-        const scene = this._app.scene.currentScene;
-        const nodeCount = scene ? countNodes(scene.root) : 0;
-        // --- Update text ---
-        if (this._textFps !== null) {
-            this._textFps.text = `FPS: ${fps.toFixed(1)}`;
-        }
-        if (this._textFrame !== null) {
-            this._textFrame.text = `Frame: ${frameMs.toFixed(1)}ms`;
-        }
-        if (this._textDraws !== null) {
-            this._textDraws.text = `Draws: ${stats.drawCalls}`;
-        }
-        if (this._textNodes !== null) {
-            this._textNodes.text = `Nodes: ${nodeCount}`;
-        }
-        // --- Rebuild sparkline geometry ---
-        if (this._sparkline !== null) {
-            this._sparkline.clear();
-            this._sparkline.lineWidth = 1;
-            this._sparkline.lineColor = sparklineColor;
-            // Walk samples in chronological order (oldest first).
-            const oldest = this._sparkSampleIndex;
-            const stepX = sparklineW / (sparklineSampleCount - 1);
-            let started = false;
-            for (let i = 0; i < sparklineSampleCount; i++) {
-                const sampleIndex = (oldest + i) % sparklineSampleCount;
-                const ms = this._sparkSamples[sampleIndex];
-                const px = sparklineX + i * stepX;
-                const py = sparklineY + sparklineH - Math.min(1, ms / sparklineMaxMs) * sparklineH;
-                if (!started) {
-                    this._sparkline.moveTo(px, py);
-                    started = true;
-                }
-                else {
-                    this._sparkline.lineTo(px, py);
-                }
-            }
-        }
-    }
-    /** Submit the panel's {@link Container} subtree to the backend for drawing. */
-    render(backend) {
-        this._root?.render(backend);
-    }
-    /** Destroy the panel's {@link Container} subtree and release all child references. */
-    destroy() {
-        if (this._root !== null) {
-            this._root.destroy();
-            this._root = null;
-        }
-        this._textFps = null;
-        this._textFrame = null;
-        this._textDraws = null;
-        this._textNodes = null;
-        this._sparkline = null;
-    }
-    // -----------------------------------------------------------------------
-    _build() {
-        const style = new TextStyle({
-            fontSize: textSize$2,
-            fontFamily: 'Arial',
-            fontWeight: 'normal',
-            fillColor: textColor$2,
-        });
-        const bg = new Graphics();
-        bg.fillColor = bgColor$2;
-        bg.drawRectangle(panelX$1, panelY$1, panelW$1, panelH$1);
-        this._textFps = new Text('FPS: -', style.clone());
-        this._textFrame = new Text('Frame: -', style.clone());
-        this._textDraws = new Text('Draws: -', style.clone());
-        this._textNodes = new Text('Nodes: -', style.clone());
-        this._textFps.x = panelX$1 + 8;
-        this._textFps.y = panelY$1 + 8;
-        this._textFrame.x = panelX$1 + 8;
-        this._textFrame.y = panelY$1 + 8 + lineH$1;
-        this._textDraws.x = panelX$1 + 8;
-        this._textDraws.y = panelY$1 + 8 + lineH$1 * 2;
-        this._textNodes.x = panelX$1 + 8;
-        this._textNodes.y = panelY$1 + 8 + lineH$1 * 3;
-        this._sparkline = new Graphics();
-        this._root = new Container();
-        this._root.addChild(bg);
-        this._root.addChild(this._textFps);
-        this._root.addChild(this._textFrame);
-        this._root.addChild(this._textDraws);
-        this._root.addChild(this._textNodes);
-        this._root.addChild(this._sparkline);
-    }
-}
-
-// ---------------------------------------------------------------------------
-// Layout constants
-// ---------------------------------------------------------------------------
-const panelW = 260;
-const panelH = 160;
-const panelPad = 8;
-const lineH = 14;
-const textSize$1 = 11;
-const maxEntries = 10;
-// Semi-transparent dark background.
-const bgColor$1 = new Color(0, 0, 0, 0.7);
-const textColor$1 = Color.white.clone();
-// ---------------------------------------------------------------------------
-/**
- * Debug layer that shows a screen-space panel (top-right corner) listing all
- * RenderNodes under the current pointer position, sorted by zIndex descending.
- * Screen-space.
- */
-class PointerStackLayer extends DebugLayer {
-    _root = null;
-    _bg = null;
-    _lines = [];
-    constructor(app) {
-        super(app);
-    }
-    /** Renders in screen-space so the panel stays fixed in the top-right corner. */
-    get viewMode() {
-        return 'screen';
-    }
-    /**
-     * Lazily initialize the panel on first call, reposition it to the
-     * top-right corner, and populate text lines with the current pointer
-     * stack (up to 10 entries, sorted by zIndex descending).
-     */
-    update(_delta) {
-        if (this._root === null) {
-            this._build();
-        }
-        const canvas = this._app.canvas;
-        const panelX = canvas.width - panelW - panelPad;
-        const panelY = panelPad;
-        // Position the panel.
-        if (this._root !== null) {
-            this._root.x = panelX;
-            this._root.y = panelY;
-        }
-        // Collect stack info.
-        const lines = this._buildLines();
-        // Update text nodes.
-        for (let i = 0; i < this._lines.length; i++) {
-            const lineNode = this._lines[i];
-            if (i < lines.length) {
-                lineNode.text = lines[i];
-                lineNode.visible = true;
-            }
-            else {
-                lineNode.text = '';
-                lineNode.visible = false;
-            }
-        }
-    }
-    /** Submit the panel's {@link Container} subtree to the backend for drawing. */
-    render(backend) {
-        this._root?.render(backend);
-    }
-    /** Destroy the panel's {@link Container} subtree and release all child references. */
-    destroy() {
-        if (this._root !== null) {
-            this._root.destroy();
-            this._root = null;
-        }
-        this._bg = null;
-        this._lines = [];
-    }
-    // -----------------------------------------------------------------------
-    _build() {
-        const style = new TextStyle({
-            fontSize: textSize$1,
-            fontFamily: 'Arial',
-            fontWeight: 'normal',
-            fillColor: textColor$1,
-        });
-        this._bg = new Graphics();
-        this._bg.fillColor = bgColor$1;
-        // Panel background will be repositioned in update(); draw at local (0,0).
-        this._bg.drawRectangle(0, 0, panelW, panelH);
-        this._root = new Container();
-        this._root.addChild(this._bg);
-        // Pre-allocate enough Text nodes for header + entries.
-        const totalLines = maxEntries + 2; // header row + cursor row + entries
-        for (let i = 0; i < totalLines; i++) {
-            const t = new Text('', style.clone());
-            t.x = panelPad;
-            t.y = panelPad + i * lineH;
-            t.visible = false;
-            this._root.addChild(t);
-            this._lines.push(t);
-        }
-    }
-    _buildLines() {
-        const pos = this._app.input.getPrimaryPointerPosition();
-        if (pos === null) {
-            return ['Pointer: (none)'];
-        }
-        const { x: sx, y: sy } = pos;
-        // The pointer x/y is canvas-relative. InteractionManager passes this
-        // directly to node.contains(), so we do the same.
-        const worldX = sx;
-        const worldY = sy;
-        const lines = [];
-        lines.push(`Cursor: (${sx.toFixed(0)}, ${sy.toFixed(0)})`);
-        lines.push('Stack (top→bottom):');
-        // Collect all visible RenderNodes whose contains() returns true.
-        const root = this._app.scene.currentScene?.root;
-        const stack = [];
-        if (root) {
-            this._collectContaining(root, worldX, worldY, stack);
-            stack.sort((a, b) => b.zIndex - a.zIndex);
-        }
-        const shown = stack.slice(0, maxEntries);
-        for (const node of shown) {
-            const name = node.constructor.name;
-            const z = node.zIndex;
-            const inter = node.interactive ? ' — interactive' : '';
-            lines.push(`  ${name} — z=${z}${inter}`);
-        }
-        if (stack.length > maxEntries) {
-            lines.push(`  … +${stack.length - maxEntries} more`);
-        }
-        if (shown.length === 0) {
-            lines.push('  (none)');
-        }
-        return lines;
-    }
-    _collectContaining(node, x, y, result) {
-        if (!node.visible) {
-            return;
-        }
-        if (node.contains(x, y)) {
-            result.push(node);
-        }
-        const container = node;
-        if (Array.isArray(container.children)) {
-            for (const child of container.children) {
-                this._collectContaining(child, x, y, result);
-            }
-        }
-    }
-}
-
-/**
- * Canvas-native debug overlay. Instantiate AFTER Application is constructed:
- *
- *     import { DebugOverlay } from '@codexo/exojs/debug';
- *     const debug = new DebugOverlay(app);
- *     debug.layers.performance.visible = true;  // or press F1
- *
- * The overlay subscribes to `app.onFrame` and renders its visible layers.
- * World-space layers render first (under text panels) in the scene view;
- * screen-space layers then render in the overlay's pixel-space view.
- *
- * Keybindings (while canvas has focus):
- *   F1 — toggle Performance layer
- *   F2 — toggle BoundingBoxes layer
- *   F3 — toggle HitTest layer
- *   F4 — toggle PointerStack layer
- *
- * NOTE: F-keys only fire while the canvas has focus (engine convention).
- *
- * The master `visible` switch suppresses all layer rendering when false
- * without changing individual layer visibility flags.
- */
-class DebugOverlay {
-    /** Master visibility switch. When false, no layers render regardless of their individual flags. */
-    visible = true;
-    /** The four built-in diagnostic layers. Toggle each layer's `visible` flag or use the F1–F4 keybindings. */
-    layers;
-    _app;
-    _view;
-    _onFrameHandler;
-    _onKeyDownHandler;
-    _onResizeHandler;
-    constructor(app) {
-        this._app = app;
-        this._view = new View(app.canvas.width / 2, app.canvas.height / 2, app.canvas.width, app.canvas.height);
-        this.layers = {
-            performance: new PerformanceLayer(app),
-            boundingBoxes: new BoundingBoxesLayer(app),
-            hitTest: new HitTestLayer(app),
-            pointerStack: new PointerStackLayer(app),
-        };
-        this._onFrameHandler = this._onFrame.bind(this);
-        this._onKeyDownHandler = this._onKeyDown.bind(this);
-        this._onResizeHandler = this._onResize.bind(this);
-        app.onFrame.add(this._onFrameHandler);
-        app.input.onKeyDown.add(this._onKeyDownHandler);
-        app.onResize.add(this._onResizeHandler);
-    }
-    /**
-     * Unsubscribe from all application events, destroy every layer, and
-     * release the overlay's internal {@link View}. Call this when you no
-     * longer need the overlay to avoid memory leaks.
-     */
-    destroy() {
-        this._app.onFrame.remove(this._onFrameHandler);
-        this._app.input.onKeyDown.remove(this._onKeyDownHandler);
-        this._app.onResize.remove(this._onResizeHandler);
-        for (const layer of Object.values(this.layers)) {
-            layer.destroy();
-        }
-        this._view.destroy();
-    }
-    _onResize(width, height) {
-        this._view.resize(width, height);
-        this._view.setCenter(width / 2, height / 2);
-    }
-    _onFrame(delta) {
-        if (!this.visible)
-            return;
-        const layers = Object.values(this.layers);
-        const visibleLayers = layers.filter(l => l.visible);
-        if (visibleLayers.length === 0)
-            return;
-        const backend = this._app.backend;
-        const sceneView = backend.view; // capture scene's current view
-        // --- World-space layers first (render under screen-space text panels) ---
-        const worldLayers = visibleLayers.filter(l => l.viewMode === 'world');
-        for (const layer of worldLayers) {
-            layer.update(delta);
-            layer.render(backend);
-        }
-        // --- Screen-space layers: swap to overlay's pixel view ---
-        const screenLayers = visibleLayers.filter(l => l.viewMode === 'screen');
-        if (screenLayers.length > 0) {
-            backend.setView(this._view);
-            try {
-                for (const layer of screenLayers) {
-                    layer.update(delta);
-                    layer.render(backend);
-                }
-            }
-            finally {
-                backend.setView(sceneView);
-            }
-        }
-    }
-    _onKeyDown(channel) {
-        switch (channel) {
-            case Keyboard.F1:
-                this.layers.performance.visible = !this.layers.performance.visible;
-                break;
-            case Keyboard.F2:
-                this.layers.boundingBoxes.visible = !this.layers.boundingBoxes.visible;
-                break;
-            case Keyboard.F3:
-                this.layers.hitTest.visible = !this.layers.hitTest.visible;
-                break;
-            case Keyboard.F4:
-                this.layers.pointerStack.visible = !this.layers.pointerStack.visible;
-                break;
-        }
-    }
-}
-
-const panelX = 200; // sit to the right of the PerformanceLayer panel
-const panelY = 8;
-const panelMinW = 240;
-const panelMaxLines = 24;
-const panelLineH = 13;
-const panelPadding = 8;
-const textSize = 11;
-const bgColor = new Color(0, 0, 0, 0.7);
-const headerColor = new Color(0.6, 1, 1, 1);
-const textColor = Color.white.clone();
-const dimColor = new Color(0.7, 0.7, 0.7, 1);
-/**
- * Debug layer that lists every {@link RenderNode} with an active filter chain
- * each frame. Renders a compact text panel with per-drawable rows showing
- * the filter sequence, bounding-box dimensions, and mask/cache status.
- *
- * Use during development to answer:
- *
- *   - "Is my filter actually attached?" → it appears in the list
- *   - "Why does my frame have N render passes?" → see total pass count
- *   - "Is this drawable being re-rendered or cached?" → `[cached]` flag
- *
- * For deep per-pass inspection (intermediate render-target contents, GLSL/WGSL
- * source, uniform values), use Spector.js or Chrome DevTools' WebGPU panel —
- * the engine emits debug-group labels around filter and mesh-custom-shader
- * passes so those tools show meaningful pass names.
- */
-class RenderPassInspectorLayer extends DebugLayer {
-    _entries = [];
-    _root = null;
-    _bg = null;
-    _header = null;
-    _lines = [];
-    _pipeline = null;
-    constructor(app) {
-        super(app);
-    }
-    /**
-     * Flatten a {@link RenderPipeline} into depth-tagged rows, recursing into nested pipelines. Pure and
-     * app-independent: identity is the pass object and `label` is display-only — no names are required.
-     */
-    static describePipeline(pipeline) {
-        const rows = [];
-        RenderPassInspectorLayer._collectPipelineRows(pipeline, 0, rows);
-        return rows;
-    }
-    static _collectPipelineRows(pipeline, depth, rows) {
-        for (const pass of pipeline) {
-            rows.push({ depth, label: pass.label, enabled: pass.enabled, isPipeline: pass instanceof RenderPipeline });
-            if (pass instanceof RenderPipeline) {
-                RenderPassInspectorLayer._collectPipelineRows(pass, depth + 1, rows);
-            }
-        }
-    }
-    get viewMode() {
-        return 'screen';
-    }
-    /**
-     * Walk the scene graph and collect filter-chain entries for every
-     * {@link RenderNode} with at least one filter. Replaces the previous
-     * frame's snapshot. The current snapshot is exposed via {@link entries}
-     * for tests and external consumers.
-     */
-    update(_delta) {
-        if (this._root === null) {
-            this._build();
-        }
-        this._entries.length = 0;
-        const root = this._app.scene.currentScene?.root;
-        if (root) {
-            this._collect(root);
-        }
-        this._refreshPanel();
-    }
-    /** Submit the panel's {@link Container} subtree to the backend for drawing. */
-    render(backend) {
-        this._root?.render(backend);
-    }
-    destroy() {
-        if (this._root !== null) {
-            this._root.destroy();
-            this._root = null;
-        }
-        this._bg = null;
-        this._header = null;
-        this._lines = [];
-        this._entries.length = 0;
-        this._pipeline = null;
-    }
-    /**
-     * Read-only snapshot of the entries collected on the most recent
-     * {@link update} call. Useful for tests and for external tooling that
-     * wants to render its own visualisation rather than use the built-in
-     * panel.
-     */
-    get entries() {
-        return this._entries;
-    }
-    /** Total pass count across all collected entries. */
-    get totalPasses() {
-        let total = 0;
-        for (const entry of this._entries) {
-            total += entry.filters.length;
-            if (entry.hasMask)
-                total++;
-        }
-        return total;
-    }
-    /** Set a {@link RenderPipeline} to list beneath the filter chains, or `null` to clear it. */
-    setPipeline(pipeline) {
-        this._pipeline = pipeline;
-        return this;
-    }
-    /** The pipeline currently being inspected, or `null`. */
-    get pipeline() {
-        return this._pipeline;
-    }
-    /** Depth-tagged rows for the inspected pipeline (empty if none is set). */
-    pipelineRows() {
-        return this._pipeline !== null ? RenderPassInspectorLayer.describePipeline(this._pipeline) : [];
-    }
-    // -----------------------------------------------------------------------
-    _collect(node) {
-        if (!node.visible)
-            return;
-        if (node.filters.length > 0) {
-            const bounds = node.getBounds();
-            this._entries.push({
-                drawableLabel: node.constructor.name,
-                filters: [...node.filters],
-                width: Math.max(1, Math.ceil(bounds.width)),
-                height: Math.max(1, Math.ceil(bounds.height)),
-                hasMask: node.mask !== null,
-                cachedAsBitmap: node.cacheAsBitmap,
-            });
-        }
-        const container = node;
-        if (Array.isArray(container.children)) {
-            for (const child of container.children) {
-                this._collect(child);
-            }
-        }
-    }
-    _build() {
-        const style = new TextStyle({
-            fontSize: textSize,
-            fontFamily: 'Arial',
-            fontWeight: 'normal',
-            fillColor: textColor,
-        });
-        this._bg = new Graphics();
-        const headerStyle = style.clone();
-        headerStyle.fillColor = headerColor;
-        this._header = new Text('', headerStyle);
-        this._header.x = panelX + panelPadding;
-        this._header.y = panelY + panelPadding;
-        this._lines = [];
-        for (let i = 0; i < panelMaxLines; i++) {
-            const line = new Text('', style.clone());
-            line.x = panelX + panelPadding;
-            line.y = panelY + panelPadding + panelLineH + i * panelLineH;
-            this._lines.push(line);
-        }
-        this._root = new Container();
-        this._root.addChild(this._bg);
-        this._root.addChild(this._header);
-        for (const line of this._lines)
-            this._root.addChild(line);
-    }
-    _refreshPanel() {
-        if (this._header === null || this._bg === null)
-            return;
-        const lines = [];
-        if (this._entries.length === 0) {
-            lines.push({ text: '(no active filter chains)', dim: true });
-        }
-        else {
-            for (const entry of this._entries) {
-                const flags = [];
-                if (entry.hasMask)
-                    flags.push('mask');
-                if (entry.cachedAsBitmap)
-                    flags.push('cached');
-                const flagsText = flags.length > 0 ? ` [${flags.join(',')}]` : '';
-                lines.push({
-                    text: `${entry.drawableLabel} ${entry.width}x${entry.height}${flagsText}`,
-                    dim: false,
-                });
-                for (let i = 0; i < entry.filters.length; i++) {
-                    lines.push({ text: `  ${i}. ${entry.filters[i].constructor.name}`, dim: false });
-                }
-            }
-        }
-        const pipelineRows = this.pipelineRows();
-        if (pipelineRows.length > 0) {
-            lines.push({ text: 'Pipeline:', dim: true });
-            for (const row of pipelineRows) {
-                const indent = '  '.repeat(row.depth + 1);
-                lines.push({ text: `${indent}${row.label}${row.enabled ? '' : ' [off]'}`, dim: !row.enabled });
-            }
-        }
-        this._header.text = `Render Passes: ${this.totalPasses}`;
-        const visibleCount = Math.min(lines.length, this._lines.length);
-        for (let i = 0; i < this._lines.length; i++) {
-            const line = this._lines[i];
-            if (i < visibleCount) {
-                const entry = lines[i];
-                line.text = entry.text;
-                line.style.fillColor = entry.dim ? dimColor : textColor;
-                line.visible = true;
-            }
-            else {
-                line.text = '';
-                line.visible = false;
-            }
-        }
-        if (lines.length > this._lines.length) {
-            const last = this._lines[this._lines.length - 1];
-            const overflow = lines.length - this._lines.length;
-            last.text = `... (+${overflow} more)`;
-            last.style.fillColor = dimColor;
-            last.visible = true;
-        }
-        // Resize background to fit content.
-        const panelHeight = panelPadding * 2 + panelLineH * (1 + visibleCount);
-        this._bg.clear();
-        this._bg.fillColor = bgColor;
-        this._bg.drawRectangle(panelX, panelY, panelMinW, panelHeight);
-    }
-}
-
-export { BoundingBoxesLayer, DebugLayer, DebugOverlay, HitTestLayer, PerformanceLayer, PointerStackLayer, RenderPassInspectorLayer };
+import{Color as e}from"@codexo/exojs";import{Graphics as t}from"@codexo/exojs";import{Keyboard as s}from"@codexo/exojs";import{View as i}from"@codexo/exojs";import{Container as n}from"@codexo/exojs";import{Text as o}from"@codexo/exojs";import{RenderPipeline as r}from"@codexo/exojs";class l{_app;visible=!1;constructor(e){this._app=e}get viewMode(){return"screen"}destroy(){}}class h extends l{_graphics=null;constructor(e){super(e)}get viewMode(){return"world"}update(e){}render(e){const s=this._app.scene.currentScene?.root;if(!s)return;null===this._graphics&&(this._graphics=new t);const i=this._graphics;i.clear(),i.lineWidth=1,this._walkNode(s,i),i.render(e)}destroy(){null!==this._graphics&&(this._graphics.destroy(),this._graphics=null)}_walkNode(t,s){if(!t.visible)return;const i=t.getBounds();if(i.width>0&&i.height>0){const n=function(t,s,i,n){const o=(1-Math.abs(2*i-1))*s,r=o*(1-Math.abs(t/60%2-1)),l=i-o/2;let h,a,c;return t<60?(h=o,a=r,c=0):t<120?(h=r,a=o,c=0):t<180?(h=0,a=o,c=r):t<240?(h=0,a=r,c=o):t<300?(h=r,a=0,c=o):(h=o,a=0,c=r),new e(h+l,a+l,c+l,n)}((30*t.zIndex%360+360)%360,.7,.5,.7);s.lineColor=n;const o=i.left,r=i.top,l=i.right,h=i.bottom;s.moveTo(o,r),s.lineTo(l,r),s.lineTo(l,h),s.lineTo(o,h),s.lineTo(o,r),n.destroy()}const n=t;if(Array.isArray(n.children))for(const e of n.children)this._walkNode(e,s)}}const a=new e(1,0,1,.6),c=new e(1,1,0,.9),d=new e(0,1,1,.9),_=new e(.5,.5,.5,.3);class p extends l{_graphics=null;constructor(e){super(e)}get viewMode(){return"world"}update(e){}render(e){const s=this._app.scene.currentScene?.root;if(!s)return;null===this._graphics&&(this._graphics=new t);const i=this._graphics;i.clear(),i.lineWidth=1;const n=this._app.interaction,o=n.getHoveredNode(),r=new Set(n.getCapturedNodes());this._walkNode(s,i,o,r);const l=n._getDebugQuadtree();null!==l&&(i.lineColor=_,l._walkBounds(e=>{i.moveTo(e.left,e.top),i.lineTo(e.right,e.top),i.lineTo(e.right,e.bottom),i.lineTo(e.left,e.bottom),i.lineTo(e.left,e.top)})),i.render(e)}destroy(){null!==this._graphics&&(this._graphics.destroy(),this._graphics=null)}_walkNode(e,t,s,i){if(!e.visible)return;if(e.interactive){const n=e.getBounds();n.width>0&&n.height>0&&(i.has(e)?t.lineColor=d:t.lineColor=e===s?c:a,t.moveTo(n.left,n.top),t.lineTo(n.right,n.top),t.lineTo(n.right,n.bottom),t.lineTo(n.left,n.bottom),t.lineTo(n.left,n.top))}const n=e;if(Array.isArray(n.children))for(const e of n.children)this._walkNode(e,t,s,i)}}const u=120,f=new e(0,0,0,.7),w=e.white.clone(),x=new e(0,1,1,1);function m(e){let t=1;const s=e;if(Array.isArray(s.children))for(const e of s.children)t+=m(e);return t}class g extends l{_fpsSamples=new Float32Array(60);_fpsSampleIndex=0;_sparkSamples=new Float32Array(u);_sparkSampleIndex=0;_root=null;_textFps=null;_textFrame=null;_textDraws=null;_textNodes=null;_sparkline=null;constructor(e){super(e)}get viewMode(){return"screen"}update(e){null===this._root&&this._build();const t=e.milliseconds;this._fpsSamples[this._fpsSampleIndex]=t,this._fpsSampleIndex=(this._fpsSampleIndex+1)%60;let s=0,i=0;for(let e=0;e<60;e++){const t=this._fpsSamples[e];void 0!==t&&t>0&&(s+=t,i++)}const n=i>0?s/i:0,o=n>0?1e3/n:0;this._sparkSamples[this._sparkSampleIndex]=t,this._sparkSampleIndex=(this._sparkSampleIndex+1)%u;const r=this._app.backend.stats,l=this._app.scene.currentScene,h=l?m(l.root):0;if(null!==this._textFps&&(this._textFps.text=`FPS: ${o.toFixed(1)}`),null!==this._textFrame&&(this._textFrame.text=`Frame: ${t.toFixed(1)}ms`),null!==this._textDraws&&(this._textDraws.text=`Draws: ${r.drawCalls}`),null!==this._textNodes&&(this._textNodes.text=`Nodes: ${h}`),null!==this._sparkline){this._sparkline.clear(),this._sparkline.lineWidth=1,this._sparkline.lineColor=x;const e=this._sparkSampleIndex,t=164/119;let s=!1;for(let i=0;i<u;i++){const n=(e+i)%u,o=this._sparkSamples[n]??0,r=16+i*t,l=134-58*Math.min(1,o/33);s?this._sparkline.lineTo(r,l):(this._sparkline.moveTo(r,l),s=!0)}}}render(e){this._root?.render(e)}destroy(){null!==this._root&&(this._root.destroy(),this._root=null),this._textFps=null,this._textFrame=null,this._textDraws=null,this._textNodes=null,this._sparkline=null}_build(){const e={fontSize:11,fontFamily:"Arial",fontWeight:"normal",fillColor:w},s=new t;s.fillColor=f,s.drawRectangle(8,8,180,130),this._textFps=new o("FPS: -",e),this._textFrame=new o("Frame: -",e),this._textDraws=new o("Draws: -",e),this._textNodes=new o("Nodes: -",e),this._textFps.x=16,this._textFps.y=16,this._textFrame.x=16,this._textFrame.y=30,this._textDraws.x=16,this._textDraws.y=44,this._textNodes.x=16,this._textNodes.y=58,this._sparkline=new t,this._root=new n,this._root.addChild(s),this._root.addChild(this._textFps),this._root.addChild(this._textFrame),this._root.addChild(this._textDraws),this._root.addChild(this._textNodes),this._root.addChild(this._sparkline)}}const b=new e(0,0,0,.7),v=e.white.clone();class y extends l{_root=null;_bg=null;_lines=[];constructor(e){super(e)}get viewMode(){return"screen"}update(e){null===this._root&&this._build();const t=this._app.canvas.width-260-8;null!==this._root&&(this._root.x=t,this._root.y=8);const s=this._buildLines();for(let e=0;e<this._lines.length;e++){const t=this._lines[e];if(void 0===t)continue;const i=s[e];void 0!==i?(t.text=i,t.visible=!0):(t.text="",t.visible=!1)}}render(e){this._root?.render(e)}destroy(){null!==this._root&&(this._root.destroy(),this._root=null),this._bg=null,this._lines=[]}_build(){const e={fontSize:11,fontFamily:"Arial",fontWeight:"normal",fillColor:v};this._bg=new t,this._bg.fillColor=b,this._bg.drawRectangle(0,0,260,160),this._root=new n,this._root.addChild(this._bg);for(let t=0;t<12;t++){const s=new o("",e);s.x=8,s.y=8+14*t,s.visible=!1,this._root.addChild(s),this._lines.push(s)}}_buildLines(){const e=this._app.input.getPrimaryPointerPosition();if(null===e)return["Pointer: (none)"];const{x:t,y:s}=e,i=t,n=s,o=[];o.push(`Cursor: (${t.toFixed(0)}, ${s.toFixed(0)})`),o.push("Stack (top→bottom):");const r=this._app.scene.currentScene?.root,l=[];r&&(this._collectContaining(r,i,n,l),l.sort((e,t)=>t.zIndex-e.zIndex));const h=l.slice(0,10);for(const e of h){const t=e.constructor.name,s=e.zIndex,i=e.interactive?" — interactive":"";o.push(`  ${t} — z=${s}${i}`)}return l.length>10&&o.push(`  … +${l.length-10} more`),0===h.length&&o.push("  (none)"),o}_collectContaining(e,t,s,i){if(!e.visible)return;e.contains(t,s)&&i.push(e);const n=e;if(Array.isArray(n.children))for(const e of n.children)this._collectContaining(e,t,s,i)}}class F{visible=!0;layers;_app;_view;_onFrameHandler;_onKeyDownHandler;_onResizeHandler;constructor(e){this._app=e,this._view=new i(e.canvas.width/2,e.canvas.height/2,e.canvas.width,e.canvas.height),this.layers={performance:new g(e),boundingBoxes:new h(e),hitTest:new p(e),pointerStack:new y(e)},this._onFrameHandler=this._onFrame.bind(this),this._onKeyDownHandler=this._onKeyDown.bind(this),this._onResizeHandler=this._onResize.bind(this),e.onFrame.add(this._onFrameHandler),e.input.onKeyDown.add(this._onKeyDownHandler),e.onResize.add(this._onResizeHandler)}destroy(){this._app.onFrame.remove(this._onFrameHandler),this._app.input.onKeyDown.remove(this._onKeyDownHandler),this._app.onResize.remove(this._onResizeHandler);for(const e of Object.values(this.layers))e.destroy();this._view.destroy()}_onResize(e,t){this._view.resize(e,t),this._view.setCenter(e/2,t/2)}_onFrame(e){if(!this.visible)return;const t=Object.values(this.layers).filter(e=>e.visible);if(0===t.length)return;const s=this._app.backend,i=s.view,n=t.filter(e=>"world"===e.viewMode);for(const t of n)t.update(e),t.render(s);const o=t.filter(e=>"screen"===e.viewMode);if(o.length>0){s.setView(this._view);try{for(const t of o)t.update(e),t.render(s)}finally{s.setView(i)}}}_onKeyDown(e){switch(e){case s.F1:this.layers.performance.visible=!this.layers.performance.visible;break;case s.F2:this.layers.boundingBoxes.visible=!this.layers.boundingBoxes.visible;break;case s.F3:this.layers.hitTest.visible=!this.layers.hitTest.visible;break;case s.F4:this.layers.pointerStack.visible=!this.layers.pointerStack.visible}}}const k=new e(0,0,0,.7),C=new e(.6,1,1,1),S=e.white.clone(),$=new e(.7,.7,.7,1);class T extends l{_entries=[];_root=null;_bg=null;_header=null;_lines=[];_pipeline=null;constructor(e){super(e)}static describePipeline(e){const t=[];return T._collectPipelineRows(e,0,t),t}static _collectPipelineRows(e,t,s){for(const i of e)s.push({depth:t,label:i.label,enabled:i.enabled,isPipeline:i instanceof r}),i instanceof r&&T._collectPipelineRows(i,t+1,s)}get viewMode(){return"screen"}update(e){null===this._root&&this._build(),this._entries.length=0;const t=this._app.scene.currentScene?.root;t&&this._collect(t),this._refreshPanel()}render(e){this._root?.render(e)}destroy(){null!==this._root&&(this._root.destroy(),this._root=null),this._bg=null,this._header=null,this._lines=[],this._entries.length=0,this._pipeline=null}get entries(){return this._entries}get totalPasses(){let e=0;for(const t of this._entries)e+=t.filters.length,t.hasMask&&e++;return e}setPipeline(e){return this._pipeline=e,this}get pipeline(){return this._pipeline}pipelineRows(){return null!==this._pipeline?T.describePipeline(this._pipeline):[]}_collect(e){if(!e.visible)return;if(e.filters.length>0){const t=e.getBounds();this._entries.push({drawableLabel:e.constructor.name,filters:[...e.filters],width:Math.max(1,Math.ceil(t.width)),height:Math.max(1,Math.ceil(t.height)),hasMask:null!==e.mask,cachedAsBitmap:e.cacheAsBitmap})}const t=e;if(Array.isArray(t.children))for(const e of t.children)this._collect(e)}_build(){const e={fontSize:11,fontFamily:"Arial",fontWeight:"normal",fillColor:S};this._bg=new t;const s={...e,fillColor:C};this._header=new o("",s),this._header.x=208,this._header.y=16,this._lines=[];for(let t=0;t<24;t++){const s=new o("",e);s.x=208,s.y=29+13*t,this._lines.push(s)}this._root=new n,this._root.addChild(this._bg),this._root.addChild(this._header);for(const e of this._lines)this._root.addChild(e)}_refreshPanel(){if(null===this._header||null===this._bg)return;const e=[];if(0===this._entries.length)e.push({text:"(no active filter chains)",dim:!0});else for(const t of this._entries){const s=[];t.hasMask&&s.push("mask"),t.cachedAsBitmap&&s.push("cached");const i=s.length>0?` [${s.join(",")}]`:"";e.push({text:`${t.drawableLabel} ${t.width}x${t.height}${i}`,dim:!1});for(let s=0;s<t.filters.length;s++){const i=t.filters[s];void 0!==i&&e.push({text:`  ${s}. ${i.constructor.name}`,dim:!1})}}const t=this.pipelineRows();if(t.length>0){e.push({text:"Pipeline:",dim:!0});for(const s of t){const t="  ".repeat(s.depth+1);e.push({text:`${t}${s.label}${s.enabled?"":" [off]"}`,dim:!s.enabled})}}this._header.text=`Render Passes: ${this.totalPasses}`;const s=Math.min(e.length,this._lines.length);for(let t=0;t<this._lines.length;t++){const i=this._lines[t];if(void 0===i)continue;const n=t<s?e[t]:void 0;void 0!==n?(i.text=n.text,i.style.fillColor=n.dim?$:S,i.visible=!0):(i.text="",i.visible=!1)}if(e.length>this._lines.length){const t=this._lines[this._lines.length-1],s=e.length-this._lines.length;void 0!==t&&(t.text=`... (+${s} more)`,t.style.fillColor=$,t.visible=!0)}const i=16+13*(1+s);this._bg.clear(),this._bg.fillColor=k,this._bg.drawRectangle(200,8,240,i)}}export{h as BoundingBoxesLayer,l as DebugLayer,F as DebugOverlay,p as HitTestLayer,g as PerformanceLayer,y as PointerStackLayer,T as RenderPassInspectorLayer};
 //# sourceMappingURL=exo.debug.esm.js.map