@solidtv/renderer 1.0.0

package/src/core/animations/CoreAnimation.ts

@@ -0,0 +1,138 @@
+import type { CoreNode, CoreNodeAnimateProps } from '../CoreNode.js';
+import { getTimingFunction, type TimingFunction } from '../utils.js';
+import type {
+  AnimationConfig,
+  AnimationManager,
+  PropValues,
+} from './AnimationManager.js';
+
+export interface AnimationSettings {
+  duration: number;
+  delay: number;
+  easing: string | TimingFunction;
+  loop: boolean;
+  repeat: number;
+  stopMethod: 'reverse' | 'reset' | false;
+}
+
+export function createAnimation(
+  manager: AnimationManager,
+  node: CoreNode,
+  props: Partial<CoreNodeAnimateProps>,
+  settings: Partial<AnimationSettings>,
+): AnimationConfig {
+  const easing = settings.easing || 'linear';
+  const delay = settings.delay ?? 0;
+
+  let propValues: Record<string, PropValues> | null = null;
+  let shaderPropValues: Record<string, PropValues> | null = null;
+
+  for (const key in props) {
+    if (key !== 'shaderProps') {
+      if (!propValues) propValues = {};
+      propValues[key] = {
+        start:
+          node[key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>] || 0,
+        target: props[
+          key as keyof Omit<CoreNodeAnimateProps, 'shaderProps'>
+        ] as number,
+        isColor: key.indexOf('color') !== -1,
+      };
+    } else if (key === 'shaderProps' && node.shader !== null) {
+      if (!shaderPropValues) shaderPropValues = {};
+      for (const shaderKey in props.shaderProps) {
+        let start = node.shader.props![shaderKey];
+        if (Array.isArray(start)) {
+          start = start[0];
+        }
+        shaderPropValues[shaderKey] = {
+          start: start as number,
+          target: props.shaderProps[shaderKey] as number,
+          isColor: shaderKey.indexOf('color') !== -1,
+        };
+      }
+    }
+  }
+
+  const timingFunction =
+    typeof easing === 'string' ? getTimingFunction(easing) : easing;
+
+  const config: AnimationConfig = {
+    manager,
+    node,
+    duration: settings.duration ?? 0,
+    delay,
+    delayFor: delay,
+    progress: 0,
+    loop: settings.loop ?? false,
+    repeat: settings.repeat ?? 0,
+    stopMethod: settings.stopMethod ?? false,
+    timingFunction,
+    state: 'stopped',
+    props: propValues,
+    shaderProps: shaderPropValues,
+    stoppedResolve: null,
+    stoppedPromise: null,
+
+    start() {
+      if (this.state !== 'running' && this.state !== 'scheduled') {
+        if (!this.stoppedPromise) {
+          this.stoppedPromise = new Promise((resolve) => {
+            this.stoppedResolve = resolve;
+          });
+        }
+        this.manager.registerAnimation(this);
+        this.state = 'scheduled';
+      }
+      return this;
+    },
+
+    stop() {
+      this.manager.unregisterAnimation(this);
+      if (this.stoppedResolve) {
+        this.stoppedResolve();
+        this.stoppedResolve = null;
+      }
+      // Reset values
+      this.progress = 0;
+      this.delayFor = this.delay;
+      this.state = 'stopped';
+      return this;
+    },
+
+    pause() {
+      this.manager.unregisterAnimation(this);
+      this.state = 'paused';
+      return this;
+    },
+
+    restore() {
+      this.stoppedResolve = null;
+      this.stop();
+      if (this.props) {
+        const entries = Object.entries(this.props);
+        for (let i = 0; i < entries.length; i++) {
+          const [k, v] = entries[i]!;
+          (this.node as unknown as Record<string, number>)[k] = v.start;
+        }
+      }
+      if (this.shaderProps && this.node.shader) {
+        const entries = Object.entries(this.shaderProps);
+        for (let i = 0; i < entries.length; i++) {
+          const [k, v] = entries[i]!;
+          (this.node.shader.props as Record<string, number>)[k] = v.start;
+        }
+      }
+      return this;
+    },
+
+    waitUntilStopped() {
+      if (!this.stoppedPromise) {
+        this.stoppedPromise = Promise.resolve();
+      }
+      return this.stoppedPromise;
+    },
+  };
+
+  return config;
+}

package/src/core/lib/ContextSpy.ts

@@ -0,0 +1,22 @@
+/**
+ * Class that keeps track of the invocations of Context methods when
+ * the `enableContextSpy` renderer option is enabled.
+ */
+export class ContextSpy {
+  private data: Record<string, number> = {};
+
+  reset() {
+    this.data = {};
+  }
+
+  increment(name: string) {
+    if (!this.data[name]) {
+      this.data[name] = 0;
+    }
+    this.data[name]++;
+  }
+
+  getData() {
+    return { ...this.data };
+  }
+}

package/src/core/lib/ImageWorker.ts

@@ -0,0 +1,292 @@
+import type { CreateImageBitmapSupport } from '../lib/validateImageBitmap.js';
+import { type TextureData } from '../textures/Texture.js';
+
+type MessageCallback = [(value: any) => void, (reason: any) => void];
+interface getImageReturn {
+  data: ImageBitmap;
+  premultiplyAlpha: boolean | null;
+}
+
+interface ImageWorkerMessage {
+  id: number;
+  src: string;
+  data: getImageReturn;
+  error: string;
+  sx: number | null;
+  sy: number | null;
+  sw: number | null;
+  sh: number | 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 */
+function createImageWorker() {
+  function hasAlphaChannel(mimeType: string) {
+    return mimeType.indexOf('image/png') !== -1;
+  }
+
+  function getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    x: number | null,
+    y: number | null,
+    width: number | null,
+    height: number | null,
+    options: {
+      supportsOptionsCreateImageBitmap: boolean;
+      supportsFullCreateImageBitmap: boolean;
+    },
+  ): Promise<getImageReturn> {
+    return new Promise(function (resolve, reject) {
+      var supportsOptionsCreateImageBitmap =
+        options.supportsOptionsCreateImageBitmap;
+      var supportsFullCreateImageBitmap = options.supportsFullCreateImageBitmap;
+      var xhr = new XMLHttpRequest();
+      xhr.open('GET', src, true);
+      xhr.responseType = 'blob';
+
+      xhr.onload = function () {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status !== 200 && xhr.status !== 0) {
+          return reject(
+            new Error(
+              `Image loading failed. HTTP status code: ${
+                xhr.status || 'N/A'
+              }. URL: ${src}`,
+            ),
+          );
+        }
+
+        var blob = xhr.response;
+        var withAlphaChannel =
+          premultiplyAlpha !== undefined
+            ? premultiplyAlpha
+            : hasAlphaChannel(blob.type);
+
+        // createImageBitmap with crop and options
+        if (
+          supportsFullCreateImageBitmap === true &&
+          width !== null &&
+          height !== null
+        ) {
+          createImageBitmap(blob, x || 0, y || 0, width, height, {
+            premultiplyAlpha: withAlphaChannel ? 'premultiply' : 'none',
+            colorSpaceConversion: 'none',
+            imageOrientation: 'none',
+          })
+            .then(function (data) {
+              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+          return;
+        } else if (
+          supportsOptionsCreateImageBitmap === false &&
+          supportsOptionsCreateImageBitmap === false
+        ) {
+          // Fallback for browsers that do not support createImageBitmap with options
+          // this is supported for Chrome v50 to v52/54 that doesn't support options
+          createImageBitmap(blob)
+            .then(function (data) {
+              resolve({ data, premultiplyAlpha: premultiplyAlpha });
+            })
+            .catch(function (error) {
+              reject(error);
+            });
+        } else {
+          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;
+    var x = event.data.sx;
+    var y = event.data.sy;
+    var width = event.data.sw;
+    var height = event.data.sh;
+
+    // these will be set to true if the browser supports the createImageBitmap options or full
+    var supportsOptionsCreateImageBitmap = false;
+    var supportsFullCreateImageBitmap = false;
+
+    getImage(src, premultiplyAlpha, x, y, width, height, {
+      supportsOptionsCreateImageBitmap,
+      supportsFullCreateImageBitmap,
+    })
+      .then(function (data) {
+        // @ts-ignore ts has wrong postMessage signature
+        self.postMessage({ id: id, src: src, data: data }, [data.data]);
+      })
+      .catch(function (error) {
+        self.postMessage({ id: id, src: src, error: error.message });
+      });
+  };
+}
+/* eslint-enable */
+
+export class ImageWorkerManager {
+  imageWorkersEnabled = true;
+  messageManager: Record<number, MessageCallback> = {};
+  workers: Worker[] = [];
+  workerLoad: number[] = [];
+  nextId = 0;
+
+  constructor(
+    numImageWorkers: number,
+    createImageBitmapSupport: CreateImageBitmapSupport,
+  ) {
+    this.workers = this.createWorkers(
+      numImageWorkers,
+      createImageBitmapSupport,
+    );
+    this.workers.forEach((worker, index) => {
+      worker.onmessage = (event) => this.handleMessage(event, index);
+    });
+  }
+
+  private handleMessage(event: MessageEvent, workerIndex: number) {
+    const { id, data, error } = event.data as ImageWorkerMessage;
+    const msg = this.messageManager[id];
+
+    if (this.workerLoad[workerIndex]) {
+      this.workerLoad[workerIndex]--;
+    }
+
+    if (msg) {
+      const [resolve, reject] = msg;
+      delete this.messageManager[id];
+      if (error) {
+        reject(new Error(error));
+      } else {
+        resolve(data);
+      }
+    }
+  }
+
+  private createWorkers(
+    numWorkers = 1,
+    createImageBitmapSupport: CreateImageBitmapSupport,
+  ): Worker[] {
+    let workerCode = `(${createImageWorker.toString()})()`;
+
+    // Replace placeholders with actual initialization values
+    if (createImageBitmapSupport.options === true) {
+      workerCode = workerCode.replace(
+        'var supportsOptionsCreateImageBitmap = false;',
+        'var supportsOptionsCreateImageBitmap = true;',
+      );
+    }
+
+    if (createImageBitmapSupport.full === true) {
+      workerCode = workerCode.replace(
+        'var supportsOptionsCreateImageBitmap = false;',
+        'var supportsOptionsCreateImageBitmap = true;',
+      );
+
+      workerCode = workerCode.replace(
+        'var supportsFullCreateImageBitmap = false;',
+        'var supportsFullCreateImageBitmap = true;',
+      );
+    }
+
+    workerCode = workerCode.replace('"use strict";', '');
+    const blob: Blob = new Blob([workerCode], {
+      type: 'application/javascript',
+    });
+    const blobURL: string = (self.URL ? URL : webkitURL).createObjectURL(blob);
+    const workers: Worker[] = [];
+    for (let i = 0; i < numWorkers; i++) {
+      workers.push(new Worker(blobURL));
+      this.workerLoad.push(0);
+    }
+    return workers;
+  }
+
+  private getNextWorkerIndex(): number {
+    if (this.workers.length === 0) return -1;
+
+    let minLoad = 99;
+    let workerIndex = 0;
+
+    for (let i = 0; i < this.workers.length; i++) {
+      const load = this.workerLoad[i] || 0;
+
+      if (load === 0) {
+        return i;
+      }
+
+      if (load < minLoad) {
+        minLoad = load;
+        workerIndex = i;
+      }
+    }
+    return workerIndex;
+  }
+
+  getImage(
+    src: string,
+    premultiplyAlpha: boolean | null,
+    sx: number | null,
+    sy: number | null,
+    sw: number | null,
+    sh: number | null,
+  ): Promise<TextureData> {
+    return new Promise((resolve, reject) => {
+      try {
+        if (this.workers) {
+          const id = this.nextId++;
+          this.messageManager[id] = [resolve, reject];
+          const nextWorkerIndex = this.getNextWorkerIndex();
+
+          if (nextWorkerIndex !== -1) {
+            const worker = this.workers[nextWorkerIndex];
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.workerLoad[nextWorkerIndex]!++;
+            worker!.postMessage({
+              id,
+              src: src,
+              premultiplyAlpha,
+              sx,
+              sy,
+              sw,
+              sh,
+            });
+          }
+        }
+      } catch (error) {
+        reject(error);
+      }
+    });
+  }
+}

package/src/core/lib/Matrix3d.ts

@@ -0,0 +1,231 @@
+/**
+ * A 3D matrix representing a 2D graphics transformation
+ *
+ * @remarks
+ * For convenience, entries in the first two rows can be accessed by the following
+ * properties:
+ * | ta tb tx |
+ * | tc td ty |
+ * | 0  0  1  |
+ *
+ * This matrix is optimized for 2D transformations and hence the last row will
+ * always be considered [0, 0 ,1].
+ *
+ * To access a column major array for WebGL, use the {@link getFloatArr} method.
+ */
+export class Matrix3d {
+  public ta: number;
+  public tb: number;
+  public tx: number;
+  public tc: number;
+  public td: number;
+  public ty: number;
+  private _floatArr: Float32Array | null = null;
+  /**
+   * Potential Mutation Flag
+   *
+   * @remarks
+   * This flag is set to true whenever the matrix is potentially modified.
+   * We don't waste CPU trying to identify if each operation actually modifies
+   * the matrix. Instead, we set this flag to true whenever we think the matrix
+   * is modified. This signals that the `floatArr` should to be updated.
+   */
+  private mutation: boolean;
+
+  /**
+   * Creates a new 3x3 matrix.
+   *
+   * @param entries Row-major 3x3 matrix
+   */
+  public constructor() {
+    this.ta = 0;
+    this.tb = 0;
+    this.tx = 0;
+    this.tc = 0;
+    this.td = 0;
+    this.ty = 0;
+    this.mutation = true;
+  }
+
+  /**
+   * Returns a temporary matrix that can be used for calculations.
+   *
+   * @remarks
+   * This is useful for avoiding allocations in tight loops.
+   *
+   * The matrix is not guaranteed to be the same between calls.
+   *
+   * @returns
+   */
+  public static get temp(): Matrix3d {
+    return tempMatrix;
+  }
+
+  public static multiply(a: Matrix3d, b: Matrix3d, out?: Matrix3d): Matrix3d {
+    const e0 = a.ta * b.ta + a.tb * b.tc;
+    const e1 = a.ta * b.tb + a.tb * b.td;
+    const e2 = a.ta * b.tx + a.tb * b.ty + a.tx;
+    const e3 = a.tc * b.ta + a.td * b.tc;
+    const e4 = a.tc * b.tb + a.td * b.td;
+    const e5 = a.tc * b.tx + a.td * b.ty + a.ty;
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.ta = e0;
+    out.tb = e1;
+    out.tx = e2;
+    out.tc = e3;
+    out.td = e4;
+    out.ty = e5;
+    out.mutation = true;
+    return out;
+  }
+
+  public static identity(out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.ta = 1;
+    out.tb = 0;
+    out.tx = 0;
+    out.tc = 0;
+    out.td = 1;
+    out.ty = 0;
+    out.mutation = true;
+    return out;
+  }
+
+  public static translate(x: number, y: number, out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.ta = 1;
+    out.tb = 0;
+    out.tx = x;
+    out.tc = 0;
+    out.td = 1;
+    out.ty = y;
+    out.mutation = true;
+    return out;
+  }
+
+  public static scale(sx: number, sy: number, out?: Matrix3d): Matrix3d {
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.ta = sx;
+    out.tb = 0;
+    out.tx = 0;
+    out.tc = 0;
+    out.td = sy;
+    out.ty = 0;
+    out.mutation = true;
+    return out;
+  }
+
+  public static rotate(angle: number, out?: Matrix3d): Matrix3d {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    if (!out) {
+      out = new Matrix3d();
+    }
+    out.ta = cos;
+    out.tb = -sin;
+    out.tx = 0;
+    out.tc = sin;
+    out.td = cos;
+    out.ty = 0;
+    out.mutation = true;
+    return out;
+  }
+
+  public static copy(src: Matrix3d, dst?: Matrix3d): Matrix3d {
+    if (!dst) {
+      dst = new Matrix3d();
+    }
+    dst.ta = src.ta;
+    dst.tc = src.tc;
+    dst.tb = src.tb;
+    dst.td = src.td;
+    dst.tx = src.tx;
+    dst.ty = src.ty;
+    dst.mutation = true;
+    return dst;
+  }
+
+  public translate(x: number, y: number): Matrix3d {
+    this.tx = this.ta * x + this.tb * y + this.tx;
+    this.ty = this.tc * x + this.td * y + this.ty;
+    this.mutation = true;
+    return this;
+  }
+
+  public scale(sx: number, sy: number): Matrix3d {
+    this.ta = this.ta * sx;
+    this.tb = this.tb * sy;
+    this.tc = this.tc * sx;
+    this.td = this.td * sy;
+    this.mutation = true;
+    return this;
+  }
+
+  public rotate(angle: number): Matrix3d {
+    if (angle === 0) {
+      return this;
+    }
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const e0 = this.ta * cos + this.tb * sin;
+    const e1 = this.tb * cos - this.ta * sin;
+    const e3 = this.tc * cos + this.td * sin;
+    const e4 = this.td * cos - this.tc * sin;
+    this.ta = e0;
+    this.tb = e1;
+    this.tc = e3;
+    this.td = e4;
+    this.mutation = true;
+    return this;
+  }
+
+  public multiply(other: Matrix3d): Matrix3d {
+    return Matrix3d.multiply(this, other, this);
+  }
+
+  /**
+   * Returns the matrix as a Float32Array in column-major order.
+   *
+   * @remarks
+   * This method is optimized to avoid unnecessary allocations. The same array
+   * is returned every time this method is called, and is updated in place.
+   *
+   * WARNING: Use the array only for passing directly to a WebGL shader uniform
+   * during a frame render. Do not modify or hold onto the array for longer than
+   * a frame.
+   */
+  getFloatArr(): Float32Array {
+    if (!this._floatArr) {
+      this._floatArr = new Float32Array(9);
+    }
+    if (this.mutation) {
+      this._floatArr[0] = this.ta;
+      this._floatArr[1] = this.tc;
+      this._floatArr[2] = 0;
+      this._floatArr[3] = this.tb;
+      this._floatArr[4] = this.td;
+      this._floatArr[5] = 0;
+      this._floatArr[6] = this.tx;
+      this._floatArr[7] = this.ty;
+      this._floatArr[8] = 1;
+      this.mutation = false;
+    }
+    return this._floatArr;
+  }
+  public translateOrMultiply(other: Matrix3d): Matrix3d {
+    if (other.ta === 1 && other.td === 1 && other.tb === 0 && other.tc === 0) {
+      return this.translate(other.tx, other.ty);
+    }
+    return this.multiply(other);
+  }
+}
+
+const tempMatrix = new Matrix3d();