@lightningjs/renderer 3.0.0-beta2 → 3.0.0-beta21

package/src/core/Autosizer.ts

@@ -0,0 +1,224 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2023 Comcast Cable Communications Management, LLC.
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { UpdateType, type CoreNode } from './CoreNode.js';
+import type { Coord } from './lib/utils.js';
+
+export enum AutosizeMode {
+  Children = 0,
+  Texture = 1,
+}
+
+export enum AutosizeUpdateType {
+  None = 0,
+  Filtered = 1,
+  All = 2,
+}
+
+const applyDimensions = (node: CoreNode, w: number, h: number) => {
+  node.props.w = w;
+  node.props.h = h;
+  node.setUpdateType(UpdateType.Local);
+};
+
+const getFilteredChildren = (
+  children: number[],
+  childMap: Map<number, CoreNode>,
+) => {
+  const filtered: CoreNode[] = [];
+  while (children.length > 0) {
+    const id = children.pop()!;
+    const child = childMap.get(id)!;
+    filtered.push(child);
+  }
+  return filtered;
+};
+
+let autosizerId = 0;
+
+export class Autosizer {
+  public id = autosizerId++;
+  mode: AutosizeMode = AutosizeMode.Children;
+  updateType: AutosizeUpdateType = AutosizeUpdateType.All;
+  lastWidth: number = 0;
+  lastHeight: number = 0;
+  lastHasChanged: boolean = false;
+
+  flaggedChildren: number[] = [];
+  childMap: Map<number, CoreNode> = new Map();
+
+  minX = Infinity;
+  minY = Infinity;
+  maxX = -Infinity;
+  maxY = -Infinity;
+
+  corners: [Coord, Coord, Coord, Coord] = [
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+  ];
+
+  constructor(public node: CoreNode) {
+    if (node.texture !== null) {
+      this.mode = AutosizeMode.Texture;
+    }
+  }
+
+  attach(node: CoreNode) {
+    this.childMap.set(node.id, node);
+    node.parentAutosizer = this;
+
+    //bubble down to attach to grandchildren
+    if (node.children.length > 0 && node.autosizer === null) {
+      const children = node.children;
+      for (let i = 0; i < children.length; i++) {
+        this.attach(children[i]!);
+      }
+    }
+  }
+
+  detach(node: CoreNode) {
+    if (this.childMap.delete(node.id) === true) {
+      node.parentAutosizer = null;
+      if (node.children.length > 0 && node.autosizer === null) {
+        const children = node.children;
+        for (let i = 0; i < children.length; i++) {
+          this.detach(children[i]!);
+        }
+      }
+      //detached a child, need full update
+      this.setUpdateType(AutosizeUpdateType.All);
+    }
+  }
+
+  patch(id: number) {
+    const entry = this.childMap.get(id);
+    if (entry === undefined) {
+      return;
+    }
+    this.flaggedChildren.push(id);
+    this.setUpdateType(AutosizeUpdateType.Filtered);
+  }
+
+  setUpdateType(updateType: AutosizeUpdateType) {
+    this.updateType |= updateType;
+    this.node.setUpdateType(UpdateType.Autosize);
+  }
+
+  setMode(mode: AutosizeMode) {
+    this.mode = mode;
+    this.setUpdateType(AutosizeUpdateType.All);
+  }
+
+  update() {
+    const node = this.node;
+
+    if (
+      this.mode === AutosizeMode.Texture &&
+      node.texture !== null &&
+      node.texture.dimensions !== null
+    ) {
+      const { w, h } = node.texture.dimensions;
+      if (w !== node.w || h !== node.h) {
+        applyDimensions(node, w, h);
+      }
+      this.lastWidth = w;
+      this.lastHeight = h;
+      this.updateType = AutosizeUpdateType.None;
+      return;
+    }
+
+    let filtered: CoreNode[] =
+      this.updateType === AutosizeUpdateType.Filtered
+        ? getFilteredChildren(this.flaggedChildren, this.childMap)
+        : Array.from(this.childMap.values());
+
+    if (filtered.length === 0) {
+      return;
+    }
+
+    const corners = this.corners;
+    let minX = this.minX;
+    let minY = this.minY;
+    let maxX = this.maxX;
+    let maxY = this.maxY;
+
+    for (let i = 0; i < filtered.length; i++) {
+      const child = filtered[i]!;
+      if (child.isRenderable === false || child.localTransform === undefined) {
+        continue;
+      }
+
+      const { tx, ty, ta, tb, tc, td } = child.localTransform;
+      const w = child.props.w;
+      const h = child.props.h;
+
+      const childMinX = tx;
+      const childMaxX = tx + w * ta;
+      const childMinY = ty;
+      const childMaxY = ty + h * td;
+
+      corners[0].x = childMinX;
+      corners[0].y = childMinY;
+      corners[1].x = childMaxX;
+
+      //no rotation/scale
+      if (tb === 0 && tc === 0) {
+        corners[1].y = childMinY;
+        corners[2].x = childMaxX;
+        corners[2].y = childMaxY;
+        corners[3].x = childMinX;
+        corners[3].y = childMaxY;
+      } else {
+        corners[1].y = tx + w * tc;
+        corners[2].x = tx + w * ta + h * tb;
+        corners[2].y = ty + w * tc + h * td;
+        corners[3].x = tx + h * tb;
+        corners[3].y = ty + h * td;
+      }
+
+      for (let j = 0; j < 4; j++) {
+        const corner = corners[j]!;
+        if (corner.x < minX) minX = corner.x;
+        if (corner.y < minY) minY = corner.y;
+        if (corner.x > maxX) maxX = corner.x;
+        if (corner.y > maxY) maxY = corner.y;
+      }
+    }
+    this.updateType = AutosizeUpdateType.None;
+
+    const newWidth = maxX > 0 ? maxX : 0;
+    const newHeight = maxY > 0 ? maxY : 0;
+
+    applyDimensions(node, newWidth, newHeight);
+    this.lastWidth = newWidth;
+    this.lastHeight = newHeight;
+  }
+
+  destroy() {
+    if (this.childMap.size > 0) {
+      for (const child of this.childMap.values()) {
+        child.parentAutosizer = null;
+      }
+    }
+    this.childMap.clear();
+    this.flaggedChildren.length = 0;
+  }
+}

package/src/core/CoreNode.test.ts

@@ -20,6 +20,7 @@
 import { describe, expect, it, vi } from 'vitest';
 import { CoreNode, type CoreNodeProps, UpdateType } from './CoreNode.js';
 import { Stage } from './Stage.js';
+import { CoreRenderer } from './renderers/CoreRenderer.js';
 import { mock } from 'vitest-mock-extended';
 import { type TextureOptions } from './CoreTextureManager.js';
 import { createBound } from './lib/utils.js';
@@ -40,7 +41,7 @@ describe('set color()', () => {
     colorTl: 0,
     colorTop: 0,
     colorTr: 0,
-    height: 0,
+    h: 0,
     mount: 0,
     mountX: 0,
     mountY: 0,
@@ -57,20 +58,17 @@ describe('set color()', () => {
     src: '',
     texture: null,
     textureOptions: {} as TextureOptions,
-    width: 0,
+    w: 0,
     x: 0,
     y: 0,
     zIndex: 0,
-    zIndexLocked: 0,
-    preventCleanup: false,
-    strictBounds: false,
   };
 
   const clippingRect = {
     x: 0,
     y: 0,
-    width: 200,
-    height: 200,
+    w: 200,
+    h: 200,
     valid: false,
   };
 
@@ -80,6 +78,7 @@ describe('set color()', () => {
     defaultTexture: {
       state: 'loaded',
     },
+    renderer: mock<CoreRenderer>() as CoreRenderer,
   });
 
   describe('set color()', () => {
@@ -126,8 +125,8 @@ describe('set color()', () => {
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
-      node.width = 100;
-      node.height = 100;
+      node.w = 100;
+      node.h = 100;
       node.color = 0xffffffff;
 
       node.update(0, clippingRect);
@@ -139,8 +138,8 @@ describe('set color()', () => {
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
-      node.width = 100;
-      node.height = 100;
+      node.w = 100;
+      node.h = 100;
       node.texture = mock<ImageTexture>({
         state: 'initial',
       });
@@ -160,8 +159,8 @@ describe('set color()', () => {
       node.alpha = 0;
       node.x = 0;
       node.y = 0;
-      node.width = 100;
-      node.height = 100;
+      node.w = 100;
+      node.h = 100;
       node.texture = mock<ImageTexture>({
         state: 'loaded',
       });
@@ -175,8 +174,8 @@ describe('set color()', () => {
       node.alpha = 1;
       node.x = 300;
       node.y = 300;
-      node.width = 100;
-      node.height = 100;
+      node.w = 100;
+      node.h = 100;
       node.texture = mock<ImageTexture>({
         state: 'loaded',
       });
@@ -190,8 +189,8 @@ describe('set color()', () => {
       node.alpha = 1;
       node.x = 0;
       node.y = 0;
-      node.width = 100;
-      node.height = 100;
+      node.w = 100;
+      node.h = 100;
       node.texture = mock<ImageTexture>({
         state: 'freed',
       });
@@ -199,5 +198,168 @@ describe('set color()', () => {
       node.update(0, clippingRect);
       expect(node.isRenderable).toBe(false);
     });
+
+    it('should emit renderable event when isRenderable status changes', () => {
+      const node = new CoreNode(stage, defaultProps);
+      const eventCallback = vi.fn();
+
+      // Listen for the renderableChanged event
+      node.on('renderable', eventCallback);
+
+      // Set up node as a color texture that should be renderable
+      node.alpha = 1;
+      node.x = 0;
+      node.y = 0;
+      node.w = 100;
+      node.h = 100;
+      node.color = 0xffffffff;
+
+      // Initial state should be false
+      expect(node.isRenderable).toBe(false);
+      expect(eventCallback).not.toHaveBeenCalled();
+
+      // Update should make it renderable (false -> true)
+      node.update(0, clippingRect);
+      expect(node.isRenderable).toBe(true);
+      expect(eventCallback).toHaveBeenCalledWith(node, {
+        type: 'renderable',
+        isRenderable: true,
+      });
+
+      // Reset the mock
+      eventCallback.mockClear();
+
+      // Make node invisible (alpha = 0) to make it not renderable (true -> false)
+      node.alpha = 0;
+      node.update(1, clippingRect);
+      expect(node.isRenderable).toBe(false);
+      expect(eventCallback).toHaveBeenCalledWith(node, {
+        type: 'renderable',
+        isRenderable: false,
+      });
+
+      // Reset the mock again
+      eventCallback.mockClear();
+
+      // Setting same value shouldn't trigger event
+      node.alpha = 0;
+      node.update(2, clippingRect);
+      expect(node.isRenderable).toBe(false);
+      expect(eventCallback).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('autosize system', () => {
+    it('should initialize with autosize disabled', () => {
+      const node = new CoreNode(stage, defaultProps);
+      expect(node.autosize).toBe(false);
+    });
+
+    it('should enable texture autosize when texture is present', () => {
+      const node = new CoreNode(stage, defaultProps);
+      const mockTexture = mock<ImageTexture>();
+      mockTexture.state = 'loading';
+
+      node.texture = mockTexture;
+      node.autosize = true;
+
+      // Should not create autosize manager for texture mode
+      expect((node as any).autosizer).toBeTruthy();
+    });
+
+    it('should enable children autosize when no texture but has children', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+
+      parent.autosize = true;
+      child.parent = parent;
+
+      // Should create autosize manager for children mode
+      expect((parent as any).autosizer).toBeTruthy();
+    });
+
+    it('should prioritize texture autosize over children autosize', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+      const mockTexture = mock<ImageTexture>();
+      mockTexture.state = 'loading';
+
+      child.parent = parent;
+      parent.texture = mockTexture;
+      parent.autosize = true;
+
+      expect(parent.autosize).toBe(true);
+      // Should NOT create autosize manager when texture is present
+      expect((parent as any).autosizer).toBeTruthy();
+    });
+
+    it('should switch from children to texture autosize when texture is added', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+
+      child.parent = parent;
+      parent.autosize = true;
+      expect((parent as any).autosizer).toBeTruthy();
+
+      // Add texture - should switch to texture autosize
+      const mockTexture = mock<ImageTexture>();
+      mockTexture.state = 'loading';
+      parent.texture = mockTexture;
+
+      expect((parent as any).autosizer).toBeTruthy();
+    });
+
+    it('should switch from texture to children autosize when texture is removed', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+      const mockTexture = mock<ImageTexture>();
+      mockTexture.state = 'loading';
+
+      child.parent = parent;
+      parent.texture = mockTexture;
+      parent.autosize = true;
+      expect((parent as any).autosizer).toBeTruthy();
+
+      // Remove texture - should switch to children autosize
+      parent.texture = null;
+      expect((parent as any).autosizer).toBeTruthy();
+    });
+
+    it('should cleanup autosize manager when disabled', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+
+      child.parent = parent;
+      parent.autosize = true;
+      expect((parent as any).autosizer).toBeTruthy();
+
+      parent.autosize = false;
+      expect((parent as any).autosizer).toBeFalsy();
+    });
+
+    it('should establish autosize chain when child is added to autosize parent', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+
+      // Enable autosize BEFORE adding child
+      parent.autosize = true;
+      child.parent = parent;
+
+      expect((child as any).parentAutosizer).toBe(parent.autosizer);
+      expect((parent as any).autosizer.childMap.size).toBe(1);
+    });
+
+    it('should remove from autosize chain when child is removed', () => {
+      const parent = new CoreNode(stage, defaultProps);
+      const child = new CoreNode(stage, defaultProps);
+
+      // Enable autosize BEFORE adding child
+      parent.autosize = true;
+      child.parent = parent;
+      expect((parent as any).autosizer.childMap.size).toBe(1);
+
+      child.parent = null;
+      expect((child as any).parentAutosizer).toBeNull();
+    });
   });
 });