fixed maxWidth, maxHeight, contain

examples/common/Pager.ts

@@ -0,0 +1,71 @@
+import type { INode, RendererMain } from '@lightningjs/renderer';
+import { Component } from './Component.js';
+
+export default class Pager extends Component {
+  currentIndex = 0;
+  currentPage: INode | null = null;
+  pages: INode[] = [];
+
+  constructor(renderer: RendererMain, parent: INode, pages: INode[]) {
+    super(renderer, {
+      w: 1920,
+      h: 1080,
+      parent,
+    });
+
+    this.pages = pages;
+    this.setPage(this.currentIndex);
+    this.addKeyboardNavigation();
+  }
+
+  setPage(index: number) {
+    if (this.currentPage) {
+      this.currentPage.parent = null;
+    }
+    if (this.pages[index] !== undefined) {
+      this.currentPage = this.pages[index];
+      this.currentPage.parent = this.node;
+    }
+    return true;
+  }
+
+  async nextPage(fromKeyboard = false) {
+    if (fromKeyboard === false && this.currentIndex === this.pages.length - 1) {
+      return false;
+    }
+    if (fromKeyboard === true) {
+      this.currentIndex = (this.currentIndex + 1) % this.pages.length;
+    } else {
+      this.currentIndex = Math.min(
+        this.pages.length - 1,
+        this.currentIndex + 1,
+      );
+    }
+    this.setPage(this.currentIndex);
+    return true;
+  }
+
+  async previousPage(fromKeyboard = false) {
+    if (fromKeyboard === false && this.currentIndex === 0) {
+      return false;
+    }
+    if (fromKeyboard === true) {
+      this.currentIndex =
+        (this.currentIndex - 1 + this.pages.length) % this.pages.length;
+    } else {
+      this.currentIndex = Math.max(0, this.currentIndex - 1);
+    }
+    this.setPage(this.currentIndex);
+    return true;
+  }
+
+  addKeyboardNavigation() {
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'ArrowRight') {
+        this.nextPage(true);
+      } else if (e.key === 'ArrowLeft') {
+        this.previousPage(true);
+      }
+    });
+  }
+}

examples/tests/alpha-blending.ts

@@ -85,6 +85,7 @@ export default async function test(settings: ExampleSettings) {
     fontFamily: 'Ubuntu',
     fontSize: HEADER_FONT_SIZE,
     color: 0xffffffff,
+    contain: 'width',
     maxWidth: renderer.settings.appWidth / 2,
     y: PADDING,
     textAlign: 'center',
@@ -96,6 +97,7 @@ export default async function test(settings: ExampleSettings) {
     fontFamily: 'Ubuntu',
     fontSize: HEADER_FONT_SIZE,
     color: 0xffffffff,
+    contain: 'width',
     maxWidth: renderer.settings.appWidth / 2,
     x: renderer.settings.appWidth / 2,
     y: PADDING,

examples/tests/text-align.ts

@@ -65,6 +65,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
   const canvasText = renderer.createTextNode({
     y: yPos,
     maxWidth: testRoot.w,
+    contain: 'width',
     fontSize,
     fontFamily,
     color: 0xff0000ff,
@@ -74,6 +75,7 @@ export default async function test({ renderer, testRoot }: ExampleSettings) {
   const sdfText = renderer.createTextNode({
     y: yPos,
     maxWidth: testRoot.w,
+    contain: 'width',
     fontSize,
     fontFamily,
     color: 0x0000ff77,

examples/tests/text-contain-adv.ts

@@ -0,0 +1,222 @@
+import type { INode } from '../../dist/exports/index.js';
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+import Pager from '../common/Pager.js';
+
+export async function automation(settings: ExampleSettings) {
+  const pager = await test(settings);
+  await settings.snapshot();
+  while (await pager.nextPage()) {
+    await settings.snapshot();
+  }
+}
+
+export default async function test(settings: ExampleSettings) {
+  const { renderer, testRoot } = settings;
+
+  const createTextAlignPage = (align: 'left' | 'center' | 'right'): INode => {
+    const container = renderer.createNode({
+      x: 0,
+      y: 0,
+      w: testRoot.w,
+      h: testRoot.h,
+    });
+
+    const centerVerticalLine = renderer.createNode({
+      x: testRoot.w / 2,
+      y: 0,
+      w: 1,
+      h: testRoot.h,
+      color: 0xff0000ff,
+      parent: container,
+    });
+
+    const testLabel1 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 20,
+      mountX: 0.5,
+      text: `Text Align: ${align}, no maxWidth, no contain, mount: [0, .5, 1]`,
+      fontFamily: 'Ubuntu',
+      fontSize: 40,
+      color: 0x0000ffff,
+      textAlign: 'center',
+      parent: container,
+    });
+
+    const textNodeMount0 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 100,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const textNodeMount0_5 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 150,
+      mountX: 0.5,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const textNodeMount1 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 200,
+      mountX: 1,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const testLabel2 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 300,
+      mountX: 0.5,
+      text: `Text Align: ${align}, maxWidth, no contain, mount: [0, .5, 1]`,
+      fontFamily: 'Ubuntu',
+      fontSize: 40,
+      color: 0x0000ffff,
+      textAlign: 'center',
+      parent: container,
+    });
+
+    const textNodeMaxWidthMount0 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 400,
+      maxWidth: 400,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const textNodeMaxWidthMount0_5 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 450,
+      maxWidth: 400,
+      mountX: 0.5,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const textNodeMaxWidthMount1 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 500,
+      maxWidth: 400,
+      mountX: 1,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const testLabel3 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 600,
+      mountX: 0.5,
+      text: `Text Align: ${align}, maxWidth, contain, mount: [0, .5, 1]`,
+      fontFamily: 'Ubuntu',
+      fontSize: 40,
+      color: 0x0000ffff,
+      textAlign: 'center',
+      parent: container,
+    });
+
+    const controlNodeMount0 = renderer.createNode({
+      x: testRoot.w / 2,
+      y: 700,
+      w: 400,
+      h: 30,
+      color: 0x00ff00ff,
+      parent: container,
+    });
+
+    const textNodeMaxWidthContainMount0 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 700,
+      maxWidth: 400,
+      contain: 'width',
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const controlNodeMount0_5 = renderer.createNode({
+      x: testRoot.w / 2,
+      mountX: 0.5,
+      y: 750,
+      w: 400,
+      h: 30,
+      color: 0x00ff00ff,
+      parent: container,
+    });
+
+    const textNodeMaxWidthContainMount0_5 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 750,
+      maxWidth: 400,
+      contain: 'width',
+      mountX: 0.5,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    const controlNodeMount1 = renderer.createNode({
+      x: testRoot.w / 2,
+      mountX: 1,
+      y: 800,
+      w: 400,
+      h: 30,
+      // rotation: (Math.PI * 2) / 16,
+      color: 0x00ff00ff,
+      parent: container,
+    });
+
+    const textNodeMaxWidthContainMount1 = renderer.createTextNode({
+      x: testRoot.w / 2,
+      y: 800,
+      maxWidth: 400,
+      contain: 'width',
+      mountX: 1,
+      text: `Text align: ${align}`,
+      fontFamily: 'Ubuntu',
+      fontSize: 30,
+      // rotation: (Math.PI * 2) / 16,
+      color: 0x000000ff,
+      textAlign: align,
+      parent: container,
+    });
+
+    return container as INode;
+  };
+
+  return new Pager(renderer, testRoot, [
+    createTextAlignPage('left'),
+    createTextAlignPage('center'),
+    createTextAlignPage('right'),
+  ]);
+}

examples/tests/text-contain.ts

@@ -48,8 +48,6 @@ export default async function test(settings: ExampleSettings) {
   const text1 = renderer.createTextNode({
     x: textSizeAfterLoadingBg.x,
     y: textSizeAfterLoadingBg.y,
-    w: 0,
-    h: 0,
     color: 0x000000ff,
     forceLoad: true,
     fontFamily: 'Ubuntu',
@@ -65,8 +63,6 @@ Vivamus consectetur ex magna, non mollis.`,
   const text2 = renderer.createTextNode({
     x: textSizeAfterLoadingBg.x,
     y: textSizeAfterLoadingBg.y,
-    w: 0,
-    h: 0,
     color: 0x000000ff,
     forceLoad: true,
     fontFamily: 'Ubuntu',
@@ -164,7 +160,6 @@ Vivamus consectetur ex magna, non mollis.`,
       text1.alpha = 0;
       text2.alpha = 1;
       text2.maxWidth = 0;
-      text2.h = 0;
     },
     () => {
       // Canvas, contain width
@@ -202,9 +197,9 @@ Vivamus consectetur ex magna, non mollis.`,
     const targetText = i > 4 ? text2 : text1;
 
     header.text = makeHeader(
-      targetText.textRendererOverride!,
-      targetText.w,
-      targetText.h,
+      i > 4 ? 'canvas' : 'sdf',
+      targetText.maxWidth,
+      targetText.maxHeight,
     );
     indexInfo.text = (i + 1).toString();
     textSetDimsInfo.text = `Set size: ${Math.round(targetText.w)}x${Math.round(

examples/tests/text-vertical-align.ts

@@ -93,12 +93,14 @@ function generateVerticalAlignTest(
         const nodeProps = {
           ...NODE_PROPS,
           text: 'txyz',
+          contain: 'height',
           textRendererOverride: textRenderer,
           maxHeight: CONTAINER_SIZE,
         } satisfies Partial<ITextNodeProps>;
 
         const baselineNode = renderer.createTextNode({
           ...nodeProps,
+          verticalAlign: 'middle',
         });
 
         return await constructTestRow({ renderer, rowNode }, [
@@ -130,11 +132,13 @@ function generateVerticalAlignTest(
           ...NODE_PROPS,
           text: 'abcd\ntxyz',
           textRendererOverride: textRenderer,
+          contain: 'height',
           maxHeight: CONTAINER_SIZE,
         } satisfies Partial<ITextNodeProps>;
 
         const baselineNode = renderer.createTextNode({
           ...nodeProps,
+          verticalAlign: 'middle',
         });
 
         return await constructTestRow({ renderer, rowNode }, [