@lightningjs/renderer 0.8.3 → 0.8.4

package/src/core/utils.ts

@@ -23,8 +23,6 @@
  * @module
  */
 
-import memo from 'memize';
-
 export const EPSILON = 0.000001;
 export let ARRAY_TYPE =
   typeof Float32Array !== 'undefined' ? Float32Array : Array;
@@ -121,97 +119,107 @@ const getTimingBezier = (
   };
 };
 
-export const getTimingFunction = memo(
-  (str: string): ((time: number) => number | undefined) => {
-    switch (str) {
-      case 'linear':
-        return function (time: number) {
-          return time;
-        };
-      case 'ease':
-        return getTimingBezier(0.25, 0.1, 0.25, 1.0);
-
-      case 'ease-in':
-        return getTimingBezier(0.42, 0, 1.0, 1.0);
-      case 'ease-out':
-        return getTimingBezier(0, 0, 0.58, 1.0);
-      case 'ease-in-out':
-        return getTimingBezier(0.42, 0, 0.58, 1.0);
-
-      case 'ease-in-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-out-sine':
-        return getTimingBezier(0.12, 0, 0.39, 0);
-      case 'ease-in-out-sine':
-        return getTimingBezier(0.37, 0, 0.63, 1);
-
-      case 'ease-in-cubic':
-        return getTimingBezier(0.32, 0, 0.67, 0);
-      case 'ease-out-cubic':
-        return getTimingBezier(0.33, 1, 0.68, 1);
-      case 'ease-in-out-cubic':
-        return getTimingBezier(0.65, 0, 0.35, 1);
-
-      case 'ease-in-circ':
-        return getTimingBezier(0.55, 0, 1, 0.45);
-      case 'ease-out-circ':
-        return getTimingBezier(0, 0.55, 0.45, 1);
-      case 'ease-in-out-circ':
-        return getTimingBezier(0.85, 0, 0.15, 1);
-
-      case 'ease-in-back':
-        return getTimingBezier(0.36, 0, 0.66, -0.56);
-      case 'ease-out-back':
-        return getTimingBezier(0.34, 1.56, 0.64, 1);
-      case 'ease-in-out-back':
-        return getTimingBezier(0.68, -0.6, 0.32, 1.6);
-
-      case 'step-start':
-        return function () {
-          return 1;
-        };
-      case 'step-end':
-        return function (time: number) {
-          return time === 1 ? 1 : 0;
-        };
-      default:
-        // eslint-disable-next-line no-case-declarations
-        const s = 'cubic-bezier(';
-        if (str && str.indexOf(s) === 0) {
-          const parts = str
-            .substr(s.length, str.length - s.length - 1)
-            .split(',');
-          if (parts.length !== 4) {
-            console.warn('Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-          const a = parseFloat(parts[0] || '0.42');
-          const b = parseFloat(parts[1] || '0');
-          const c = parseFloat(parts[2] || '1');
-          const d = parseFloat(parts[3] || '1');
-
-          if (isNaN(a) || isNaN(b) || isNaN(c) || isNaN(d)) {
-            console.warn(' Unknown timing function: ' + str);
-            // Fallback: use linear.
-            return function (time) {
-              return time;
-            };
-          }
-
-          return getTimingBezier(a, b, c, d);
-        } else {
-          console.warn('Unknown timing function: ' + str);
-          // Fallback: use linear.
-          return function (time) {
-            return time;
-          };
-        }
-    }
-  },
-);
+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 === '') {
+    return defaultTiming;
+  }
+
+  if (timingMapping[str] !== undefined) {
+    return timingMapping[str] || defaultTiming;
+  }
+
+  if (str === 'linear') {
+    return (time: number) => {
+      return time;
+    };
+  }
+
+  if (str === 'step-start') {
+    return () => {
+      return 1;
+    };
+  }
+
+  if (str === 'step-end') {
+    return (time: number) => {
+      return time === 1 ? 1 : 0;
+    };
+  }
+
+  if (timingLookup[str] !== undefined) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - TS doesn't understand that we've checked for undefined
+    const [a, b, c, d] = timingLookup[str];
+    // 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;
+};
 
 if (!Math.hypot)
   Math.hypot = (...args: number[]) => {

package/src/main-api/INode.ts

@@ -405,6 +405,17 @@ export interface INodeWritableProps {
    * - `2 * Math.PI`: 360 rotation clockwise
    */
   rotation: number;
+
+  /**
+   * Whether the Node is rendered to a texture
+   *
+   * @remarks
+   * TBD
+   *
+   * @default false
+   */
+  rtt: boolean;
+
   /**
    * Node data element for custom data storage (optional)
    *

package/src/main-api/RendererMain.ts

@@ -350,7 +350,7 @@ export class RendererMain extends EventEmitter {
         settings.numImageWorkers !== undefined ? settings.numImageWorkers : 2,
       enableContextSpy: settings.enableContextSpy ?? false,
       enableInspector: settings.enableInspector ?? false,
-      renderMode: settings.renderMode ?? 'webgl'
+      renderMode: settings.renderMode ?? 'webgl',
     };
     this.settings = resolvedSettings;
 
@@ -570,6 +570,7 @@ export class RendererMain extends EventEmitter {
       pivotX: props.pivotX ?? props.pivot ?? 0.5,
       pivotY: props.pivotY ?? props.pivot ?? 0.5,
       rotation: props.rotation ?? 0,
+      rtt: props.rtt ?? false,
       data: data,
     };
   }

package/src/render-drivers/main/MainOnlyNode.ts

@@ -105,6 +105,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
         shaderProps: null,
         texture: null,
         textureOptions: null,
+        rtt: props.rtt,
       });
     // Forward loaded/failed events
     this.coreNode.on('loaded', this.onTextureLoaded);
@@ -121,6 +122,7 @@ export class MainOnlyNode extends EventEmitter implements INode {
     this.shader = props.shader;
     this.texture = props.texture;
     this.src = props.src;
+    this.rtt = props.rtt;
     this._data = props.data;
   }
 
@@ -145,6 +147,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set width(value: number) {
+    if (value !== this.coreNode.width && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.width = value;
   }
 
@@ -153,6 +165,16 @@ export class MainOnlyNode extends EventEmitter implements INode {
   }
 
   set height(value: number) {
+    if (value !== this.coreNode.height && this.coreNode.rtt) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
     this.coreNode.height = value;
   }
 
@@ -422,6 +444,28 @@ export class MainOnlyNode extends EventEmitter implements INode {
     }
   }
 
+  get rtt(): boolean {
+    return this.coreNode.rtt;
+  }
+
+  set rtt(value: boolean) {
+    if (value) {
+      this.texture = this.rendererMain.createTexture(
+        'RenderTexture',
+        {
+          width: this.width,
+          height: this.height,
+        },
+        { preload: true, flipY: true },
+      );
+    }
+    this.coreNode.rtt = value;
+  }
+
+  get parentHasRenderTexture(): boolean {
+    return this.coreNode.parentHasRenderTexture;
+  }
+
   private onTextureLoaded: NodeLoadedEventHandler = (target, payload) => {
     this.emit('loaded', payload);
   };

package/src/render-drivers/main/MainOnlyTextNode.ts

@@ -94,6 +94,7 @@ export class MainOnlyTextNode extends MainOnlyNode implements ITextNode {
         textureOptions: null,
         shader: null,
         shaderProps: null,
+        rtt: false,
       }),
     );
   }

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

@@ -48,6 +48,7 @@ export interface NodeStructWritableProps {
   pivotX: number;
   pivotY: number;
   rotation: number;
+  rtt: boolean;
 }
 
 export class NodeStruct
@@ -307,4 +308,13 @@ export class NodeStruct
   set zIndexLocked(value: number) {
     // Decorator will handle this
   }
+
+  @structProp('boolean')
+  get rtt(): boolean {
+    return false;
+  }
+
+  set rtt(value: boolean) {
+    // Decorator will handle this
+  }
 }

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

@@ -63,6 +63,7 @@ export class SharedNode extends SharedObject {
       pivotX: sharedNodeStruct.pivotX,
       pivotY: sharedNodeStruct.pivotY,
       rotation: sharedNodeStruct.rotation,
+      rtt: sharedNodeStruct.rtt,
     } satisfies NodeStructWritableProps);
   }
 
@@ -96,4 +97,5 @@ export class SharedNode extends SharedObject {
   protected declare parentId: number;
   declare zIndex: number;
   declare zIndexLocked: number;
+  declare rtt: boolean;
 }

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

@@ -174,6 +174,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       pivotX: props.pivotX,
       pivotY: props.pivotY,
       rotation: props.rotation,
+      rtt: props.rtt,
     } satisfies NodeStructWritableProps);
 
     const node = new ThreadXMainNode(rendererMain, bufferStruct);
@@ -221,6 +222,7 @@ export class ThreadXCoreDriver implements ICoreDriver {
       pivotX: props.pivotX,
       pivotY: props.pivotY,
       rotation: props.rotation,
+      rtt: props.rtt,
 
       // Text specific properties
       text: props.text,

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

@@ -43,6 +43,7 @@ export class ThreadXMainNode extends SharedNode implements INode {
   protected _shader: ShaderRef | null = null;
   protected _data: CustomDataMap | undefined = {};
   private _src = '';
+  private _parentHasRenderTexture = false;
 
   /**
    * FinalizationRegistry for animation controllers. When an animation
@@ -168,6 +169,14 @@ export class ThreadXMainNode extends SharedNode implements INode {
     }
   }
 
+  set parentHasRenderTexture(hasRenderTexture: boolean) {
+    this._parentHasRenderTexture = hasRenderTexture;
+  }
+
+  get parentHasRenderTexture(): boolean {
+    return this._parentHasRenderTexture;
+  }
+
   get children(): ThreadXMainNode[] {
     return this._children;
   }

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

@@ -231,6 +231,7 @@ export class ThreadXRendererNode extends SharedNode {
       pivotX: sharedNodeStruct.pivotX,
       pivotY: sharedNodeStruct.pivotY,
       rotation: sharedNodeStruct.rotation,
+      rtt: sharedNodeStruct.rtt,
 
       // These are passed in via message handlers
       shader: null,

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

@@ -68,6 +68,7 @@ export class ThreadXRendererTextNode extends ThreadXRendererNode {
         scaleX: sharedNodeStruct.scaleX,
         scaleY: sharedNodeStruct.scaleY,
         rotation: sharedNodeStruct.rotation,
+        rtt: sharedNodeStruct.rtt,
 
         // These are passed in via message handlers
         shader: null,

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

@@ -114,6 +114,7 @@ const threadx = ThreadX.init({
         pivotX: coreRootNode.pivotX,
         pivotY: coreRootNode.pivotY,
         rotation: coreRootNode.rotation,
+        rtt: coreRootNode.rtt,
       } satisfies NodeStructWritableProps);
 
       // Share the root node that was created by the Stage with the main worker.