Reapply "Merge branch 'main' into feat/make-fps-updates-activatable-at-runtime"

This reverts commit 38e9158.

Author: Drulokia

Dockerfile

@@ -9,7 +9,7 @@ COPY .npmrc .npmrc
 COPY package.json package.json
 
 # Install PNPM
-RUN corepack prepare && corepack enable
+RUN corepack enable && corepack prepare [email protected] --activate
 
 # Get pnpm to install the version of Node declared in .npmrc
 RUN pnpm exec ls

examples/common/constructTestRow.ts

@@ -22,12 +22,15 @@ import { waitForLoadedDimensions } from './utils.js';
 
 const CONTAINER_SIZE = 200;
 const PADDING = 20;
+const POSITION = null;
 
 export interface TestRowOptions {
   renderer: RendererMain;
   rowNode: INode;
   containerSize?: number;
+  containerHeight?: number;
   padding?: number;
+  descriptionPosition?: 'top' | 'bottom';
 }
 
 export async function constructTestRow(
@@ -38,28 +41,36 @@ export async function constructTestRow(
     renderer,
     rowNode,
     containerSize = CONTAINER_SIZE,
+    containerHeight = containerSize,
     padding = PADDING,
+    descriptionPosition = POSITION,
   } = options;
   let curX = 0;
   const curY = 0;
   for (const testNode of testNodes) {
+    let textPos =
+      descriptionPosition === 'top'
+        ? 0
+        : descriptionPosition === 'bottom'
+        ? containerHeight + padding
+        : containerHeight / 2;
     if (typeof testNode === 'string') {
       const dimensions = await waitForLoadedDimensions(
         renderer.createTextNode({
-          mountY: 0.5,
+          mountY: descriptionPosition ? 1 : 0.5,
           x: curX,
-          y: containerSize / 2,
+          y: textPos,
           text: testNode,
           parent: rowNode,
         }),
       );
-      curX += dimensions.width + padding;
+      curX += descriptionPosition ? 0 : dimensions.width + padding;
     } else {
       const container = renderer.createNode({
         parent: rowNode,
         color: 0xffffffff,
         width: containerSize,
-        height: containerSize,
+        height: containerHeight,
         clipping: true,
         x: curX,
         y: curY,
@@ -68,5 +79,5 @@ export async function constructTestRow(
       curX += containerSize + padding;
     }
   }
-  return curY + containerSize;
+  return curY + containerHeight;
 }

examples/tests/text-wordbreak.ts

@@ -0,0 +1,161 @@
+import type { ITextNodeProps, RendererMain } from '@lightningjs/renderer';
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+import { paginateTestRows, type TestRow } from '../common/paginateTestRows.js';
+import { PageContainer } from '../common/PageContainer.js';
+import { constructTestRow } from '../common/constructTestRow.js';
+
+export async function automation(settings: ExampleSettings) {
+  // Snapshot all the pages
+  await (await test(settings)).snapshotPages();
+}
+
+export default async function test(settings: ExampleSettings) {
+  const { renderer } = settings;
+  const pageContainer = new PageContainer(settings, {
+    width: renderer.settings.appWidth,
+    height: renderer.settings.appHeight,
+    title: 'Text wordBreak',
+  });
+
+  await paginateTestRows(pageContainer, [
+    ...generateWordBreakTest(renderer, 'sdf', 4),
+    ...generateWordBreakTest(renderer, 'sdf', 3),
+    ...generateWordBreakTest(renderer, 'sdf', 2),
+    ...generateWordBreakTest(renderer, 'sdf', 1),
+  ]);
+
+  return pageContainer;
+}
+
+const containerSize = 555;
+const containerHeight = 200;
+const descriptionPosition = 'top';
+const NODE_PROPS = {
+  x: 0,
+  y: 0,
+  color: 0x000000ff,
+  text: `This is a long and Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu`,
+  fontFamily: 'Ubuntu',
+  textRendererOverride: 'sdf',
+  fontSize: 20,
+  contain: 'width',
+  width: containerSize,
+  height: containerHeight,
+  wordBreak: 'normal',
+} satisfies Partial<ITextNodeProps>;
+
+function generateWordBreakTest(
+  renderer: RendererMain,
+  textRenderer: 'canvas' | 'sdf',
+  maxLines: number,
+): TestRow[] {
+  const text1 = `'wordBreak: normal' - which is the default.`;
+  const text2 = `'wordBreak: breakAll'`;
+  const text3 = `'wordBreak: breakWord'`;
+
+  return [
+    {
+      title: maxLines < 4 ? `${text1} Maxlines set to ${maxLines}` : text1,
+      content: async (rowNode) => {
+        const nodeProps = {
+          ...NODE_PROPS,
+          textRendererOverride: textRenderer,
+        } satisfies Partial<ITextNodeProps>;
+
+        return await constructTestRow(
+          {
+            renderer,
+            rowNode,
+            containerSize,
+            descriptionPosition,
+            containerHeight,
+          },
+          [
+            'Renderer: sdf',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              textRendererOverride: 'sdf',
+            }),
+            'Renderer: canvas',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              textRendererOverride: 'canvas',
+            }),
+          ],
+        );
+      },
+    },
+    {
+      title: maxLines < 4 ? `${text2} and maxlines set to ${maxLines}` : text2,
+      content: async (rowNode) => {
+        const nodeProps = {
+          ...NODE_PROPS,
+          textRendererOverride: textRenderer,
+        } satisfies Partial<ITextNodeProps>;
+
+        return await constructTestRow(
+          {
+            renderer,
+            rowNode,
+            containerSize,
+            descriptionPosition,
+            containerHeight,
+          },
+          [
+            'Renderer: sdf',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              wordBreak: 'break-all',
+              textRendererOverride: 'sdf',
+            }),
+            'Renderer: canvas',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              wordBreak: 'break-all',
+              textRendererOverride: 'canvas',
+            }),
+          ],
+        );
+      },
+    },
+    {
+      title: maxLines < 4 ? `${text3} and maxlines set to ${maxLines}` : text3,
+      content: async (rowNode) => {
+        const nodeProps = {
+          ...NODE_PROPS,
+          textRendererOverride: textRenderer,
+        } satisfies Partial<ITextNodeProps>;
+
+        return await constructTestRow(
+          {
+            renderer,
+            rowNode,
+            containerSize,
+            descriptionPosition,
+            containerHeight,
+          },
+          [
+            'Renderer: sdf',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              wordBreak: 'break-word',
+              textRendererOverride: 'sdf',
+            }),
+            'Renderer: canvas',
+            renderer.createTextNode({
+              ...nodeProps,
+              maxLines,
+              wordBreak: 'break-word',
+              textRendererOverride: 'canvas',
+            }),
+          ],
+        );
+      },
+    },
+  ] satisfies TestRow[];
+}

exports/index.ts

@@ -59,6 +59,7 @@ export * from '../src/core/renderers/CoreShaderNode.js';
 export * from '../src/core/shaders/templates/BorderTemplate.js';
 export * from '../src/core/shaders/templates/HolePunchTemplate.js';
 export * from '../src/core/shaders/templates/RoundedTemplate.js';
+export * from '../src/core/shaders/templates/ShadowTemplate.js';
 export * from '../src/core/shaders/templates/LinearGradientTemplate.js';
 export * from '../src/core/shaders/templates/RadialGradientTemplate.js';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "3.0.0-beta1",
+  "version": "3.0.0-beta5",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",
@@ -14,7 +14,6 @@
     "./inspector": "./dist/exports/inspector.js"
   },
   "scripts": {
-    "preinstall": "node scripts/please-use-pnpm.js",
     "start": "cd examples && pnpm start",
     "start:prod": "cd examples && pnpm start:prod",
     "build": "tsc --build",
@@ -88,6 +87,6 @@
   "engines": {
     "npm": ">= 10.0.0",
     "pnpm": ">= 8.9.2",
-    "node": ">= 20.9.0"
+    "node": ">= 18.0.0"
   }
 }

scripts/please-use-pnpm.js

@@ -62,7 +62,6 @@ describe('set color()', () => {
     y: 0,
     zIndex: 0,
     zIndexLocked: 0,
-    preventCleanup: false,
     strictBounds: false,
   };