minimojs 1.0.0-alpha.8 → 1.0.0-alpha.9

package/dist/internal/RenderSystem.js

@@ -197,8 +197,12 @@ export class RenderSystem {
         const lineHeightPx = Math.max(1, Math.ceil(sprite.fontSize * sprite.lineHeight));
         const contentHeight = Math.max(1, lineHeightPx * Math.max(lines.length, 1));
         const borderPad = Math.max(0, sprite.borderWidth) * 2;
-        const totalWidth = Math.max(1, Math.ceil(measuredWidth + sprite.paddingX * 2 + borderPad));
-        const totalHeight = Math.max(1, Math.ceil(contentHeight + sprite.paddingY * 2 + borderPad));
+        const totalWidth = Math.max(1, Math.ceil(sprite.fixedWidth > 0
+            ? sprite.fixedWidth
+            : measuredWidth + sprite.paddingX * 2 + borderPad));
+        const totalHeight = Math.max(1, Math.ceil(sprite.fixedHeight > 0
+            ? sprite.fixedHeight
+            : contentHeight + sprite.paddingY * 2 + borderPad));
         sprite._measuredWidth = totalWidth;
         sprite._measuredHeight = totalHeight;
         canvas.width = totalWidth;
@@ -223,7 +227,12 @@ export class RenderSystem {
         const contentLeft = sprite.paddingX + sprite.borderWidth;
         const contentRight = totalWidth - sprite.paddingX - sprite.borderWidth;
         const contentCenter = totalWidth / 2;
-        const startY = sprite.paddingY + sprite.borderWidth + lineHeightPx / 2;
+        const availableContentHeight = Math.max(1, totalHeight - sprite.paddingY * 2 - borderPad);
+        const contentOffsetY = Math.max(0, Math.floor((availableContentHeight - contentHeight) / 2));
+        const startY = sprite.paddingY +
+            sprite.borderWidth +
+            contentOffsetY +
+            lineHeightPx / 2;
         const drawX = sprite.textAlign === "left"
             ? contentLeft
             : sprite.textAlign === "right"
@@ -246,10 +255,10 @@ export class RenderSystem {
     layoutTextLines(ctx, sprite) {
         this.applyTextStyle(ctx, sprite);
         const rawLines = sprite.text.split("\n");
-        if (sprite.maxWidth <= 0) {
+        const availableTextWidth = this.getAvailableTextWidth(sprite);
+        if (availableTextWidth <= 0) {
             return rawLines.length > 0 ? rawLines : [""];
         }
-        const maxWidth = Math.max(1, sprite.maxWidth - sprite.paddingX * 2);
         const wrappedLines = [];
         for (const rawLine of rawLines) {
             const words = rawLine.split(/\s+/).filter((word) => word.length > 0);
@@ -260,7 +269,7 @@ export class RenderSystem {
             let currentLine = words[0];
             for (let i = 1; i < words.length; i++) {
                 const candidate = `${currentLine} ${words[i]}`;
-                if (ctx.measureText(candidate).width <= maxWidth) {
+                if (ctx.measureText(candidate).width <= availableTextWidth) {
                     currentLine = candidate;
                 }
                 else {
@@ -272,6 +281,20 @@ export class RenderSystem {
         }
         return wrappedLines.length > 0 ? wrappedLines : [""];
     }
+    getAvailableTextWidth(sprite) {
+        const borderPad = Math.max(0, sprite.borderWidth) * 2;
+        const limits = [];
+        if (sprite.maxWidth > 0) {
+            limits.push(sprite.maxWidth - sprite.paddingX * 2 - borderPad);
+        }
+        if (sprite.fixedWidth > 0) {
+            limits.push(sprite.fixedWidth - sprite.paddingX * 2 - borderPad);
+        }
+        if (limits.length === 0) {
+            return 0;
+        }
+        return Math.max(1, Math.floor(Math.min(...limits)));
+    }
     applyTextStyle(ctx, sprite) {
         ctx.font = `${sprite.fontWeight} ${sprite.fontSize}px ${sprite.fontFamily}`;
         ctx.shadowColor = "transparent";

package/dist/minimo.d.ts

@@ -253,6 +253,8 @@ export declare class Sprite extends BaseSprite {
  * pipeline as regular sprites.
  */
 export declare class TextSprite extends BaseSprite {
+    private static _measurementCanvas;
+    private static _measurementContext;
     anchorX: "left" | "center" | "right";
     anchorY: "top" | "middle" | "bottom";
     text: string;
@@ -261,6 +263,8 @@ export declare class TextSprite extends BaseSprite {
     fontWeight: string;
     lineHeight: number;
     maxWidth: number;
+    fixedWidth: number;
+    fixedHeight: number;
     paddingX: number;
     paddingY: number;
     backgroundColor: string | null;
@@ -270,13 +274,36 @@ export declare class TextSprite extends BaseSprite {
     textAlign: CanvasTextAlign;
     get width(): number;
     get height(): number;
-    constructor(text: string, x?: number, y?: number, fontSize?: number);
+    constructor(text: string, x?: number, y?: number, fontSizeOrConfig?: number | TextSpriteConfig, config?: TextSpriteConfig);
     getRenderCacheKey(): string;
     get align(): CanvasTextAlign;
     set align(value: CanvasTextAlign);
     protected getAnchorOffsetX(): number;
     protected getAnchorOffsetY(): number;
+    private applyConfig;
+    private ensureMeasured;
+    private layoutMeasuredLines;
+    private getAvailableTextWidth;
 }
+export type TextSpriteConfig = {
+    anchorX?: "left" | "center" | "right";
+    anchorY?: "top" | "middle" | "bottom";
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    lineHeight?: number;
+    maxWidth?: number;
+    fixedWidth?: number;
+    fixedHeight?: number;
+    paddingX?: number;
+    paddingY?: number;
+    backgroundColor?: string | null;
+    borderColor?: string | null;
+    borderWidth?: number;
+    cornerRadius?: number;
+    textAlign?: CanvasTextAlign;
+    align?: CanvasTextAlign;
+};
 export type FontRequirementOptions = {
     weight?: string;
     style?: "normal" | "italic" | "oblique";

package/dist/minimo.js

@@ -237,12 +237,14 @@ export class Sprite extends BaseSprite {
  */
 export class TextSprite extends BaseSprite {
     get width() {
+        this.ensureMeasured();
         return this._measuredWidth;
     }
     get height() {
+        this.ensureMeasured();
         return this._measuredHeight;
     }
-    constructor(text, x = 0, y = 0, fontSize = 16) {
+    constructor(text, x = 0, y = 0, fontSizeOrConfig = 16, config = {}) {
         super();
         this.anchorX = "center";
         this.anchorY = "middle";
@@ -250,6 +252,8 @@ export class TextSprite extends BaseSprite {
         this.fontWeight = "400";
         this.lineHeight = 1.2;
         this.maxWidth = 0;
+        this.fixedWidth = 0;
+        this.fixedHeight = 0;
         this.paddingX = 0;
         this.paddingY = 0;
         this.backgroundColor = null;
@@ -261,11 +265,20 @@ export class TextSprite extends BaseSprite {
         this._measuredWidth = 1;
         /** @internal */
         this._measuredHeight = 1;
+        /** @internal */
+        this._measurementCacheKey = "";
         this.text = text;
         this.x = x;
         this.y = y;
-        this.fontSize = fontSize;
+        this.fontSize =
+            typeof fontSizeOrConfig === "number" ? fontSizeOrConfig : 16;
         this.color = "#ffffff";
+        if (typeof fontSizeOrConfig === "number") {
+            this.applyConfig(config);
+        }
+        else {
+            this.applyConfig(fontSizeOrConfig);
+        }
     }
     getRenderCacheKey() {
         return [
@@ -278,6 +291,8 @@ export class TextSprite extends BaseSprite {
             this.fontWeight,
             this.lineHeight,
             this.maxWidth,
+            this.fixedWidth,
+            this.fixedHeight,
             this.color,
             this.textAlign,
             this.paddingX,
@@ -312,7 +327,136 @@ export class TextSprite extends BaseSprite {
         }
         return 0;
     }
+    applyConfig(config) {
+        if (config.anchorX !== undefined)
+            this.anchorX = config.anchorX;
+        if (config.anchorY !== undefined)
+            this.anchorY = config.anchorY;
+        if (config.fontFamily !== undefined)
+            this.fontFamily = config.fontFamily;
+        if (config.fontSize !== undefined)
+            this.fontSize = config.fontSize;
+        if (config.fontWeight !== undefined)
+            this.fontWeight = config.fontWeight;
+        if (config.lineHeight !== undefined)
+            this.lineHeight = config.lineHeight;
+        if (config.maxWidth !== undefined)
+            this.maxWidth = config.maxWidth;
+        if (config.fixedWidth !== undefined)
+            this.fixedWidth = config.fixedWidth;
+        if (config.fixedHeight !== undefined)
+            this.fixedHeight = config.fixedHeight;
+        if (config.paddingX !== undefined)
+            this.paddingX = config.paddingX;
+        if (config.paddingY !== undefined)
+            this.paddingY = config.paddingY;
+        if (config.backgroundColor !== undefined)
+            this.backgroundColor = config.backgroundColor;
+        if (config.borderColor !== undefined)
+            this.borderColor = config.borderColor;
+        if (config.borderWidth !== undefined)
+            this.borderWidth = config.borderWidth;
+        if (config.cornerRadius !== undefined)
+            this.cornerRadius = config.cornerRadius;
+        if (config.textAlign !== undefined)
+            this.textAlign = config.textAlign;
+        if (config.align !== undefined)
+            this.textAlign = config.align;
+    }
+    ensureMeasured() {
+        const nextKey = [
+            this.text,
+            this.fontFamily,
+            this.fontSize,
+            this.fontWeight,
+            this.lineHeight,
+            this.maxWidth,
+            this.fixedWidth,
+            this.fixedHeight,
+            this.paddingX,
+            this.paddingY,
+            this.borderWidth,
+        ].join("|");
+        if (this._measurementCacheKey === nextKey) {
+            return;
+        }
+        if (typeof document === "undefined") {
+            this._measuredWidth = 1;
+            this._measuredHeight = 1;
+            this._measurementCacheKey = nextKey;
+            return;
+        }
+        if (TextSprite._measurementCanvas === null) {
+            TextSprite._measurementCanvas = document.createElement("canvas");
+            TextSprite._measurementContext =
+                TextSprite._measurementCanvas.getContext("2d");
+        }
+        const ctx = TextSprite._measurementContext;
+        if (!ctx) {
+            this._measuredWidth = 1;
+            this._measuredHeight = 1;
+            this._measurementCacheKey = nextKey;
+            return;
+        }
+        ctx.font = `${this.fontWeight} ${this.fontSize}px ${this.fontFamily}`;
+        const lines = this.layoutMeasuredLines(ctx);
+        const measuredWidth = Math.max(1, Math.ceil(lines.reduce((maxWidth, line) => Math.max(maxWidth, ctx.measureText(line).width), 0)));
+        const lineHeightPx = Math.max(1, Math.ceil(this.fontSize * this.lineHeight));
+        const contentHeight = Math.max(1, lineHeightPx * Math.max(lines.length, 1));
+        const borderPad = Math.max(0, this.borderWidth) * 2;
+        this._measuredWidth = Math.max(1, Math.ceil(this.fixedWidth > 0
+            ? this.fixedWidth
+            : measuredWidth + this.paddingX * 2 + borderPad));
+        this._measuredHeight = Math.max(1, Math.ceil(this.fixedHeight > 0
+            ? this.fixedHeight
+            : contentHeight + this.paddingY * 2 + borderPad));
+        this._measurementCacheKey = nextKey;
+    }
+    layoutMeasuredLines(ctx) {
+        const rawLines = this.text.split("\n");
+        const availableTextWidth = this.getAvailableTextWidth();
+        if (availableTextWidth <= 0) {
+            return rawLines.length > 0 ? rawLines : [""];
+        }
+        const wrappedLines = [];
+        for (const rawLine of rawLines) {
+            const words = rawLine.split(/\s+/).filter((word) => word.length > 0);
+            if (words.length === 0) {
+                wrappedLines.push("");
+                continue;
+            }
+            let currentLine = words[0];
+            for (let i = 1; i < words.length; i++) {
+                const candidate = `${currentLine} ${words[i]}`;
+                if (ctx.measureText(candidate).width <= availableTextWidth) {
+                    currentLine = candidate;
+                }
+                else {
+                    wrappedLines.push(currentLine);
+                    currentLine = words[i];
+                }
+            }
+            wrappedLines.push(currentLine);
+        }
+        return wrappedLines.length > 0 ? wrappedLines : [""];
+    }
+    getAvailableTextWidth() {
+        const borderPad = Math.max(0, this.borderWidth) * 2;
+        const limits = [];
+        if (this.maxWidth > 0) {
+            limits.push(this.maxWidth - this.paddingX * 2 - borderPad);
+        }
+        if (this.fixedWidth > 0) {
+            limits.push(this.fixedWidth - this.paddingX * 2 - borderPad);
+        }
+        if (limits.length === 0) {
+            return 0;
+        }
+        return Math.max(1, Math.floor(Math.min(...limits)));
+    }
 }
+TextSprite._measurementCanvas = null;
+TextSprite._measurementContext = null;
 /**
  * A static image-based background layer rendered behind all sprites.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minimojs",
-  "version": "1.0.0-alpha.8",
+  "version": "1.0.0-alpha.9",
   "description": "MinimoJS v1 — ultra-minimal, flat, deterministic 2D web game engine. Emoji-only sprites, rAF loop, TypeScript-first, LLM-friendly.",
   "type": "module",
   "main": "dist/minimo.js",