From 14a56b2bee112e875ff09ece60f6abe0c22ff3da Mon Sep 17 00:00:00 2001
From: tga <tga@space55.xyz>
Date: Wed, 20 Sep 2023 13:31:50 +0800
Subject: [PATCH] update text width immediately

---
 CHANGELOG.md  | 15 +++++++++++++++
 src/kaboom.ts | 18 +++++++++++++++---
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3031e16e2..f1ce9612b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,21 @@ loadFont("apl386", "/examples/fonts/apl386.ttf", {
 - fixed `wave()` not starting at `0` when time is `0`
 - kaboom now only displays error screen for kaboom's own error, instead of catching all errors in current window
 - added `KaboomError` class for errors related to current kaboom instance
+- setting `obj.text` with `text()` component now immediately updates `width` and `height` property
+```js
+const obj = add([
+    text("oh hi"),
+    pos(100, 200),
+])
+
+// before
+obj.text = "bye"
+console.log(obj.width) // still the width of "oh hi" until next render
+
+// before
+obj.text = "bye"
+console.log(obj.width) // will be updated to the width of "bye"
+```
 
 ### v3000.1.6
 - fixed `loadSound` typing to accept `ArrayBuffer`
diff --git a/src/kaboom.ts b/src/kaboom.ts
index 19ef4ecdf..f516ea9c6 100644
--- a/src/kaboom.ts
+++ b/src/kaboom.ts
@@ -4474,13 +4474,20 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 
 		}
 
-		return {
+		const obj = {
 
 			id: "text",
-			text: t,
+			set text(nt) {
+				t = nt
+				// @ts-ignore
+				update(this)
+			},
+			get text() {
+				return t
+			},
 			textSize: opt.size ?? DEF_TEXT_SIZE,
 			font: opt.font,
-			width: opt.width,
+			width: opt.width ?? 0,
 			height: 0,
 			align: opt.align,
 			lineSpacing: opt.lineSpacing,
@@ -4502,6 +4509,11 @@ export default (gopt: KaboomOpt = {}): KaboomCtx => {
 
 		}
 
+		// @ts-ignore
+		update(obj)
+
+		return obj
+
 	}
 
 	function rect(w: number, h: number, opt: RectCompOpt = {}): RectComp {