@vpmedia/phaser 1.124.0 → 1.125.0

package/src/phaser/display/canvas/renderer.ts

@@ -28,6 +28,7 @@ import { detectCapabilities } from './tinter.js';
 import { getSmoothingPrefix, setSmoothing } from './util.js';
 import type { DisplayObject } from '../display_object.js';
 import type { RenderSession } from '../render_session.js';
+import type { StageBackgroundColor } from '../../core/stage.js';
 
 export class CanvasRenderer {
   public type!: number;
@@ -64,7 +65,7 @@ export class CanvasRenderer {
       willReadFrequently: false,
       alpha: this.transparent,
     })!;
-    if (!this.context) {
+    if (!(this.context as CanvasRenderingContext2D | undefined)) {
       throw new Error(ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT);
     }
     this.refresh = true;
@@ -86,7 +87,7 @@ export class CanvasRenderer {
    * @param {Stage} root - The root stage to render.
    */
   public render(root: Stage): void {
-    if (!this.context) {
+    if (!(this.context as CanvasRenderingContext2D | undefined)) {
       return;
     }
     this.context.setTransform(1, 0, 0, 1, 0, 0);
@@ -98,7 +99,7 @@ export class CanvasRenderer {
     if (this.clearBeforeRender) {
       if (this.transparent) {
         this.context.clearRect(0, 0, this.width, this.height);
-      } else if (root._bgColor) {
+      } else if (root._bgColor as StageBackgroundColor | undefined) {
         this.context.fillStyle = root._bgColor.rgba;
         this.context.fillRect(0, 0, this.width, this.height);
       }
@@ -130,7 +131,7 @@ export class CanvasRenderer {
       this.view.style.width = `${this.width / this.resolution}px`;
       this.view.style.height = `${this.height / this.resolution}px`;
     }
-    if (this.renderSession.smoothProperty) {
+    if (this.renderSession.smoothProperty !== null) {
       setSmoothing(this.context, this.renderSession.smoothProperty, this.renderSession.scaleMode === SCALE_LINEAR);
     }
   }
@@ -151,7 +152,7 @@ export class CanvasRenderer {
    * Maps blend modes to canvas rendering operations.
    */
   public mapBlendModes(): void {
-    if (globalThis.PhaserRegistry.blendModesCanvas) {
+    if (globalThis.PhaserRegistry.blendModesCanvas as GlobalCompositeOperation[] | undefined) {
       return;
     }
     const b: GlobalCompositeOperation[] = [];

package/src/phaser/display/canvas/tinter.ts

@@ -179,7 +179,7 @@ export const canUseNewCanvasBlendModes = (): boolean => {
   context.globalCompositeOperation = 'multiply';
   context.drawImage(magenta, 0, 0);
   context.drawImage(yellow, 2, 0);
-  if (!context.getImageData(2, 0, 1, 1)) {
+  if (context.getImageData(2, 0, 1, 1) === null) {
     return false;
   }
   const { data } = context.getImageData(2, 0, 1, 1);

package/src/phaser/display/canvas/util.ts

@@ -141,7 +141,7 @@ export const getSmoothingPrefix = (context: CanvasRenderingContext2D): string |
   const smoothingFlags = context as unknown as Record<string, boolean | undefined>;
   for (const vendor of VENDORS) {
     const flag = `${vendor}mageSmoothingEnabled`;
-    if (smoothingFlags[flag]) {
+    if (smoothingFlags[flag] !== undefined) {
       return flag;
     }
   }
@@ -166,7 +166,7 @@ export const setSmoothing = (context: CanvasRenderingContext2D, property: string
  */
 export const setSmoothingEnabled = (context: CanvasRenderingContext2D, value: boolean): CanvasRenderingContext2D => {
   const s = getSmoothingPrefix(context);
-  if (s) {
+  if (s !== null) {
     setSmoothing(context, s, value);
   }
   return context;

package/src/phaser/display/display_object.ts

@@ -10,6 +10,7 @@ import type { UserData } from '../core/callback.js';
 import type { EventManager } from '../core/event_manager.js';
 import type { Image } from './image.js';
 import type { RenderSession } from './render_session.js';
+import type { IdentifiedWebGLRenderingContext } from './webgl/util.js';
 
 export class DisplayObject {
   /** @type {boolean} */
@@ -127,7 +128,7 @@ export class DisplayObject {
    * @param {boolean} _destroyTexture - Whether the subclass should destroy its texture too.
    */
   public destroy(_destroyChildren = true, _destroyTexture = false): void {
-    if (this.children) {
+    if (this.children as DisplayObject[] | undefined) {
       let i = this.children.length;
       while (i) {
         i -= 1;
@@ -284,12 +285,12 @@ export class DisplayObject {
    * @returns {DisplayObject[]} The array of removed child display objects.
    * @throws {Error} If the range is invalid.
    */
-  public removeChildren(beginIndex: number, endIndex: number): DisplayObject[] {
-    beginIndex ??= 0;
-    endIndex ??= this.children.length;
-    const range = endIndex - beginIndex;
-    if (range > 0 && range <= endIndex) {
-      const removed = this.children.splice(beginIndex, range);
+  public removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[] {
+    const begin = beginIndex ?? 0;
+    const end = endIndex ?? this.children.length;
+    const range = end - begin;
+    if (range > 0 && range <= end) {
+      const removed = this.children.splice(begin, range);
       for (const child of removed) {
         child.parent = null;
       }
@@ -310,7 +311,7 @@ export class DisplayObject {
     if (!parent && !this.parent) {
       return this;
     }
-    if (!this.game || !this.visible) {
+    if (!(this.game as Game | undefined) || !this.visible) {
       return this;
     }
     const p = parent ?? this.parent ?? this.game.world;
@@ -607,12 +608,10 @@ export class DisplayObject {
    * @param {DisplayObject} from - The display object to convert from (defaults to this).
    * @returns {Point} The converted local position.
    */
-  public toLocal(position: Point, from: DisplayObject): Point {
-    if (from) {
-      position = from.toGlobal(position);
-    }
+  public toLocal(position: Point, from: DisplayObject | null): Point {
+    const global = from ? from.toGlobal(position) : position;
     this.updateTransform();
-    return this.worldTransform.applyInverse(position);
+    return this.worldTransform.applyInverse(global);
   }
 
   /**
@@ -624,7 +623,7 @@ export class DisplayObject {
       return;
     }
     this._cachedSprite.worldAlpha = this.worldAlpha;
-    if (renderSession.gl) {
+    if (renderSession.gl as IdentifiedWebGLRenderingContext | undefined) {
       renderWebGL(this._cachedSprite, renderSession);
     } else {
       renderCanvas(this._cachedSprite, renderSession);

package/src/phaser/display/graphics.test.ts

@@ -135,13 +135,13 @@ describe('Graphics', (): void => {
   describe('drawTriangles', (): void => {
     it('reads a flat coordinate list as triangles', (): void => {
       const graphics = createGraphics();
-      graphics.drawTriangles([0, 0, 10, 0, 0, 10, 20, 20, 30, 20, 20, 30], null as unknown as number[]);
+      graphics.drawTriangles([0, 0, 10, 0, 0, 10, 20, 20, 30, 20, 20, 30], null);
       expect(graphics.graphicsData).toHaveLength(2);
     });
 
     it('reads a point list as triangles', (): void => {
       const graphics = createGraphics();
-      graphics.drawTriangles([new Point(0, 0), new Point(10, 0), new Point(0, 10)], null as unknown as number[]);
+      graphics.drawTriangles([new Point(0, 0), new Point(10, 0), new Point(0, 10)], null);
       expect(graphics.graphicsData).toHaveLength(1);
     });
 

package/src/phaser/display/graphics.ts

@@ -343,19 +343,17 @@ export class Graphics extends DisplayObject {
     if (startAngle === endAngle) {
       return this;
     }
-    if (!anticlockwise && endAngle <= startAngle) {
-      endAngle += Math.PI * 2;
-    } else if (anticlockwise && startAngle <= endAngle) {
-      startAngle += Math.PI * 2;
-    }
-    const sweep = anticlockwise ? (startAngle - endAngle) * -1 : endAngle - startAngle;
+    const fullTurn = Math.PI * 2;
+    const from = anticlockwise && startAngle <= endAngle ? startAngle + fullTurn : startAngle;
+    const to = !anticlockwise && endAngle <= startAngle ? endAngle + fullTurn : endAngle;
+    const sweep = anticlockwise ? (from - to) * -1 : to - from;
     const segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * segments;
     //  Sweep check - moved here because we don't want to do the moveTo below if the arc fails
     if (sweep === 0) {
       return this;
     }
-    const startX = cx + Math.cos(startAngle) * radius;
-    const startY = cy + Math.sin(startAngle) * radius;
+    const startX = cx + Math.cos(from) * radius;
+    const startY = cy + Math.sin(from) * radius;
     if (anticlockwise && this.filling) {
       this.moveTo(cx, cy);
     } else {
@@ -371,7 +369,7 @@ export class Graphics extends DisplayObject {
     const remainder = (segMinus % 1) / segMinus;
     for (let i = 0; i <= segMinus; i += 1) {
       const real = i + remainder * i;
-      const angle = theta + startAngle + theta2 * real;
+      const angle = theta + from + theta2 * real;
       const c = Math.cos(angle);
       const s = -Math.sin(angle);
       points.push((cTheta * c + sTheta * s) * radius + cx, (cTheta * -s + sTheta * c) * radius + cy);
@@ -915,10 +913,10 @@ export class Graphics extends DisplayObject {
    * @param {number[]} indices - The indices of the vertices to use.
    * @param {boolean} cull - Whether to perform backface culling.
    */
-  public drawTriangles(vertices: Point[] | number[], indices: number[], cull = false): void {
+  public drawTriangles(vertices: Point[] | number[], indices: number[] | null, cull = false): void {
     let points: Point[] = [];
     let i;
-    if (!indices) {
+    if (indices === null) {
       if (vertices[0] instanceof Point) {
         const corners = vertices as Point[];
         for (i = 0; i < corners.length / 3; i += 1) {

package/src/phaser/display/group.ts

@@ -3,6 +3,7 @@ import { Signal } from '../core/signal.js';
 import { DisplayObject } from './display_object.js';
 import { Image } from './image.js';
 import type { Game } from '../core/game.js';
+import type { EventManager } from '../core/event_manager.js';
 
 export const SORT_ASCENDING = -1;
 export const SORT_DESCENDING = 1;
@@ -33,7 +34,7 @@ export class Group extends DisplayObject {
     super(game);
     /** @type {number} */
     this.type = GROUP;
-    parent ??= game.world;
+    const target = parent ?? game.world;
     /** @type {string} */
     this.name = name ?? 'group';
     /** @type {number} */
@@ -41,9 +42,9 @@ export class Group extends DisplayObject {
     if (addToStage) {
       this.game.stage.addChild(this);
       this.z = this.game.stage.children.length;
-    } else if (parent) {
-      parent.addChild(this);
-      this.z = parent.children.length;
+    } else if (target as DisplayObject | undefined) {
+      target.addChild(this);
+      this.z = target.children.length;
     }
     /** @type {boolean} */
     this.ignoreDestroy = false;
@@ -112,10 +113,10 @@ export class Group extends DisplayObject {
       this.updateZ();
     }
     const inputChild = child as T & { input?: unknown; inputEnabled?: boolean };
-    if (this.inputEnableChildren && (!inputChild.input || inputChild.inputEnabled)) {
+    if (this.inputEnableChildren && (inputChild.input === undefined || inputChild.inputEnabled === true)) {
       inputChild.inputEnabled = true;
     }
-    if (!silent && child.events) {
+    if (!silent && (child.events as EventManager | undefined)) {
       child.events.onAddedToGroup$dispatch(child, this);
     }
     this.cursor ??= child;
@@ -252,7 +253,7 @@ export class Group extends DisplayObject {
       this.destroy();
       return;
     }
-    if (!this.exists || !this.parent?.exists) {
+    if (!this.exists || this.parent?.exists !== true) {
       this.renderOrderID = -1;
       return;
     }
@@ -292,7 +293,7 @@ export class Group extends DisplayObject {
     if (this.children.length === 0 || !this.children.includes(child)) {
       return false;
     }
-    if (!silent && child.events) {
+    if (!silent && (child.events as EventManager | undefined)) {
       child.events.onRemovedFromGroup$dispatch(child, this);
     }
     const removed = this.removeChild(child);
@@ -318,7 +319,7 @@ export class Group extends DisplayObject {
     }
     do {
       const first = this.children[0]!;
-      if (!silent && first.events) {
+      if (!silent && (first.events as EventManager | undefined)) {
         first.events.onRemovedFromGroup$dispatch(first, this);
       }
       const removed = this.removeChild(first);

package/src/phaser/display/image.ts

@@ -11,6 +11,7 @@ import { Frame } from '../core/frame.js';
 import type { Matrix } from '../geom/matrix.js';
 import type { RenderSession } from './render_session.js';
 import type { AbstractFilter } from './webgl/abstract_filter.js';
+import type { ImageCacheEntry } from '../core/cache.js';
 
 export class Image extends DisplayObject {
   public key!: string | number | Texture | null;
@@ -99,11 +100,11 @@ export class Image extends DisplayObject {
     this.tintedTexture = null;
     this.shader = null;
     this._frame = null;
-    if (this.events) {
+    if (this.events as EventManager | undefined) {
       this.events.destroy();
     }
     this.events = null!;
-    if (this.animations) {
+    if (this.animations as AnimationManager | undefined) {
       this.animations.destroy();
     }
     this.animations = null!;
@@ -118,7 +119,7 @@ export class Image extends DisplayObject {
       this.destroy();
       return;
     }
-    if (!this.exists || !this.parent?.exists) {
+    if (!this.exists || this.parent?.exists !== true) {
       this.renderOrderID = -1;
       return;
     }
@@ -126,7 +127,7 @@ export class Image extends DisplayObject {
       this.game.stage.currentRenderOrderID += 1;
       this.renderOrderID = this.game.stage.currentRenderOrderID;
     }
-    if (this.animations) {
+    if (this.animations as AnimationManager | undefined) {
       this.animations.update();
     }
     for (const child of this.children) {
@@ -162,7 +163,7 @@ export class Image extends DisplayObject {
       this.setTexture(textureKey);
     } else {
       const img = cache.getImage(textureKey ?? undefined, true);
-      if (img) {
+      if (img as ImageCacheEntry | undefined) {
         this.key = img.key;
         this.setTexture(new Texture(img.base));
         this.texture.baseTexture.skipRender = textureKey === '__default';
@@ -283,7 +284,7 @@ export class Image extends DisplayObject {
    * @param {boolean} copy - Whether to copy the rect or use it directly.
    */
   public crop(rect: Rectangle, copy = false): void {
-    if (rect) {
+    if (rect as Rectangle | undefined) {
       if (copy && this.cropRect !== null) {
         this.cropRect.setTo(rect.x, rect.y, rect.width, rect.height);
       } else if (copy && this.cropRect === null) {

package/src/phaser/display/sprite_util.ts

@@ -222,7 +222,7 @@ export const renderCanvas = (
     renderSession.context.globalAlpha = target.worldAlpha;
 
     //  If smoothingEnabled is supported and we need to change the smoothing property for this texture
-    if (renderSession.smoothProperty && renderSession.scaleMode !== target.texture.baseTexture.scaleMode) {
+    if (renderSession.smoothProperty !== null && renderSession.scaleMode !== target.texture.baseTexture.scaleMode) {
       renderSession.scaleMode = target.texture.baseTexture.scaleMode;
       setSmoothing(renderSession.context, renderSession.smoothProperty, renderSession.scaleMode === SCALE_LINEAR);
     }

package/src/phaser/display/text.ts

@@ -199,16 +199,16 @@ export class Text extends Image {
       tabs: source.tabs ?? 0,
     };
     const components = this.fontToComponents(resolved.font);
-    if (resolved.fontStyle) {
+    if (resolved.fontStyle !== undefined && resolved.fontStyle !== '') {
       components.fontStyle = resolved.fontStyle;
     }
-    if (resolved.fontVariant) {
+    if (resolved.fontVariant !== undefined && resolved.fontVariant !== '') {
       components.fontVariant = resolved.fontVariant;
     }
-    if (resolved.fontWeight) {
+    if (resolved.fontWeight !== undefined && resolved.fontWeight !== '') {
       components.fontWeight = String(resolved.fontWeight);
     }
-    if (resolved.fontSize) {
+    if (resolved.fontSize !== undefined && resolved.fontSize !== '') {
       const fontSize = typeof resolved.fontSize === 'number' ? `${resolved.fontSize}px` : resolved.fontSize;
       resolved.fontSize = fontSize;
       components.fontSize = fontSize;
@@ -302,7 +302,7 @@ export class Text extends Image {
     }
     this.canvas.height = height * this._res;
     this.context.scale(this._res, this._res);
-    if (this.style.backgroundColor) {
+    if (this.style.backgroundColor !== null && this.style.backgroundColor !== '') {
       this.context.fillStyle = this.style.backgroundColor;
       this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
     }
@@ -384,16 +384,17 @@ export class Text extends Image {
         }
       }
     } else {
+      let cursor = x;
       for (const part of text) {
         const section = Math.ceil(this.context.measureText(part).width);
         //  How far to the next tab?
-        snap = snapToCeil(x, tabs);
+        snap = snapToCeil(cursor, tabs);
         if (fill) {
           this.context.fillText(part, snap, y);
         } else {
           this.context.strokeText(part, snap, y);
         }
-        x = snap + section;
+        cursor = snap + section;
       }
     }
   }
@@ -441,24 +442,24 @@ export class Text extends Image {
         const components = this.fontToComponents(this.context.font);
         const charFontStyle = this.fontStyles[this._charCount];
         const charFontWeight = this.fontWeights[this._charCount];
-        if (charFontStyle) {
+        if (charFontStyle !== undefined && charFontStyle !== null && charFontStyle !== '') {
           components.fontStyle = charFontStyle;
         }
-        if (charFontWeight) {
+        if (charFontWeight !== undefined && charFontWeight !== null && charFontWeight !== '') {
           components.fontWeight = charFontWeight;
         }
         this.context.font = this.componentsToFont(components);
       }
       if (this.style.stroke && this.style.strokeThickness) {
         const charStrokeColor = this.strokeColors[this._charCount];
-        if (charStrokeColor) {
+        if (charStrokeColor !== undefined && charStrokeColor !== null && charStrokeColor !== '') {
           this.context.strokeStyle = charStrokeColor;
         }
         this.updateShadow(this.style.shadowStroke ?? false);
       }
       if (this.style.fill) {
         const charFillColor = this.colors[this._charCount];
-        if (charFillColor) {
+        if (charFillColor !== undefined && charFillColor !== null && charFillColor !== '') {
           this.context.fillStyle = charFillColor;
         }
         this.updateShadow(this.style.shadowFill ?? false);
@@ -476,36 +477,37 @@ export class Text extends Image {
    * @param {number} y - The y position to start updating from.
    */
   public updateLine(line: string, x: number, y: number): void {
+    let cursor = x;
     for (const letter of line) {
       if (this.fontWeights.length > 0 || this.fontStyles.length > 0) {
         const components = this.fontToComponents(this.context.font);
         const charFontStyle = this.fontStyles[this._charCount];
         const charFontWeight = this.fontWeights[this._charCount];
-        if (charFontStyle) {
+        if (charFontStyle !== undefined && charFontStyle !== null && charFontStyle !== '') {
           components.fontStyle = charFontStyle;
         }
-        if (charFontWeight) {
+        if (charFontWeight !== undefined && charFontWeight !== null && charFontWeight !== '') {
           components.fontWeight = charFontWeight;
         }
         this.context.font = this.componentsToFont(components);
       }
       if (this.style.stroke && this.style.strokeThickness) {
         const charStrokeColor = this.strokeColors[this._charCount];
-        if (charStrokeColor) {
+        if (charStrokeColor !== undefined && charStrokeColor !== null && charStrokeColor !== '') {
           this.context.strokeStyle = charStrokeColor;
         }
         this.updateShadow(this.style.shadowStroke ?? false);
-        this.context.strokeText(letter, x, y);
+        this.context.strokeText(letter, cursor, y);
       }
       if (this.style.fill) {
         const charFillColor = this.colors[this._charCount];
-        if (charFillColor) {
+        if (charFillColor !== undefined && charFillColor !== null && charFillColor !== '') {
           this.context.fillStyle = charFillColor;
         }
         this.updateShadow(this.style.shadowFill ?? false);
-        this.context.fillText(letter, x, y);
+        this.context.fillText(letter, cursor, y);
       }
-      x += this.context.measureText(letter).width;
+      cursor += this.context.measureText(letter).width;
       this._charCount += 1;
     }
   }
@@ -778,31 +780,20 @@ export class Text extends Image {
    * @returns {string} The font string.
    */
   public componentsToFont(components: FontComponents): string {
-    const parts = [];
-    let v;
-    v = components.fontStyle;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontVariant;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontWeight;
-    if (v && v !== 'normal') {
-      parts.push(v);
-    }
-    v = components.fontSize;
-    if (v && v !== 'medium') {
-      parts.push(v);
-    }
-    v = components.fontFamily;
-    if (v) {
-      parts.push(v);
-    }
+    const parts: string[] = [];
+    const push = (value: string | number | undefined, skip: string): void => {
+      if (value !== undefined && value !== '' && value !== skip) {
+        parts.push(String(value));
+      }
+    };
+    push(components.fontStyle, 'normal');
+    push(components.fontVariant, 'normal');
+    push(components.fontWeight, 'normal');
+    push(components.fontSize, 'medium');
+    push(components.fontFamily, '');
     if (parts.length === 0) {
       // Fallback to whatever value the 'font' was
-      parts.push(components.font);
+      parts.push(components.font ?? '');
     }
     return parts.join(' ');
   }
@@ -966,7 +957,7 @@ export class Text extends Image {
    * @returns {CanvasRenderingContext2D} The font properties canvas context.
    */
   public getFontPropertiesContext(): CanvasRenderingContext2D {
-    if (!globalThis.PhaserRegistry.fontPropertiesContext) {
+    if (globalThis.PhaserRegistry.fontPropertiesContext === undefined) {
       const canvas = this.getFontPropertiesCanvas();
       const context = canvas.getContext('2d', { willReadFrequently: true });
       if (!context) {
@@ -1026,7 +1017,7 @@ export class Text extends Image {
       context.textBaseline = 'alphabetic';
       context.fillStyle = '#000';
       context.fillText('|MÉq', 0, baseline);
-      if (!context.getImageData(0, 0, width, height)) {
+      if (context.getImageData(0, 0, width, height) === null) {
         const fallback: FontProperties = {
           ascent: baseline,
           descent: baseline + 6,
@@ -1169,7 +1160,7 @@ export class Text extends Image {
     if (typeof size === 'number') {
       return size;
     }
-    if (size && /(?:^0$|px$)/.exec(size)) {
+    if (size !== undefined && size !== '' && /(?:^0$|px$)/.exec(size)) {
       // Number() cannot read the value here: the string carries a px suffix.
       // eslint-disable-next-line unicorn/prefer-number-coercion
       return Number.parseInt(size, 10);

package/src/phaser/display/webgl/abstract_filter.ts

@@ -27,7 +27,7 @@ export class AbstractFilter {
     this.dirty = true;
     this.padding = 0;
     this.uniforms = uniforms ?? {};
-    this.fragmentSrc = fragmentSrc || [];
+    this.fragmentSrc = fragmentSrc;
   }
 
   /**