@lightningjs/renderer 0.3.0 → 0.3.2

package/src/render-drivers/threadx/ThreadXMainAnimationController.ts

@@ -0,0 +1,99 @@
+/*
+ * 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.
+ */
+
+/* eslint-disable @typescript-eslint/unbound-method */
+import type {
+  AnimationControllerState,
+  IAnimationController,
+} from '../../common/IAnimationController.js';
+import { assertTruthy } from '../../utils.js';
+import type { ThreadXMainNode } from './ThreadXMainNode.js';
+
+export class ThreadXMainAnimationController implements IAnimationController {
+  stoppedPromise: Promise<void> | null = null;
+  /**
+   * If this is null, then the animation is in a finished / stopped state.
+   */
+  stoppedResolve: (() => void) | null = null;
+
+  constructor(private node: ThreadXMainNode, private id: number) {
+    this.onAnimationFinished = this.onAnimationFinished.bind(this);
+    this.state = 'stopped';
+  }
+
+  state: AnimationControllerState;
+
+  start(): IAnimationController {
+    if (this.stoppedResolve === null) {
+      this.makeStoppedPromise();
+      this.node.on('animationFinished', this.onAnimationFinished);
+    }
+    this.state = 'running';
+    this.node.emit('startAnimation', { id: this.id });
+    return this;
+  }
+
+  stop(): IAnimationController {
+    this.node.emit('stopAnimation', { id: this.id });
+    this.node.off('animationFinished', this.onAnimationFinished);
+    if (this.stoppedResolve !== null) {
+      this.stoppedResolve();
+      this.stoppedResolve = null;
+    }
+    this.state = 'stopped';
+    return this;
+  }
+
+  pause(): IAnimationController {
+    this.node.emit('pauseAnimation', { id: this.id });
+    this.state = 'paused';
+    return this;
+  }
+
+  restore(): IAnimationController {
+    return this;
+  }
+
+  waitUntilStopped(): Promise<void> {
+    this.makeStoppedPromise();
+    const promise = this.stoppedPromise;
+    assertTruthy(promise);
+    return promise;
+  }
+
+  private onAnimationFinished(
+    target: ThreadXMainNode,
+    { id, loop }: { id: number; loop: boolean },
+  ) {
+    if (id === this.id) {
+      this.node.off('animationFinished', this.onAnimationFinished);
+      this.stoppedResolve?.();
+      this.stoppedResolve = null;
+      this.state = 'stopped';
+    }
+  }
+
+  private makeStoppedPromise(): void {
+    if (this.stoppedResolve === null) {
+      this.stoppedPromise = new Promise((resolve) => {
+        this.stoppedResolve = resolve;
+      });
+    }
+  }
+}

package/src/render-drivers/threadx/ThreadXMainNode.ts

@@ -0,0 +1,151 @@
+/*
+ * 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 { IAnimationController } from '../../common/IAnimationController.js';
+import type { INode, INodeAnimatableProps } from '../../main-api/INode.js';
+import type {
+  RendererMain,
+  ShaderDesc,
+  TextureDesc,
+} from '../../main-api/RendererMain.js';
+import { assertTruthy } from '../../utils.js';
+import type { NodeStruct } from './NodeStruct.js';
+import { SharedNode } from './SharedNode.js';
+import { ThreadXMainAnimationController } from './ThreadXMainAnimationController.js';
+import type { IAnimationSettings } from '../../core/animations/CoreAnimation.js';
+
+export class ThreadXMainNode extends SharedNode implements INode {
+  private nextAnimationId = 1;
+  protected _parent: ThreadXMainNode | null = null;
+  protected _children: ThreadXMainNode[] = [];
+  protected _texture: TextureDesc | null = null;
+  protected _shader: ShaderDesc | null = null;
+  private _src = '';
+
+  /**
+   * FinalizationRegistry for animation controllers. When an animation
+   * controller is garbage collected, we let the render worker know so that
+   * it can remove it's corresponding animation controler from it's stored
+   * Set. This should ultimately allow the render worker to garbage collect
+   * it's animation controller. The animation itself independent from the animation
+   * controller, so it will continue to run until it's finished regardless of
+   * whether or not the animation controller is garbage collected.
+   */
+  private animationRegistry = new FinalizationRegistry((id: number) => {
+    this.emit('destroyAnimation', { id });
+  });
+
+  constructor(
+    private rendererMain: RendererMain,
+    sharedNodeStruct: NodeStruct,
+    extendedCurProps?: Record<string, unknown>,
+  ) {
+    super(sharedNodeStruct, extendedCurProps);
+  }
+
+  get texture(): TextureDesc | null {
+    return this._texture;
+  }
+
+  set texture(texture: TextureDesc | null) {
+    if (this._texture === texture) {
+      return;
+    }
+    this._texture = texture;
+    if (texture) {
+      this.emit('loadTexture', texture as unknown as Record<string, unknown>);
+    } else {
+      this.emit('unloadTexture', {});
+    }
+  }
+
+  get shader(): ShaderDesc | null {
+    return this._shader;
+  }
+
+  set shader(shader: ShaderDesc | null) {
+    if (this._shader === shader) {
+      return;
+    }
+    this._shader = shader;
+    if (shader) {
+      this.emit('loadShader', shader as unknown as Record<string, unknown>);
+    }
+  }
+
+  animate(
+    props: Partial<INodeAnimatableProps>,
+    settings: Partial<IAnimationSettings>,
+  ): IAnimationController {
+    const id = this.nextAnimationId++;
+    this.emit('createAnimation', { id, props, settings });
+    const controller = new ThreadXMainAnimationController(this, id);
+    this.animationRegistry.register(controller, id);
+    return controller;
+  }
+
+  get src(): string {
+    return this._src;
+  }
+
+  set src(imageUrl: string) {
+    if (this._src === imageUrl) {
+      return;
+    }
+    this._src = imageUrl;
+    if (!imageUrl) {
+      this.texture = null;
+      return;
+    }
+    this.texture = this.rendererMain.makeTexture('ImageTexture', {
+      src: imageUrl,
+    });
+  }
+
+  //#region Parent/Child Props
+  get parent(): ThreadXMainNode | null {
+    return this._parent;
+  }
+
+  set parent(newParent: ThreadXMainNode | null) {
+    const oldParent = this._parent;
+    this._parent = newParent;
+    this.parentId = newParent?.id ?? 0;
+    if (oldParent) {
+      const index = oldParent.children.indexOf(this);
+      assertTruthy(
+        index !== -1,
+        "ThreadXMainNode.parent: Node not found in old parent's children!",
+      );
+      oldParent.children.splice(index, 1);
+    }
+    if (newParent) {
+      newParent.children.push(this);
+    }
+  }
+
+  get children(): ThreadXMainNode[] {
+    return this._children;
+  }
+  //#endregion Parent/Child Props
+
+  get props() {
+    return this.curProps;
+  }
+}

package/src/render-drivers/threadx/ThreadXMainTextNode.ts

@@ -0,0 +1,75 @@
+/*
+ * 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 { ITextNode } from '../../main-api/INode.js';
+import type { RendererMain } from '../../main-api/RendererMain.js';
+import type { NodeStructWritableProps } from './NodeStruct.js';
+import type {
+  TextNodeStruct,
+  TextNodeStructWritableProps,
+} from './TextNodeStruct.js';
+import { ThreadXMainNode } from './ThreadXMainNode.js';
+
+export class ThreadXMainTextNode extends ThreadXMainNode implements ITextNode {
+  protected _debug: ITextNode['debug'] = {};
+
+  constructor(rendererMain: RendererMain, sharedNodeStruct: TextNodeStruct) {
+    super(rendererMain, sharedNodeStruct, {
+      text: sharedNodeStruct.text,
+      textRendererOverride: sharedNodeStruct.textRendererOverride,
+      fontSize: sharedNodeStruct.fontSize,
+      fontFamily: sharedNodeStruct.fontFamily,
+      fontStretch: sharedNodeStruct.fontStretch,
+      fontStyle: sharedNodeStruct.fontStyle,
+      fontWeight: sharedNodeStruct.fontWeight,
+      contain: sharedNodeStruct.contain,
+      letterSpacing: sharedNodeStruct.letterSpacing,
+      offsetY: sharedNodeStruct.offsetY,
+      scrollable: sharedNodeStruct.scrollable,
+      scrollY: sharedNodeStruct.scrollY,
+      textAlign: sharedNodeStruct.textAlign,
+    } satisfies Omit<TextNodeStructWritableProps, keyof NodeStructWritableProps>);
+  }
+
+  declare text: ITextNode['text'];
+  declare textRendererOverride: ITextNode['textRendererOverride'];
+  declare fontSize: ITextNode['fontSize'];
+  declare fontFamily: ITextNode['fontFamily'];
+  declare fontStretch: ITextNode['fontStretch'];
+  declare fontStyle: ITextNode['fontStyle'];
+  declare fontWeight: ITextNode['fontWeight'];
+  declare textAlign: ITextNode['textAlign'];
+  declare contain: ITextNode['contain'];
+  declare scrollable: ITextNode['scrollable'];
+  declare scrollY: ITextNode['scrollY'];
+  declare offsetY: ITextNode['offsetY'];
+  declare letterSpacing: ITextNode['letterSpacing'];
+
+  get debug(): ITextNode['debug'] {
+    return this._debug;
+  }
+
+  set debug(debug: ITextNode['debug']) {
+    if (this._debug === debug) {
+      return;
+    }
+    this._debug = debug;
+    this.emit('debug', debug);
+  }
+}

package/src/render-drivers/threadx/ThreadXRenderDriver.ts

@@ -0,0 +1,247 @@
+/*
+ * 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 type {
+  INode,
+  INodeWritableProps,
+  ITextNode,
+  ITextNodeWritableProps,
+} from '../../main-api/INode.js';
+import { NodeStruct, type NodeStructWritableProps } from './NodeStruct.js';
+import type { IRenderDriver } from '../../main-api/IRenderDriver.js';
+import { ThreadXMainNode } from './ThreadXMainNode.js';
+import { assertTruthy } from '../../utils.js';
+import type {
+  RendererMain,
+  RendererMainSettings,
+} from '../../main-api/RendererMain.js';
+import type {
+  ThreadXRendererInitMessage,
+  ThreadXRendererReleaseTextureMessage,
+} from './ThreadXRendererMessage.js';
+import {
+  TextNodeStruct,
+  type TextNodeStructWritableProps,
+} from './TextNodeStruct.js';
+import { ThreadXMainTextNode } from './ThreadXMainTextNode.js';
+
+export interface ThreadXRendererSettings {
+  coreWorkerUrl: string;
+}
+
+export class ThreadXRenderDriver implements IRenderDriver {
+  private settings: ThreadXRendererSettings;
+  private threadx: ThreadX;
+  private rendererMain: RendererMain | null = null;
+  private root: INode | null = null;
+
+  constructor(settings: ThreadXRendererSettings) {
+    this.settings = settings;
+    this.threadx = ThreadX.init({
+      workerId: 1,
+      workerName: 'main',
+      sharedObjectFactory: (buffer) => {
+        const typeId = BufferStruct.extractTypeId(buffer);
+        const rendererMain = this.rendererMain;
+        assertTruthy(rendererMain);
+        if (typeId === NodeStruct.typeId) {
+          const nodeStruct = new NodeStruct(buffer);
+          return nodeStruct.lock(() => {
+            return new ThreadXMainNode(rendererMain, nodeStruct);
+          });
+        } else if (typeId === TextNodeStruct.typeId) {
+          const nodeStruct = new TextNodeStruct(buffer);
+          return nodeStruct.lock(() => {
+            return new ThreadXMainTextNode(rendererMain, nodeStruct);
+          });
+        }
+        return null;
+      },
+    });
+    this.threadx.registerWorker(
+      'renderer',
+      new Worker(this.settings.coreWorkerUrl, { type: 'module' }),
+    );
+  }
+
+  async init(
+    rendererMain: RendererMain,
+    rendererSettings: Required<RendererMainSettings>,
+    canvas: HTMLCanvasElement,
+  ): Promise<void> {
+    this.rendererMain = rendererMain;
+    const offscreenCanvas = canvas.transferControlToOffscreen();
+    const rootNodeId = (await this.threadx.sendMessageAsync(
+      'renderer',
+      {
+        type: 'init',
+        canvas: offscreenCanvas,
+        appWidth: rendererSettings.appWidth,
+        appHeight: rendererSettings.appHeight,
+        deviceLogicalPixelRatio: rendererSettings.deviceLogicalPixelRatio,
+        devicePhysicalPixelRatio: rendererSettings.devicePhysicalPixelRatio,
+        clearColor: rendererSettings.clearColor,
+        coreExtensionModule: rendererSettings.coreExtensionModule,
+      } satisfies ThreadXRendererInitMessage,
+      [offscreenCanvas],
+    )) as number;
+    // The Render worker shares the root node with this worker during the
+    // 'init' call above. That call returns the ID of the root node, which
+    // we can use to retrieve it from the shared object store.
+    const rootNode = this.threadx.getSharedObjectById(rootNodeId);
+    assertTruthy(
+      rootNode instanceof ThreadXMainNode,
+      'Unexpected root node type',
+    );
+    this.root = rootNode;
+  }
+
+  getRootNode(): INode {
+    assertTruthy(this.root, 'Driver not initialized');
+    return this.root;
+  }
+
+  createNode(props: INodeWritableProps): INode {
+    const rendererMain = this.rendererMain;
+    assertTruthy(rendererMain);
+    const bufferStruct = new NodeStruct();
+    Object.assign(bufferStruct, {
+      // Node specific properties
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      parentId: props.parent ? props.parent.id : 0,
+      clipping: props.clipping,
+      color: props.color,
+      colorTop: props.colorTop,
+      colorRight: props.colorBottom,
+      colorBottom: props.colorBottom,
+      colorLeft: props.colorLeft,
+      colorTl: props.colorTl,
+      colorTr: props.colorTr,
+      colorBl: props.colorBl,
+      colorBr: props.colorBr,
+      alpha: props.alpha,
+      zIndex: props.zIndex,
+      zIndexLocked: props.zIndexLocked,
+      scale: props.scale,
+      mount: props.mount,
+      mountX: props.mountX,
+      mountY: props.mountY,
+      pivot: props.pivot,
+      pivotX: props.pivotX,
+      pivotY: props.pivotY,
+      rotation: props.rotation,
+    } satisfies NodeStructWritableProps);
+
+    const node = new ThreadXMainNode(rendererMain, bufferStruct);
+    node.once('beforeDestroy', this.onBeforeDestroyNode.bind(this, node));
+    this.threadx.shareObjects('renderer', [node]).catch(console.error);
+    node.shader = props.shader ?? null;
+    node.texture = props.texture ?? null;
+    node.src = props.src ?? '';
+    this.onCreateNode(node);
+    return node;
+  }
+
+  createTextNode(props: ITextNodeWritableProps): ITextNode {
+    const rendererMain = this.rendererMain;
+    assertTruthy(rendererMain);
+    const bufferStruct = new TextNodeStruct();
+
+    Object.assign(bufferStruct, {
+      // Node specific properties
+      x: props.x,
+      y: props.y,
+      width: props.width,
+      height: props.height,
+      parentId: props.parent ? props.parent.id : 0,
+      clipping: props.clipping,
+      color: props.color,
+      colorTop: props.colorTop,
+      colorRight: props.colorBottom,
+      colorBottom: props.colorBottom,
+      colorLeft: props.colorLeft,
+      colorTl: props.colorTl,
+      colorTr: props.colorTr,
+      colorBl: props.colorBl,
+      colorBr: props.colorBr,
+      alpha: props.alpha,
+      zIndex: props.zIndex,
+      zIndexLocked: props.zIndexLocked,
+      scale: props.scale,
+      mount: props.mount,
+      mountX: props.mountX,
+      mountY: props.mountY,
+      pivot: props.pivot,
+      pivotX: props.pivotX,
+      pivotY: props.pivotY,
+      rotation: props.rotation,
+
+      // Text specific properties
+      text: props.text,
+      textRendererOverride: props.textRendererOverride,
+      fontSize: props.fontSize,
+      fontFamily: props.fontFamily,
+      fontWeight: props.fontWeight,
+      fontStretch: props.fontStretch,
+      fontStyle: props.fontStyle,
+      contain: props.contain,
+      letterSpacing: props.letterSpacing,
+      offsetY: props.offsetY,
+      textAlign: props.textAlign,
+      scrollable: props.scrollable,
+      scrollY: props.scrollY,
+    } satisfies TextNodeStructWritableProps);
+
+    const node = new ThreadXMainTextNode(rendererMain, bufferStruct);
+    node.once('beforeDestroy', this.onBeforeDestroyNode.bind(this, node));
+    this.threadx.shareObjects('renderer', [node]).catch(console.error);
+
+    node.shader = props.shader ?? null;
+    node.texture = props.texture ?? null;
+    node.src = props.src ?? '';
+    node.debug = props.debug ?? {};
+
+    this.onCreateNode(node);
+    return node;
+  }
+
+  // TODO: Remove?
+  destroyNode(node: INode): void {
+    node.destroy();
+  }
+
+  releaseTexture(textureDescId: number): void {
+    this.threadx.sendMessage('renderer', {
+      type: 'releaseTexture',
+      textureDescId,
+    } satisfies ThreadXRendererReleaseTextureMessage);
+  }
+
+  onCreateNode(node: INode): void {
+    return;
+  }
+
+  onBeforeDestroyNode(node: INode): void {
+    return;
+  }
+}

package/src/render-drivers/threadx/ThreadXRendererMessage.ts

@@ -0,0 +1,82 @@
+/*
+ * 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.
+ */
+
+/**
+ * @module
+ * @description
+ * Message types / utils for communication between the main worker and the
+ * worker worker.
+ */
+
+/**
+ * Defines the shape of a message sent from the main worker to the worker
+ */
+export interface ThreadXRendererMessage {
+  type: string;
+}
+
+/**
+ * An initialization message sent from the main worker to the renderer worker
+ */
+export interface ThreadXRendererInitMessage extends ThreadXRendererMessage {
+  type: 'init';
+  canvas: OffscreenCanvas;
+  appWidth: number;
+  appHeight: number;
+  deviceLogicalPixelRatio: number;
+  devicePhysicalPixelRatio: number;
+  clearColor: number;
+  coreExtensionModule: string | null;
+}
+
+/**
+ * A message sent from the main worker to the renderer worker to release a
+ * texture
+ */
+export interface ThreadXRendererReleaseTextureMessage
+  extends ThreadXRendererMessage {
+  type: 'releaseTexture';
+  textureDescId: number;
+}
+
+/**
+ * A map of message types to message shapes
+ */
+export interface ThreadXRendererMessageMap {
+  init: ThreadXRendererInitMessage;
+  releaseTexture: ThreadXRendererReleaseTextureMessage;
+}
+
+/**
+ * Type guard util for a message sent from the main worker to the renderer worker
+ *
+ * @param type
+ * @param message
+ * @returns
+ */
+export function isThreadXRendererMessage<
+  Type extends keyof ThreadXRendererMessageMap,
+>(type: Type, message: unknown): message is ThreadXRendererMessageMap[Type] {
+  return (
+    typeof message === 'object' &&
+    message !== null &&
+    'type' in message &&
+    message.type === type
+  );
+}