@lightningjs/renderer 2.16.0 → 3.0.0-beta10

package/src/core/renderers/webgl/shaders/effects/RadiusEffect.ts

@@ -1,110 +0,0 @@
-/*
- * 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.
- */
-import { updateWebSafeRadius, validateArrayLength4 } from './EffectUtils.js';
-import {
-  ShaderEffect,
-  type DefaultEffectProps,
-  type ShaderEffectUniforms,
-} from './ShaderEffect.js';
-
-/**
- * Properties of the {@link RadiusEffect} shader
- */
-export interface RadiusEffectProps extends DefaultEffectProps {
-  /**
-   * Corner radius, in pixels, to cut out of the corners
-   *
-   * @remarks
-   * You can input an array with a length of up to four or a number.
-   *
-   * array length 4:
-   * [topLeft, topRight, bottomRight, bottomLeft]
-   *
-   * array length 2:
-   * [20, 40] -> [20(topLeft), 40(topRight), 20(bottomRight), 40(bottomLeft)]
-   *
-   * array length 3:
-   * [20, 40, 60] -> [20(topLeft), 40(topRight), 60(bottomRight), 20(bottomLeft)]
-   *
-   * number:
-   * 30 -> [30, 30, 30, 30]
-   *
-   * @default 10
-   */
-  radius?: number | number[];
-}
-
-/**
- * Masks the current maskcolor with rounded corners similar to {@link RoundedRectangle}
- */
-export class RadiusEffect extends ShaderEffect {
-  static z$__type__Props: RadiusEffectProps;
-  override readonly name = 'radius';
-
-  static override getEffectKey(): string {
-    return `radius`;
-  }
-
-  static override uniforms: ShaderEffectUniforms = {
-    radius: {
-      value: 0,
-      method: 'uniform4fv',
-      type: 'vec4',
-      updateOnBind: true,
-      validator: validateArrayLength4,
-      updateProgramValue: updateWebSafeRadius,
-    },
-  };
-
-  static override methods: Record<string, string> = {
-    fillMask: `
-      float function(float dist) {
-        return clamp(-dist, 0.0, 1.0);
-      }
-    `,
-    boxDist: `
-      float function(vec2 p, vec2 size, float radius) {
-        size -= vec2(radius);
-        vec2 d = abs(p) - size;
-        return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - radius;
-      }
-    `,
-  };
-
-  static override resolveDefaults(
-    props: RadiusEffectProps,
-  ): Required<RadiusEffectProps> {
-    return {
-      radius: props.radius ?? 10,
-    };
-  }
-
-  static override onShaderMask = `
-  vec2 halfDimensions = u_dimensions * 0.5;
-  float r = radius[0] * step(v_textureCoordinate.x, 0.5) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[1] * step(0.5, v_textureCoordinate.x) * step(v_textureCoordinate.y, 0.5);
-  r = r + radius[2] * step(0.5, v_textureCoordinate.x) * step(0.5, v_textureCoordinate.y);
-  r = r + radius[3] * step(v_textureCoordinate.x, 0.5) * step(0.5, v_textureCoordinate.y);
-  return $boxDist(v_textureCoordinate.xy * u_dimensions - halfDimensions, halfDimensions, r);
-  `;
-
-  static override onEffectMask = `
-  return mix(vec4(0.0), maskColor, $fillMask(shaderMask));
-  `;
-}

package/src/core/renderers/webgl/shaders/effects/ShaderEffect.ts

@@ -1,196 +0,0 @@
-import type { EffectMap } from '../../../../CoreShaderManager.js';
-import type { ExtractProps } from '../../../../CoreTextureManager.js';
-import type {
-  AlphaShaderProp,
-  DimensionsShaderProp,
-} from '../../WebGlCoreShader.js';
-import type {
-  UniformInfo,
-  UniformMethodMap,
-} from '../../internal/ShaderUtils.js';
-
-export interface BaseEffectDesc {
-  name?: string;
-  type: keyof EffectMap;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: Record<string, any>;
-}
-
-export interface EffectDesc<
-  T extends { name?: string; type: keyof EffectMap } = {
-    name?: string;
-    type: keyof EffectMap;
-  },
-> extends BaseEffectDesc {
-  name?: T['name'];
-  type: T['type'];
-  props: ExtractProps<EffectMap[T['type']]>;
-}
-
-/**
- * Allows the `keyof EffectMap` to be mapped over and form an discriminated
- * union of all the EffectDescs structures individually.
- *
- * @remarks
- * When used like the following:
- * ```
- * MapEffectDescs<keyof EffectMap>[]
- * ```
- * The resultant type will be a discriminated union like so:
- * ```
- * (
- *   {
- *     name: 'effect1',
- *     type: 'radius',
- *     props?: {
- *       radius?: number | number[];
- *     }
- *   } |
- *   {
- *     name: 'effect2',
- *     type: 'border',
- *     props?: {
- *       width?: number;
- *       color?: number;
- *     }
- *   } |
- *   // ...
- * )[]
- * ```
- * Which means TypeScript will now base its type checking on the `type` field
- * and will know exactly what the `props` field should be based on the `type`
- * field.
- */
-type MapEffectDescs<T extends keyof EffectMap> = T extends keyof EffectMap
-  ? EffectDesc<{ type: T; name: string }>
-  : never;
-
-export type EffectDescUnion = MapEffectDescs<keyof EffectMap>;
-
-export interface ShaderEffectUniform {
-  value: number | number[] | boolean | string;
-  type: string;
-  method: keyof UniformMethodMap;
-  name?: string;
-  size?: (value: Record<string, unknown>) => number;
-  updateOnBind?: boolean;
-  updateProgramValue?: (
-    programValues: ShaderEffectValueMap,
-    shaderProps?: Record<string, unknown>,
-  ) => void;
-  validator?: (
-    value: any,
-    props: Record<string, unknown>,
-  ) => number | number[] | number[][];
-}
-
-export interface ShaderEffectValueMap
-  extends DimensionsShaderProp,
-    AlphaShaderProp {
-  value: ShaderEffectUniform['value'];
-  programValue: number | Float32Array | undefined;
-  method: keyof UniformMethodMap;
-  setUniformValue?: () => void | null;
-  hasValidator: boolean;
-  hasProgramValueUpdater: boolean;
-  updateOnBind: boolean;
-  validatedValue?: number | number[];
-}
-
-export interface ShaderEffectUniforms {
-  [key: string]: ShaderEffectUniform;
-}
-
-export interface DefaultEffectProps {
-  [key: string]: unknown;
-}
-
-export interface ShaderEffectOptions {
-  ref: string;
-  target: string;
-  props?: Record<string, unknown>;
-  uniforms?: ShaderEffectUniforms;
-  methods?: Record<string, string>;
-  onShaderMask?: ((value: Record<string, unknown>) => string) | string;
-  onColorize?: ((value: Record<string, unknown>) => string) | string;
-  onEffectMask?: ((value: Record<string, unknown>) => string) | string;
-}
-
-export abstract class ShaderEffect {
-  readonly priority = 1;
-  readonly name: string = '';
-
-  ref: string;
-  target: string;
-
-  passParameters = '';
-  declaredUniforms = '';
-  uniformInfo: Record<string, UniformInfo> = {};
-
-  static uniforms: ShaderEffectUniforms = {};
-  static methods?: Record<string, string>;
-
-  static onShaderMask?: ((value: Record<string, unknown>) => string) | string;
-
-  static onColorize?: ((value: Record<string, unknown>) => string) | string;
-  static onEffectMask?: ((value: Record<string, unknown>) => string) | string;
-
-  static getEffectKey(props: Record<string, unknown>): string {
-    return '';
-  }
-
-  static getMethodParameters(
-    uniforms: ShaderEffectUniforms,
-    props: Record<string, unknown>,
-  ): string {
-    const res: string[] = [];
-    for (const u in uniforms) {
-      const uni = uniforms[u]!;
-      let define = '';
-      if (uni.size) {
-        define = `[${uni.size(props)}]`;
-      }
-      res.push(`${uni.type} ${u}${define}`);
-    }
-    return res.join(',');
-  }
-
-  constructor(options: ShaderEffectOptions) {
-    const { ref, target, props = {} } = options;
-    this.ref = ref;
-    this.target = target;
-
-    const uniformInfo: Record<string, UniformInfo> = {};
-    const passParameters: string[] = [];
-    let declaredUniforms = '';
-    const uniforms = (this.constructor as typeof ShaderEffect).uniforms || {};
-
-    for (const u in uniforms) {
-      const unif = uniforms[u]!;
-      const uniType = unif.type;
-      //make unique uniform name
-      const uniformName = `${ref}_${u}`;
-      let define = '';
-      if (unif.size) {
-        define = `[${unif.size(props)}]`;
-      }
-      passParameters.push(uniformName);
-      declaredUniforms += `uniform ${uniType} ${uniformName}${define};`;
-      uniformInfo[u] = { name: uniformName, uniform: uniforms[u]!.method };
-    }
-
-    this.passParameters = passParameters.join(',');
-    this.declaredUniforms = declaredUniforms;
-    this.uniformInfo = uniformInfo;
-  }
-
-  static resolveDefaults(
-    props: Record<string, unknown>,
-  ): Record<string, unknown> {
-    return {};
-  }
-
-  static makeEffectKey(props: Record<string, unknown>): string | false {
-    return false;
-  }
-}

package/src/core/text-rendering/TextRenderingUtils.ts

@@ -1,36 +0,0 @@
-/*
- * 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 { NormalizedFontMetrics } from './font-face-types/TrFontFace.js';
-
-/**
- * Calculate the default line height given normalized font metrics
- *
- * @remarks
- * This method may be used for both the WebTrFontFace and SdfTrFontFace font types.
- *
- * @param metrics
- * @param fontSize
- * @returns
- */
-export function calcDefaultLineHeight(
-  metrics: NormalizedFontMetrics,
-  fontSize: number,
-): number {
-  return fontSize * (metrics.ascender - metrics.descender + metrics.lineGap);
-}

package/src/core/text-rendering/TrFontManager.ts

@@ -1,183 +0,0 @@
-/*
- * 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.
- */
-
-import type { TrFontFace } from './font-face-types/TrFontFace.js';
-import type { TextRendererMap, TrFontProps } from './renderers/TextRenderer.js';
-
-const weightConversions: { [key: string]: number } = {
-  normal: 400,
-  bold: 700,
-  bolder: 900,
-  lighter: 100,
-};
-
-const fontWeightToNumber = (weight: string | number): number => {
-  if (typeof weight === 'number') {
-    return weight;
-  }
-
-  return weightConversions[weight] || 400;
-};
-
-function resolveFontToUse(
-  familyMapsByPriority: FontFamilyMap[],
-  family: string,
-  weightIn: string | number,
-  style: string,
-  stretch: string,
-): TrFontFace | undefined {
-  let weight = fontWeightToNumber(weightIn);
-
-  for (const fontFamiles of familyMapsByPriority) {
-    const fontFaces = fontFamiles[family];
-
-    if (!fontFaces) {
-      continue;
-    }
-
-    if (fontFaces.size === 1) {
-      // No Exact match found, find nearest weight match
-      console.warn(
-        `TrFontManager: Only one font face found for family: '${family}' - will be used for all weights and styles`,
-      );
-
-      return fontFaces.values().next().value as TrFontFace;
-    }
-
-    const weightMap = new Map<number, TrFontFace>();
-    for (const fontFace of fontFaces) {
-      const fontFamilyWeight = fontWeightToNumber(fontFace.descriptors.weight);
-      if (
-        fontFamilyWeight === weight &&
-        fontFace.descriptors.style === style &&
-        fontFace.descriptors.stretch === stretch
-      ) {
-        return fontFace;
-      }
-
-      weightMap.set(fontFamilyWeight, fontFace);
-    }
-
-    // No Exact match found, find nearest weight match
-    const msg = `TrFontManager: No exact match: '${family} Weight: ${weight} Style: ${style} Stretch: ${stretch}'`;
-    console.error(msg);
-
-    // Follow the CSS font-weight algorithm to find the nearest weight match
-    // https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#font-matching-algorithm
-
-    if (weight === 400 && weightMap.has(500)) {
-      return weightMap.get(500);
-    }
-
-    if (weight === 500 && weightMap.has(400)) {
-      return weightMap.get(400);
-    }
-
-    if (weight < 400) {
-      while (weight > 0) {
-        if (weightMap.has(weight)) {
-          return weightMap.get(weight);
-        }
-        weight -= 100;
-      }
-      // reset back for the next loop
-      weight = 600;
-    }
-
-    while (weight < 1000) {
-      if (weightMap.has(weight)) {
-        return weightMap.get(weight);
-      }
-      weight += 100;
-    }
-
-    // finally check lower again
-    weight = 500;
-    while (weight > 0) {
-      if (weightMap.has(weight)) {
-        return weightMap.get(weight);
-      }
-      weight -= 100;
-    }
-  }
-
-  return;
-}
-
-/**
- * Structure mapping font family names to a set of font faces.
- */
-export interface FontFamilyMap {
-  [familyName: string]: Set<TrFontFace>;
-}
-
-export class TrFontManager {
-  private fontCache = new Map<string, TrFontFace>();
-
-  constructor(private textRenderers: Partial<TextRendererMap>) {
-    // Intentionally left blank
-  }
-
-  public addFontFace(font: TrFontFace): void {
-    // All the font face to all of the text renderers that support it
-    for (const trId in this.textRenderers) {
-      const tr = this.textRenderers[trId as keyof TextRendererMap];
-      if (tr && tr.isFontFaceSupported(font)) {
-        tr.addFontFace(font);
-      }
-    }
-  }
-
-  /**
-   * Utility method to resolve a single font face from a list of prioritized family maps based on
-   * a set of font properties.
-   *
-   * @remarks
-   * These are to be used by a text renderer to resolve a font face if needed.
-   *
-   * @param familyMapsByPriority
-   * @param props
-   * @returns
-   */
-  public resolveFontFace(
-    familyMapsByPriority: FontFamilyMap[],
-    props: TrFontProps,
-    rendererType: 'canvas' | 'sdf',
-  ): TrFontFace | undefined {
-    const { fontFamily, fontWeight, fontStyle, fontStretch } = props;
-    const fontCacheString = `${rendererType}_${fontFamily}_${fontStyle}_${fontWeight}_${fontStretch}`;
-
-    if (this.fontCache.has(fontCacheString) === true) {
-      return this.fontCache.get(fontCacheString);
-    }
-
-    const resolvedFont = resolveFontToUse(
-      familyMapsByPriority,
-      fontFamily,
-      fontWeight,
-      fontStyle,
-      fontStretch,
-    );
-    if (resolvedFont !== undefined) {
-      this.fontCache.set(fontCacheString, resolvedFont);
-    }
-
-    return resolvedFont;
-  }
-}

package/src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -1,176 +0,0 @@
-/*
- * 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.
- */
-
-// import type { Renderer } from '../../../Renderer';
-import { assertTruthy } from '../../../../utils.js';
-import type { Stage } from '../../../Stage.js';
-import { WebGlCoreRenderer } from '../../../renderers/webgl/WebGlCoreRenderer.js';
-import { ImageTexture } from '../../../textures/ImageTexture.js';
-import {
-  TrFontFace,
-  type NormalizedFontMetrics,
-  type TrFontFaceOptions,
-} from '../TrFontFace.js';
-import { fetchJson } from '../utils.js';
-import type { FontShaper } from './internal/FontShaper.js';
-import { SdfFontShaper, type SdfFontData } from './internal/SdfFontShaper.js';
-
-type SdfFontType = 'ssdf' | 'msdf';
-
-declare module '../TrFontFace.js' {
-  interface TrFontFaceMap {
-    ssdf: SdfTrFontFace<'ssdf'>;
-    msdf: SdfTrFontFace<'msdf'>;
-  }
-}
-
-interface GlyphAtlasEntry {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface SdfTrFontFaceOptions extends TrFontFaceOptions {
-  atlasUrl: string;
-  atlasDataUrl: string;
-  stage: Stage;
-}
-
-export class SdfTrFontFace<
-  FontTypeT extends SdfFontType = SdfFontType,
-> extends TrFontFace {
-  public readonly type: FontTypeT;
-  public readonly texture: ImageTexture;
-  /**
-   * Height of the tallest character in the font including the whitespace above it
-   * in SDF/vertex units.
-   */
-  public readonly maxCharHeight: number = 0;
-  public readonly shaper: FontShaper | undefined;
-  public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
-  public data: SdfFontData | undefined;
-
-  constructor(type: FontTypeT, options: SdfTrFontFaceOptions) {
-    super(options);
-    const { atlasUrl, atlasDataUrl, stage } = options;
-    this.type = type;
-    const renderer = stage.renderer;
-    assertTruthy(
-      renderer instanceof WebGlCoreRenderer,
-      'SDF Font Faces can only be used with the WebGL Renderer',
-    );
-
-    // Load image
-    this.texture = stage.txManager.createTexture('ImageTexture', {
-      src: atlasUrl,
-      // IMPORTANT: The SDF shader requires the alpha channel to NOT be
-      // premultiplied on the atlas texture. If it is premultiplied, the
-      // rendering of SDF glyphs (especially single-channel SDF fonts) will
-      // be very jagged.
-      premultiplyAlpha: false,
-    });
-
-    // Load the texture
-    stage.txManager.loadTexture(this.texture, true);
-
-    // FIXME This is a stop-gap solution to avoid Font Face textures to be cleaned up
-    // Ideally we do want to clean up the textures if they're not being used to save as much memory as possible
-    // However, we need to make sure that the font face is reloaded if the texture is cleaned up and needed again
-    // and make sure the SdfFontRenderer is properly guarded against textures being reloaded
-    // for now this will do the trick and the increase on memory is not that big
-    this.texture.preventCleanup = true;
-
-    this.texture.on('loaded', () => {
-      this.checkLoaded();
-      // Make sure we mark the stage for a re-render (in case the font's texture was freed and reloaded)
-      stage.requestRender();
-    });
-
-    // Set this.data to the fetched data from dataUrl
-    fetchJson(atlasDataUrl)
-      .then((response) => {
-        this.data = JSON.parse(response as unknown as string) as SdfFontData;
-        assertTruthy(this.data);
-        // Add all the glyphs to the glyph map
-
-        let maxCharHeight = 0;
-        this.data.chars.forEach((glyph) => {
-          this.glyphMap.set(glyph.id, glyph);
-          const charHeight = glyph.yoffset + glyph.height;
-          if (charHeight > maxCharHeight) {
-            maxCharHeight = charHeight;
-          }
-        });
-
-        (this.maxCharHeight as number) = maxCharHeight;
-        // We know `data` is defined here, because we just set it
-
-        (this.shaper as FontShaper) = new SdfFontShaper(
-          this.data,
-          this.glyphMap,
-        );
-
-        // If the metrics aren't provided explicitly in the font face options,
-        // Gather them from the metrics added by the msdf-generator tool ()
-        // If they are missing then we throw an error.
-        if (!this.metrics) {
-          if (this.data?.lightningMetrics) {
-            const { ascender, descender, lineGap, unitsPerEm } =
-              this.data.lightningMetrics;
-            (this.metrics as NormalizedFontMetrics | null) = {
-              ascender: ascender / unitsPerEm,
-              descender: descender / unitsPerEm,
-              lineGap: lineGap / unitsPerEm,
-            };
-          } else {
-            throw new Error(
-              `Font metrics not found in ${this.type} font ${this.fontFamily}. ` +
-                'Make sure you are using the latest version of the Lightning ' +
-                '3 `msdf-generator` tool to generate your SDF fonts.',
-            );
-          }
-        }
-
-        this.checkLoaded();
-      })
-      .catch(console.error);
-  }
-
-  getAtlasEntry(glyphId: number): GlyphAtlasEntry {
-    const glyph = this.glyphMap.get(glyphId);
-    if (glyph === undefined) {
-      throw new Error(`Glyph ${glyphId} not found in font ${this.fontFamily}`);
-    }
-    return {
-      x: glyph.x,
-      y: glyph.y,
-      width: glyph.width,
-      height: glyph.height,
-    };
-  }
-
-  private checkLoaded(): void {
-    if (this.loaded) return;
-    if (this.texture.state === 'loaded' && this.data) {
-      (this.loaded as boolean) = true;
-      this.emit('loaded');
-    }
-  }
-}