bee-ladybug 0.6.1 → 0.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bee-ladybug",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "Universal telemetry and visual inspection overlay for Canvas, DOM, Python and AI flows.",
   "type": "module",
   "main": "src/index.js",

package/src/adapters/CanvasAdapter.js

@@ -70,6 +70,8 @@ export class CanvasAdapter {
         this.#fps = 0;
         this.#fpsSamples = [];
         this.#wasColliding = new Set();
+        this.#names = new Map();
+        this.#overlayStyle = null;
         this.#onResize = () => this.#syncOverlay();
         this.#onTick = () => {
             this.#rafId = requestAnimationFrame(this.#onTick);
@@ -93,6 +95,10 @@ export class CanvasAdapter {
     #fps;
     #fpsSamples;
     #wasColliding;
+    /** id -> display name, refreshed on every pump. */
+    #names;
+    /** Last style values written to the overlay. */
+    #overlayStyle;
     #onResize;
     #onTick;
 
@@ -126,6 +132,12 @@ export class CanvasAdapter {
             source: this.source,
             message: `CanvasAdapter attached (${this.entities.length} entities).`
         });
+        if (this.overlayEnabled && !this.canvas) {
+            this.core?.sendData('warn', {
+                source: this.source,
+                message: 'no canvas: hitboxes are not drawn. Pass { canvas } or call setCanvas().'
+            });
+        }
         this.core?.sendData('state', {
             source: this.source,
             key: 'adapter',
@@ -146,6 +158,11 @@ export class CanvasAdapter {
             window.removeEventListener('resize', this.#onResize);
             window.removeEventListener('scroll', this.#onResize, true);
         }
+        this.#wasColliding = new Set();
+        this.#names = new Map();
+        this.#lastPump = 0;
+        this.#fps = 0;
+        this.#fpsSamples = [];
         return this;
     }
 
@@ -163,10 +180,26 @@ export class CanvasAdapter {
         return this;
     }
 
+    /**
+     * Stop the internal loop and make a manual `pump()` valid again.
+     * Mirror of `startAutoPump()`.
+     */
+    stopAutoPump() {
+        this.autoPump = false;
+        this.#stopAutoPumpLoop();
+        return this;
+    }
+
     /** @param {HTMLCanvasElement | null} canvas */
     setCanvas(canvas) {
         this.canvas = canvas;
-        this.#syncOverlay();
+        if (!this.#attached) return this;
+        if (!canvas) {
+            this.#unmountOverlay();
+        } else if (this.overlayEnabled) {
+            if (this.#overlay) this.#syncOverlay();
+            else this.#mountOverlay();
+        }
         return this;
     }
 
@@ -327,7 +360,9 @@ export class CanvasAdapter {
 
     #emitCollisionEdges(boxes) {
         const now = new Set();
+        const names = new Map();
         for (let i = 0; i < boxes.length; i++) {
+            names.set(boxes[i].id, boxes[i].name);
             if (!boxes[i].hit) continue;
             now.add(boxes[i].id);
             if (!this.#wasColliding.has(boxes[i].id)) {
@@ -339,13 +374,14 @@ export class CanvasAdapter {
         }
         for (const id of this.#wasColliding) {
             if (now.has(id)) continue;
-            const name = idFromKey(id);
+            const name = names.get(id) ?? this.#names.get(id) ?? id;
             this.core.sendData('log', {
                 source: this.source,
                 message: `${name} left collision`
             });
         }
         this.#wasColliding = now;
+        this.#names = names;
     }
 
     #drawHitboxes(boxes, hostCtx) {
@@ -386,7 +422,7 @@ export class CanvasAdapter {
     }
 
     #mountOverlay() {
-        if (typeof document === 'undefined' || this.#overlay) return;
+        if (typeof document === 'undefined' || this.#overlay || !this.canvas) return;
         const canvas = document.createElement('canvas');
         canvas.setAttribute('data-bee-ladybug-canvas', '');
         canvas.style.pointerEvents = 'none';
@@ -395,12 +431,14 @@ export class CanvasAdapter {
         canvas.style.margin = '0';
         document.body.appendChild(canvas);
         this.#overlay = canvas;
+        this.#overlayStyle = null;
         this.#syncOverlay();
     }
 
     #unmountOverlay() {
         if (this.#overlay?.parentNode) this.#overlay.parentNode.removeChild(this.#overlay);
         this.#overlay = null;
+        this.#overlayStyle = null;
     }
 
     #syncOverlay() {
@@ -408,14 +446,22 @@ export class CanvasAdapter {
         const overlay = this.#overlay;
         if (!host || !overlay) return;
         const rect = host.getBoundingClientRect();
-        overlay.width = host.width;
-        overlay.height = host.height;
-        overlay.style.left = `${rect.left}px`;
-        overlay.style.top = `${rect.top}px`;
-        overlay.style.width = `${rect.width}px`;
-        overlay.style.height = `${rect.height}px`;
+        // Assigning width/height clears and reallocates the bitmap: only when they change.
+        if (overlay.width !== host.width) overlay.width = host.width;
+        if (overlay.height !== host.height) overlay.height = host.height;
         const hidden = !this.#reporting || (this.core && this.core.visible === false);
-        overlay.style.display = hidden ? 'none' : 'block';
+        const next = {
+            left: `${rect.left}px`,
+            top: `${rect.top}px`,
+            width: `${rect.width}px`,
+            height: `${rect.height}px`,
+            display: hidden ? 'none' : 'block'
+        };
+        const prev = this.#overlayStyle;
+        for (const key of Object.keys(next)) {
+            if (!prev || prev[key] !== next[key]) overlay.style[key] = next[key];
+        }
+        this.#overlayStyle = next;
     }
 
     #enable() {
@@ -487,11 +533,6 @@ function isPrimary(entity) {
     return key === 'player' || key === 'hero' || entity.primary === true;
 }
 
-function idFromKey(id) {
-    const parts = String(id).split(':');
-    return parts[parts.length - 1] || id;
-}
-
 function round1(value) {
     return Math.round(Number(value) * 10) / 10;
 }

package/src/adapters/WebDOMAdapter.js

@@ -17,6 +17,12 @@
 import { isReportNoise } from '../core/ReportExporter.js';
 
 const MAX_PROBLEM_ROWS = 40;
+const OBSERVE_OPTIONS = Object.freeze({
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
+});
 
 export const WEB_DOM_ADAPTER_DEFAULTS = Object.freeze({
     overlay: true,
@@ -74,6 +80,7 @@ export class WebDOMAdapter {
         this.#seenAttr = 0;
         this.#mutTimer = 0;
         this.#lastHoverKey = '';
+        this.#overlayStyle = null;
         this.#onMove = (event) => {
             this.#pointer.x = event.clientX;
             this.#pointer.y = event.clientY;
@@ -104,6 +111,8 @@ export class WebDOMAdapter {
     #seenAttr;
     #mutTimer;
     #lastHoverKey;
+    /** Last style values written to the overlay. */
+    #overlayStyle;
     #onMove;
     #onResize;
     #onTick;
@@ -118,6 +127,7 @@ export class WebDOMAdapter {
         if (this.core && typeof this.core.subscribe === 'function') {
             this.#unsubscribe = this.core.subscribe((packet) => this.#onCore(packet));
         }
+        this.#reporting = true;
         if (this.overlayEnabled) this.#mountOverlay();
         if (typeof window !== 'undefined') {
             window.addEventListener('mousemove', this.#onMove, true);
@@ -126,18 +136,12 @@ export class WebDOMAdapter {
         }
         if (this.root && typeof MutationObserver !== 'undefined') {
             this.#observer = new MutationObserver(this.#onMutate);
-            this.#observer.observe(this.root, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
-            });
+            this.#observer.observe(this.root, OBSERVE_OPTIONS);
         }
         if (this.autoTick && typeof requestAnimationFrame === 'function') {
             this.#rafId = requestAnimationFrame(this.#onTick);
         }
 
-        this.#reporting = true;
         this.core?.registerAdapter('dom', {
             label: 'DOM',
             enabled: true,
@@ -178,24 +182,41 @@ export class WebDOMAdapter {
             window.removeEventListener('scroll', this.#onResize, true);
         }
         this.#unmountOverlay();
+        this.hover = null;
+        this.#lastHoverKey = '';
+        this.#lastPump = 0;
+        this.#fps = 0;
+        this.#pointer = { x: 0, y: 0, dirty: false };
+        this.#mutAdded = 0;
+        this.#mutRemoved = 0;
+        this.#mutAttr = 0;
+        this.#seenAdded = 0;
+        this.#seenRemoved = 0;
+        this.#seenAttr = 0;
         return this;
     }
 
     /** @param {ParentNode | null} root */
     setRoot(root) {
         this.root = root;
-        if (this.#attached && this.#observer && root) {
-            this.#observer.disconnect();
-            this.#observer.observe(root, {
-                childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ['class', 'style', 'hidden', 'disabled', 'open']
-            });
+        if (this.#observer) this.#observer.disconnect();
+        if (!root) {
+            this.#observer = null;
+        } else if (this.#attached && typeof MutationObserver !== 'undefined') {
+            if (!this.#observer) this.#observer = new MutationObserver(this.#onMutate);
+            this.#observer.observe(root, OBSERVE_OPTIONS);
         }
+        if (this.hover && !this.#rootHolds(this.hover)) this.hover = null;
         return this;
     }
 
+    #rootHolds(node) {
+        const root = this.root;
+        if (!root) return false;
+        if (typeof document !== 'undefined' && root === document) return true;
+        return node === root || Boolean(root.contains?.(node));
+    }
+
     /**
      * Box model of the hover and watched nodes, layout problems under root,
      * and the latest mutation counts. Returns null when detached.
@@ -311,6 +332,7 @@ export class WebDOMAdapter {
                 this.#lastHoverKey = '';
                 this.core.sendData('state', { source: this.source, key: 'hover', value: '—' });
                 this.core.sendData('state', { source: this.source, key: 'box', value: '—' });
+                this.core.sendData('state', { source: this.source, key: 'display', value: '—' });
             }
             return;
         }
@@ -341,7 +363,7 @@ export class WebDOMAdapter {
     }
 
     #queueMutations(records) {
-        if (this.frozen) return;
+        if (this.frozen || !this.#reporting) return;
         for (let i = 0; i < records.length; i++) {
             const rec = records[i];
             if (isBeeChrome(rec.target)) continue;
@@ -433,12 +455,14 @@ export class WebDOMAdapter {
         canvas.style.margin = '0';
         document.body.appendChild(canvas);
         this.#overlay = canvas;
+        this.#overlayStyle = null;
         this.#syncOverlay();
     }
 
     #unmountOverlay() {
         if (this.#overlay?.parentNode) this.#overlay.parentNode.removeChild(this.#overlay);
         this.#overlay = null;
+        this.#overlayStyle = null;
     }
 
     #syncOverlay() {
@@ -447,12 +471,22 @@ export class WebDOMAdapter {
         const dpr = Math.min(window.devicePixelRatio || 1, 2);
         const w = window.innerWidth;
         const h = window.innerHeight;
-        canvas.style.width = `${w}px`;
-        canvas.style.height = `${h}px`;
-        canvas.width = Math.round(w * dpr);
-        canvas.height = Math.round(h * dpr);
+        // Assigning width/height clears and reallocates the bitmap: only when they change.
+        const bitmapW = Math.round(w * dpr);
+        const bitmapH = Math.round(h * dpr);
+        if (canvas.width !== bitmapW) canvas.width = bitmapW;
+        if (canvas.height !== bitmapH) canvas.height = bitmapH;
         const hidden = !this.#reporting || (this.core && this.core.visible === false);
-        canvas.style.display = hidden ? 'none' : 'block';
+        const next = {
+            width: `${w}px`,
+            height: `${h}px`,
+            display: hidden ? 'none' : 'block'
+        };
+        const prev = this.#overlayStyle;
+        for (const key of Object.keys(next)) {
+            if (!prev || prev[key] !== next[key]) canvas.style[key] = next[key];
+        }
+        this.#overlayStyle = next;
     }
 
     #enable() {
@@ -462,6 +496,11 @@ export class WebDOMAdapter {
 
     #disable() {
         this.#reporting = false;
+        if (this.#mutTimer && typeof clearTimeout === 'function') clearTimeout(this.#mutTimer);
+        this.#mutTimer = 0;
+        this.#mutAdded = 0;
+        this.#mutRemoved = 0;
+        this.#mutAttr = 0;
         this.#syncOverlay();
     }
 

package/src/core/BeeLadybugCore.js

@@ -10,7 +10,7 @@ import { UIOverlay } from './UIOverlay.js';
 import { buildAssistantSnapshot, normalizeAssistant } from './AiAssistant.js';
 import { exportReport as writeReport } from './ReportExporter.js';
 
-export const BEE_LADYBUG_VERSION = '0.6.1';
+export const BEE_LADYBUG_VERSION = '0.6.3';
 
 export const CORE_DEFAULTS = Object.freeze({
     toggleKey: 'F2',

package/src/index.d.ts

@@ -334,6 +334,7 @@ export class CanvasAdapter {
     attach(): this;
     detach(): this;
     startAutoPump(): this;
+    stopAutoPump(): this;
     setCanvas(canvas: HTMLCanvasElement | null): this;
     setEntities(entities: CanvasEntity[]): this;
     pump(ctx?: CanvasRenderingContext2D): this;
@@ -355,6 +356,8 @@ export interface WebDOMAdapterOptions {
 
 export const WEB_DOM_ADAPTER_DEFAULTS: Required<Omit<WebDOMAdapterOptions, 'root'>>;
 
+export function domNoiseQuiet(cssEnabled: boolean, frozen: boolean, timeScale: number): boolean;
+
 export class WebDOMAdapter {
     core: BeeLadybugCore | null;
     root: ParentNode | null;

package/src/index.js

@@ -2,7 +2,7 @@ export { BeeLadybugCore, BEE_LADYBUG_VERSION, CORE_DEFAULTS, WELL_KNOWN_TYPES, f
 export { exportReport, isReportNoise } from './core/ReportExporter.js';
 export { UIOverlay } from './core/UIOverlay.js';
 export { CanvasAdapter, CANVAS_ADAPTER_DEFAULTS } from './adapters/CanvasAdapter.js';
-export { WebDOMAdapter, WEB_DOM_ADAPTER_DEFAULTS } from './adapters/WebDOMAdapter.js';
+export { WebDOMAdapter, WEB_DOM_ADAPTER_DEFAULTS, domNoiseQuiet } from './adapters/WebDOMAdapter.js';
 export { CSSAdapter, CSS_ADAPTER_DEFAULTS } from './adapters/CSSAdapter.js';
 export { AntAdapter, ANT_ADAPTER_DEFAULTS } from './adapters/AntAdapter.js';
 export { SpiderAdapter, SPIDER_ADAPTER_DEFAULTS } from './adapters/SpiderAdapter.js';