fix: Issue with pointer events on screen elements

CHANGELOG.md

@@ -138,7 +138,8 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Fixed
 
-- 
+- Fixed issue where pointer events did not work properly when using [[ScreenElement]]s
+- Fixed issue where debug draw was not accurate when using *AndFill suffixed [[DisplayMode]]s
 
 ### Updates
 

sandbox/tests/pointer/pointer.ts

@@ -8,6 +8,24 @@ class Player extends ex.Actor {
 
 class Game2 extends ex.Engine {
   initialize() {
+    const screenElement = new ex.ScreenElement({
+      x: 100,
+      y: 100,
+      height: 50,
+      width: 100,
+      color: ex.Color.Red
+    });
+    screenElement.pointer.useColliderShape = true;
+    screenElement.pointer.useGraphicsBounds = true;
+    screenElement.on('pointerdown', () => {
+      console.log('screen element down')
+    });
+    screenElement.on('pointerup', () => {
+      console.log('screen element up')
+    });
+    this.add(screenElement);
+
+
     const player1 = new Player(ex.Color.Green);
     this.add(player1);
     player1.z = 10;
@@ -44,6 +62,14 @@ class Game2 extends ex.Engine {
     this.start(loader);
   }
 }
-var game2 = new Game2({width: 600, height: 400});
+var game2 = new Game2({
+  width: 600,
+  height: 400,
+  antialiasing: false,
+  displayMode: ex.DisplayMode.FitScreenAndFill
+});
+game2.debug.collider.showBounds = true;
+game2.debug.graphics.showBounds = true;
+game2.toggleDebug();
 
 game2.initialize();

src/engine/Camera.ts

@@ -691,7 +691,7 @@ export class Camera implements CanUpdate, CanInitialize {
   }
 
   public updateViewport() {
-    // recalc viewport
+    // recalculate viewport
     this._viewport = new BoundingBox(
       this.x - this._halfWidth,
       this.y - this._halfHeight,

src/engine/Debug/DebugSystem.ts

@@ -100,6 +100,9 @@ export class DebugSystem extends System {
       this._pushCameraTransform(tx);
 
       this._graphicsContext.save();
+      if (tx.coordPlane === CoordPlane.Screen) {
+        this._graphicsContext.translate(this._engine.screen.contentArea.left, this._engine.screen.contentArea.top);
+      }
       this._graphicsContext.z = txSettings.debugZIndex;
 
       this._applyTransform(entity);
@@ -194,6 +197,9 @@ export class DebugSystem extends System {
 
       // World space
       this._graphicsContext.save();
+      if (tx.coordPlane === CoordPlane.Screen) {
+        this._graphicsContext.translate(this._engine.screen.contentArea.left, this._engine.screen.contentArea.top);
+      }
       this._graphicsContext.z = txSettings.debugZIndex;
       motion = entity.get(MotionComponent);
       if (motion) {

src/engine/Graphics/GraphicsComponent.ts

@@ -6,6 +6,7 @@ import { BoundingBox } from '../Collision/Index';
 import { Component } from '../EntityComponentSystem/Component';
 import { Material } from './Context/material';
 import { Logger } from '../Util/Log';
+import { WatchVector } from '../Math/watch-vector';
 
 /**
  * Type guard for checking if a Graphic HasTick (used for graphics that change over time like animations)
@@ -79,8 +80,6 @@ export class GraphicsComponent extends Component {
 
   public material: Material | null = null;
 
-
-
   /**
    * Draws after the entity transform has been applied, but before graphics component graphics have been drawn
    */
@@ -111,15 +110,36 @@ export class GraphicsComponent extends Component {
    */
   public opacity: number = 1;
 
+
+  private _offset: Vector = Vector.Zero;
+
   /**
    * Offset to apply to graphics by default
    */
-  public offset: Vector = Vector.Zero;
+  public get offset(): Vector {
+    return new WatchVector(this._offset, () => {
+      this.recalculateBounds();
+    });
+  }
+  public set offset(value: Vector) {
+    this._offset = value;
+    this.recalculateBounds();
+  }
+
+  private _anchor: Vector = Vector.Half;
 
   /**
    * Anchor to apply to graphics by default
    */
-  public anchor: Vector = Vector.Half;
+  public get anchor(): Vector {
+    return new WatchVector(this._anchor, () => {
+      this.recalculateBounds();
+    });
+  }
+  public set anchor(value: Vector) {
+    this._anchor = value;
+    this.recalculateBounds();
+  }
 
   /**
    * Flip all graphics horizontally along the y-axis

src/engine/Screen.ts

@@ -544,7 +544,8 @@ export class Screen {
    * Excalibur screen space.
    *
    * Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the
-   * bottom right corner (resolutionX, resolutionY)
+   * bottom right corner (resolutionX, resolutionY). When using *AndFill suffixed display modes screen space
+   * (0, 0) is the top left of the safe content area bounding box not the viewport.
    * @param point
    */
   public pageToScreenCoordinates(point: Vector): Vector {
@@ -575,6 +576,10 @@ export class Screen {
     newX = (newX / this.viewport.width) * this.resolution.width;
     newY = (newY / this.viewport.height) * this.resolution.height;
 
+    // offset by content area
+    newX = newX - this.contentArea.left;
+    newY = newY - this.contentArea.top;
+
     return new Vector(newX, newY);
   }
 
@@ -590,6 +595,10 @@ export class Screen {
     let newX = point.x;
     let newY = point.y;
 
+    // offset by content area
+    newX = newX + this.contentArea.left;
+    newY = newY + this.contentArea.top;
+
     newX = (newX / this.resolution.width) * this.viewport.width;
     newY = (newY / this.resolution.height) * this.viewport.height;