fix: [#3119] Fix graphics type + apply strictness to Graphics types (#…

…3120)


Closes #3119 

## Changes:

- Fixes the Graphics.tint nullability type
- Adds TS strict to the Graphics API subtree

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
+- Fixed invalid graphics types around `ex.Graphic.tint`
 - improve types to disallow invalid combo of collider/width/height/radius in actor args
 - only add default color graphic for the respective collider used
 - Fixed issue where `ex.SpriteFont` did not respect scale when measuring text
@@ -63,6 +64,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Changed
 
+- Applied increased TS strictness for the Graphics API subtree
 - Applied increased TS strictness for the TileMap API subtree
 
 <!--------------------------------- DO NOT EDIT BELOW THIS LINE --------------------------------->

src/engine/Graphics/Animation.ts

@@ -186,15 +186,15 @@ export class Animation extends Graphic implements HasTick {
 
   public override get width(): number {
     const maybeFrame = this.currentFrame;
-    if (maybeFrame) {
+    if (maybeFrame && maybeFrame.graphic) {
       return Math.abs(maybeFrame.graphic.width * this.scale.x);
     }
     return 0;
   }
 
   public override get height(): number {
     const maybeFrame = this.currentFrame;
-    if (maybeFrame) {
+    if (maybeFrame && maybeFrame.graphic) {
       return Math.abs(maybeFrame.graphic.height * this.scale.y);
     }
     return 0;
@@ -512,7 +512,7 @@ export class Animation extends Graphic implements HasTick {
   }
 
   protected _drawImage(ctx: ExcaliburGraphicsContext, x: number, y: number) {
-    if (this.currentFrame) {
+    if (this.currentFrame && this.currentFrame.graphic) {
       this.currentFrame.graphic.draw(ctx, x, y);
     }
   }

src/engine/Graphics/Context/ExcaliburGraphicsContext.ts

@@ -130,8 +130,8 @@ export interface ExcaliburGraphicsContextOptions {
 export interface ExcaliburGraphicsContextState {
   opacity: number;
   z: number;
-  tint: Color;
-  material: Material;
+  tint: Color | null | undefined;
+  material: Material | null | undefined;
 }
 export interface LineGraphicsOptions {
   color?: Color;
@@ -223,7 +223,7 @@ export interface ExcaliburGraphicsContext {
   /**
    * Sets the tint color to be multiplied by any images drawn, default is black 0xFFFFFFFF
    */
-  tint: Color;
+  tint: Color | null | undefined;
 
   /**
    * Resets the current transform to the identity matrix
@@ -368,7 +368,7 @@ export interface ExcaliburGraphicsContext {
    * This allows customs shaders to be used but draw calls are no longer batched by default.
    * @param material
    */
-  material: Material;
+  material: Material | null | undefined;
 
   /**
    * Creates and initializes the material which compiles the internal shader

src/engine/Graphics/Context/ExcaliburGraphicsContext2DCanvas.ts

@@ -43,7 +43,7 @@ class ExcaliburGraphicsContext2DCanvasDebug implements DebugDraw {
   drawLine(start: Vector, end: Vector, lineOptions: LineGraphicsOptions = { color: Color.Black }): void {
     this._ex.__ctx.save();
     this._ex.__ctx.beginPath();
-    this._ex.__ctx.strokeStyle = lineOptions.color.toString();
+    this._ex.__ctx.strokeStyle = lineOptions.color?.toString() ?? '';
     this._ex.__ctx.moveTo(
       this._ex.snapToPixel ? ~~(start.x + pixelSnapEpsilon) : start.x,
       this._ex.snapToPixel ? ~~(start.y + pixelSnapEpsilon) : start.y
@@ -88,7 +88,7 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
    * Meant for internal use only. Access the internal context at your own risk and no guarantees this will exist in the future.
    * @internal
    */
-  public __ctx: CanvasRenderingContext2D;
+  public __ctx!: CanvasRenderingContext2D;
   public get width() {
     return this.__ctx.canvas.width;
   }
@@ -119,11 +119,11 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
     this._state.current.opacity = value;
   }
 
-  public get tint(): Color {
+  public get tint(): Color | null | undefined {
     return this._state.current.tint;
   }
 
-  public set tint(color: Color) {
+  public set tint(color: Color | null | undefined) {
     this._state.current.tint = color;
   }
 
@@ -141,9 +141,9 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
     const { canvasElement, context, enableTransparency, snapToPixel, antialiasing: smoothing, backgroundColor } = options;
     this.__ctx =
       context ??
-      canvasElement.getContext('2d', {
+      (canvasElement.getContext('2d', {
         alpha: enableTransparency ?? true
-      });
+      }) as CanvasRenderingContext2D);
     if (!this.__ctx) {
       throw new Error('Cannot build new ExcaliburGraphicsContext2D for some reason!');
     }
@@ -209,7 +209,7 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
     const args = [image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight]
       .filter((a) => a !== undefined)
       .map((a) => (typeof a === 'number' && this.snapToPixel ? ~~a : a));
-    this.__ctx.drawImage.apply(this.__ctx, args);
+    this.__ctx.drawImage.apply(this.__ctx, args as any);
     GraphicsDiagnostics.DrawCallCount++;
     GraphicsDiagnostics.DrawnImagesCount = 1;
   }
@@ -341,17 +341,17 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
     // pass
   }
 
-  public set material(material: Material | null) {
+  public set material(material: Material | undefined | null) {
     this._state.current.material = material;
   }
 
-  public get material(): Material | null {
+  public get material(): Material | undefined | null {
     return this._state.current.material;
   }
 
   public createMaterial(options: Omit<MaterialOptions, 'graphicsContext'>): Material {
     // pass
-    return null;
+    return null as any;
   }
 
   clear(): void {
@@ -370,6 +370,6 @@ export class ExcaliburGraphicsContext2DCanvas implements ExcaliburGraphicsContex
   }
 
   dispose(): void {
-    this.__ctx = null;
+    this.__ctx = undefined as any;
   }
 }

src/engine/Graphics/Context/ExcaliburGraphicsContextWebGL.ts

@@ -61,8 +61,8 @@ class ExcaliburGraphicsContextWebGLDebug implements DebugDraw {
    * @param end
    * @param lineOptions
    */
-  drawLine(start: Vector, end: Vector, lineOptions: LineGraphicsOptions = { color: Color.Black }): void {
-    this._webglCtx.draw<LineRenderer>('ex.line', start, end, lineOptions.color);
+  drawLine(start: Vector, end: Vector, lineOptions?: LineGraphicsOptions): void {
+    this._webglCtx.draw<LineRenderer>('ex.line', start, end, lineOptions?.color ?? Color.Black);
   }
 
   /**
@@ -103,8 +103,8 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     (instance) => {
       instance.priority = 0;
       instance.z = 0;
-      instance.renderer = undefined;
-      instance.args = undefined;
+      instance.renderer = undefined as any;
+      instance.args = undefined as any;
       return instance;
     },
     4000
@@ -114,15 +114,15 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
   private _drawCalls: DrawCall[] = new Array(4000).fill(null);
 
   // Main render target
-  private _renderTarget: RenderTarget;
+  private _renderTarget!: RenderTarget;
 
   // Quad boundary MSAA
-  private _msaaTarget: RenderTarget;
+  private _msaaTarget!: RenderTarget;
 
   // Postprocessing is a tuple with 2 render targets, these are flip-flopped during the postprocessing process
   private _postProcessTargets: RenderTarget[] = [];
 
-  private _screenRenderer: ScreenPassPainter;
+  private _screenRenderer!: ScreenPassPainter;
 
   private _postprocessors: PostProcessor[] = [];
   /**
@@ -160,7 +160,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
 
   public textureLoader: TextureLoader;
 
-  public materialScreenTexture: WebGLTexture;
+  public materialScreenTexture!: WebGLTexture | null;
 
   public get z(): number {
     return this._state.current.z;
@@ -178,11 +178,11 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     this._state.current.opacity = value;
   }
 
-  public get tint(): Color {
+  public get tint(): Color | undefined | null {
     return this._state.current.tint;
   }
 
-  public set tint(color: Color) {
+  public set tint(color: Color | undefined | null) {
     this._state.current.tint = color;
   }
 
@@ -234,13 +234,13 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     } = options;
     this.__gl =
       context ??
-      canvasElement.getContext('webgl2', {
+      (canvasElement.getContext('webgl2', {
         antialias: antialiasing ?? this.smoothing,
         premultipliedAlpha: false,
         alpha: enableTransparency ?? this.transparency,
         depth: false,
         powerPreference: powerPreference ?? 'high-performance'
-      });
+      }) as WebGL2RenderingContext);
     if (!this.__gl) {
       throw Error('Failed to retrieve webgl context from browser');
     }
@@ -287,7 +287,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
       this._renderers.clear();
       this._drawCallPool.dispose();
       this._drawCalls.length = 0;
-      this.__gl = null;
+      this.__gl = null as any;
     }
   }
 
@@ -323,6 +323,9 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     this.register(new LineRenderer());
 
     this.materialScreenTexture = gl.createTexture();
+    if (!this.materialScreenTexture) {
+      throw new Error('');
+    }
     gl.bindTexture(gl.TEXTURE_2D, this.materialScreenTexture);
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
@@ -370,11 +373,11 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     renderer.initialize(this.__gl, this);
   }
 
-  public get(rendererName: string): RendererPlugin {
+  public get(rendererName: string): RendererPlugin | undefined {
     return this._renderers.get(rendererName);
   }
 
-  private _currentRenderer: RendererPlugin;
+  private _currentRenderer: RendererPlugin | undefined;
 
   private _isCurrentRenderer(renderer: RendererPlugin): boolean {
     if (!this._currentRenderer || this._currentRenderer === renderer) {
@@ -609,11 +612,11 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     }
   }
 
-  public set material(material: Material) {
+  public set material(material: Material | null | undefined) {
     this._state.current.material = material;
   }
 
-  public get material(): Material | null {
+  public get material(): Material | null | undefined {
     return this._state.current.material;
   }
 
@@ -665,7 +668,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
     if (this.useDrawSorting) {
       // null out unused draw calls
       for (let i = this._drawCallIndex; i < this._drawCalls.length; i++) {
-        this._drawCalls[i] = null;
+        this._drawCalls[i] = null as any;
       }
       // sort draw calls
       // Find the original order of the first instance of the draw call
@@ -685,7 +688,7 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
           return 0;
         }
         const zIndex = a.z - b.z;
-        const originalSortOrder = originalSort.get(a.renderer) - originalSort.get(b.renderer);
+        const originalSortOrder = originalSort.get(a.renderer)! - originalSort.get(b.renderer)!;
         const priority = a.priority - b.priority;
         if (zIndex === 0) {
           // sort by z first
@@ -711,21 +714,21 @@ export class ExcaliburGraphicsContextWebGL implements ExcaliburGraphicsContext {
 
           if (this._drawCalls[i].renderer !== currentRendererName) {
             // switching graphics renderer means we must flush the previous
-            currentRenderer.flush();
+            currentRenderer!.flush();
             currentRendererName = this._drawCalls[i].renderer;
             currentRenderer = this._renderers.get(currentRendererName);
           }
 
           // ! hack to grab screen texture before materials run because they might want it
-          if (currentRenderer instanceof MaterialRenderer && this.material.isUsingScreenTexture) {
-            currentTarget.copyToTexture(this.materialScreenTexture);
+          if (currentRenderer instanceof MaterialRenderer && this.material?.isUsingScreenTexture) {
+            currentTarget.copyToTexture(this.materialScreenTexture!);
             currentTarget.use();
           }
           // If we are still using the same renderer we can add to the current batch
-          currentRenderer.draw(...this._drawCalls[i].args);
+          currentRenderer!.draw(...this._drawCalls[i].args);
         }
-        if (currentRenderer.hasPendingDraws()) {
-          currentRenderer.flush();
+        if (currentRenderer!.hasPendingDraws()) {
+          currentRenderer!.flush();
         }
       }
 

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

@@ -17,12 +17,12 @@ export class CircleRenderer implements RendererPlugin {
 
   private _maxCircles: number = 10922; // max(uint16) / 6 verts
 
-  private _shader: Shader;
-  private _context: ExcaliburGraphicsContextWebGL;
-  private _gl: WebGLRenderingContext;
-  private _buffer: VertexBuffer;
-  private _layout: VertexLayout;
-  private _quads: QuadIndexBuffer;
+  private _shader!: Shader;
+  private _context!: ExcaliburGraphicsContextWebGL;
+  private _gl!: WebGLRenderingContext;
+  private _buffer!: VertexBuffer;
+  private _layout!: VertexLayout;
+  private _quads!: QuadIndexBuffer;
 
   private _circleCount: number = 0;
   private _vertexIndex: number = 0;
@@ -68,8 +68,8 @@ export class CircleRenderer implements RendererPlugin {
     this._buffer.dispose();
     this._quads.dispose();
     this._shader.dispose();
-    this._context = null;
-    this._gl = null;
+    this._context = null as any;
+    this._gl = null as any;
   }
 
   private _isFull() {

src/engine/Graphics/Context/debug-text.ts

@@ -6,7 +6,7 @@ import { Vector } from '../../Math/vector';
 import debugFont from './debug-font.png';
 
 /**
- * Internal debugtext helper
+ * Internal debug text helper
  */
 export class DebugText {
   constructor() {
@@ -20,9 +20,9 @@ export class DebugText {
    */
   public readonly fontSheet = debugFont;
   public size: number = 16;
-  private _imageSource: ImageSource;
-  private _spriteSheet: SpriteSheet;
-  private _spriteFont: SpriteFont;
+  private _imageSource!: ImageSource;
+  private _spriteSheet!: SpriteSheet;
+  private _spriteFont!: SpriteFont;
   public load() {
     this._imageSource = new ImageSource(this.fontSheet);
     return this._imageSource.load().then(() => {

src/engine/Graphics/Context/draw-call.ts

@@ -5,13 +5,13 @@ import { ExcaliburGraphicsContextState } from './ExcaliburGraphicsContext';
 export class DrawCall {
   public z: number = 0;
   public priority: number = 0;
-  public renderer: string;
+  public renderer: string = '';
   public transform: AffineMatrix = AffineMatrix.identity();
   public state: ExcaliburGraphicsContextState = {
     z: 0,
     opacity: 1,
     tint: Color.White,
     material: null
   };
-  public args: any[];
+  public args!: any[];
 }