@lightningjs/renderer 2.13.0 → 3.0.0-beta1

package/src/core/utils.ts

@@ -1,227 +1,227 @@
-/*
- * 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.
- */
-
-/**
- * Core Utility Functions
- *
- * @module
- */
-
-export const EPSILON = 0.000001;
-export let ARRAY_TYPE =
-  typeof Float32Array !== 'undefined' ? Float32Array : Array;
-export const RANDOM = Math.random;
-export const ANGLE_ORDER = 'zyx';
-const degree = Math.PI / 180;
-
-export const setMatrixArrayType = (
-  type: Float32ArrayConstructor | ArrayConstructor,
-) => {
-  ARRAY_TYPE = type;
-};
-
-export const toRadian = (a: number) => {
-  return a * degree;
-};
-
-export const equals = (a: number, b: number) => {
-  return Math.abs(a - b) <= EPSILON * Math.max(1.0, Math.abs(a), Math.abs(b));
-};
-
-export const rand = (min: number, max: number) => {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-};
-
-export const isPowerOfTwo = (value: number) => {
-  return value && !(value & (value - 1));
-};
-
-const getTimingBezier = (
-  a: number,
-  b: number,
-  c: number,
-  d: number,
-): ((time: number) => number | undefined) => {
-  const xc = 3.0 * a;
-  const xb = 3.0 * (c - a) - xc;
-  const xa = 1.0 - xc - xb;
-  const yc = 3.0 * b;
-  const yb = 3.0 * (d - b) - yc;
-  const ya = 1.0 - yc - yb;
-
-  return function (time: number): number | undefined {
-    if (time >= 1.0) {
-      return 1;
-    }
-    if (time <= 0) {
-      return 0;
-    }
-
-    let t = 0.5,
-      cbx,
-      cbxd,
-      dx;
-
-    for (let it = 0; it < 20; it++) {
-      cbx = t * (t * (t * xa + xb) + xc);
-      dx = time - cbx;
-      if (dx > -1e-8 && dx < 1e-8) {
-        return t * (t * (t * ya + yb) + yc);
-      }
-
-      // Cubic bezier derivative.
-      cbxd = t * (t * (3 * xa) + 2 * xb) + xc;
-
-      if (cbxd > 1e-10 && cbxd < 1e-10) {
-        // Problematic. Fall back to binary search method.
-        break;
-      }
-
-      t += dx / cbxd;
-    }
-
-    // Fallback: binary search method. This is more reliable when there are near-0 slopes.
-    let minT = 0;
-    let maxT = 1;
-    for (let it = 0; it < 20; it++) {
-      t = 0.5 * (minT + maxT);
-
-      cbx = t * (t * (t * xa + xb) + xc);
-
-      dx = time - cbx;
-      if (dx > -1e-8 && dx < 1e-8) {
-        // Solution found!
-        return t * (t * (t * ya + yb) + yc);
-      }
-
-      if (dx < 0) {
-        maxT = t;
-      } else {
-        minT = t;
-      }
-    }
-  };
-};
-
-interface TimingFunctionMap {
-  [key: string]: (time: number) => number | undefined;
-}
-
-type TimingLookupArray = number[];
-interface TimingLookup {
-  [key: string]: TimingLookupArray;
-}
-
-const timingMapping: TimingFunctionMap = {};
-
-const timingLookup: TimingLookup = {
-  ease: [0.25, 0.1, 0.25, 1.0],
-  'ease-in': [0.42, 0, 1.0, 1.0],
-  'ease-out': [0, 0, 0.58, 1.0],
-  'ease-in-out': [0.42, 0, 0.58, 1.0],
-  'ease-in-sine': [0.12, 0, 0.39, 0],
-  'ease-out-sine': [0.12, 0, 0.39, 0],
-  'ease-in-out-sine': [0.37, 0, 0.63, 1],
-  'ease-in-cubic': [0.32, 0, 0.67, 0],
-  'ease-out-cubic': [0.33, 1, 0.68, 1],
-  'ease-in-out-cubic': [0.65, 0, 0.35, 1],
-  'ease-in-circ': [0.55, 0, 1, 0.45],
-  'ease-out-circ': [0, 0.55, 0.45, 1],
-  'ease-in-out-circ': [0.85, 0, 0.15, 1],
-  'ease-in-back': [0.36, 0, 0.66, -0.56],
-  'ease-out-back': [0.34, 1.56, 0.64, 1],
-  'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
-};
-
-const defaultTiming = (t: number): number => t;
-
-const parseCubicBezier = (str: string) => {
-  //cubic-bezier(0.84, 0.52, 0.56, 0.6)
-  const regex = /-?\d*\.?\d+/g;
-  const match = str.match(regex);
-
-  if (match) {
-    const [num1, num2, num3, num4] = match;
-    const a = parseFloat(num1 || '0.42');
-    const b = parseFloat(num2 || '0');
-    const c = parseFloat(num3 || '1');
-    const d = parseFloat(num4 || '1');
-
-    const timing = getTimingBezier(a, b, c, d);
-    timingMapping[str] = timing;
-
-    return timing;
-  }
-
-  // parse failed, return linear
-  console.warn('Unknown cubic-bezier timing: ' + str);
-  return defaultTiming;
-};
-
-export const getTimingFunction = (
-  str: string,
-): ((time: number) => number | undefined) => {
-  if (str === 'linear') {
-    return defaultTiming;
-  }
-
-  if (timingMapping[str] !== undefined) {
-    return timingMapping[str] || defaultTiming;
-  }
-
-  if (str === 'step-start') {
-    return () => {
-      return 1;
-    };
-  }
-
-  if (str === 'step-end') {
-    return (time: number) => {
-      return time === 1 ? 1 : 0;
-    };
-  }
-
-  const lookup = timingLookup[str];
-  if (lookup !== undefined) {
-    const [a, b, c, d] = lookup;
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore - TS doesn't understand that we've checked for undefined
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    const timing = getTimingBezier(a, b, c, d);
-    timingMapping[str] = timing;
-    return timing;
-  }
-
-  if (str.startsWith('cubic-bezier')) {
-    return parseCubicBezier(str);
-  }
-
-  console.warn('Unknown timing function: ' + str);
-  return defaultTiming;
-};
-
-/**
- * Convert bytes to string of megabytes with 2 decimal points
- *
- * @param bytes
- * @returns
- */
-export function bytesToMb(bytes: number) {
-  return (bytes / 1024 / 1024).toFixed(2);
-}
+/*
+ * 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.
+ */
+
+/**
+ * Core Utility Functions
+ *
+ * @module
+ */
+
+export const EPSILON = 0.000001;
+export let ARRAY_TYPE =
+  typeof Float32Array !== 'undefined' ? Float32Array : Array;
+export const RANDOM = Math.random;
+export const ANGLE_ORDER = 'zyx';
+const degree = Math.PI / 180;
+
+export const setMatrixArrayType = (
+  type: Float32ArrayConstructor | ArrayConstructor,
+) => {
+  ARRAY_TYPE = type;
+};
+
+export const toRadian = (a: number) => {
+  return a * degree;
+};
+
+export const equals = (a: number, b: number) => {
+  return Math.abs(a - b) <= EPSILON * Math.max(1.0, Math.abs(a), Math.abs(b));
+};
+
+export const rand = (min: number, max: number) => {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+export const isPowerOfTwo = (value: number) => {
+  return value && !(value & (value - 1));
+};
+
+const getTimingBezier = (
+  a: number,
+  b: number,
+  c: number,
+  d: number,
+): ((time: number) => number | undefined) => {
+  const xc = 3.0 * a;
+  const xb = 3.0 * (c - a) - xc;
+  const xa = 1.0 - xc - xb;
+  const yc = 3.0 * b;
+  const yb = 3.0 * (d - b) - yc;
+  const ya = 1.0 - yc - yb;
+
+  return function (time: number): number | undefined {
+    if (time >= 1.0) {
+      return 1;
+    }
+    if (time <= 0) {
+      return 0;
+    }
+
+    let t = 0.5,
+      cbx,
+      cbxd,
+      dx;
+
+    for (let it = 0; it < 20; it++) {
+      cbx = t * (t * (t * xa + xb) + xc);
+      dx = time - cbx;
+      if (dx > -1e-8 && dx < 1e-8) {
+        return t * (t * (t * ya + yb) + yc);
+      }
+
+      // Cubic bezier derivative.
+      cbxd = t * (t * (3 * xa) + 2 * xb) + xc;
+
+      if (cbxd > 1e-10 && cbxd < 1e-10) {
+        // Problematic. Fall back to binary search method.
+        break;
+      }
+
+      t += dx / cbxd;
+    }
+
+    // Fallback: binary search method. This is more reliable when there are near-0 slopes.
+    let minT = 0;
+    let maxT = 1;
+    for (let it = 0; it < 20; it++) {
+      t = 0.5 * (minT + maxT);
+
+      cbx = t * (t * (t * xa + xb) + xc);
+
+      dx = time - cbx;
+      if (dx > -1e-8 && dx < 1e-8) {
+        // Solution found!
+        return t * (t * (t * ya + yb) + yc);
+      }
+
+      if (dx < 0) {
+        maxT = t;
+      } else {
+        minT = t;
+      }
+    }
+  };
+};
+
+interface TimingFunctionMap {
+  [key: string]: (time: number) => number | undefined;
+}
+
+type TimingLookupArray = number[];
+interface TimingLookup {
+  [key: string]: TimingLookupArray;
+}
+
+const timingMapping: TimingFunctionMap = {};
+
+const timingLookup: TimingLookup = {
+  ease: [0.25, 0.1, 0.25, 1.0],
+  'ease-in': [0.42, 0, 1.0, 1.0],
+  'ease-out': [0, 0, 0.58, 1.0],
+  'ease-in-out': [0.42, 0, 0.58, 1.0],
+  'ease-in-sine': [0.12, 0, 0.39, 0],
+  'ease-out-sine': [0.12, 0, 0.39, 0],
+  'ease-in-out-sine': [0.37, 0, 0.63, 1],
+  'ease-in-cubic': [0.32, 0, 0.67, 0],
+  'ease-out-cubic': [0.33, 1, 0.68, 1],
+  'ease-in-out-cubic': [0.65, 0, 0.35, 1],
+  'ease-in-circ': [0.55, 0, 1, 0.45],
+  'ease-out-circ': [0, 0.55, 0.45, 1],
+  'ease-in-out-circ': [0.85, 0, 0.15, 1],
+  'ease-in-back': [0.36, 0, 0.66, -0.56],
+  'ease-out-back': [0.34, 1.56, 0.64, 1],
+  'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
+};
+
+const defaultTiming = (t: number): number => t;
+
+const parseCubicBezier = (str: string) => {
+  //cubic-bezier(0.84, 0.52, 0.56, 0.6)
+  const regex = /-?\d*\.?\d+/g;
+  const match = str.match(regex);
+
+  if (match) {
+    const [num1, num2, num3, num4] = match;
+    const a = parseFloat(num1 || '0.42');
+    const b = parseFloat(num2 || '0');
+    const c = parseFloat(num3 || '1');
+    const d = parseFloat(num4 || '1');
+
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+
+    return timing;
+  }
+
+  // parse failed, return linear
+  console.warn('Unknown cubic-bezier timing: ' + str);
+  return defaultTiming;
+};
+
+export const getTimingFunction = (
+  str: string,
+): ((time: number) => number | undefined) => {
+  if (str === 'linear') {
+    return defaultTiming;
+  }
+
+  if (timingMapping[str] !== undefined) {
+    return timingMapping[str] || defaultTiming;
+  }
+
+  if (str === 'step-start') {
+    return () => {
+      return 1;
+    };
+  }
+
+  if (str === 'step-end') {
+    return (time: number) => {
+      return time === 1 ? 1 : 0;
+    };
+  }
+
+  const lookup = timingLookup[str];
+  if (lookup !== undefined) {
+    const [a, b, c, d] = lookup;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - TS doesn't understand that we've checked for undefined
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    const timing = getTimingBezier(a, b, c, d);
+    timingMapping[str] = timing;
+    return timing;
+  }
+
+  if (str.startsWith('cubic-bezier')) {
+    return parseCubicBezier(str);
+  }
+
+  console.warn('Unknown timing function: ' + str);
+  return defaultTiming;
+};
+
+/**
+ * Convert bytes to string of megabytes with 2 decimal points
+ *
+ * @param bytes
+ * @returns
+ */
+export function bytesToMb(bytes: number) {
+  return (bytes / 1024 / 1024).toFixed(2);
+}

package/src/env.d.ts

@@ -1,7 +1,7 @@
-interface ImportMetaEnv {
-  readonly PROD: boolean;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
+interface ImportMetaEnv {
+  readonly PROD: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/src/main-api/INode.ts

@@ -1,101 +1,99 @@
-/*
- * If not stated otherwise in this file or this component's LICENSE file the
- * following copyright and licenses apply:
- *
- * Copyright 2024 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 {
-  CoreNode,
-  type CoreNodeAnimateProps,
-  type CoreNodeProps,
-} from '../core/CoreNode.js';
-import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
-import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
-import type { BaseShaderController } from './ShaderController.js';
-
-/**
- * A visual Node in the Renderer scene graph.
- *
- * @remarks
- * A Node is a basic building block of the Renderer scene graph. It can be a
- * container for other Nodes, or it can be a leaf Node that renders a solid
- * color, gradient, image, or specific texture, using a specific shader.
- *
- * For text rendering Nodes, see {@link ITextNode}.
- *
- * ## INode vs CoreNode
- * CoreNode is the name of the class for a Renderer Node and is only directly
- * used internally by the Renderer. INode describes the public API of a
- * Renderer Node including the ability to be tied to a specific Shader.
- *
- * Users of the Renderer API, should generally interact with INode objects
- * instead of CoreNode objects.
- */
-export interface INode<SC extends BaseShaderController = BaseShaderController>
-  extends Omit<CoreNode, 'shader' | 'animate' | 'parent'> {
-  shader: SC;
-  animate(
-    props: Partial<INodeAnimateProps<SC>>,
-    settings: Partial<AnimationSettings>,
-  ): IAnimationController;
-  parent: INode | null;
-}
-
-/**
- * Properties used to animate() a Node
- */
-export interface INodeAnimateProps<
-  SC extends BaseShaderController = BaseShaderController,
-> extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
-  shaderProps: Partial<SC['props']>;
-}
-
-/**
- * Properties used to create a new Node
- */
-export interface INodeProps<
-  SC extends BaseShaderController = BaseShaderController,
-> extends Omit<CoreNodeProps, 'shader' | 'parent'> {
-  shader: SC;
-  parent: INode | null;
-}
-
-/**
- * A visual Node in the Renderer scene graph that renders text.
- *
- * @remarks
- * A Text Node is a special type of Node that renders text using a specific
- * text renderer, such as Web/Canvas or Signed Distance Field (SDF) text.
- *
- * For non-text rendering, see {@link INode}.
- *
- * Users of the Renderer API, should generally interact with ITextNode objects
- * instead of CoreTextNode objects.
- */
-export interface ITextNode extends Omit<CoreTextNode, 'animate' | 'parent'> {
-  animate(
-    props: Partial<INodeAnimateProps<BaseShaderController>>,
-    settings: Partial<AnimationSettings>,
-  ): IAnimationController;
-  parent: INode | null;
-}
-
-/**
- * Properties used to create a new Text Node
- */
-export interface ITextNodeProps extends Omit<CoreTextNodeProps, 'parent'> {
-  parent: INode | null;
-}
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2024 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 {
+  CoreNode,
+  type CoreNodeAnimateProps,
+  type CoreNodeProps,
+} from '../core/CoreNode.js';
+import type { CoreTextNode, CoreTextNodeProps } from '../core/CoreTextNode.js';
+import type { AnimationSettings } from '../core/animations/CoreAnimation.js';
+import type { CoreShaderNode } from '../core/renderers/CoreShaderNode.js';
+
+/**
+ * A visual Node in the Renderer scene graph.
+ *
+ * @remarks
+ * A Node is a basic building block of the Renderer scene graph. It can be a
+ * container for other Nodes, or it can be a leaf Node that renders a solid
+ * color, gradient, image, or specific texture, using a specific shader.
+ *
+ * For text rendering Nodes, see {@link ITextNode}.
+ *
+ * ## INode vs CoreNode
+ * CoreNode is the name of the class for a Renderer Node and is only directly
+ * used internally by the Renderer. INode describes the public API of a
+ * Renderer Node including the ability to be tied to a specific Shader.
+ *
+ * Users of the Renderer API, should generally interact with INode objects
+ * instead of CoreNode objects.
+ */
+export interface INode<ShaderNode extends CoreShaderNode = CoreShaderNode>
+  extends Omit<CoreNode, 'shader' | 'animate' | 'parent'> {
+  shader: ShaderNode;
+  animate(
+    props: Partial<INodeAnimateProps<ShaderNode>>,
+    settings: Partial<AnimationSettings>,
+  ): IAnimationController;
+  parent: INode | null;
+}
+
+/**
+ * Properties used to animate() a Node
+ */
+export interface INodeAnimateProps<ShNode extends CoreShaderNode>
+  extends Omit<CoreNodeAnimateProps, 'shaderProps'> {
+  shaderProps: Partial<ShNode['props']>;
+}
+
+/**
+ * Properties used to create a new Node
+ */
+export interface INodeProps<ShNode extends CoreShaderNode>
+  extends Omit<CoreNodeProps, 'shader' | 'parent'> {
+  shader: ShNode;
+  parent: INode | null;
+}
+
+/**
+ * A visual Node in the Renderer scene graph that renders text.
+ *
+ * @remarks
+ * A Text Node is a special type of Node that renders text using a specific
+ * text renderer, such as Web/Canvas or Signed Distance Field (SDF) text.
+ *
+ * For non-text rendering, see {@link INode}.
+ *
+ * Users of the Renderer API, should generally interact with ITextNode objects
+ * instead of CoreTextNode objects.
+ */
+export interface ITextNode extends Omit<CoreTextNode, 'animate' | 'parent'> {
+  animate(
+    props: Partial<INodeAnimateProps<CoreShaderNode>>,
+    settings: Partial<AnimationSettings>,
+  ): IAnimationController;
+  parent: INode | null;
+}
+
+/**
+ * Properties used to create a new Text Node
+ */
+export interface ITextNodeProps extends Omit<CoreTextNodeProps, 'parent'> {
+  parent: INode | null;
+}