@lightningjs/renderer 0.9.4 → 1.0.0-rc.1

package/src/core/animations/CoreAnimation.ts

@@ -17,8 +17,7 @@
  * limitations under the License.
  */
 
-import type { CoreNode } from '../CoreNode.js';
-import type { INodeAnimatableProps } from '../../main-api/INode.js';
+import { type CoreNode, type CoreNodeAnimateProps } from '../CoreNode.js';
 import { getTimingFunction } from '../utils.js';
 import { mergeColorProgress } from '../../utils.js';
 import { EventEmitter } from '../../common/EventEmitter.js';
@@ -33,26 +32,68 @@ export interface AnimationSettings {
   stopMethod: 'reverse' | 'reset' | false;
 }
 
+type PropValues = {
+  start: number;
+  target: number;
+};
+type PropValuesMap = Record<string, Record<string, PropValues>>;
+
 export class CoreAnimation extends EventEmitter {
-  public propStartValues: Partial<INodeAnimatableProps> = {};
-  public restoreValues: Partial<INodeAnimatableProps> = {};
   public settings: AnimationSettings;
   private progress = 0;
   private delayFor = 0;
   private timingFunction: (t: number) => number | undefined;
-  private propsList: Array<keyof INodeAnimatableProps>; //fixme - aint got not time for this
+
+  propValuesMap: PropValuesMap = {};
+  dynPropValuesMap: PropValuesMap | undefined = undefined;
 
   constructor(
     private node: CoreNode,
-    private props: Partial<INodeAnimatableProps>,
+    private props: Partial<CoreNodeAnimateProps>,
     settings: Partial<AnimationSettings>,
   ) {
     super();
-    this.propStartValues = {};
-    this.propsList = Object.keys(props) as Array<keyof INodeAnimatableProps>;
-    this.propsList.forEach((propName) => {
-      this.propStartValues[propName] = node[propName];
-    });
+
+    for (const key in props) {
+      if (key !== 'shaderProps') {
+        if (this.propValuesMap['props'] === undefined) {
+          this.propValuesMap['props'] = {};
+        }
+        this.propValuesMap['props'][key] = {
+          start: node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>],
+          target: props[
+            key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
+          ] as number,
+        };
+      } else if (node.shader.type !== 'DynamicShader') {
+        this.propValuesMap['shaderProps'] = {};
+        for (const key in props.shaderProps) {
+          this.propValuesMap['shaderProps'][key] = {
+            start: node.shader.props[key] as number,
+            target: props.shaderProps[key] as number,
+          };
+        }
+      } else {
+        const shaderPropKeys = Object.keys(props.shaderProps!);
+        const spLength = shaderPropKeys.length;
+        this.dynPropValuesMap = {};
+        for (let j = 0; j < spLength; j++) {
+          const effectName = shaderPropKeys[j]!;
+          const effect = props.shaderProps![effectName]!;
+          this.dynPropValuesMap[effectName] = {};
+          const effectProps = Object.entries(effect);
+          const eLength = effectProps.length;
+
+          for (let k = 0; k < eLength; k++) {
+            const [key, value] = effectProps[k]!;
+            this.dynPropValuesMap[effectName]![key] = {
+              start: node.shader.props[effectName][key],
+              target: value,
+            };
+          }
+        }
+      }
+    }
 
     const easing = settings.easing || 'linear';
     const delay = settings.delay ?? 0;
@@ -75,28 +116,82 @@ export class CoreAnimation extends EventEmitter {
     this.update(0);
   }
 
+  private restoreValues(
+    target: Record<string, number>,
+    valueMap: Record<string, PropValues>,
+  ) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      target[key] = value.start;
+    }
+  }
+
   restore() {
     this.reset();
-    (Object.keys(this.props) as Array<keyof INodeAnimatableProps>).forEach(
-      (propName) => {
-        this.node[propName] = this.propStartValues[propName] as number;
-      },
-    );
+    if (this.propValuesMap['props'] !== undefined) {
+      this.restoreValues(
+        this.node as unknown as Record<string, number>,
+        this.propValuesMap['props'],
+      );
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.restoreValues(
+        this.node.shader.props as Record<string, number>,
+        this.propValuesMap['shaderProps'],
+      );
+    }
+
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.restoreValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+          );
+        }
+      }
+    }
+  }
+
+  private reverseValues(valueMap: Record<string, PropValues>) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      valueMap[key] = {
+        start: value.target,
+        target: value.start,
+      };
+    }
   }
 
   reverse() {
     this.progress = 0;
-    (Object.keys(this.props) as Array<keyof INodeAnimatableProps>).forEach(
-      (propName) => {
-        // set the start value to the current value
-        const startValue = this.props[propName];
-        const endValue = this.propStartValues[propName] as number;
-
-        // swap the start and end values
-        this.props[propName] = endValue;
-        this.propStartValues[propName] = startValue;
-      },
-    );
+
+    if (this.propValuesMap['props'] !== undefined) {
+      this.reverseValues(this.propValuesMap['props']);
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.reverseValues(this.propValuesMap['shaderProps']);
+    }
+
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.reverseValues(this.dynPropValuesMap[key]!);
+        }
+      }
+    }
 
     // restore stop method if we are not looping
     if (!this.settings.loop) {
@@ -108,6 +203,53 @@ export class CoreAnimation extends EventEmitter {
     return (this.timingFunction(p) || p) * (e - s) + s;
   }
 
+  updateValue(
+    propName: string,
+    propValue: number,
+    startValue: number,
+    easing: string | undefined,
+  ): number {
+    if (this.progress === 1) {
+      return propValue;
+    }
+    if (this.progress === 0) {
+      return startValue;
+    }
+
+    const endValue = propValue;
+    if (propName.indexOf('color') !== -1) {
+      if (startValue === endValue) {
+        return startValue;
+      }
+
+      if (easing) {
+        const easingProgressValue =
+          this.timingFunction(this.progress) || this.progress;
+        return mergeColorProgress(startValue, endValue, easingProgressValue);
+      }
+      return mergeColorProgress(startValue, endValue, this.progress);
+    }
+
+    if (easing) {
+      return this.applyEasing(this.progress, startValue, endValue);
+    }
+    return startValue + (endValue - startValue) * this.progress;
+  }
+
+  private updateValues(
+    target: Record<string, number>,
+    valueMap: Record<string, PropValues>,
+    easing: string | undefined,
+  ) {
+    const entries = Object.entries(valueMap);
+    const eLength = entries.length;
+
+    for (let i = 0; i < eLength; i++) {
+      const [key, value] = entries[i]!;
+      target[key] = this.updateValue(key, value.target, value.start, easing);
+    }
+  }
+
   update(dt: number) {
     const { duration, loop, easing, stopMethod } = this.settings;
     const { delayFor } = this;
@@ -153,51 +295,36 @@ export class CoreAnimation extends EventEmitter {
       }
     }
 
-    for (let i = 0; i < this.propsList.length; i++) {
-      const propName = this.propsList[i] as keyof INodeAnimatableProps;
-      const propValue = this.props[propName] as number;
-      const startValue = this.propStartValues[propName] as number;
-      const endValue = propValue;
-
-      if (propName.indexOf('color') !== -1) {
-        // check if we have to change the color to begin with
-        if (startValue === endValue) {
-          this.node[propName] = startValue;
-          continue;
-        }
+    if (this.propValuesMap['props'] !== undefined) {
+      this.updateValues(
+        this.node as unknown as Record<string, number>,
+        this.propValuesMap['props'],
+        easing,
+      );
+    }
+    if (this.propValuesMap['shaderProps'] !== undefined) {
+      this.updateValues(
+        this.node.shader.props as Record<string, number>,
+        this.propValuesMap['shaderProps'],
+        easing,
+      );
+    }
 
-        if (easing) {
-          const easingProgressValue =
-            this.timingFunction(this.progress) || this.progress;
-          const easingColorValue = mergeColorProgress(
-            startValue,
-            endValue,
-            easingProgressValue,
+    if (this.dynPropValuesMap !== undefined) {
+      const dynEntries = Object.keys(this.dynPropValuesMap);
+      const dynEntriesL = dynEntries.length;
+      if (dynEntriesL > 0) {
+        for (let i = 0; i < dynEntriesL; i++) {
+          const key = dynEntries[i]!;
+          this.updateValues(
+            this.node.shader.props[key],
+            this.dynPropValuesMap[key]!,
+            easing,
           );
-          this.node[propName] = easingColorValue;
-          continue;
         }
-
-        this.node[propName] = mergeColorProgress(
-          startValue,
-          endValue,
-          this.progress,
-        );
-        continue;
       }
-
-      if (easing) {
-        this.node[propName] = this.applyEasing(
-          this.progress,
-          startValue,
-          endValue,
-        );
-        continue;
-      }
-
-      this.node[propName] =
-        startValue + (endValue - startValue) * this.progress;
     }
+
     if (this.progress === 1) {
       this.emit('finished', {});
     }

package/src/core/lib/ImageWorker.ts

@@ -20,6 +20,84 @@
 import { type TextureData } from '../textures/Texture.js';
 
 type MessageCallback = [(value: any) => void, (reason: any) => void];
+interface getImageReturn {
+  data: ImageBitmap;
+  premultiplyAlpha: boolean | null;
+}
+
+/**
+ * Note that, within the createImageWorker function, we must only use ES5 code to keep it ES5-valid after babelifying, as
+ *  the converted code of this section is converted to a blob and used as the js of the web worker thread.
+ *
+ * The createImageWorker function is a web worker that fetches an image from a URL and returns an ImageBitmap object.
+ * The eslint @typescript rule is disabled for the entire function because the function is converted to a blob and used as the
+ * js of the web worker thread, so the typescript syntax is not valid in this context.
+ */
+
+/* eslint-disable */
+const createImageWorker = function worker() {
+  function hasAlphaChannel(mimeType: string) {
+    return mimeType.indexOf('image/png') !== -1;
+  }
+
+  function getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+  ): Promise<getImageReturn> {
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+      xhr.responseType = 'blob';
+
+      xhr.onload = function () {
+        if (xhr.status !== 200) {
+          return reject(new Error('Failed to load image: ' + xhr.statusText));
+        }
+
+        var blob = xhr.response;
+        var withAlphaChannel =
+          premultiplyAlpha !== undefined
+            ? premultiplyAlpha
+            : hasAlphaChannel(blob.type);
+
+        createImageBitmap(blob, {
+          premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+          colorSpaceConversion: 'none',
+          imageOrientation: 'none',
+        })
+          .then(function (data) {
+            resolve({ data, premultiplyAlpha: premultiplyAlpha });
+          })
+          .catch(function (error) {
+            reject(error);
+          });
+      };
+
+      xhr.onerror = function () {
+        reject(
+          new Error('Network error occurred while trying to fetch the image.'),
+        );
+      };
+
+      xhr.send();
+    });
+  }
+
+  self.onmessage = (event) => {
+    var src = event.data.src;
+    var id = event.data.id;
+    var premultiplyAlpha = event.data.premultiplyAlpha;
+
+    getImage(src, premultiplyAlpha)
+      .then(function (data) {
+        self.postMessage({ id: id, src: src, data: data });
+      })
+      .catch(function (error) {
+        self.postMessage({ id: id, src: src, error: error.message });
+      });
+  };
+};
+/* eslint-enable */
 
 export class ImageWorkerManager {
   imageWorkersEnabled = true;
@@ -55,58 +133,7 @@ export class ImageWorkerManager {
   }
 
   private createWorkers(numWorkers = 1): Worker[] {
-    const workerCode = `
-      function hasAlphaChannel(mimeType) {
-          return (mimeType.indexOf("image/png") !== -1);
-      }
-
-      function getImage(src, premultiplyAlpha) {
-        return new Promise(function(resolve, reject) {
-          var xhr = new XMLHttpRequest();
-          xhr.open('GET', src, true);
-          xhr.responseType = 'blob';
-
-          xhr.onload = function() {
-            if (xhr.status === 200) {
-              var blob = xhr.response;
-              var hasAlphaChannel = premultiplyAlpha !== undefined ? premultiplyAlpha : hasAlphaChannel(blob.type);
-
-              createImageBitmap(blob, {
-                premultiplyAlpha: hasAlphaChannel ? 'premultiply' : 'none',
-                colorSpaceConversion: 'none',
-                imageOrientation: 'none'
-              }).then(function(data) {
-                resolve({ data: data, premultiplyAlpha: premultiplyAlpha });
-              }).catch(function(error) {
-                reject(error);
-              });
-            } else {
-              reject(new Error('Failed to load image: ' + xhr.statusText));
-            }
-          };
-
-          xhr.onerror = function() {
-            reject(new Error('Network error occurred while trying to fetch the image.'));
-          };
-
-          xhr.send();
-        });
-      }
-
-      self.onmessage = (event) => {
-        var id = event.data.id;
-        var src = event.data.src;
-        var premultiplyAlpha = event.data.premultiplyAlpha;
-
-        getImage(src, premultiplyAlpha)
-          .then(function(data) {
-              self.postMessage({ id: id, data: data }, [data.data]);
-          })
-          .catch(function(error) {
-              self.postMessage({ id: id, error: error.message });
-          });
-      };
-    `;
+    const workerCode = `${createImageWorker.toString()} worker()`;
 
     const blob: Blob = new Blob([workerCode.replace('"use strict";', '')], {
       type: 'application/javascript',

package/src/core/lib/utils.ts

@@ -20,6 +20,7 @@
 export const PROTOCOL_REGEX = /^(data|ftps?|https?):/;
 
 export type RGBA = [r: number, g: number, b: number, a: number];
+
 export const getNormalizedRgbaComponents = (rgba: number): RGBA => {
   const r = rgba >>> 24;
   const g = (rgba >>> 16) & 0xff;

package/src/core/platform.ts

@@ -25,21 +25,28 @@ import type { Stage } from './Stage.js';
 export const startLoop = (stage: Stage) => {
   let isIdle = false;
   const runLoop = () => {
+    stage.updateFrameTime();
     stage.updateAnimations();
 
     if (!stage.hasSceneUpdates()) {
       // We still need to calculate the fps else it looks like the app is frozen
       stage.calculateFps();
       setTimeout(runLoop, 16.666666666666668);
+
       if (!isIdle) {
-        stage.emit('idle');
+        if (stage.txMemManager.checkCleanup()) {
+          stage.txMemManager.cleanup();
+        }
+        stage.eventBus.emit('idle');
         isIdle = true;
       }
+      stage.flushFrameEvents();
       return;
     }
 
     isIdle = false;
     stage.drawFrame();
+    stage.flushFrameEvents();
     requestAnimationFrame(runLoop);
   };
   requestAnimationFrame(runLoop);

package/src/core/renderers/CoreContextTexture.ts

@@ -21,15 +21,22 @@ import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { Texture } from '../textures/Texture.js';
 
 export abstract class CoreContextTexture {
-  readonly memManager: TextureMemoryManager;
   readonly textureSource: Texture;
+  private memManager: TextureMemoryManager;
 
   constructor(memManager: TextureMemoryManager, textureSource: Texture) {
     this.memManager = memManager;
     this.textureSource = textureSource;
   }
 
+  protected setTextureMemUse(byteSize: number): void {
+    this.memManager.setTextureMemUse(this.textureSource, byteSize);
+  }
+
   abstract load(): void;
   abstract free(): void;
-  abstract get renderable(): boolean;
+
+  get renderable(): boolean {
+    return this.textureSource.renderable;
+  }
 }

package/src/core/renderers/CoreRenderer.ts

@@ -18,6 +18,7 @@
  */
 
 import type { Dimensions } from '../../common/CommonTypes.js';
+import type { BaseShaderController } from '../../main-api/ShaderController.js';
 import type { CoreNode } from '../CoreNode.js';
 import type { CoreShaderManager } from '../CoreShaderManager.js';
 import type {
@@ -27,8 +28,8 @@ import type {
 import type { Stage } from '../Stage.js';
 import type { TextureMemoryManager } from '../TextureMemoryManager.js';
 import type { ContextSpy } from '../lib/ContextSpy.js';
+import type { RenderCoords } from '../lib/RenderCoords.js';
 import type { RectWithValid } from '../lib/utils.js';
-import { ColorTexture } from '../textures/ColorTexture.js';
 import type { Texture } from '../textures/Texture.js';
 import { CoreContextTexture } from './CoreContextTexture.js';
 import type { CoreShader } from './CoreShader.js';
@@ -53,6 +54,7 @@ export interface QuadOptions {
   tb: number;
   tc: number;
   td: number;
+  renderCoords?: RenderCoords;
   rtt?: boolean;
   parentHasRenderTexture?: boolean;
   framebufferDimensions?: Dimensions;
@@ -74,7 +76,7 @@ export abstract class CoreRenderer {
   public options: CoreRendererOptions;
   public mode: 'webgl' | 'canvas' | undefined;
 
-  protected stage: Stage;
+  readonly stage: Stage;
 
   //// Core Managers
   txManager: CoreTextureManager;
@@ -100,4 +102,5 @@ export abstract class CoreRenderer {
   abstract renderRTTNodes(): void;
   abstract removeRTTNode(node: CoreNode): void;
   abstract renderToTexture(node: CoreNode): void;
+  abstract getDefShaderCtr(): BaseShaderController;
 }

package/src/core/renderers/canvas/CanvasCoreRenderer.ts

@@ -17,6 +17,7 @@
  * limitations under the License.
  */
 
+import type { BaseShaderController } from '../../../main-api/ShaderController.js';
 import type { CoreNode } from '../../CoreNode.js';
 import type { CoreShaderManager } from '../../CoreShaderManager.js';
 import { getRgbaComponents, type RGBA } from '../../lib/utils.js';
@@ -35,6 +36,7 @@ import {
   parseColor,
   type IParsedColor,
 } from './internal/ColorUtils.js';
+import { UnsupportedShader } from './shaders/UnsupportedShader.js';
 
 export class CanvasCoreRenderer extends CoreRenderer {
   private context: CanvasRenderingContext2D;
@@ -43,6 +45,8 @@ export class CanvasCoreRenderer extends CoreRenderer {
   private clearColor: RGBA | undefined;
   public renderToTextureActive = false;
   activeRttNode: CoreNode | null = null;
+  private defShaderCtr: BaseShaderController;
+
   constructor(options: CoreRendererOptions) {
     super(options);
 
@@ -54,6 +58,17 @@ export class CanvasCoreRenderer extends CoreRenderer {
     this.context = canvas.getContext('2d') as CanvasRenderingContext2D;
     this.pixelRatio = pixelRatio;
     this.clearColor = clearColor ? getRgbaComponents(clearColor) : undefined;
+
+    // Stub for default shader controller since the canvas renderer does not
+    // (really) support the concept of a shader (yet)
+    this.defShaderCtr = {
+      type: 'DefaultShader',
+      props: {},
+      shader: new UnsupportedShader('DefaultShader'),
+      getResolvedProps: () => () => {
+        return {};
+      },
+    };
   }
 
   reset(): void {
@@ -104,7 +119,7 @@ export class CanvasCoreRenderer extends CoreRenderer {
         texture = texture.parentTexture;
       }
 
-      ctxTexture = this.txManager.getCtxTexture(texture) as CanvasCoreTexture;
+      ctxTexture = texture.ctxTexture as CanvasCoreTexture;
       if (texture.state === 'freed') {
         ctxTexture.load();
         return;
@@ -209,6 +224,10 @@ export class CanvasCoreRenderer extends CoreRenderer {
     return this.shManager;
   }
 
+  override getDefShaderCtr(): BaseShaderController {
+    return this.defShaderCtr;
+  }
+
   renderRTTNodes(): void {
     // noop
   }

package/src/core/renderers/canvas/CanvasCoreTexture.ts

@@ -50,7 +50,7 @@ export class CanvasCoreTexture extends CoreContextTexture {
     this.image = undefined;
     this.tintCache = undefined;
     this.textureSource.setState('freed');
-    this.memManager.setTextureMemUse(this, 0);
+    this.setTextureMemUse(0);
   }
 
   updateMemSize(): void {
@@ -60,7 +60,7 @@ export class CanvasCoreTexture extends CoreContextTexture {
     const mult = this.tintCache ? 8 : 4;
     if (this.textureSource.dimensions) {
       const { width, height } = this.textureSource.dimensions;
-      this.memManager.setTextureMemUse(this, width * height * mult);
+      this.setTextureMemUse(width * height * mult);
     }
   }
 
@@ -119,10 +119,6 @@ export class CanvasCoreTexture extends CoreContextTexture {
     return canvas;
   }
 
-  get renderable(): boolean {
-    return this.textureSource.renderable;
-  }
-
   private async onLoadRequest(): Promise<Dimensions> {
     const { data } = await this.textureSource.getTextureData();
     // TODO: canvas from text renderer should be able to provide the canvas directly

package/src/core/renderers/webgl/WebGlCoreCtxRenderTexture.ts

@@ -42,7 +42,7 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
   }
 
   override async onLoadRequest(): Promise<Dimensions> {
-    const { glw, memManager } = this;
+    const { glw } = this;
     const nativeTexture = (this._nativeCtxTexture =
       this.createNativeCtxTexture());
     const { width, height } = this.textureSource;
@@ -60,7 +60,7 @@ export class WebGlCoreCtxRenderTexture extends WebGlCoreCtxTexture {
     );
 
     // Update the texture memory manager
-    memManager.setTextureMemUse(this, width * height * 4);
+    this.setTextureMemUse(width * height * 4);
 
     // Bind the framebuffer
     glw.bindFramebuffer(this.framebuffer);