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

@@ -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

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);
         }