Merge remote-tracking branch 'upstream/main' into fix/canvas-radius-b…

…order

examples/tests/viewport-largebound.ts

@@ -0,0 +1,125 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+import type { CoreTextNode } from '../../dist/src/core/CoreTextNode.js';
+import type { INode } from '../../dist/exports/index.js';
+
+export async function automation(settings: ExampleSettings) {
+  const page = await test(settings);
+  page(1);
+  await settings.snapshot();
+
+  page(2);
+  await settings.snapshot();
+
+  page(3);
+  await settings.snapshot();
+}
+
+export default async function test({ renderer, testRoot }: ExampleSettings) {
+  // Create a container node
+  const containerNode = renderer.createNode({
+    x: -100,
+    y: -100,
+    width: 2040,
+    height: 1280,
+    color: 0xff0000ff, // Red
+    parent: testRoot,
+    clipping: true,
+  });
+
+  const nodeStatus = renderer.createTextNode({
+    text: '',
+    fontSize: 30,
+    x: 10,
+    y: 580,
+    parent: testRoot,
+  });
+
+  const amountOfNodes = 11;
+  const childNodeWidth = 1700 / amountOfNodes;
+
+  // Create 11 child nodes
+  for (let i = 0; i < amountOfNodes; i++) {
+    const childNode = renderer.createNode({
+      x: i * childNodeWidth + i * 100,
+      y: 300,
+      width: childNodeWidth,
+      height: 300,
+      color: 0x00ff00ff, // Green
+      parent: containerNode,
+    });
+
+    const nodeTest = renderer.createTextNode({
+      x: 10,
+      y: 130,
+      text: `Node ${i}`,
+      color: 0x000000ff,
+      parent: childNode,
+    });
+  }
+
+  function processAllNodes(containerNode: INode) {
+    let status =
+      'Container bound: ' + JSON.stringify(containerNode.renderState) + '\n';
+
+    for (const node of containerNode.children) {
+      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+      status += `${
+        (node.children[0] as CoreTextNode)?.text
+      } bound: ${JSON.stringify(node.renderState)} \n`;
+    }
+
+    nodeStatus.text = status;
+    console.log(status);
+  }
+
+  renderer.on('idle', () => {
+    processAllNodes(containerNode);
+  });
+
+  let curPage = 1;
+  window.onkeydown = (e) => {
+    if (e.key === 'ArrowRight') {
+      containerNode.x -= 100;
+    }
+
+    if (e.key === 'ArrowLeft') {
+      containerNode.x += 100;
+    }
+
+    if (e.key === ' ') {
+      containerNode.strictBounds = !containerNode.strictBounds;
+    }
+
+    if (e.key === 'ArrowUp') {
+      curPage = Math.min(3, curPage + 1);
+      page(curPage);
+    }
+
+    if (e.key === 'ArrowDown') {
+      curPage = Math.max(1, curPage - 1);
+      page(curPage);
+    }
+
+    processAllNodes(containerNode);
+  };
+
+  const page = (i = 1) => {
+    switch (i) {
+      case 1:
+        containerNode.x = -100;
+        break;
+
+      case 2:
+        containerNode.x = -1390;
+        break;
+
+      case 3:
+        containerNode.x = -4000;
+        break;
+    }
+
+    processAllNodes(containerNode);
+  };
+
+  return page;
+}

examples/tests/viewport-memory.ts

@@ -0,0 +1,122 @@
+import type { ExampleSettings } from '../common/ExampleSettings.js';
+
+function getRandomTitle(length = 10) {
+  const characters =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  return result;
+}
+
+export default async function test(settings: ExampleSettings) {
+  const { renderer, testRoot } = settings;
+
+  const containerNode = renderer.createNode({
+    x: 200, // Offset from the left
+    y: 200,
+    width: 2000,
+    height: 2000,
+    color: 0x000000ff, // Black
+    parent: testRoot,
+    clipping: true,
+  });
+
+  const redCircle = renderer.createNode({
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    color: 0xff0000ff,
+    shader: renderer.createShader('RoundedRectangle', {
+      radius: 50,
+    }),
+    parent: testRoot,
+  });
+
+  const blueCircle = renderer.createNode({
+    x: 150,
+    y: 0,
+    width: 100,
+    height: 100,
+    color: 0x0000ffff,
+    shader: renderer.createShader('RoundedRectangle', {
+      radius: 50,
+    }),
+    parent: testRoot,
+  });
+
+  const yellowCircle = renderer.createNode({
+    x: 300,
+    y: 0,
+    width: 100,
+    height: 100,
+    color: 0xffff00ff,
+    shader: renderer.createShader('RoundedRectangle', {
+      radius: 50,
+    }),
+    parent: testRoot,
+  });
+
+  const spawnRow = function (rowIndex = 0, amount = 20) {
+    let totalWidth = 0; // Track the total width used in the current row
+    const gap = 10; // Define the gap between items
+
+    // Create the row indicator (channel number)
+    const channelIndicator = renderer.createTextNode({
+      x: -60, // Position the indicator to the left of the row
+      y: rowIndex * 100 + 40, // Center vertically in the row
+      text: `Row ${rowIndex + 1}`, // Display channel number
+      color: 0xffffffff, // White color for the indicator
+      parent: containerNode,
+    });
+
+    for (let i = 0; i < amount; i++) {
+      const randomWidth = Math.floor(Math.random() * 401) + 100; // Unique width between 100 and 500
+      totalWidth += randomWidth + gap; // Include gap in total width calculation
+
+      // Generate a random title with a random length between 5 and 15 characters
+      const title = getRandomTitle(Math.floor(Math.random() * 11) + 10); // Random length between 5 and 15
+
+      // Create a black rectangle to serve as the border
+      const borderNode = renderer.createNode({
+        x: totalWidth - randomWidth - gap, // Adjust position by subtracting the gap
+        y: rowIndex * 100,
+        width: randomWidth + gap, // Width of the black rectangle to include the gap
+        height: 100, // Height of the border
+        color: 0x000000ff, // Black
+        parent: containerNode,
+        clipping: true,
+      });
+
+      // Create the green node slightly smaller than the black rectangle
+      const childNode = renderer.createNode({
+        x: 5, // Offset for the green node to mimic a border
+        y: 5, // Offset for the green node to mimic a border
+        width: randomWidth, // Width of the green node
+        height: 90, // Slightly smaller height
+        color: 0x00ff00ff, // Green
+        parent: borderNode,
+        shader: renderer.createShader('RoundedRectangle', {
+          radius: 10,
+        }),
+      });
+
+      // Create text node inside the green node
+      const nodeTest = renderer.createTextNode({
+        x: 10,
+        y: 10, // Center text vertically in the green node
+        text: title,
+        color: 0x000000ff,
+        parent: childNode,
+      });
+    }
+  };
+
+  // Generate up to 200 rows
+  for (let rowIndex = 0; rowIndex < 200; rowIndex++) {
+    console.log(`Spawning row ${rowIndex + 1}`);
+    spawnRow(rowIndex);
+  }
+}

exports/index.ts

@@ -68,6 +68,7 @@ export type {
 export type { WebGlCoreRenderer } from '../src/core/renderers/webgl/WebGlCoreRenderer.js';
 export type { WebGlCoreCtxTexture } from '../src/core/renderers/webgl/WebGlCoreCtxTexture.js';
 export type { Inspector } from '../src/main-api/Inspector.js';
+export type { CoreNodeRenderState } from '../src/core/CoreNode.js';
 
 // Shaders
 export * from '../src/core/renderers/webgl/WebGlCoreShader.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/renderer",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Lightning 3 Renderer",
   "type": "module",
   "main": "./dist/exports/index.js",