convert BitnapTextData to TS and to the new internal pool system

obiot · obiot · commit beaece47ad4c · 2024-08-21T08:25:27.000+08:00
diff --git a/packages/melonjs/src/index.js b/packages/melonjs/src/index.js
@@ -27,7 +27,7 @@ import Trigger from "./renderable/trigger.js";
 import Light2d from "./renderable/light2d.js";
 import Text from "./renderable/text/text.js";
 import BitmapText from "./renderable/text/bitmaptext.js";
-import BitmapTextData from "./renderable/text/bitmaptextdata.js";
+import BitmapTextData from "./renderable/text/bitmaptextdata.ts";
 import { Draggable } from "./renderable/draggable.js";
 import { DropTarget } from "./renderable/dragndrop.js";
 import TMXRenderer from "./level/tiled/renderer/TMXRenderer.js";
@@ -198,7 +198,7 @@ export function boot() {
 		console.log("melonJS 2 (v" + version + ") | http://melonjs.org");
 	}
 
-	// register all built-ins objects into the object pool
+	// register all built-ins objects into the object legacy pool
 	pool.register("me.Entity", Entity);
 	pool.register("me.Collectable", Collectable);
 	pool.register("me.Trigger", Trigger);
@@ -209,10 +209,7 @@ export function boot() {
 	pool.register("me.Renderable", Renderable);
 	pool.register("me.Text", Text, true);
 	pool.register("me.BitmapText", BitmapText);
-	pool.register("me.BitmapTextData", BitmapTextData, true);
-	pool.register("me.ImageLayer", ImageLayer);
 	pool.register("me.ColorLayer", ColorLayer, true);
-
 	// duplicate all entries if use with no namespace (e.g. es6)
 	pool.register("Entity", Entity);
 	pool.register("Collectable", Collectable);
@@ -225,7 +222,6 @@ export function boot() {
 	pool.register("Renderable", Renderable);
 	pool.register("Text", Text, true);
 	pool.register("BitmapText", BitmapText);
-	pool.register("BitmapTextData", BitmapTextData, true);
 	pool.register("ImageLayer", ImageLayer);
 	pool.register("ColorLayer", ColorLayer, true);
 
diff --git a/packages/melonjs/src/pool.ts b/packages/melonjs/src/pool.ts
@@ -12,6 +12,7 @@ import { vector3dPool } from "./math/vector3d";
 import { particlePool } from "./particles/particle";
 import { boundsPool } from "./physics/bounds";
 import { tweenPool } from "./tweens/tween";
+import { bitmapTextDataPool } from "./renderable/text/bitmaptextdata";
 
 const pools = {
 	vector2d: vector2dPool,
@@ -28,6 +29,7 @@ const pools = {
 	ellipse: ellipsePool,
 	tween: tweenPool,
 	particle: particlePool,
+	bitmapTextData: bitmapTextDataPool,
 } as const;
 
 type PoolKey = keyof typeof pools;
diff --git a/packages/melonjs/src/renderable/text/bitmaptext.js b/packages/melonjs/src/renderable/text/bitmaptext.js
@@ -1,9 +1,9 @@
 import { Color } from "../../math/color.ts";
-import pool from "../../system/legacy_pool.js";
 import { getImage, getBinary } from "../../loader/loader.js";
 import Renderable from "../renderable.js";
 import TextMetrics from "./textmetrics.js";
 import { vector2dPool } from "../../math/vector2d.ts";
+import { bitmapTextDataPool } from "./bitmaptextdata.ts";
 
 /**
  * a bitmap font object
@@ -105,10 +105,9 @@ export default class BitmapText extends Renderable {
 			 * @private
 			 */
 			// use settings.font to retreive the data from the loader
-			this.fontData = pool.pull("BitmapTextData", getBinary(settings.font));
+			this.fontData = bitmapTextDataPool.get(getBinary(settings.font));
 		} else {
-			this.fontData = pool.pull(
-				"BitmapTextData",
+			this.fontData = bitmapTextDataPool.get(
 				// if starting/includes "info face" the whole data string was passed as parameter
 				settings.fontData.includes("info face")
 					? settings.fontData
@@ -425,7 +424,7 @@ export default class BitmapText extends Renderable {
 	destroy() {
 		vector2dPool.release(this.fontScale);
 		this.fontScale = undefined;
-		pool.push(this.fontData);
+		bitmapTextDataPool.release(this.fontData);
 		this.fontData = undefined;
 		this._text.length = 0;
 		this.metrics = undefined;
diff --git a/packages/melonjs/src/renderable/text/bitmaptextdata.ts b/packages/melonjs/src/renderable/text/bitmaptextdata.ts
@@ -1,7 +1,8 @@
-import Glyph from "./glyph.js";
+import Glyph from "./glyph.ts";
+import { createPool } from "../../pool.ts";
 
 // bitmap constants
-const capChars = [
+const capChars: string[] = [
 	"M",
 	"N",
 	"B",
@@ -34,11 +35,11 @@ const capChars = [
  * Gets the value from a string of pairs.
  * @ignore
  */
-function getValueFromPair(string, pattern) {
+function getValueFromPair(string: string, pattern: RegExp): string {
 	const value = string.match(pattern);
 	if (!value) {
 		throw new Error(
-			"Could not find pattern " + pattern + " in string: " + string,
+			`${`Could not find pattern ${pattern}` as string} in string: ${string}`,
 		);
 	}
 
@@ -48,13 +49,13 @@ function getValueFromPair(string, pattern) {
 /**
  * Gets the first glyph in the map that is not a space character
  * @ignore
- * @param {object} glyphs - the map of glyphs, each key is a char code
- * @returns {Glyph}
+ * @param glyphs - the map of glyphs, each key is a char code
+ * @returns the first glyph that is not a space character
  */
-function getFirstGlyph(glyphs) {
+function getFirstGlyph(glyphs: any): Glyph | null {
 	const keys = Object.keys(glyphs);
 	for (let i = 0; i < keys.length; i++) {
-		if (keys[i] > 32) {
+		if (parseInt(keys[i]) > 32) {
 			return glyphs[keys[i]];
 		}
 	}
@@ -64,84 +65,62 @@ function getFirstGlyph(glyphs) {
 /**
  * Creates a glyph to use for the space character
  * @ignore
- * @param {object} glyphs - the map of glyphs, each key is a char code
+ * @param glyphs - the map of glyphs, each key is a char code
  */
-function createSpaceGlyph(glyphs) {
+function createSpaceGlyph(glyphs: any) {
 	const spaceCharCode = " ".charCodeAt(0);
 	let glyph = glyphs[spaceCharCode];
 	if (!glyph) {
 		glyph = new Glyph();
 		glyph.id = spaceCharCode;
-		glyph.xadvance = getFirstGlyph(glyphs).xadvance;
+		const firstGlyph = getFirstGlyph(glyphs);
+		glyph.xadvance = firstGlyph !== null ? firstGlyph.xadvance : 0;
 		glyphs[spaceCharCode] = glyph;
 	}
 }
 
-/**
- * Class for storing relevant data from the font file.
- * @ignore
- */
 export default class BitmapTextData {
-	/**
-	 * @param {string} data - The bitmap font data pulled from the resource loader using me.loader.getBinary()
-	 */
-	constructor(data) {
-		this.onResetEvent(data);
-	}
-
-	/**
-	 * @ignore
-	 */
-	onResetEvent(data) {
-		this.padTop = 0;
-		this.padRight = 0;
-		this.padBottom = 0;
-		this.padLeft = 0;
-		this.lineHeight = 0;
-		// The distance from the top of most uppercase characters to the baseline. Since the drawing position is the cap height of
-		// the first line, the cap height can be used to get the location of the baseline.
-		this.capHeight = 1;
-		// The distance from the bottom of the glyph that extends the lowest to the baseline. This number is negative.
-		this.descent = 0;
-
-		/**
-		 * The map of glyphs, each key is a char code.
-		 * @type {object}
-		 */
-		this.glyphs = {};
-
-		// parse the data
+	padTop: number = 0;
+	padRight: number = 0;
+	padBottom: number = 0;
+	padLeft: number = 0;
+	lineHeight: number = 0;
+	capHeight: number = 1;
+	descent: number = 0;
+	glyphs: { [key: number]: Glyph } = {};
+
+	constructor(data: string) {
 		this.parse(data);
 	}
 
-	/**
-	 * This parses the font data text and builds a map of glyphs containing the data for each character
-	 * @param {string} fontData
-	 */
-	parse(fontData) {
+	parse(fontData: string) {
 		if (!fontData) {
 			throw new Error(
 				"File containing font data was empty, cannot load the bitmap font.",
 			);
 		}
+
 		const lines = fontData.split(/\r\n|\n/);
-		const padding = fontData.match(/padding\=\d+,\d+,\d+,\d+/g);
+		const padding = fontData.match(/padding=\d+,\d+,\d+,\d+/g);
 		if (!padding) {
 			throw new Error("Padding not found in first line");
 		}
 		const paddingValues = padding[0].split("=")[1].split(",");
+
 		this.padTop = parseFloat(paddingValues[0]);
 		this.padLeft = parseFloat(paddingValues[1]);
 		this.padBottom = parseFloat(paddingValues[2]);
 		this.padRight = parseFloat(paddingValues[3]);
+		this.lineHeight = parseFloat(getValueFromPair(lines[1], /lineHeight=\d+/g));
 
-		this.lineHeight = parseFloat(
-			getValueFromPair(lines[1], /lineHeight\=\d+/g),
-		);
+		this.capHeight = 1;
+		this.descent = 0;
+		this.glyphs = {};
 
-		const baseLine = parseFloat(getValueFromPair(lines[1], /base\=\d+/g));
+		const baseLine = parseFloat(getValueFromPair(lines[1], /base=\d+/g));
 		const padY = this.padTop + this.padBottom;
-		let glyph = null;
+
+		let glyph: Glyph | null = null;
 
 		for (let i = 4; i < lines.length; i++) {
 			const line = lines[i];
@@ -183,7 +162,7 @@ export default class BitmapTextData {
 
 		createSpaceGlyph(this.glyphs);
 
-		let capGlyph = null;
+		let capGlyph: Glyph | null = null;
 		for (let i = 0; i < capChars.length; i++) {
 			const capChar = capChars[i];
 			capGlyph = this.glyphs[capChar.charCodeAt(0)];
@@ -193,7 +172,7 @@ export default class BitmapTextData {
 		}
 		if (!capGlyph) {
 			for (const charCode in this.glyphs) {
-				if (this.glyphs.hasOwnProperty(charCode)) {
+				if (Object.prototype.hasOwnProperty.call(this.glyphs, charCode)) {
 					glyph = this.glyphs[charCode];
 					if (glyph.height === 0 || glyph.width === 0) {
 						continue;
@@ -207,3 +186,17 @@ export default class BitmapTextData {
 		this.capHeight -= padY;
 	}
 }
+
+export const bitmapTextDataPool = createPool<
+	BitmapTextData,
+	[fontData: string]
+>((fontData: string) => {
+	const instance = new BitmapTextData(fontData);
+
+	return {
+		instance,
+		reset(fontData) {
+			instance.parse(fontData);
+		},
+	};
+});
diff --git a/packages/melonjs/src/renderable/text/glyph.ts b/packages/melonjs/src/renderable/text/glyph.ts
@@ -1,4 +1,3 @@
-// bitmap constants
 const LOG2_PAGE_SIZE = 9;
 const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
 
@@ -7,6 +6,24 @@ const PAGE_SIZE = 1 << LOG2_PAGE_SIZE;
  * @ignore
  */
 export default class Glyph {
+	/**
+	 * @ignore
+	 */
+	id: number;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	u: number;
+	v: number;
+	u2: number;
+	v2: number;
+	xoffset: number;
+	yoffset: number;
+	xadvance: number;
+	fixedWidth: boolean;
+	kerning: { [key: number]: { [key: number]: number } };
+
 	/**
 	 * @ignore
 	 */
@@ -29,7 +46,7 @@ export default class Glyph {
 	/**
 	 * @ignore
 	 */
-	getKerning(ch) {
+	getKerning(ch: number): number {
 		if (this.kerning) {
 			const page = this.kerning[ch >>> LOG2_PAGE_SIZE];
 			if (page) {
@@ -42,7 +59,7 @@ export default class Glyph {
 	/**
 	 * @ignore
 	 */
-	setKerning(ch, value) {
+	setKerning(ch: number, value: number): void {
 		if (!this.kerning) {
 			this.kerning = {};
 		}
diff --git a/packages/melonjs/tests/bitmapfontdata.spec.ts b/packages/melonjs/tests/bitmapfontdata.spec.ts
@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from "vitest";
-import { BitmapTextData } from "../src/index.js";
+import { getPool } from "../src/pool.ts";
 
 const bitmapTextDataFixture =
 	'info face="Arial" size=18 bold=0 italic=0 charset="" unicode=0 stretchH=100 smooth=1 aa=1 padding=0,0,0,0 spacing=0,0\n' +
@@ -143,9 +143,9 @@ const bitmapTextDataFixture =
 
 describe("BitmapTextData", () => {
 	describe("parse", () => {
-		let bitmapTextData = null;
+		let bitmapTextData: any = null;
 		beforeEach(() => {
-			bitmapTextData = new BitmapTextData(bitmapTextDataFixture);
+			bitmapTextData = getPool("bitmapTextData").get(bitmapTextDataFixture);
 		});
 
 		it("should have 95 glyphs", () => {
