@solidtv/renderer 1.0.0

package/src/core/lib/textureSvg.ts

@@ -0,0 +1,59 @@
+import { assertTruthy } from '../../utils.js';
+import { type TextureData } from '../textures/Texture.js';
+
+/**
+ * Tests if the given location is a SVG
+ * @param url
+ * @remarks
+ * This function is used to determine if the given image url is a SVG
+ * image
+ * @returns
+ */
+export function isSvgImage(url: string): boolean {
+  return /\.(svg)(\?.*)?$/.test(url);
+}
+
+/**
+ * Loads a SVG image
+ * @param url
+ * @returns
+ */
+export const loadSvg = (
+  url: string,
+  width: number | null,
+  height: number | null,
+  sx: number | null,
+  sy: number | null,
+  sw: number | null,
+  sh: number | null,
+): Promise<TextureData> => {
+  return new Promise((resolve, reject) => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    assertTruthy(ctx);
+
+    ctx.imageSmoothingEnabled = true;
+    const img = new Image();
+    img.onload = () => {
+      const x = sx ?? 0;
+      const y = sy ?? 0;
+      const w = width || img.width;
+      const h = height || img.height;
+
+      canvas.width = w;
+      canvas.height = h;
+      ctx.drawImage(img, 0, 0, w, h);
+
+      resolve({
+        data: ctx.getImageData(x, y, sw ?? w, sh ?? h),
+        premultiplyAlpha: false,
+      });
+    };
+
+    img.onerror = (err) => {
+      reject(err);
+    };
+
+    img.src = url;
+  });
+};

package/src/core/lib/utils.ts

@@ -0,0 +1,400 @@
+import type { Vec4 } from '../renderers/webgl/internal/ShaderUtils.js';
+
+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;
+  const b = (rgba >>> 8) & 0xff;
+  const a = rgba & 0xff;
+  return [r / 255, g / 255, b / 255, a / 255];
+};
+
+export const getRgbaComponents = (rgba: number): RGBA => {
+  const r = rgba >>> 24;
+  const g = (rgba >>> 16) & 0xff;
+  const b = (rgba >>> 8) & 0xff;
+  const a = rgba & 0xff;
+  return [r, g, b, a];
+};
+
+export const norm = (rgba: number): number => {
+  const r = rgba >>> 24;
+  const g = (rgba >>> 16) & 0xff;
+  const b = (rgba >>> 8) & 0xff;
+  const a = rgba & 0xff;
+  const rgbaArr: RGBA = [r / 255, g / 255, b / 255, a / 255];
+
+  rgbaArr[0] = Math.max(0, Math.min(255, rgbaArr[0]));
+  rgbaArr[1] = Math.max(0, Math.min(255, rgbaArr[1]));
+  rgbaArr[2] = Math.max(0, Math.min(255, rgbaArr[2]));
+  rgbaArr[3] = Math.max(0, Math.min(255, rgbaArr[3]));
+  let v =
+    ((rgbaArr[3] | 0) << 24) +
+    ((rgbaArr[0] | 0) << 16) +
+    ((rgbaArr[1] | 0) << 8) +
+    (rgbaArr[2] | 0);
+  if (v < 0) {
+    v = 0xffffffff + v + 1;
+  }
+  return v;
+};
+
+export function getNormalizedAlphaComponent(rgba: number): number {
+  return (rgba & 0xff) / 255.0;
+}
+
+/**
+ * Get a CSS color string from a RGBA color
+ *
+ * @param color
+ * @returns
+ */
+export function getRgbaString(color: RGBA) {
+  const r = Math.floor(color[0] * 255.0);
+  const g = Math.floor(color[1] * 255.0);
+  const b = Math.floor(color[2] * 255.0);
+  const a = Math.floor(color[3] * 255.0);
+  return `rgba(${r},${g},${b},${a.toFixed(4)})`;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface RectWithValid extends Rect {
+  valid: boolean;
+}
+
+export interface Bound {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+}
+
+export interface Coord {
+  x: number;
+  y: number;
+}
+
+export interface BoundWithValid extends Bound {
+  valid: boolean;
+}
+
+export function createBound<T extends Bound = Bound>(
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  out?: T,
+): T {
+  if (out) {
+    out.x1 = x1;
+    out.y1 = y1;
+    out.x2 = x2;
+    out.y2 = y2;
+    return out;
+  }
+  return {
+    x1,
+    y1,
+    x2,
+    y2,
+  } as T;
+}
+
+export function intersectBound<T extends Bound = Bound>(
+  a: Bound,
+  b: Bound,
+  out?: T,
+): T {
+  const intersection = createBound(
+    Math.max(a.x1, b.x1),
+    Math.max(a.y1, b.y1),
+    Math.min(a.x2, b.x2),
+    Math.min(a.y2, b.y2),
+    out,
+  );
+  if (intersection.x1 < intersection.x2 && intersection.y1 < intersection.y2) {
+    return intersection;
+  }
+  return createBound(0, 0, 0, 0, intersection);
+}
+
+export function boundsOverlap(a: Bound, b: Bound): boolean {
+  return a.x1 < b.x2 && a.x2 > b.x1 && a.y1 < b.y2 && a.y2 > b.y1;
+}
+
+export function convertBoundToRect(bound: Bound): Rect;
+export function convertBoundToRect<T extends Rect = Rect>(
+  bound: Bound,
+  out: T,
+): T;
+export function convertBoundToRect(bound: Bound, out?: Rect): Rect {
+  if (out) {
+    out.x = bound.x1;
+    out.y = bound.y1;
+    out.width = bound.x2 - bound.x1;
+    out.height = bound.y2 - bound.y1;
+    return out;
+  }
+  return {
+    x: bound.x1,
+    y: bound.y1,
+    width: bound.x2 - bound.x1,
+    height: bound.y2 - bound.y1,
+  };
+}
+
+export function intersectRect(a: Rect, b: Rect): Rect;
+export function intersectRect<T extends Rect = Rect>(
+  a: Rect,
+  b: Rect,
+  out: T,
+): T;
+export function intersectRect(a: Rect, b: Rect, out?: Rect): Rect {
+  const x = Math.max(a.x, b.x);
+  const y = Math.max(a.y, b.y);
+  const width = Math.min(a.x + a.width, b.x + b.width) - x;
+  const height = Math.min(a.y + a.height, b.y + b.height) - y;
+  if (width > 0 && height > 0) {
+    if (out) {
+      out.x = x;
+      out.y = y;
+      out.width = width;
+      out.height = height;
+      return out;
+    }
+    return {
+      x,
+      y,
+      width,
+      height,
+    };
+  }
+  if (out) {
+    out.x = 0;
+    out.y = 0;
+    out.width = 0;
+    out.height = 0;
+    return out;
+  }
+  return {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  };
+}
+
+export function copyRect(a: Rect): Rect;
+export function copyRect<T extends Rect = Rect>(a: Rect, out: T): T;
+export function copyRect(a: Rect, out?: Rect): Rect {
+  if (out) {
+    out.x = a.x;
+    out.y = a.y;
+    out.width = a.width;
+    out.height = a.height;
+    return out;
+  }
+  return {
+    x: a.x,
+    y: a.y,
+    width: a.width,
+    height: a.height,
+  };
+}
+
+export function compareRect(a: Rect | null, b: Rect | null): boolean {
+  if (a === b) {
+    return true;
+  }
+  if (a === null || b === null) {
+    return false;
+  }
+  return (
+    a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height
+  );
+}
+
+export function boundInsideBound(bound1: Bound, bound2: Bound) {
+  return (
+    bound1.x1 <= bound2.x2 &&
+    bound1.y1 <= bound2.y2 &&
+    bound1.x2 >= bound2.x1 &&
+    bound1.y2 >= bound2.y1
+  );
+}
+
+export function boundLargeThanBound(bound1: Bound, bound2: Bound) {
+  return (
+    bound1.x1 < bound2.x1 &&
+    bound1.x2 > bound2.x2 &&
+    bound1.y1 < bound2.y1 &&
+    bound1.y2 > bound2.y2
+  );
+}
+
+export function pointInBound(x: number, y: number, bound: Bound) {
+  return !(x < bound.x1 || x > bound.x2 || y < bound.y1 || y > bound.y2);
+}
+
+export function isBoundPositive(bound: Bound): boolean {
+  return bound.x1 < bound.x2 && bound.y1 < bound.y2;
+}
+
+export function isRectPositive(rect: Rect): boolean {
+  return rect.width > 0 && rect.height > 0;
+}
+
+/**
+ * Create a preload bounds from a strict bound
+ *
+ * @param strictBound The strict boundary of the node
+ * @param boundsMargin Boundary margin to apply to the strictBound
+ * @returns
+ */
+export function createPreloadBounds(
+  strictBound: Bound,
+  boundsMargin: [number, number, number, number],
+  out?: Bound,
+): Bound {
+  return createBound(
+    strictBound.x1 - boundsMargin[3],
+    strictBound.y1 - boundsMargin[0],
+    strictBound.x2 + boundsMargin[1],
+    strictBound.y2 + boundsMargin[2],
+    out,
+  );
+}
+
+export function convertUrlToAbsolute(url: string): string {
+  // handle local file imports if the url isn't remote resource or data blob
+  if (self.location.protocol === 'file:' && !PROTOCOL_REGEX.test(url)) {
+    const path = self.location.pathname.split('/');
+    path.pop();
+    const basePath = path.join('/');
+    const baseUrl = self.location.protocol + '//' + basePath;
+
+    // check if url has a leading dot
+    if (url.charAt(0) === '.') {
+      url = url.slice(1);
+    }
+
+    // check if url has a leading slash
+    if (url.charAt(0) === '/') {
+      url = url.slice(1);
+    }
+
+    return baseUrl + '/' + url;
+  }
+
+  const absoluteUrl = new URL(url, self.location.href);
+  return absoluteUrl.href;
+}
+
+export function isBase64Image(src: string) {
+  return src.startsWith('data:') === true;
+}
+
+export function calcFactoredRadius(
+  radius: number,
+  width: number,
+  height: number,
+): number {
+  return radius * Math.min(Math.min(width, height) / (2.0 * radius), 1);
+}
+
+export function valuesAreEqual(values: number[]) {
+  let prevValue = values[0];
+  for (let i = 1; i < values.length; i++) {
+    if (prevValue !== values[i]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function calcFactoredRadiusArray(
+  radius: Vec4,
+  width: number,
+  height: number,
+): [number, number, number, number] {
+  const result: [number, number, number, number] = [
+    radius[0],
+    radius[1],
+    radius[2],
+    radius[3],
+  ];
+  const factor = Math.min(
+    Math.min(
+      Math.min(
+        width / Math.max(width, radius[0] + radius[1]),
+        width / Math.max(width, radius[2] + radius[3]),
+      ),
+      Math.min(
+        height / Math.max(height, radius[0] + radius[3]),
+        height / Math.max(height, radius[1] + radius[2]),
+      ),
+    ),
+    1,
+  );
+  result[0] *= factor;
+  result[1] *= factor;
+  result[2] *= factor;
+  result[3] *= factor;
+  return result;
+}
+
+export function dataURIToBlob(dataURI: string): Blob {
+  dataURI = dataURI.replace(/^data:/, '');
+
+  const type = dataURI.match(/image\/[^;]+/)?.[0] || '';
+  const base64 = dataURI.replace(/^[^,]+,/, '');
+
+  const sliceSize = 1024;
+  const byteCharacters = atob(base64);
+  const bytesLength = byteCharacters.length;
+  const slicesCount = Math.ceil(bytesLength / sliceSize);
+  const byteArrays = new Array(slicesCount);
+
+  for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    const begin = sliceIndex * sliceSize;
+    const end = Math.min(begin + sliceSize, bytesLength);
+
+    const bytes = new Array(end - begin);
+    for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
+      bytes[i] = byteCharacters[offset]?.charCodeAt(0);
+    }
+    byteArrays[sliceIndex] = new Uint8Array(bytes);
+  }
+  return new Blob(byteArrays, { type });
+}
+
+export function fetchJson(
+  url: string,
+  responseType: XMLHttpRequestResponseType = '',
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = responseType;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject(xhr.statusText);
+        }
+      }
+    };
+    xhr.open('GET', url, true);
+    xhr.send(null);
+  });
+}

package/src/core/lib/validateImageBitmap.ts

@@ -0,0 +1,87 @@
+import type { Platform } from '../platforms/Platform.js';
+
+export interface CreateImageBitmapSupport {
+  basic: boolean; // Supports createImageBitmap(image)
+  options: boolean; // Supports createImageBitmap(image, options)
+  full: boolean; // Supports createImageBitmap(image, sx, sy, sw, sh, options)
+}
+
+export async function validateCreateImageBitmap(
+  platform: Platform,
+): Promise<CreateImageBitmapSupport> {
+  // Test if createImageBitmap is supported using a simple 1x1 PNG image
+  // prettier-ignore
+  const pngBinaryData = new Uint8Array([
+      0x89, 0x50, 0x4e, 0x47,
+      0x0d, 0x0a, 0x1a, 0x0a, // PNG signature
+      0x00, 0x00, 0x00, 0x0d, // IHDR chunk length
+      0x49, 0x48, 0x44, 0x52, // "IHDR" chunk type
+      0x00, 0x00, 0x00, 0x01, // Width: 1
+      0x00, 0x00, 0x00, 0x01, // Height: 1
+      0x01,                   // Bit depth: 1
+      0x03,                   // Color type: Indexed
+      0x00,                   // Compression method: Deflate
+      0x00,                   // Filter method: None
+      0x00,                   // Interlace method: None
+      0x25, 0xdb, 0x56, 0xca, // CRC for IHDR
+      0x00, 0x00, 0x00, 0x03, // PLTE chunk length
+      0x50, 0x4c, 0x54, 0x45, // "PLTE" chunk type
+      0x00, 0x00, 0x00,       // Palette entry: Black
+      0xa7, 0x7a, 0x3d, 0xda, // CRC for PLTE
+      0x00, 0x00, 0x00, 0x01, // tRNS chunk length
+      0x74, 0x52, 0x4e, 0x53, // "tRNS" chunk type
+      0x00,                   // Transparency for black: Fully transparent
+      0x40, 0xe6, 0xd8, 0x66, // CRC for tRNS
+      0x00, 0x00, 0x00, 0x0a, // IDAT chunk length
+      0x49, 0x44, 0x41, 0x54, // "IDAT" chunk type
+      0x08, 0xd7,             // Deflate header
+      0x63, 0x60, 0x00, 0x00,
+      0x00, 0x02, 0x00, 0x01, // Zlib-compressed data
+      0xe2, 0x21, 0xbc, 0x33, // CRC for IDAT
+      0x00, 0x00, 0x00, 0x00, // IEND chunk length
+      0x49, 0x45, 0x4e, 0x44, // "IEND" chunk type
+      0xae, 0x42, 0x60, 0x82, // CRC for IEND
+    ]);
+
+  const support: CreateImageBitmapSupport = {
+    basic: false,
+    options: false,
+    full: false,
+  };
+
+  // Test basic createImageBitmap support
+  const blob = new Blob([pngBinaryData], { type: 'image/png' });
+  const bitmap = await platform.createImageBitmap(blob);
+  bitmap.close?.();
+  support.basic = true;
+
+  // Test createImageBitmap with options support
+  try {
+    const options = { premultiplyAlpha: 'none' as const };
+    const bitmapWithOptions = await platform.createImageBitmap(blob, options);
+    bitmapWithOptions.close?.();
+    support.options = true;
+  } catch (e) {
+    /* ignore */
+  }
+
+  // Test createImageBitmap with full options support
+  try {
+    const bitmapWithFullOptions = await platform.createImageBitmap(
+      blob,
+      0,
+      0,
+      1,
+      1,
+      {
+        premultiplyAlpha: 'none',
+      },
+    );
+    bitmapWithFullOptions.close?.();
+    support.full = true;
+  } catch (e) {
+    /* ignore */
+  }
+
+  return support;
+}

package/src/core/platforms/Platform.ts

@@ -0,0 +1,64 @@
+import { type Stage } from '../Stage.js';
+
+export abstract class Platform {
+  /**
+   * Creates a new canvas element.
+   * @returns The created HTMLCanvasElement.
+   */
+  abstract createCanvas(): HTMLCanvasElement;
+
+  /**
+   * Get a DOM element by ID
+   * @returns The DOM element (or null)
+   */
+  abstract getElementById(id: string): HTMLElement | null;
+
+  /**
+   * Starts the main rendering loop, calling the provided update function every frame.
+   * @param Stage - The stage for rendering
+   */
+  abstract startLoop(stage: Stage): void;
+
+  /**
+   * Abstracted createImageBitmap method.
+   * @param blob - The image source to create the ImageBitmap from.
+   * @param sxOrOptions - The source rectangle x coordinate or ImageBitmapOptions.
+   * @param sy - The source rectangle y coordinate.
+   * @param sw - The source rectangle width.
+   * @param sh - The source rectangle height.
+   * @param options - The ImageBitmapOptions.
+   * @returns A promise that resolves with the created ImageBitmap.
+   */
+  abstract createImageBitmap(blob: ImageBitmapSource): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+  ): Promise<ImageBitmap>;
+  abstract createImageBitmap(
+    blob: ImageBitmapSource,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    options: ImageBitmapOptions,
+  ): Promise<ImageBitmap>;
+
+  /**
+   * Retrieves the current timestamp.
+   * @returns The current timestamp.
+   */
+  abstract getTimeStamp(): number;
+
+  /**
+   * Adds a FontFace to the platforms FontFaceSet
+   * @param font - The FontFace to add
+   */
+  abstract addFont(font: FontFace): void;
+}