@melonjs/debug-plugin 14.8.2 → 15.0.0

package/README.md

@@ -9,7 +9,7 @@ Installation
 -------------------------------------------------------------------------------
 `$ [sudo] npm install @melonjs/debug-plugin`
 
-Then import and instantiante the debug plugin in your project. For example:
+Then import and instantiate the debug plugin in your project. For example:
 ```JavaScript
 import { utils, plugin } from 'melonjs';
 
@@ -23,30 +23,34 @@ import("@melonjs/debug-plugin").then((debugPlugin) => {
 Usage
 -------------------------------------------------------------------------------
 
-The Debug Panel is hidden by default and can be displayed using the `S` key, it will then provide the below information :
-![debug-panel](https://user-images.githubusercontent.com/4033090/138006717-cf3165a4-a52d-4855-a7c7-16b2a09ed124.png)
+The Debug Panel is hidden by default and can be displayed using the `S` key. It provides a compact HUD overlay with real-time engine diagnostics:
 
-* Amount of objects currently active in the current scene
-* Amount of draws operation
-* Amount of body shape (requires to enable the hitbox checkbox)
-* Amount of bounding box
-* Amount of sprites objects
-* Amount of objects currently inactive in the the object pool
-* Heap/memory usage
-* Frame update time (in ms)
-* Frame draw time (in ms)
-* Current fps rate vs target fps
+![debug-panel](debug-panel.png)
 
-> Note: Heap information requires starting Chrome [with](http://www.chromium.org/developers/how-tos/run-chromium-with-flags) `--enable-precise-memory-info`
+The panel displays the following information across three rows:
 
-Additionally, using the checkbox in the panel it is also possible to draw :
-* Shape and Bounding box for all objects
+* **#objects** — number of objects currently active in the scene
+* **#draws** — number of draw operations per frame
+* **hitbox / velocity / quadtree** — toggle checkboxes for debug overlays
+* **Update / Draw** — frame update and draw time in milliseconds
+* **Heap** — JS heap memory usage (used/total in MB, Chrome only)
+* **Pool** — number of objects currently in the object pool
+* **FPS** — current vs target frame rate
+* **Shapes / Sprites / Velocity / Bounds / Children** — per-frame counters for active engine objects
+
+Below the stats, two sparkline graphs show:
+* **Frame time graph** — stacked update (cyan) and draw (amber) times with a target frame time indicator
+* **Memory graph** — JS heap usage over time (Chrome only)
+
+> Note: Heap memory information is only available in Chromium-based browsers (Chrome, Edge, Opera) via the `performance.memory` API, which is deprecated but has no real-time alternative yet.
+
+Additionally, using the checkboxes in the panel it is also possible to draw:
+* Shape and bounding box for all objects
 * Current velocity vector
 * Quadtree spatial visualization
 
 Questions, need help ?
 -------------------------------------------------------------------------------
 If you need technical support, you can contact us through the following channels :
-* Forums: with melonJS 2 we moved to a new discourse [forum](https://melonjs.discourse.group), but we can still also find the previous one [here](http://www.html5gamedevs.com/forum/32-melonjs/)
 * Chat: come and chat with us on [discord](https://discord.gg/aur7JMk)
-* we tried to keep our [wikipage](https://github.com/melonjs/melonJS/wiki) up-to-date with useful links, tutorials, and anything related melonJS.
+* [Wiki](https://github.com/melonjs/melonJS/wiki) with useful links, tutorials, and anything related to melonJS

package/build/counters.d.ts

@@ -0,0 +1,6 @@
+export default class Counters extends Map<any, any> {
+    constructor(keys: any);
+    reset(): void;
+    inc(stat: any, value?: number): void;
+}
+//# sourceMappingURL=counters.d.ts.map

package/build/counters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"counters.d.ts","sourceRoot":"","sources":["../src/counters.js"],"names":[],"mappings":"AAAA;IACC,uBAMC;IAED,cAIC;IAED,qCAEC;CACD"}

package/build/debugPanel.d.ts

@@ -0,0 +1,51 @@
+export class DebugPanel {
+    constructor(debugToggle: any);
+    counters: Counters;
+    visible: boolean;
+    version: string;
+    debugToggle: any;
+    options: {
+        hitbox: string | boolean;
+        velocity: string | boolean;
+        quadtree: string | boolean;
+    };
+    updateHistory: Float32Array<ArrayBuffer>;
+    drawHistory: Float32Array<ArrayBuffer>;
+    memHistory: Float32Array<ArrayBuffer>;
+    historyIndex: number;
+    panel: HTMLDivElement | null;
+    panelWrap: HTMLDivElement | null;
+    stats: {};
+    frameUpdateStartTime: number;
+    frameDrawStartTime: number;
+    frameUpdateTime: number;
+    frameDrawTime: number;
+    _onResize: () => void;
+    _onBeforeUpdate: (time: any) => void;
+    _onAfterUpdate: (time: any) => void;
+    _onBeforeDraw: (time: any) => void;
+    _onAfterDraw: (time: any) => void;
+    /** @private */
+    private _buildPanel;
+    graphCanvas: HTMLCanvasElement | undefined;
+    memCanvas: HTMLCanvasElement | undefined;
+    /** @private */
+    private _syncPosition;
+    /** @private */
+    private _updatePanel;
+    /**
+     * show the debug panel
+     */
+    show(): void;
+    /**
+     * hide the debug panel
+     */
+    hide(): void;
+    /** @private */
+    private _drawQuadTree;
+    /** @private */
+    private _drawQuadTreeNode;
+    destroy(): void;
+}
+import Counters from "./counters";
+//# sourceMappingURL=debugPanel.d.ts.map

package/build/debugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"debugPanel.d.ts","sourceRoot":"","sources":["../src/debugPanel.js"],"names":[],"mappings":"AAOA;IACC,8BAwEC;IAvEA,mBAME;IAEF,iBAAoB;IACpB,gBAA4B;IAC5B,iBAA8B;IAI9B;;;;MAIC;IAGD,yCAAoD;IACpD,uCAAkD;IAClD,sCAAiD;IACjD,qBAAqB;IAIrB,6BAAiB;IACjB,iCAAqB;IACrB,UAAe;IAIf,6BAA6B;IAC7B,2BAA2B;IAC3B,wBAAwB;IACxB,sBAAsB;IAGtB,sBAEC;IACD,qCAEC;IACD,oCAKC;IACD,mCAGC;IACD,kCAMC;IAWF,eAAe;IACf,oBAuHC;IApCA,2CAAmD;IAkBlD,yCAAiD;IAoBnD,eAAe;IACf,sBAMC;IAED,eAAe;IACf,qBAiDC;IAED;;OAEG;IACH,aAOC;IAED;;OAEG;IACH,aAMC;IAED,eAAe;IACf,sBAWC;IAED,eAAe;IACf,0BAmBC;IAED,gBAWC;CACD;qBA9UoB,YAAY"}

package/build/graphs.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Draw the stacked frame-time sparkline (update + draw).
+ * @param {HTMLCanvasElement} canvas
+ * @param {Float32Array} updateHistory
+ * @param {Float32Array} drawHistory
+ * @param {number} historyIndex - current write position in the ring buffer
+ * @param {HTMLElement} peakEl - element to display peak value
+ */
+export function drawFrameGraph(canvas: HTMLCanvasElement, updateHistory: Float32Array, drawHistory: Float32Array, historyIndex: number, peakEl: HTMLElement): void;
+/**
+ * Draw the memory heap area graph.
+ * @param {HTMLCanvasElement} canvas
+ * @param {Float32Array} memHistory - heap usage in MB
+ * @param {number} historyIndex - current write position in the ring buffer
+ * @param {HTMLElement} peakEl - element to display peak value
+ */
+export function drawMemGraph(canvas: HTMLCanvasElement, memHistory: Float32Array, historyIndex: number, peakEl: HTMLElement): void;
+//# sourceMappingURL=graphs.d.ts.map

package/build/graphs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphs.d.ts","sourceRoot":"","sources":["../src/graphs.js"],"names":[],"mappings":"AAcA;;;;;;;GAOG;AACH,uCANW,iBAAiB,iBACjB,YAAY,eACZ,YAAY,gBACZ,MAAM,UACN,WAAW,QAqErB;AAED;;;;;;GAMG;AACH,qCALW,iBAAiB,cACjB,YAAY,gBACZ,MAAM,UACN,WAAW,QA2DrB"}

package/{src/index.js → build/index.d.ts}

@@ -1,14 +1,10 @@
-import { utils, plugin, input, event } from "melonjs";
-import { name, version, homepage, peerDependencies } from "../package.json";
-import { DebugPanel } from "./debugPanel";
-
 /**
  * @classdesc
  * a simple debug panel plugin <br>
  * <img src="images/debugPanel.png"/> <br>
  * <b>usage : </b><br>
  * &bull; upon loading the debug panel, it will be automatically registered under me.plugins.debugPanel <br>
- * &bull; you can then press the default "s" key to show or hide the panel, or use me.plugins.debugPanel.show() and me.plugins.debugPanel.show(), or add #debug as a parameter to your URL e.g. http://myURL/index.html#debug <br>
+ * &bull; you can then press the default "s" key to show or hide the panel, or use me.plugins.debugPanel.show() and me.plugins.debugPanel.hide(), or add #debug as a parameter to your URL e.g. http://myURL/index.html#debug <br>
  * &bull; default key can be configured using the following parameters in the url : e.g. http://myURL/index.html#debugToggleKey=d <br>
  * <b>the debug panel provides the following information : </b><br>
  * &bull; amount of total objects currently active in the current stage <br>
@@ -32,54 +28,27 @@ export class DebugPanelPlugin extends plugin.BasePlugin {
      * @param {number} [debugToggle=input.KEY.S] - a default key to toggle the debug panel visibility state
      * @see input.KEY for default key options
      */
-    constructor(debugToggle = input.KEY.S) {
-        // call the super constructor
-        super();
-
-        // minimum melonJS version expected
-        this.version = peerDependencies["melonjs"];
-
-        // hello world
-        console.log(`${name} ${version} | ${homepage}`);
-
-        this.debugToggle = debugToggle;
-
-        this.panel = new DebugPanel(debugToggle);
-
-        this.keyHandler = event.on(event.KEYDOWN, (action, keyCode) => {
-            if (keyCode === this.debugToggle) {
-                this.toggle();
-            }
-        });
-
-        // if "#debug" is present in the URL
-        if (utils.getUriFragment().debug === true) {
-            this.show();
-        } // else keep it hidden
-    }
-
+    constructor(debugToggle?: number);
+    debugToggle: number;
+    panel: DebugPanel;
+    _onKeyDown: (_action: any, keyCode: any) => void;
+    /**
+     * destroy the debug plugin
+     */
+    destroy(): void;
     /**
      * show the debug panel
      */
-    show() {
-        this.panel.show();
-    }
-
+    show(): void;
     /**
      * hide the debug panel
      */
-    hide() {
-        this.panel.hide();
-    }
-
+    hide(): void;
     /**
      * toggle the debug panel visibility state
      */
-    toggle() {
-        if (this.panel.visible) {
-            this.panel.hide();
-        } else {
-            this.panel.show();
-        }
-    }
+    toggle(): void;
 }
+import { plugin } from "melonjs";
+import { DebugPanel } from "./debugPanel.js";
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH;IACC;;;OAGG;IACH,0BAHW,MAAM,EAwBhB;IAdA,oBAA8B;IAC9B,kBAAwC;IAExC,iDAIC;IASF;;OAEG;IACH,gBAGC;IAED;;OAEG;IACH,aAEC;IAED;;OAEG;IACH,aAEC;IAED;;OAEG;IACH,eAMC;CACD;uBAzF2C,SAAS;2BAE1B,iBAAiB"}