@lightningjs/renderer 0.3.0 → 0.3.2

package/src/render-drivers/threadx/worker/ThreadXRendererNode.ts

@@ -0,0 +1,232 @@
+/*
+ * 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 type { NodeStruct } from '../NodeStruct.js';
+import { SharedNode } from '../SharedNode.js';
+import { ThreadX } from '@lightningjs/threadx';
+import type { Stage } from '../../../core/Stage.js';
+import { assertTruthy } from '../../../utils.js';
+import type { IAnimationController } from '../../../common/IAnimationController.js';
+import type { INodeAnimatableProps } from '../../../main-api/INode.js';
+import { CoreAnimation } from '../../../core/animations/CoreAnimation.js';
+import { CoreAnimationController } from '../../../core/animations/CoreAnimationController.js';
+import type { Texture } from '../../../core/textures/Texture.js';
+import { CoreNode } from '../../../core/CoreNode.js';
+import type {
+  ShaderDesc,
+  TextureDesc,
+} from '../../../main-api/RendererMain.js';
+import type { IAnimationSettings } from '../../../core/animations/CoreAnimation.js';
+import type { Dimensions } from '../../../common/CommonTypes.js';
+
+export class ThreadXRendererNode extends SharedNode {
+  protected coreNode: CoreNode;
+  protected _parent: ThreadXRendererNode | null = null;
+  protected _children: ThreadXRendererNode[] = [];
+  texture: Texture | null = null;
+
+  private animationControllers = new Map<number, IAnimationController>();
+
+  constructor(
+    private stage: Stage,
+    sharedNodeStruct: NodeStruct,
+    coreNode?: CoreNode,
+    extendedCurProps?: Record<string, unknown>,
+  ) {
+    super(sharedNodeStruct, extendedCurProps);
+    // This Proxy makes sure properties on the coreNode that an animation
+    // changes are also updated on the shared node.
+    // TODO: Improve this pattern because its ugly!!!
+    this.coreNode = new Proxy(
+      coreNode || this.createCoreNode(stage, sharedNodeStruct),
+      {
+        set: (target, prop, value) => {
+          // Only set the numeric properties on the shared node.
+          if (prop !== 'parent' && prop !== 'texture' && prop !== 'shader') {
+            Reflect.set(this, prop, value);
+          }
+          return Reflect.set(target, prop, value);
+        },
+      },
+    );
+
+    // Set up parent
+    const parent = ThreadX.instance.getSharedObjectById(
+      sharedNodeStruct.parentId,
+    );
+    assertTruthy(parent instanceof ThreadXRendererNode || parent === null);
+    this.parent = parent;
+
+    // Create inbound event listeners
+    // TOOD: Make sure event listeners are removed when the node is destroyed.
+    this.on(
+      'createAnimation',
+      (target: ThreadXRendererNode, { id, props, settings }) => {
+        const animation = new CoreAnimation(
+          this.coreNode,
+          props as Partial<INodeAnimatableProps>,
+          settings as Partial<IAnimationSettings>,
+        );
+        animation.on('finished', () => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          this.emit('animationFinished', {
+            id: id as number,
+            loop: settings.loop,
+          });
+        });
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
+        const controller = new CoreAnimationController(
+          this.stage.animationManager,
+          animation,
+        );
+        this.animationControllers.set(id as number, controller);
+      },
+    );
+    this.on('destroyAnimation', (target: ThreadXRendererNode, { id }) => {
+      this.animationControllers.delete(id as number);
+    });
+    this.on('startAnimation', (target: ThreadXRendererNode, { id }) => {
+      this.animationControllers.get(id as number)?.start();
+    });
+    this.on('stopAnimation', (target: ThreadXRendererNode, { id }) => {
+      this.animationControllers.get(id as number)?.stop();
+    });
+    this.on('pauseAnimation', (target: ThreadXRendererNode, { id }) => {
+      this.animationControllers.get(id as number)?.pause();
+    });
+    this.on(
+      'loadTexture',
+      (target: ThreadXRendererNode, textureDesc: TextureDesc) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+        this.coreNode.loadTexture(
+          textureDesc.txType,
+          textureDesc.props as any,
+          textureDesc.options,
+        );
+      },
+    );
+    this.on(
+      'loadShader',
+      (target: ThreadXRendererNode, shaderDesc: ShaderDesc) => {
+        this.coreNode.loadShader(shaderDesc.shType, shaderDesc.props as any);
+      },
+    );
+    this.on('unloadTexture', (target: ThreadXRendererNode) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
+      this.coreNode.unloadTexture();
+    });
+    // Forward on CoreNode events
+    this.coreNode.on('txLoaded', (target: CoreNode, dimensions: Dimensions) => {
+      this.emit('txLoaded', dimensions as unknown as Record<string, unknown>);
+    });
+    this.coreNode.on('txFailed', (target: CoreNode, error: Error) => {
+      this.emit('txFailed', error as unknown as Record<string, unknown>);
+    });
+  }
+
+  override onPropertyChange<Key extends keyof this['z$__type__Props']>(
+    propName: Key,
+    newValue: this['z$__type__Props'][Key],
+    oldValue: this['z$__type__Props'][Key] | undefined,
+  ): void {
+    if (propName === 'parentId') {
+      const parent = ThreadX.instance.getSharedObjectById(newValue as number);
+      assertTruthy(parent instanceof ThreadXRendererNode || parent === null);
+      this.parent = parent;
+      return;
+    } else {
+      // @ts-expect-error Ignore readonly assignment errors
+      this.coreNode[propName as keyof CoreNode] =
+        newValue as CoreNode[keyof CoreNode];
+    }
+  }
+
+  //#region Parent/Child Props
+  get parent(): ThreadXRendererNode | null {
+    return this._parent;
+  }
+
+  set parent(newParent: ThreadXRendererNode | null) {
+    const oldParent = this._parent;
+    this._parent = newParent;
+    this.coreNode.parent = newParent?.coreNode ?? null;
+    this.parentId = newParent?.id ?? 0;
+    if (oldParent) {
+      const index = oldParent.children.indexOf(this);
+      assertTruthy(
+        index !== -1,
+        "ThreadXRendererNode.parent: Node not found in old parent's children!",
+      );
+      oldParent.children.splice(index, 1);
+    }
+    if (newParent) {
+      newParent.children.push(this);
+    }
+  }
+
+  get children(): ThreadXRendererNode[] {
+    return this._children;
+  }
+  //#endregion Parent/Child Props
+
+  private createCoreNode(stage: Stage, sharedNodeStruct: NodeStruct) {
+    const parent = ThreadX.instance.getSharedObjectById(
+      sharedNodeStruct.parentId,
+    );
+    assertTruthy(parent instanceof ThreadXRendererNode || parent === null);
+    const node = new CoreNode(stage, {
+      id: sharedNodeStruct.id,
+      x: sharedNodeStruct.x,
+      y: sharedNodeStruct.y,
+      width: sharedNodeStruct.width,
+      height: sharedNodeStruct.height,
+      alpha: sharedNodeStruct.alpha,
+      clipping: sharedNodeStruct.clipping,
+      color: sharedNodeStruct.color,
+      colorTop: sharedNodeStruct.colorTop,
+      colorBottom: sharedNodeStruct.colorBottom,
+      colorLeft: sharedNodeStruct.colorLeft,
+      colorRight: sharedNodeStruct.colorRight,
+      colorTl: sharedNodeStruct.colorTl,
+      colorTr: sharedNodeStruct.colorTr,
+      colorBl: sharedNodeStruct.colorBl,
+      colorBr: sharedNodeStruct.colorBr,
+      zIndex: sharedNodeStruct.zIndex,
+      zIndexLocked: sharedNodeStruct.zIndexLocked,
+      scale: sharedNodeStruct.scale,
+      mount: sharedNodeStruct.mount,
+      mountX: sharedNodeStruct.mountX,
+      mountY: sharedNodeStruct.mountY,
+      pivot: sharedNodeStruct.pivot,
+      pivotX: sharedNodeStruct.pivotX,
+      pivotY: sharedNodeStruct.pivotY,
+      rotation: sharedNodeStruct.rotation,
+
+      // These are passed in via message handlers
+      shader: null,
+      shaderProps: null,
+      texture: null,
+      textureOptions: null,
+
+      // Setup the parent after
+      parent: null,
+    });
+    return node;
+  }
+}

package/src/render-drivers/threadx/worker/ThreadXRendererTextNode.ts

@@ -0,0 +1,146 @@
+/*
+ * 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 type { Dimensions } from '../../../common/CommonTypes.js';
+import { CoreTextNode } from '../../../core/CoreTextNode.js';
+import type { Stage } from '../../../core/Stage.js';
+import type { TrProps } from '../../../core/text-rendering/renderers/TextRenderer.js';
+import type { NodeStructWritableProps } from '../NodeStruct.js';
+import type {
+  TextNodeStruct,
+  TextNodeStructWritableProps,
+} from '../TextNodeStruct.js';
+import { ThreadXRendererNode } from './ThreadXRendererNode.js';
+
+export class ThreadXRendererTextNode extends ThreadXRendererNode {
+  declare coreNode: CoreTextNode;
+  declare z$__type__Props: TextNodeStructWritableProps &
+    ThreadXRendererNode['z$__type__Props'];
+
+  constructor(stage: Stage, sharedNodeStruct: TextNodeStruct) {
+    super(
+      stage,
+      sharedNodeStruct,
+      new CoreTextNode(stage, {
+        id: sharedNodeStruct.id,
+        // It doesn't matter what these are initially. They will be reset
+        // appropriately via the onPropertyChange() calls below and in the
+        // ThreadXRendererNode constructor.
+        x: sharedNodeStruct.x,
+        y: sharedNodeStruct.y,
+        width: sharedNodeStruct.width,
+        height: sharedNodeStruct.height,
+        alpha: sharedNodeStruct.alpha,
+        clipping: sharedNodeStruct.clipping,
+        color: sharedNodeStruct.color,
+        colorTop: sharedNodeStruct.colorTop,
+        colorBottom: sharedNodeStruct.colorBottom,
+        colorLeft: sharedNodeStruct.colorLeft,
+        colorRight: sharedNodeStruct.colorRight,
+        colorTl: sharedNodeStruct.colorTl,
+        colorTr: sharedNodeStruct.colorTr,
+        colorBl: sharedNodeStruct.colorBl,
+        colorBr: sharedNodeStruct.colorBr,
+        zIndex: sharedNodeStruct.zIndex,
+        zIndexLocked: sharedNodeStruct.zIndexLocked,
+        mount: sharedNodeStruct.mount,
+        mountX: sharedNodeStruct.mountX,
+        mountY: sharedNodeStruct.mountY,
+        pivot: sharedNodeStruct.pivot,
+        pivotX: sharedNodeStruct.pivotX,
+        pivotY: sharedNodeStruct.pivotY,
+        scale: sharedNodeStruct.scale,
+        rotation: sharedNodeStruct.rotation,
+
+        // These are passed in via message handlers
+        shader: null,
+        shaderProps: null,
+        texture: null,
+        textureOptions: null,
+
+        // Setup the parent after
+        parent: null,
+
+        // Text properties
+        text: sharedNodeStruct.text,
+        textRendererOverride: sharedNodeStruct.textRendererOverride,
+        fontSize: sharedNodeStruct.fontSize,
+        fontFamily: sharedNodeStruct.fontFamily,
+        fontWeight: sharedNodeStruct.fontWeight,
+        fontStretch: sharedNodeStruct.fontStretch,
+        fontStyle: sharedNodeStruct.fontStyle,
+        contain: sharedNodeStruct.contain,
+        letterSpacing: sharedNodeStruct.letterSpacing,
+        offsetY: sharedNodeStruct.offsetY,
+        textAlign: sharedNodeStruct.textAlign,
+        scrollable: sharedNodeStruct.scrollable,
+        scrollY: sharedNodeStruct.scrollY,
+        debug: {},
+      }),
+      {
+        text: sharedNodeStruct.text,
+        textRendererOverride: sharedNodeStruct.textRendererOverride,
+        fontSize: sharedNodeStruct.fontSize,
+        fontFamily: sharedNodeStruct.fontFamily,
+        fontWeight: sharedNodeStruct.fontWeight,
+        fontStretch: sharedNodeStruct.fontStretch,
+        fontStyle: sharedNodeStruct.fontStyle,
+        contain: sharedNodeStruct.contain,
+        letterSpacing: sharedNodeStruct.letterSpacing,
+        offsetY: sharedNodeStruct.offsetY,
+        textAlign: sharedNodeStruct.textAlign,
+        scrollable: sharedNodeStruct.scrollable,
+        scrollY: sharedNodeStruct.scrollY,
+      } satisfies Omit<
+        TextNodeStructWritableProps,
+        keyof NodeStructWritableProps | 'debug'
+      >,
+    );
+    // Forward on CoreNode events
+    this.coreNode.on(
+      'textLoaded',
+      (target: CoreTextNode, dimensions: Dimensions) => {
+        this.emit(
+          'textLoaded',
+          dimensions as unknown as Record<string, unknown>,
+        );
+      },
+    );
+    this.coreNode.on('textFailed', (target: CoreTextNode, error: Error) => {
+      this.emit('textFailed', error as unknown as Record<string, unknown>);
+    });
+    this.on('debug', (target: ThreadXRendererNode, debug: TrProps['debug']) => {
+      this.coreNode.debug = debug;
+    });
+  }
+
+  declare text: TextNodeStructWritableProps['text'];
+  declare textRendererOverride: TextNodeStructWritableProps['textRendererOverride'];
+  declare fontSize: TextNodeStructWritableProps['fontSize'];
+  declare fontFamily: TextNodeStructWritableProps['fontFamily'];
+  declare fontWeight: TextNodeStructWritableProps['fontWeight'];
+  declare fontStretch: TextNodeStructWritableProps['fontStretch'];
+  declare fontStyle: TextNodeStructWritableProps['fontStyle'];
+  declare contain: TextNodeStructWritableProps['contain'];
+  declare letterSpacing: TextNodeStructWritableProps['letterSpacing'];
+  declare offsetY: TextNodeStructWritableProps['offsetY'];
+  declare textAlign: TextNodeStructWritableProps['textAlign'];
+  declare scrollable: TextNodeStructWritableProps['scrollable'];
+  declare scrollY: TextNodeStructWritableProps['scrollY'];
+}

package/src/render-drivers/threadx/worker/renderer.ts

@@ -0,0 +1,138 @@
+/*
+ * 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 { ThreadX, BufferStruct } from '@lightningjs/threadx';
+import { NodeStruct, type NodeStructWritableProps } from '../NodeStruct.js';
+import { ThreadXRendererNode } from './ThreadXRendererNode.js';
+import { Stage } from '../../../core/Stage.js';
+import { assertTruthy } from '../../../utils.js';
+import {
+  isThreadXRendererMessage,
+  type ThreadXRendererMessage,
+} from '../ThreadXRendererMessage.js';
+import { TextNodeStruct } from '../TextNodeStruct.js';
+import { ThreadXRendererTextNode } from './ThreadXRendererTextNode.js';
+import { loadCoreExtension } from '../../utils.js';
+
+let canvas: OffscreenCanvas | null = null;
+let stage: Stage | null = null;
+let rootNode: ThreadXRendererNode | null = null;
+const threadx = ThreadX.init({
+  workerId: 2,
+  workerName: 'renderer',
+  sharedObjectFactory(buffer) {
+    const typeId = BufferStruct.extractTypeId(buffer);
+    if (typeId === NodeStruct.typeId) {
+      const nodeStruct = new NodeStruct(buffer);
+      nodeStruct.parentId = nodeStruct.parentId || 0;
+      const node = nodeStruct.lock(() => {
+        assertTruthy(stage);
+        return new ThreadXRendererNode(stage, nodeStruct);
+      });
+      return node;
+    } else if (typeId === TextNodeStruct.typeId) {
+      const nodeStruct = new TextNodeStruct(buffer);
+      nodeStruct.parentId = nodeStruct.parentId || 0;
+      const node = nodeStruct.lock(() => {
+        assertTruthy(stage);
+        return new ThreadXRendererTextNode(stage, nodeStruct);
+      });
+      return node;
+    }
+    return null;
+  },
+  async onMessage(message: ThreadXRendererMessage) {
+    if (isThreadXRendererMessage('init', message)) {
+      canvas = message.canvas;
+      const nodeStruct = new NodeStruct();
+      stage = new Stage({
+        rootId: nodeStruct.id,
+        appWidth: message.appWidth,
+        appHeight: message.appHeight,
+        deviceLogicalPixelRatio: message.deviceLogicalPixelRatio,
+        devicePhysicalPixelRatio: message.devicePhysicalPixelRatio,
+        clearColor: message.clearColor,
+        canvas,
+        debug: {
+          monitorTextureCache: false,
+        },
+      });
+
+      const coreRootNode = stage.root;
+
+      // We must initialize the root NodeStruct with the same properties from
+      // the CoreNode that the Stage created.
+      Object.assign(nodeStruct, {
+        x: coreRootNode.x,
+        y: coreRootNode.y,
+        width: coreRootNode.width,
+        height: coreRootNode.height,
+        alpha: coreRootNode.alpha,
+        clipping: coreRootNode.clipping,
+        color: coreRootNode.color,
+        colorTop: coreRootNode.colorTop,
+        colorRight: coreRootNode.colorRight,
+        colorBottom: coreRootNode.colorBottom,
+        colorLeft: coreRootNode.colorLeft,
+        colorTl: coreRootNode.colorTl,
+        colorTr: coreRootNode.colorTr,
+        colorBr: coreRootNode.colorBr,
+        colorBl: coreRootNode.colorBl,
+        parentId: coreRootNode.parent?.id ?? 0,
+        zIndex: coreRootNode.zIndex,
+        zIndexLocked: coreRootNode.zIndexLocked,
+        scale: coreRootNode.scale,
+        mount: coreRootNode.mount,
+        mountX: coreRootNode.mountX,
+        mountY: coreRootNode.mountY,
+        pivot: coreRootNode.pivot,
+        pivotX: coreRootNode.pivotX,
+        pivotY: coreRootNode.pivotY,
+        rotation: coreRootNode.rotation,
+      } satisfies NodeStructWritableProps);
+
+      // Share the root node that was created by the Stage with the main worker.
+      rootNode = new ThreadXRendererNode(stage, nodeStruct, coreRootNode);
+      await threadx.shareObjects('parent', [rootNode]);
+
+      // Load the Core Extension Module if one was specified.
+      if (message.coreExtensionModule) {
+        await loadCoreExtension(message.coreExtensionModule, stage);
+      }
+
+      // Return its ID so the main worker can retrieve it from the shared object
+      // store.
+      return rootNode.id;
+    } else if (isThreadXRendererMessage('releaseTexture', message)) {
+      assertTruthy(stage);
+      const txManager = stage.txManager;
+      assertTruthy(txManager);
+      txManager.removeTextureIdFromCache(message.textureDescId);
+    }
+  },
+  onObjectShared(object) {
+    // TBD
+  },
+  onBeforeObjectForgotten(object) {
+    if (object instanceof ThreadXRendererNode) {
+      object.parent = null;
+      object.destroy();
+    }
+  },
+});

package/src/render-drivers/utils.ts

@@ -0,0 +1,57 @@
+import { CoreExtension } from '../../exports/core-api.js';
+import type { Stage } from '../core/Stage.js';
+
+/**
+ * Type guard that checks if a Class extends CoreExtension.
+ *
+ * @param Class
+ * @returns
+ */
+export function classExtendsCoreExtension(
+  Class: unknown,
+): Class is new () => CoreExtension {
+  return (Class as typeof CoreExtension).prototype instanceof CoreExtension;
+}
+
+export async function loadCoreExtension(
+  coreExtensionModule: string,
+  stage: Stage,
+) {
+  let module: {
+    default?: unknown;
+  };
+  try {
+    console.log('Loading core extension', coreExtensionModule);
+    module = (await import(
+      coreExtensionModule /* @vite-ignore */
+    )) as typeof module;
+  } catch (e: unknown) {
+    console.error(
+      `The core extension module at '${coreExtensionModule}' could not be loaded.`,
+    );
+    console.error(e);
+    return;
+  }
+  if (!module.default) {
+    console.error(
+      `The core extension module at '${coreExtensionModule}' does not have a default export.`,
+    );
+    return;
+  }
+  const ExtensionClass = module.default;
+  if (classExtendsCoreExtension(ExtensionClass)) {
+    const coreExtension = new ExtensionClass();
+    try {
+      await coreExtension.run(stage);
+    } catch (e: unknown) {
+      console.error(
+        `The core extension at '${coreExtensionModule}' threw an error.`,
+      );
+      console.error(e);
+    }
+  } else {
+    console.error(
+      `The core extension at '${coreExtensionModule}' does not extend CoreExtension.`,
+    );
+  }
+}