From 2dc4b30555a3c54bc514b12b877712be438f3aca Mon Sep 17 00:00:00 2001
From: Tim Martin <starwed@gmail.com>
Date: Mon, 15 Jan 2018 13:30:05 -0500
Subject: [PATCH] Fix for debugging non-renderable components

The debug layer assumed that any rendered components would have their own draw layer.
However, it's completely possible to have e.g. Collision components that aren't rendered,
and we want to be able to visualize these hitboxes as well.

When an entity doesn't have a specific draw layer, render it with the default viewport transforms.
---
 playgrounds/parallax.html |  5 +++++
 src/debug/debug-layer.js  | 13 +++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/playgrounds/parallax.html b/playgrounds/parallax.html
index 3224eb08..d5e2f391 100644
--- a/playgrounds/parallax.html
+++ b/playgrounds/parallax.html
@@ -73,6 +73,11 @@
         Crafty.e("Background, Bar, Collision, WiredHitBox").color("blue").attr({x: 100*i, y: 10, z: 30});
         Crafty.e("Midground, Bar, Collision, WiredHitBox").color("purple").attr({x: 100*i, y: 20, z: 30});
         Crafty.e("Foreground, Bar, Collision, WiredHitBox").color("yellow").attr({x: 100*i, y: 30, z: 10});
+
+        // A hitbox not attached to a renderable entity should track the default layer
+        Crafty.e("2D, Collision, WiredHitBox").debugStroke("green").attr({x: 100*i, y: 40, z: 100, h: 100, w: 31});
+        Crafty.e("ActionLayer, Bar").color("brown").attr({x: 100*i, y: 40, z: 100});
+        
       }
 
       // Some text that shows the viewport's current position, and sits in the UI layer
diff --git a/src/debug/debug-layer.js b/src/debug/debug-layer.js
index 4e541f9f..6c31c3a2 100644
--- a/src/debug/debug-layer.js
+++ b/src/debug/debug-layer.js
@@ -454,12 +454,17 @@ Crafty.DebugCanvas = {
             current = q[i];
 
             // If necessary, update the view transform to match the current entities layer
-            if (lastLayer !== current._drawlayer){
-                view = current._drawLayer._viewportRect();
-                ctx.setTransform(view._scale, 0, 0, view._scale, Math.round(-view._x*view._scale), Math.round(-view._y*view._scale));
+            // If the current entity has no layer, switch back to the viewport's transform
+            if (lastLayer !== current._drawLayer){
+                if (current._drawLayer) {
+                    view = current._drawLayer._viewportRect();
+                    ctx.setTransform(view._scale, 0, 0, view._scale, Math.round(-view._x*view._scale), Math.round(-view._y*view._scale));
+                } else {
+                    view = Crafty.viewport;
+                    ctx.setTransform(view._scale, 0, 0, view._scale, Math.round(view._x*view._scale), Math.round(view._y*view._scale));
+                }
                 lastLayer = current._drawLayer;
             }
-
             current.debugDraw(ctx);
         }