fix: Rectangle line renderer now respects z order

CHANGELOG.md

@@ -23,7 +23,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
--
+- Fixed issue where Rectangle line renderer did not respect z order
+
 ### Updates
 
 -

src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts

@@ -357,8 +357,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
   }
 
   public drawLine(start: Vector, end: Vector, color: Color, thickness = 1) {
-    const rectangleRenderer = this._renderers.get('ex.rectangle') as RectangleRenderer;
-    rectangleRenderer.drawLine(start, end, color, thickness);
+    this.draw<RectangleRenderer>('ex.rectangle', start, end, color, thickness);
   }
 
   public drawRectangle(pos: Vector, width: number, height: number, color: Color, stroke?: Color, strokeThickness?: number) {

src/engine/Graphics/Context/rectangle-renderer/rectangle-renderer.ts

@@ -70,6 +70,14 @@ export class RectangleRenderer implements RendererPlugin {
     return false;
   }
 
+  draw(...args: any[]): void {
+    if (args[0] instanceof Vector && args[1] instanceof Vector) {
+      this.drawLine.apply(this, args);
+    } else {
+      this.drawRectangle.apply(this, args);
+    }
+  }
+
   drawLine(start: Vector, end: Vector, color: Color, thickness: number = 1) {
 
     if (this._isFull()) {
@@ -184,7 +192,13 @@ export class RectangleRenderer implements RendererPlugin {
     vertexBuffer[this._vertexIndex++] = strokeThickness / width;
   }
 
-  draw(pos: Vector, width: number, height: number, color: Color, stroke: Color = Color.Transparent, strokeThickness: number = 0): void {
+  drawRectangle(
+    pos: Vector,
+    width: number,
+    height: number,
+    color: Color,
+    stroke: Color = Color.Transparent,
+    strokeThickness: number = 0): void {
     if (this._isFull()) {
       this.flush();
     }

src/spec/ExcaliburGraphicsContextSpec.ts

@@ -389,27 +389,30 @@ describe('The ExcaliburGraphicsContext', () => {
       const rectangleRenderer = sut.get('ex.rectangle');
       spyOn(rectangleRenderer, 'flush').and.callThrough();
 
+      sut.drawLine(ex.vec(0, 0), ex.vec(100, 100), ex.Color.Red, 2);
+      expect(rectangleRenderer.flush).withContext('rectangle line render not flusehd yet').not.toHaveBeenCalled();
+
       sut.drawCircle(ex.Vector.Zero, 100, ex.Color.Red, ex.Color.Black, 2);
       expect(circleRenderer.flush).withContext('circle is batched not flushed yet').not.toHaveBeenCalled();
+      expect(rectangleRenderer.flush).withContext('rectangle line render').toHaveBeenCalled();
 
       sut.drawImage(tex.image, 0, 0, tex.width, tex.height, 20, 20);
       expect(circleRenderer.flush).withContext('circle renderer switched, flush required').toHaveBeenCalled();
       expect(imageRenderer.flush).withContext('image batched not yet flushed').not.toHaveBeenCalled();
 
       sut.drawRectangle(ex.Vector.Zero, 50, 50, ex.Color.Blue, ex.Color.Green, 2);
       expect(imageRenderer.flush).toHaveBeenCalled();
-      expect(rectangleRenderer.flush).withContext('rectangle batched').not.toHaveBeenCalled();
 
       sut.flush();
-      expect(rectangleRenderer.flush).toHaveBeenCalled();
 
-      expect(rectangleRenderer.flush).toHaveBeenCalledTimes(1);
+      // Rectangle renderer handles lines and rectangles why it's twice
+      expect(rectangleRenderer.flush).toHaveBeenCalledTimes(2);
       expect(circleRenderer.flush).toHaveBeenCalledTimes(1);
       expect(imageRenderer.flush).toHaveBeenCalledTimes(1);
 
       await expectAsync(flushWebGLCanvasTo2D(canvasElement)).toEqualImage(
         'src/spec/images/ExcaliburGraphicsContextSpec/painter-order-circle-image-rect.png',
-        .95
+        .97
       );
     });