feat: add ability to override text styles (#559)

Co-authored-by: Daniel Báez <[email protected]>

CHANGELOG.md

@@ -100,6 +100,7 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 ### Fixed
 
 - Fixed artifacts present in some TrueType fonts.
+- Allow to override the default style in styled text chunks with `override: true` flag
 - Fixed `.use()` and `.unuse()` with area components.
 
 ## [3001.0.0] "Spooky Beans!" - 2024-10-31

src/gfx/draw/drawText.ts

@@ -114,6 +114,13 @@ export interface CharTransform {
      * For example, an opacity of 0.4 with 2 set in the transformation, the resulting opacity will be 0.8 (0.4 × 2).
      */
     opacity?: number;
+
+    /**
+     * If true, the styles applied by this specific {@link DrawTextOpt.styles} entry transform
+     * will override, rather than compose with, the default styles given in {@link DrawTextOpt.transform} and by other
+     * components' styles.
+     */
+    override?: boolean
 }
 
 /**

src/gfx/formatText.ts

@@ -30,6 +30,10 @@ type FontAtlas = {
 const fontAtlases: Record<string, FontAtlas> = {};
 
 function applyCharTransform(fchar: FormattedChar, tr: CharTransform) {
+    if (tr.override) {
+        Object.assign(fchar, tr);
+        return;
+    }
     if (tr.pos) fchar.pos = fchar.pos.add(tr.pos);
     if (tr.scale) fchar.scale = fchar.scale.scale(vec2(tr.scale));
     if (tr.angle) fchar.angle += tr.angle;

tests/playtests/styleOverride.js

@@ -0,0 +1,43 @@
+kaplay({ background: "#000000" });
+
+add([
+    pos(100, 100),
+    text("No override: Hello [foo]styled[/foo] text", {
+        transform: {
+            color: WHITE.darken(200),
+        },
+        styles: {
+            foo: {
+                color: RED
+            }
+        }
+    })
+]);
+
+add([
+    pos(100, 150),
+    text("With override: Hello [foo]styled[/foo] text", {
+        transform: {
+            color: WHITE.darken(200),
+        },
+        styles: {
+            foo: {
+                color: RED,
+                override: true
+            }
+        }
+    })
+]);
+
+add([
+    pos(100, 200),
+    text("With override and color(): Hello [foo]styled[/foo] text", {
+        styles: {
+            foo: {
+                color: RED,
+                override: true
+            }
+        }
+    }),
+    color(WHITE.darken(200)),
+]);