@vpmedia/phaser 1.119.0 → 1.121.0

package/src/phaser/display/text.ts

@@ -253,16 +253,7 @@ export class Text extends Image {
       if (tabs === 0) {
         //  Simple layout (no tabs)
         lineWidth = this.style.strokeThickness + this.padding.x;
-        if (
-          this.colors.length > 0 ||
-          this.strokeColors.length > 0 ||
-          this.fontWeights.length > 0 ||
-          this.fontStyles.length > 0
-        ) {
-          lineWidth += this.measureLine(lines[i]);
-        } else {
-          lineWidth += this.context.measureText(lines[i]).width;
-        }
+        lineWidth += this.hasCharacterStyles() ? this.measureLine(lines[i]) : this.context.measureText(lines[i]).width;
         // Adjust for wrapped text
         if (this.style.wordWrap) {
           lineWidth -= this.context.measureText(' ').width;
@@ -274,35 +265,20 @@ export class Text extends Image {
         if (Array.isArray(tabs)) {
           let tab = 0;
           for (let c = 0; c < line.length; c += 1) {
-            let section = 0;
-            if (
-              this.colors.length > 0 ||
-              this.strokeColors.length > 0 ||
-              this.fontWeights.length > 0 ||
-              this.fontStyles.length > 0
-            ) {
-              section = this.measureLine(line[c]);
-            } else {
-              section = Math.ceil(this.context.measureText(line[c]).width);
-            }
+            const section = this.hasCharacterStyles()
+              ? this.measureLine(line[c])
+              : Math.ceil(this.context.measureText(line[c]).width);
             if (c > 0) {
               tab += tabs[c - 1]!;
             }
             lineWidth = tab + section;
           }
         } else {
-          for (let c = 0; c < line.length; c += 1) {
+          for (const section of line) {
             //  How far to the next tab?
-            if (
-              this.colors.length > 0 ||
-              this.strokeColors.length > 0 ||
-              this.fontWeights.length > 0 ||
-              this.fontStyles.length > 0
-            ) {
-              lineWidth += this.measureLine(line[c]);
-            } else {
-              lineWidth += Math.ceil(this.context.measureText(line[c]).width);
-            }
+            lineWidth += this.hasCharacterStyles()
+              ? this.measureLine(section)
+              : Math.ceil(this.context.measureText(section).width);
             const diff = snapToCeil(lineWidth, tabs) - lineWidth;
             lineWidth += diff;
           }
@@ -356,12 +332,7 @@ export class Text extends Image {
         linePositionX = Math.round(linePositionX);
         linePositionY = Math.round(linePositionY);
       }
-      if (
-        this.colors.length > 0 ||
-        this.strokeColors.length > 0 ||
-        this.fontWeights.length > 0 ||
-        this.fontStyles.length > 0
-      ) {
+      if (this.hasCharacterStyles()) {
         this.updateLine(lines[i], linePositionX, linePositionY);
       } else {
         if (this.style.stroke && this.style.strokeThickness) {
@@ -411,14 +382,14 @@ export class Text extends Image {
         }
       }
     } else {
-      for (let c = 0; c < text.length; c += 1) {
-        const section = Math.ceil(this.context.measureText(text[c]!).width);
+      for (const part of text) {
+        const section = Math.ceil(this.context.measureText(part).width);
         //  How far to the next tab?
         snap = snapToCeil(x, tabs);
         if (fill) {
-          this.context.fillText(text[c]!, snap, y);
+          this.context.fillText(part, snap, y);
         } else {
-          this.context.strokeText(text[c]!, snap, y);
+          this.context.strokeText(part, snap, y);
         }
         x = snap + section;
       }
@@ -443,6 +414,19 @@ export class Text extends Image {
     }
   }
 
+  /**
+   * Reports whether any per-character style has been set, which forces the slower per-glyph path.
+   * @returns {boolean} True when a colour, weight or style has been assigned to a character.
+   */
+  public hasCharacterStyles(): boolean {
+    return (
+      this.colors.length > 0 ||
+      this.strokeColors.length > 0 ||
+      this.fontWeights.length > 0 ||
+      this.fontStyles.length > 0
+    );
+  }
+
   /**
    * Measures the width of a line of text.
    * @param {string} line - The line of text to measure.
@@ -1088,7 +1072,7 @@ export class Text extends Image {
           break;
         }
       }
-      // TODO might need a tweak. kind of a temp fix!
+      // the six-pixel pad keeps descenders inside the measured box on fonts that under-report them
       const descent = i - baseline + 6;
       const properties: FontProperties = { ascent, descent, fontSize: ascent + descent };
       fontPropertiesCache[fontStyle] = properties;

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

@@ -4,9 +4,9 @@ export type TextureSource = HTMLImageElement | HTMLCanvasElement;
 import { removeByCanvas } from '../canvas/pool.js';
 
 export class BaseTexture {
-  public resolution: number = 1;
-  public width: number = 100;
-  public height: number = 100;
+  public resolution = 1;
+  public width = 100;
+  public height = 100;
   public scaleMode!: number;
   public hasLoaded!: boolean;
   public source!: TextureSource | null;

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

@@ -668,8 +668,7 @@ export function earcutLinked(
   let next;
   // iterate through ears, slicing them one by one
   while (ear.prev !== ear.next) {
-    prev = ear.prev;
-    next = ear.next;
+    ({ prev, next } = ear);
     if (size ? isEarHashed(ear, minX, minY, size) : isEar(ear)) {
       // cut off the triangle
       triangles.push(prev.i / dim);
@@ -708,7 +707,7 @@ export function earcutLinked(
  * @returns {object} The processed earcut data structure with triangulation information.
  */
 export function triangulate(data: number[], holeIndices: number[] | null, dim = 2): number[] {
-  const hasHoles = holeIndices && holeIndices.length;
+  const hasHoles = holeIndices !== null && holeIndices.length > 0;
   const outerLen = hasHoles ? holeIndices[0]! * dim : data.length;
   let outerNode = linkedList(data, 0, outerLen, dim, true);
   const triangles: number[] = [];

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

@@ -95,7 +95,7 @@ export class FastSpriteBatch {
    */
   public render(spriteBatch: any): void {
     const { children } = spriteBatch;
-    const sprite = children[0];
+    const [sprite] = children;
     // if the uvs have not updated then no point rendering just yet!
     // check texture.
     if (!sprite.texture._uvs) {
@@ -121,7 +121,6 @@ export class FastSpriteBatch {
     if (!sprite.visible) {
       return;
     }
-    // TODO trim??
     if (sprite.texture.baseTexture !== this.currentBaseTexture && !sprite.texture.baseTexture.skipRender) {
       this.flush();
       this.currentBaseTexture = sprite.texture.baseTexture;

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

@@ -26,42 +26,30 @@ export class WebGLFilterManager {
   /**
    * Applies a filter to the specified texture.
    */
-  public begin(): void {
-    // TODO
-  }
+  public begin(): void {}
 
   /**
    * Updates the filter texture for the specified size.
    */
-  public pushFilter(_filterBlock: object | null): void {
-    // TODO
-  }
+  public pushFilter(_filterBlock: object | null): void {}
 
   /**
    * Resizes the filter manager to the specified dimensions.
    */
-  public popFilter(): void {
-    // TODO
-  }
+  public popFilter(): void {}
 
   /**
    * Destroys this filter manager and cleans up resources.
    */
-  public applyFilterPass(): void {
-    // TODO
-  }
+  public applyFilterPass(): void {}
 
   /**
    * Initializes the filter manager.
    */
-  public initShaderBuffers(): void {
-    // TODO
-  }
+  public initShaderBuffers(): void {}
 
   /**
    * Sets up the filter manager for WebGL rendering.
    */
-  public destroy(): void {
-    // TODO
-  }
+  public destroy(): void {}
 }

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

@@ -18,10 +18,10 @@ export class FilterTexture {
     this.gl = gl;
     this.frameBuffer = gl.createFramebuffer();
     this.texture = gl.createTexture();
-    scaleMode = scaleMode || globalThis.PhaserRegistry.TEXTURE_SCALE_MODE;
+    const filterMode = scaleMode || globalThis.PhaserRegistry.TEXTURE_SCALE_MODE;
     gl.bindTexture(gl.TEXTURE_2D, this.texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, scaleMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filterMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filterMode === SCALE_LINEAR ? gl.LINEAR : gl.NEAREST);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);

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

@@ -61,7 +61,6 @@ export const switchMode = (webGL: GraphicsWebGLBucket, type: number) => {
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
 export const buildLine = (graphicsData: DisplayGraphicsData, webGLData: GraphicsData): void => {
-  // TODO OPTIMISE!
   let i = 0;
   let { points } = graphicsData;
   if (points.length === 0) {
@@ -130,7 +129,7 @@ export const buildLine = (graphicsData: DisplayGraphicsData, webGLData: Graphics
   p2y = points[3]!;
   perpx = -(p1y - p2y);
   perpy = p1x - p2x;
-  dist = Math.sqrt(perpx * perpx + perpy * perpy);
+  dist = Math.hypot(perpx, perpy);
   perpx /= dist;
   perpy /= dist;
   perpx *= width;
@@ -147,14 +146,14 @@ export const buildLine = (graphicsData: DisplayGraphicsData, webGLData: Graphics
     p3y = points[(i + 1) * 2 + 1]!;
     perpx = -(p1y - p2y);
     perpy = p1x - p2x;
-    dist = Math.sqrt(perpx * perpx + perpy * perpy);
+    dist = Math.hypot(perpx, perpy);
     perpx /= dist;
     perpy /= dist;
     perpx *= width;
     perpy *= width;
     perp2x = -(p2y - p3y);
     perp2y = p2x - p3x;
-    dist = Math.sqrt(perp2x * perp2x + perp2y * perp2y);
+    dist = Math.hypot(perp2x, perp2y);
     perp2x /= dist;
     perp2y /= dist;
     perp2x *= width;
@@ -178,7 +177,7 @@ export const buildLine = (graphicsData: DisplayGraphicsData, webGLData: Graphics
     if (pdist > 140 * 140) {
       perp3x = perpx - perp2x;
       perp3y = perpy - perp2y;
-      dist = Math.sqrt(perp3x * perp3x + perp3y * perp3y);
+      dist = Math.hypot(perp3x, perp3y);
       perp3x /= dist;
       perp3y /= dist;
       perp3x *= width;
@@ -203,7 +202,7 @@ export const buildLine = (graphicsData: DisplayGraphicsData, webGLData: Graphics
   p2y = points[(length - 1) * 2 + 1]!;
   perpx = -(p1y - p2y);
   perpy = p1x - p2x;
-  dist = Math.sqrt(perpx * perpx + perpy * perpy);
+  dist = Math.hypot(perpx, perpy);
   perpx /= dist;
   perpy /= dist;
   perpx *= width;
@@ -322,14 +321,14 @@ export const buildRoundedRectangle = (graphicsData: DisplayGraphicsData, webGLDa
   const { width } = rrectData;
   const { height } = rrectData;
   const { radius } = rrectData;
-  let recPoints = [];
-  recPoints.push(x, y + radius);
-  recPoints = recPoints.concat(quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
-  recPoints = recPoints.concat(
-    quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius)
-  );
-  recPoints = recPoints.concat(quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
-  recPoints = recPoints.concat(quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+  const recPoints = [
+    x,
+    y + radius,
+    ...quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height),
+    ...quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius),
+    ...quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y),
+    ...quadraticBezierCurve(x + radius, y, x, y, x, y + radius),
+  ];
   if (graphicsData.fill) {
     const color = hex2rgb(graphicsData.fillColor ?? 0);
     const alpha = graphicsData.fillAlpha;
@@ -348,7 +347,6 @@ export const buildRoundedRectangle = (graphicsData: DisplayGraphicsData, webGLDa
       indices.push(triangles[i + 2]! + vecPos);
     }
     for (let i = 0; i < recPoints.length; i += 2) {
-      // TODO verify
       verts.push(recPoints[i]!, recPoints[i + 1]!, r, g, b, alpha);
     }
   }
@@ -372,13 +370,11 @@ export const buildCircle = (graphicsData: DisplayGraphicsData, webGLData: Graphi
   const { y } = circleData;
   let width;
   let height;
-  // TODO - bit hacky??
   if (circleData instanceof Circle) {
     width = circleData.radius;
     height = circleData.radius;
   } else {
-    width = circleData.width;
-    height = circleData.height;
+    ({ width, height } = circleData);
   }
   const totalSegs = 40;
   const seg = (Math.PI * 2) / totalSegs;
@@ -417,7 +413,6 @@ export const buildCircle = (graphicsData: DisplayGraphicsData, webGLData: Graphi
  * @param {GraphicsData} webGLData - The WebGL graphics data object.
  */
 export const buildComplexPoly = (graphicsData: DisplayGraphicsData, webGLData: GraphicsData): void => {
-  // TODO - no need to copy this as it gets turned into a Float32Array anyways..
   const points = [...graphicsData.points];
   if (points.length < 6) {
     return;
@@ -448,7 +443,6 @@ export const buildComplexPoly = (graphicsData: DisplayGraphicsData, webGLData: G
   // add a quad to the end cos there is no point making another buffer!
   points.push(minX, minY, maxX, minY, maxX, maxY, minX, maxY);
   // push a quad onto the end..
-  // TODO - this aint needed!
   const length = points.length / 2;
   for (let i = 0; i < length; i += 1) {
     indices.push(i);
@@ -532,27 +526,23 @@ export const updateGraphics = (graphics: Graphics, gl: IdentifiedWebGLRenderingC
     const data = graphics.graphicsData[i]!;
     if (data.shape instanceof Polygon) {
       // need to add the points the the graphics object..
-      data.points = [...data.shape.points];
-      if (data.shape.closed) {
-        // close the poly if the value is true!
-        if (data.points[0] !== data.points.at(-2) || data.points[1] !== data.points.at(-1)) {
-          data.points.push(data.points[0]!, data.points[1]!);
-        }
+      data.points = [...(data.shape.points as number[])];
+      // close the poly if the value is true!
+      if (data.shape.closed && (data.points[0] !== data.points.at(-2) || data.points[1] !== data.points.at(-1))) {
+        data.points.push(data.points[0]!, data.points[1]!);
       }
       // MAKE SURE WE HAVE THE CORRECT TYPE..
-      if (data.fill) {
-        if (data.points.length >= stencilBufferLimit) {
-          if (data.points.length < stencilBufferLimit * 2) {
-            webGLData = switchMode(webGL, 0);
-            const canDrawUsingSimple = buildPoly(data, webGLData);
-            if (!canDrawUsingSimple) {
-              webGLData = switchMode(webGL, 1);
-              buildComplexPoly(data, webGLData);
-            }
-          } else {
+      if (data.fill && data.points.length >= stencilBufferLimit) {
+        if (data.points.length < stencilBufferLimit * 2) {
+          webGLData = switchMode(webGL, 0);
+          const canDrawUsingSimple = buildPoly(data, webGLData);
+          if (!canDrawUsingSimple) {
             webGLData = switchMode(webGL, 1);
             buildComplexPoly(data, webGLData);
           }
+        } else {
+          webGLData = switchMode(webGL, 1);
+          buildComplexPoly(data, webGLData);
         }
       }
       if (data.lineWidth > 0) {
@@ -602,8 +592,8 @@ export const renderGraphics = (graphics: Graphics, renderSession: RenderSession)
     return;
   }
   // This could be speeded up for sure!
-  for (let i = 0; i < webGL.data.length; i += 1) {
-    webGLData = webGL.data[i]!;
+  for (const data of webGL.data) {
+    webGLData = data;
     if (webGLData.mode === 1) {
       renderSession.stencilManager.pushStencil(graphics, webGLData, renderSession);
       // render quad..

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

@@ -16,7 +16,6 @@ export class GraphicsData {
    */
   public constructor(gl: WebGLRenderingContext) {
     this.gl = gl;
-    // TODO does this need to be split before uploading??
     this.color = [0, 0, 0]; // color split!
     this.points = [];
     this.indices = [];

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

@@ -71,30 +71,22 @@ export class RenderTexture extends Texture {
   /**
    * Destroys this render texture and cleans up resources.
    */
-  public resize(): void {
-    // TODO
-  }
+  public resize(): void {}
 
   /**
    * Updates the size of this render texture.
    */
-  public clear(): void {
-    // TODO
-  }
+  public clear(): void {}
 
   /**
    * Updates the resolution of this render texture.
    */
-  public renderWebGL(): void {
-    // TODO
-  }
+  public renderWebGL(): void {}
 
   /**
    * Updates the scale mode of this render texture.
    */
-  public renderCanvas(): void {
-    // TODO
-  }
+  public renderCanvas(): void {}
 
   /**
    * Gets the HTML image element for this render texture.
@@ -119,7 +111,6 @@ export class RenderTexture extends Texture {
    * @returns {HTMLCanvasElement} The canvas element.
    */
   public getCanvas(): HTMLCanvasElement | null {
-    // TODO
     return null;
   }
 }

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

@@ -139,7 +139,6 @@ export class WebGLRenderer {
    */
   public initContext(game: Game): void {
     game.logger.info('initContext');
-    // TODO: view.addEventListener('webglcontextcreationerror', this.onWebGLContextCreationError, false);
     /** @type {WebGLRenderingContext & { id: number }} */
     const gl = this.view.getContext('webgl', this._contextOptions) as IdentifiedWebGLRenderingContext | null;
     if (!gl) {

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

@@ -215,9 +215,7 @@ export class WebGLSpriteBatch {
   /**
    * Binds the sprite batch to the WebGL context.
    */
-  public renderTilingSprite(): void {
-    // TODO
-  }
+  public renderTilingSprite(): void {}
 
   /**
    * Updates the sprite batch.
@@ -264,11 +262,7 @@ export class WebGLSpriteBatch {
     let sprite;
     for (let i = 0, j = this.currentBatchSize; i < j; i += 1) {
       sprite = this.sprites[i];
-      if (sprite.tilingTexture) {
-        nextTexture = sprite.tilingTexture.baseTexture;
-      } else {
-        nextTexture = sprite.texture.baseTexture;
-      }
+      nextTexture = sprite.tilingTexture ? sprite.tilingTexture.baseTexture : sprite.texture.baseTexture;
       nextBlendMode = sprite.blendMode;
       nextShader = sprite.shader ?? this.defaultShader;
       blendSwap = currentBlendMode !== nextBlendMode;
@@ -305,7 +299,6 @@ export class WebGLSpriteBatch {
           // set the projection
           const { projection } = this.renderSession;
           gl.uniform2f(shader.projectionVector, projection.x, projection.y);
-          // TODO - this is temporary!
           const offsetVector = this.renderSession.offset;
           gl.uniform2f(shader.offsetVector, offsetVector.x, offsetVector.y);
           // set the pointers

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

@@ -39,16 +39,12 @@ export class Texture {
     crop: Rectangle | null | undefined = null,
     trim: Rectangle | null | undefined = null
   ) {
-    if (!frame) {
-      this.noFrame = true;
-      frame = new Rectangle(0, 0, 1, 1);
-    }
-    if (baseTexture instanceof Texture) {
-      baseTexture = baseTexture.baseTexture;
-    }
-    this.baseTexture = baseTexture;
+    this.noFrame = !frame;
+    let textureFrame = frame ?? new Rectangle(0, 0, 1, 1);
+    const source = baseTexture instanceof Texture ? baseTexture.baseTexture : baseTexture;
+    this.baseTexture = source;
     /** @type {Rectangle} */
-    this.frame = frame;
+    this.frame = textureFrame;
     /** @type {Rectangle | null | undefined} */
     this.trim = trim;
     /** @type {boolean} */
@@ -67,11 +63,11 @@ export class Texture {
     this.height = 0;
     /** @type {Rectangle} */
     this.crop = crop ?? new Rectangle(0, 0, 1, 1);
-    if (baseTexture.hasLoaded) {
+    if (source.hasLoaded) {
       if (this.noFrame) {
-        frame = new Rectangle(0, 0, baseTexture.width, baseTexture.height);
+        textureFrame = new Rectangle(0, 0, source.width, source.height);
       }
-      this.setFrame(frame);
+      this.setFrame(textureFrame);
     }
   }
 
@@ -89,7 +85,7 @@ export class Texture {
    * Destroys this texture and cleans up resources.
    * @param {boolean} destroyBase - Whether to destroy the base texture as well.
    */
-  public destroy(destroyBase: boolean = false): void {
+  public destroy(destroyBase = false): void {
     if (destroyBase) {
       this.baseTexture.destroy();
     }
@@ -116,10 +112,11 @@ export class Texture {
     ) {
       // If `true` then `PIXI.Texture.setFrame` will no longer throw an error if the texture dimensions are incorrect.
       // Instead `Texture.valid` will be set to `false` (#1556)
-      // TODO: make this configurable
       const isTextureSilentFail = true;
       if (!isTextureSilentFail) {
-        throw new Error(`Texture Error: frame does not fit inside the base Texture dimensions ${this}`);
+        throw new Error(
+          `Texture Error: frame ${frame.width}x${frame.height} does not fit inside the base texture ${this.baseTexture.width}x${this.baseTexture.height}`
+        );
       }
       this.valid = false;
       return;

package/src/phaser/geom/point.ts

@@ -218,7 +218,7 @@ export class Point {
    * @returns {number} The magnitude of the point.
    */
   public getMagnitude(): number {
-    return Math.sqrt(this.x * this.x + this.y * this.y);
+    return Math.hypot(this.x, this.y);
   }
 
   /**

package/src/phaser/geom/polygon.test.ts

@@ -79,4 +79,63 @@ describe('Polygon', () => {
       expect(polygon._points.every((value) => typeof value === 'number')).toBe(true);
     });
   });
+
+  describe('setTo', () => {
+    it('reads a flat list of loose numbers as x/y pairs', () => {
+      expect(new Polygon([0, 0, 10, 0, 10, 10]).toNumberArray()).toStrictEqual([0, 0, 10, 0, 10, 10]);
+    });
+
+    it('reads a list of x/y tuples', () => {
+      expect(
+        new Polygon([
+          [0, 0],
+          [10, 0],
+          [10, 10],
+        ]).toNumberArray()
+      ).toStrictEqual([0, 0, 10, 0, 10, 10]);
+    });
+
+    it('reads a list of plain x/y objects', () => {
+      expect(new Polygon([{ x: 0, y: 0 }, { x: 10, y: 0 }, new Point(10, 10)]).toNumberArray()).toStrictEqual([
+        0, 0, 10, 0, 10, 10,
+      ]);
+    });
+
+    it('stores every vertex as a point whatever form it came in as', () => {
+      expect(new Polygon([0, 0, 10, 0]).points.every((value) => value instanceof Point)).toBe(true);
+    });
+
+    it('replaces the previous points', () => {
+      const polygon = square();
+      polygon.points = [new Point(1, 1), new Point(2, 2)];
+      expect(polygon.toNumberArray()).toStrictEqual([1, 1, 2, 2]);
+    });
+
+    it('empties the polygon when the points are cleared', () => {
+      const polygon = square();
+      polygon.points = null;
+      expect(polygon.points).toStrictEqual([]);
+      expect(polygon.area).toBe(0);
+    });
+  });
+
+  describe('calculateArea', () => {
+    it('measures a square', () => {
+      expect(Math.abs(square().area)).toBe(100);
+    });
+
+    it('measures a triangle as half its bounding square', () => {
+      expect(Math.abs(triangle().area)).toBe(50);
+    });
+  });
+
+  describe('clone', () => {
+    it('copies the vertices into a detached polygon', () => {
+      const original = square();
+      const copy = original.clone();
+      expect(copy.toNumberArray()).toStrictEqual(original.toNumberArray());
+      original.points = [new Point(1, 1)];
+      expect(copy.toNumberArray()).toStrictEqual([0, 0, 10, 0, 10, 10, 0, 10]);
+    });
+  });
 });