Skip to content

Commit

Permalink
fix(renderer): fix incorrect culling when text is at edge of screen
Browse files Browse the repository at this point in the history
  • Loading branch information
djcsdy committed Nov 24, 2022
1 parent 8545d80 commit ad4c838
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 11 deletions.
6 changes: 5 additions & 1 deletion index.ts
Original file line number Diff line number Diff line change
@@ -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";

Expand Down Expand Up @@ -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,
Expand Down
39 changes: 29 additions & 10 deletions renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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"));
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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 {
Expand All @@ -169,3 +183,8 @@ export class TextRenderer {
context.fillStyle = this.color.toString();
}
}

interface Cache {
readonly canvas: HTMLCanvasElement;
readonly bounds: BoundingBox;
}

0 comments on commit ad4c838

Please sign in to comment.