@lightningjs/renderer 0.3.0 → 0.3.2

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

@@ -0,0 +1,159 @@
+/*
+ * 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 { getNormalizedRgbaComponents } from '../../../../lib/utils.js';
+import {
+  type DefaultEffectProps,
+  ShaderEffect,
+  type ShaderEffectUniforms,
+} from './ShaderEffect.js';
+
+/**
+ * Properties of the {@link RadialGradientEffect} effect
+ */
+export interface RadialGradientEffectProps extends DefaultEffectProps {
+  /**
+   * Array of colors to be used in the RadialGradientEffect
+   *
+   * @default [0xff000000, 0xffffffff]
+   */
+  colors?: number[];
+  /**
+   * Array of color stops
+   */
+  stops?: number[];
+  /**
+   * Width of the RadialGradientEffect
+   */
+  width?: number;
+  /**
+   * height of the RadialGradientEffect
+   *
+   * @remarks if not defined uses the width value
+   */
+  height?: number;
+  /**
+   * center point of where the RadialGradientEffect is drawn
+   */
+  pivot?: number[];
+}
+
+export class RadialGradientEffect extends ShaderEffect {
+  static z$__type__Props: RadialGradientEffectProps;
+  override readonly name = 'radialGradient';
+
+  static override getEffectKey(props: RadialGradientEffectProps): string {
+    return `radialGradient${props.colors!.length}`;
+  }
+
+  static override resolveDefaults(
+    props: RadialGradientEffectProps,
+  ): Required<RadialGradientEffectProps> {
+    const colors = props.colors ?? [0xff000000, 0xffffffff];
+
+    let stops = props.stops;
+    if (!stops) {
+      stops = [];
+      const calc = colors.length - 1;
+      for (let i = 0; i < colors.length; i++) {
+        stops.push(i * (1 / calc));
+      }
+    }
+    return {
+      colors,
+      stops,
+      width: props.width ?? 0,
+      height: props.height ?? props.width ?? 0,
+      pivot: props.pivot ?? [0.5, 0.5],
+    };
+  }
+
+  static override uniforms: ShaderEffectUniforms = {
+    width: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    height: {
+      value: 0,
+      method: 'uniform1f',
+      type: 'float',
+    },
+    pivot: {
+      value: [0.5, 0.5],
+      method: 'uniform2fv',
+      type: 'vec2',
+    },
+    colors: {
+      value: 0xffffffff,
+      validator: (rgbas: number[]): number[] => {
+        const cols = rgbas.map((rgbas) => getNormalizedRgbaComponents(rgbas));
+        return cols.reduce((acc, val) => acc.concat(val), [] as number[]);
+      },
+      size: (props: RadialGradientEffectProps) => props.colors!.length,
+      method: 'uniform4fv',
+      type: 'vec4',
+    },
+    stops: {
+      value: [],
+      validator: (
+        value: number[],
+        props: RadialGradientEffectProps,
+      ): number[] => {
+        const colors = props.colors ?? [];
+        let stops = value;
+        const tmp: number[] = value;
+        if (stops.length === 0 || (stops && stops.length !== colors.length)) {
+          for (let i = 0; i < colors.length; i++) {
+            if (stops[i]) {
+              tmp[i] = stops[i]!;
+              if (stops[i - 1] === undefined && tmp[i - 2] !== undefined) {
+                tmp[i - 1] = tmp[i - 2]! + (stops[i]! - tmp[i - 2]!) / 2;
+              }
+            } else {
+              tmp[i] = i * (1 / (colors.length - 1));
+            }
+          }
+          stops = tmp;
+        }
+        return tmp;
+      },
+      size: (props: RadialGradientEffectProps) => props.colors!.length,
+      method: 'uniform1fv',
+      type: 'float',
+    },
+  };
+
+  static override onColorize = (props: RadialGradientEffectProps) => {
+    const colors = props.colors!.length || 1;
+    return `
+      vec2 point = v_textureCoordinate.xy * u_dimensions;
+      vec2 projection = vec2(pivot.x * u_dimensions.x, pivot.y * u_dimensions.y);
+
+      float dist = length((point - projection) / vec2(width, height));
+
+      float stopCalc = (dist - stops[0]) / (stops[1] - stops[0]);
+      vec4 colorOut = mix(colors[0], colors[1], stopCalc);
+      for(int i = 1; i < ${colors}-1; i++) {
+        stopCalc = (dist - stops[i]) / (stops[i + 1] - stops[i]);
+        colorOut = mix(colorOut, colors[i + 1], clamp(stopCalc, 0.0, 1.0));
+      }
+      return mix(maskColor, colorOut, colorOut.a);
+    `;
+  };
+}

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

@@ -0,0 +1,106 @@
+/*
+ * 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 {
+  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
+   *
+   * @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',
+      validator: (value: number | number[]) => {
+        let r = value;
+        if (Array.isArray(r)) {
+          if (r.length === 2) {
+            r = [r[0], r[1], r[0], r[1]] as number[];
+          } else if (r.length === 3) {
+            r = [r[0], r[1], r[2], r[0]] as number[];
+          } else if (r.length !== 4) {
+            r = [r[0], r[0], r[0], r[0]] as number[];
+          }
+        } else if (typeof r === 'number') {
+          r = [r, r, r, r];
+        }
+        return r;
+      },
+    },
+  };
+
+  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

@@ -0,0 +1,114 @@
+import type {
+  UniformInfo,
+  UniformMethodMap,
+} from '../../internal/ShaderUtils.js';
+
+export interface ShaderEffectUniform {
+  value: number | number[] | boolean | string;
+  type: string;
+  method: keyof UniformMethodMap;
+  name?: string;
+  size?: (value: Record<string, unknown>) => number;
+  validator?: (
+    value: any,
+    props: Record<string, unknown>,
+  ) => number | 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/scene/Scene.ts

@@ -0,0 +1,120 @@
+/*
+ * 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 { CoreNode } from '../CoreNode.js';
+
+export type NodeTypes = Node;
+
+export class Scene {
+  /**
+   * Root node of the scene
+   *
+   * @type {Node}
+   * @memberof Scene
+   */
+  public root: CoreNode;
+
+  constructor(root: CoreNode) {
+    this.root = root;
+  }
+
+  /**
+   * Get all nodes of a specific type
+   * @param type
+   * @returns
+   */
+  public getNodeByType(type: string): Node[] {
+    return [];
+  }
+
+  /**
+   * Find a node by id
+   * @param id
+   * @returns
+   */
+  public getNodeById(id: string): Node | null {
+    return null;
+  }
+
+  /**
+   * Create a new node
+   * @param parent
+   * @returns
+   */
+  // public createNode(settings: Partial<INodeWritableProps> = {}): NodeTypes {
+  //   return createNode(settings);
+  // }
+
+  /**
+   * create a new RectangleNode
+   * @param w
+   * @param h
+   * @param parent
+   * @returns
+   */
+  // public rectangle(w: number, h: number, parent: NodeTypes | null = null) {
+  //   // TODO: Fix this
+  //   // return this.create(new RectangleNode(w, h), parent);
+  // }
+
+  /**
+   * Create a new CircleNode
+   * @param r
+   * @param parent
+   * @returns
+   */
+  // public circle(r: number, parent: NodeTypes | null = null) {
+  //   // TODO: Fix this
+  //   // return this.create(new CircleNode(r), parent);
+  // }
+
+  /**
+   * Create a new TextNode
+   * @param text
+   * @param parent
+   * @returns
+   */
+  // public text(text = '', parent: NodeTypes | null = null) {
+  //   // TODO: Fix this
+  //   // return this.create(new TextNode(text), parent);
+  // }
+
+  /**
+   * Setup and attaching Node
+   * @param node
+   * @param parent
+   * @returns
+   */
+  // private create(node: NodeTypes, parent: NodeTypes | null = null): NodeTypes {
+  //   if (!parent) {
+  //     parent = this.root;
+  //   }
+
+  //   node.parent = parent;
+  //   return node;
+  // }
+
+  /**
+   * Update the scene
+   * @param delta
+   */
+  public update(delta: number) {
+    this.root.update(delta);
+  }
+}

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

@@ -0,0 +1,189 @@
+/*
+ * 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.
+ */
+
+/**
+ * Returns CSS font setting string for use in canvas context.
+ *
+ * @param fontFace
+ * @param fontStyle
+ * @param fontSize
+ * @param precision
+ * @param defaultFontFace
+ * @returns
+ */
+export function getFontSetting(
+  fontFace: string | string[],
+  fontStyle: string,
+  fontSize: number,
+  precision: number,
+  defaultFontFace: string,
+): string {
+  let ff = fontFace;
+
+  if (!Array.isArray(ff)) {
+    ff = [ff];
+  }
+
+  const ffs = [];
+  for (let i = 0, n = ff.length; i < n; i++) {
+    let curFf = ff[i];
+    // Replace the default font face `null` with the actual default font face set
+    // on the stage.
+    if (curFf === null || curFf === undefined) {
+      curFf = defaultFontFace;
+    }
+    if (curFf === 'serif' || curFf === 'sans-serif') {
+      ffs.push(curFf);
+    } else {
+      ffs.push(`"${curFf}"`);
+    }
+  }
+
+  return `${fontStyle} ${fontSize * precision}px ${ffs.join(',')}`;
+}
+
+/**
+ * Returns true if the given character is a zero-width space.
+ *
+ * @param space
+ */
+export function isZeroWidthSpace(space: string): boolean {
+  return space === '' || space === '\u200B';
+}
+
+/**
+ * Returns true if the given character is a zero-width space or a regular space.
+ *
+ * @param space
+ */
+export function isSpace(space: string): boolean {
+  return isZeroWidthSpace(space) || space === ' ';
+}
+
+/**
+ * Converts a string into an array of tokens and the words between them.
+ *
+ * @param tokenRegex
+ * @param text
+ */
+export function tokenizeString(tokenRegex: RegExp, text: string): string[] {
+  const delimeters = text.match(tokenRegex) || [];
+  const words = text.split(tokenRegex) || [];
+
+  const final: string[] = [];
+  for (let i = 0; i < words.length; i++) {
+    final.push(words[i]!, delimeters[i]!);
+  }
+  final.pop();
+  return final.filter((word) => word != '');
+}
+
+/**
+ * Measure the width of a string accounting for letter spacing.
+ *
+ * @param context
+ * @param word
+ * @param space
+ */
+export function measureText(
+  context: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+  word: string,
+  space = 0,
+): number {
+  if (!space) {
+    return context.measureText(word).width;
+  }
+  return word.split('').reduce((acc, char) => {
+    // Zero-width spaces should not include letter spacing.
+    // And since we know the width of a zero-width space is 0, we can skip
+    // measuring it.
+    if (isZeroWidthSpace(char)) {
+      return acc;
+    }
+    return acc + context.measureText(char).width + space;
+  }, 0);
+}
+
+export interface WrapTextResult {
+  l: string[];
+  n: number[];
+}
+
+/**
+ * Applies newlines to a string to have it optimally fit into the horizontal
+ * bounds set by the Text object's wordWrapWidth property.
+ *
+ * @param context
+ * @param text
+ * @param wordWrapWidth
+ * @param letterSpacing
+ * @param indent
+ */
+export function wrapText(
+  context: CanvasRenderingContext2D,
+  text: string,
+  wordWrapWidth: number,
+  letterSpacing: number,
+  indent: number,
+): WrapTextResult {
+  // Greedy wrapping algorithm that will wrap words as the line grows longer.
+  // than its horizontal bounds.
+  const spaceRegex = / |\u200B/g;
+  const lines = text.split(/\r?\n/g);
+  let allLines: string[] = [];
+  const realNewlines: number[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const resultLines: string[] = [];
+    let result = '';
+    let spaceLeft = wordWrapWidth - indent;
+    const words = lines[i]!.split(spaceRegex);
+    const spaces = lines[i]!.match(spaceRegex) || [];
+    for (let j = 0; j < words.length; j++) {
+      const space = spaces[j - 1] || '';
+      const word = words[j]!;
+      const wordWidth = measureText(context, word, letterSpacing);
+      const wordWidthWithSpace =
+        wordWidth + measureText(context, space, letterSpacing);
+      if (j === 0 || wordWidthWithSpace > spaceLeft) {
+        // Skip printing the newline if it's the first word of the line that is.
+        // greater than the word wrap width.
+        if (j > 0) {
+          resultLines.push(result);
+          result = '';
+        }
+        result += word;
+        spaceLeft = wordWrapWidth - wordWidth - (j === 0 ? indent : 0);
+      } else {
+        spaceLeft -= wordWidthWithSpace;
+        result += space + word;
+      }
+    }
+
+    resultLines.push(result);
+    result = '';
+
+    allLines = allLines.concat(resultLines);
+
+    if (i < lines.length - 1) {
+      realNewlines.push(allLines.length);
+    }
+  }
+
+  return { l: allLines, n: realNewlines };
+}