fix(renderer): fix incorrect culling when text is at edge of screen

dcgw · Nov 24, 2022 · ad4c838 · ad4c838
1 parent 8545d80
commit ad4c838
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/index.ts b/index.ts
@@ -1,4 +1,4 @@
-import type {ExcaliburGraphicsContext, GraphicOptions} from "excalibur";
+import type {ExcaliburGraphicsContext, GraphicOptions, BoundingBox} from "excalibur";
 import {BaseAlign, Color, FontStyle, Graphic, TextAlign, Vector} from "excalibur";
 import {TextRenderer} from "./renderer";
 
@@ -171,6 +171,10 @@ export default class Text extends Graphic {
         );
     }
 
+    public override get localBounds(): BoundingBox {
+        return this.renderer.localBounds.scale(this.scale);
+    }
+
     public clone(): Text {
         return new Text({
             text: this.text,

diff --git a/renderer.ts b/renderer.ts
@@ -7,15 +7,12 @@ import type {
     Vector
 } from "excalibur";
 import {notNull} from "@softwareventures/nullable";
+import {BoundingBox} from "excalibur";
 import {lookupBaseAlign, lookupFontStyle, lookupFontWeight, lookupTextAlign} from "./style";
 import {wrapText} from "./wrap";
 
 export class TextRenderer {
-    private cache: {
-        readonly canvas: HTMLCanvasElement;
-        readonly left: number;
-        readonly top: number;
-    } | null = null;
+    private cache: Cache | null = null;
 
     public constructor(
         private readonly text: string,
@@ -35,6 +32,10 @@ export class TextRenderer {
         private readonly shadowBlurRadius: number
     ) {}
 
+    public get localBounds(): BoundingBox {
+        return this.updateCache().bounds;
+    }
+
     public updateIfRequired(
         text: string,
         fontFamily: string,
@@ -88,6 +89,11 @@ export class TextRenderer {
     }
 
     public renderImage(ex: ExcaliburGraphicsContext, x: number, y: number): void {
+        const cache = this.updateCache();
+        ex.drawImage(cache.canvas, x + cache.bounds.left, y + cache.bounds.top);
+    }
+
+    private updateCache(): Cache {
         if (this.cache == null) {
             const canvas = document.createElement("canvas");
             const context = notNull(canvas.getContext("2d"));
@@ -115,8 +121,12 @@ export class TextRenderer {
             if (canvas === canvas2) {
                 this.cache = {
                     canvas,
-                    left,
-                    top
+                    bounds: new BoundingBox({
+                        left: -left,
+                        right,
+                        top: -top,
+                        bottom
+                    })
                 };
             } else {
                 const shadowCompositeLeft = Math.max(
@@ -148,13 +158,17 @@ export class TextRenderer {
 
                 this.cache = {
                     canvas,
-                    left: shadowLeft,
-                    top: shadowTop
+                    bounds: new BoundingBox({
+                        left: -shadowLeft,
+                        right: shadowRight,
+                        top: -shadowTop,
+                        bottom: shadowBottom
+                    })
                 };
             }
         }
 
-        ex.drawImage(this.cache.canvas, x - this.cache.left, y - this.cache.top);
+        return this.cache;
     }
 
     private setCanvasTextProperties(context: CanvasRenderingContext2D): void {
@@ -169,3 +183,8 @@ export class TextRenderer {
         context.fillStyle = this.color.toString();
     }
 }
+
+interface Cache {
+    readonly canvas: HTMLCanvasElement;
+    readonly bounds: BoundingBox;
+}