From 94edb6af057942cffd5a3818b1d39067cc2990ab Mon Sep 17 00:00:00 2001
From: eCode <miltoncandelero@gmail.com>
Date: Sun, 7 Aug 2022 20:03:17 -0300
Subject: [PATCH] added docs for the new extendable debug thingy

---
 README.md                               | 55 +++++++++++++++----------
 packages/base/src/SpineDebugRenderer.ts | 12 ++++++
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/README.md b/README.md
index 737f9d2c..f2aaf7a1 100644
--- a/README.md
+++ b/README.md
@@ -117,37 +117,50 @@ let spine = new PIXI.heaven.Spine(spineData);
 
 ### Debug
 
-To show bones and bounds you can set `yourSpine.drawDebug = true`  
-Only after you set `drawDebug` to true, debug graphics are created.
+To show debug graphics you can set `yourSpine.debug = new SpineDebugRenderer()`  
 
 Control what gets drawn with the following flags:
 
 ```js
-yourSpine.drawMeshHull = true;
-yourSpine.drawMeshTriangles = true;
-yourSpine.drawBones = true;
-yourSpine.drawPaths = true;
-yourSpine.drawBoundingBoxes = true;
-yourSpine.drawClipping = true;
-yourSpine.drawRegionAttachments = true;
+// Master toggle
+yourSpine.debug.drawDebug = true; 
+
+// Per feature toggle
+yourSpine.debug.drawMeshHull = true;
+yourSpine.debug.drawMeshTriangles = true;
+yourSpine.debug.drawBones = true;
+yourSpine.debug.drawPaths = true;
+yourSpine.debug.drawBoundingBoxes = true;
+yourSpine.debug.drawClipping = true;
+yourSpine.debug.drawRegionAttachments = true;
 ```
 
 To have even more control, you can customize the color and line thickness with
 ```js
-yourSpine.debugOptions.lineWidth = 1;
-yourSpine.debugOptions.regionAttachmentsColor = 0x0078ff;
-yourSpine.debugOptions.meshHullColor = 0x0078ff;
-yourSpine.debugOptions.meshTrianglesColor = 0xffcc00;
-yourSpine.debugOptions.clippingPolygonColor = 0xff00ff;
-yourSpine.debugOptions.boundingBoxesRectColor = 0x00ff00;
-yourSpine.debugOptions.boundingBoxesPolygonColor = 0x00ff00;
-yourSpine.debugOptions.boundingBoxesCircleColor = 0x00ff00;
-yourSpine.debugOptions.pathsCurveColor = 0xff0000;
-yourSpine.debugOptions.pathsLineColor = 0xff00ff;
-yourSpine.debugOptions.skeletonXYColor = 0xff0000;
-yourSpine.debugOptions.bonesColor = 0x00eecc;
+yourSpine.debug.debugOptions.lineWidth = 1;
+yourSpine.debug.debugOptions.regionAttachmentsColor = 0x0078ff;
+yourSpine.debug.debugOptions.meshHullColor = 0x0078ff;
+yourSpine.debug.debugOptions.meshTrianglesColor = 0xffcc00;
+yourSpine.debug.debugOptions.clippingPolygonColor = 0xff00ff;
+yourSpine.debug.debugOptions.boundingBoxesRectColor = 0x00ff00;
+yourSpine.debug.debugOptions.boundingBoxesPolygonColor = 0x00ff00;
+yourSpine.debug.debugOptions.boundingBoxesCircleColor = 0x00ff00;
+yourSpine.debug.debugOptions.pathsCurveColor = 0xff0000;
+yourSpine.debug.debugOptions.pathsLineColor = 0xff00ff;
+yourSpine.debug.debugOptions.skeletonXYColor = 0xff0000;
+yourSpine.debug.debugOptions.bonesColor = 0x00eecc;
 ```
 
+You can reuse a single debug renderer and they will share the debug settings!
+```js
+const debugRenderer = new SpineDebugRenderer();
+
+oneSpine.debug = debugRenderer;
+anotherSpine.debug = debugRenderer;
+```
+
+If you want to create your own debugger you can extend `SpineDebugRenderer` or create a class from scratch that implements `ISpineDebugRenderer`!
+
 ## Build & Development
 
 You will need to have [node][node] setup on your machine.
diff --git a/packages/base/src/SpineDebugRenderer.ts b/packages/base/src/SpineDebugRenderer.ts
index 50076ed0..8cbdee7a 100644
--- a/packages/base/src/SpineDebugRenderer.ts
+++ b/packages/base/src/SpineDebugRenderer.ts
@@ -7,12 +7,23 @@ import { AttachmentType } from "./core/AttachmentType";
 import { SkeletonBoundsBase } from "./core/SkeletonBoundsBase";
 
 /**
+ * Make a class that extends from this interface to create your own debug renderer.
  * @public
  */
 export interface ISpineDebugRenderer {
+    /**
+     * This will be called every frame, after the spine has been updated. 
+     */
     renderDebug(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void;
 
+    /**
+     *  This is called when the `spine.debug` object is set to null or when the spine is destroyed.
+     */
     unregisterSpine(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void
+
+    /**
+     * This is called when the `spine.debug` object is set to a new instance of a debug renderer.
+     */
     registerSpine(spine:SpineBase< ISkeleton, ISkeletonData, IAnimationState, IAnimationStateData>):void
 }
 
@@ -32,6 +43,7 @@ type DebugDisplayObjects = {
 }
 
 /**
+ * This is a debug renderer that uses PixiJS Graphics under the hood.
  * @public
  */
 export class SpineDebugRenderer implements ISpineDebugRenderer {