@lightningtv/solid 3.0.0-21 → 3.0.0-23

package/src/shaders/RoundedWithBorder.ts

@@ -0,0 +1,245 @@
+import { calcFactoredRadiusArray, type Vec4 } from './utils.js';
+import type { WebGlShaderType } from '@lightningjs/renderer/webgl';
+import {
+  RoundedWithBorderTemplate,
+  type RoundedWithBorderProps,
+} from './templates/RoundedWithBorderTemplate.js';
+
+interface CoreNode {
+  w: number;
+  h: number;
+}
+
+export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
+  props: RoundedWithBorderTemplate.props,
+  update(node: CoreNode) {
+    const props = this.props!;
+    const borderWidth = props['border-w'] as Vec4;
+    const borderGap = props['border-gap'] || 0;
+
+    this.uniformRGBA('u_borderColor', props['border-color']);
+    this.uniform4fa('u_borderWidth', borderWidth);
+    this.uniform1f('u_borderGap', borderGap);
+    this.uniformRGBA('u_borderGapColor', props['border-gapColor']);
+
+    const origWidth = node.w;
+    const origHeight = node.h;
+    this.uniform2f('u_dimensions_orig', origWidth, origHeight);
+
+    const expandedWidth =
+      origWidth + borderWidth[3] + borderWidth[1] + borderGap * 2; // original + left + right + 2*gap
+    const expandedHeight =
+      origHeight + borderWidth[0] + borderWidth[2] + borderGap * 2; // original + top + bottom + 2*gap
+
+    // u_dimensions for the shader's SDF functions should be the expanded size
+    this.uniform2f('u_dimensions', expandedWidth, expandedHeight);
+
+    // The `radius` property is for the content rectangle.
+    // Factor it against the original dimensions to prevent self-intersection.
+    const contentRadius = calcFactoredRadiusArray(
+      this.props!.radius as Vec4,
+      origWidth,
+      origHeight,
+    );
+
+    // From the content radius, calculate the outer radius of the border.
+    // For each corner, the total radius is content radius + gap + border thickness.
+    // Border thickness at a corner is approximated as the max of the two adjacent border sides.
+    const bTop = borderWidth[0],
+      bRight = borderWidth[1],
+      bBottom = borderWidth[2],
+      bLeft = borderWidth[3];
+    const outerRadius: Vec4 = [
+      Math.max(0, contentRadius[0] + borderGap + Math.max(bTop, bLeft)), // top-left
+      Math.max(0, contentRadius[1] + borderGap + Math.max(bTop, bRight)), // top-right
+      Math.max(0, contentRadius[2] + borderGap + Math.max(bBottom, bRight)), // bottom-right
+      Math.max(0, contentRadius[3] + borderGap + Math.max(bBottom, bLeft)), // bottom-left
+    ];
+
+    // The final radius passed to the shader is the outer radius of the whole shape.
+    // It also needs to be factored against the expanded dimensions.
+    // The shader will then work inwards to calculate the radii for the gap and content.
+    this.uniform4fa(
+      'u_radius',
+      calcFactoredRadiusArray(outerRadius, expandedWidth, expandedHeight),
+    );
+  },
+  vertex: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    attribute vec2 a_position;
+    attribute vec2 a_textureCoords;
+    attribute vec4 a_color;
+    attribute vec2 a_nodeCoords;
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform vec2 u_dimensions;
+    uniform vec2 u_dimensions_orig;
+
+    uniform vec4 u_radius;
+    uniform vec4 u_borderWidth;
+    uniform float u_borderGap;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+    varying vec4 v_borderEndRadius;
+    varying vec2 v_borderEndSize;
+
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying vec2 v_halfDimensions;
+    varying float v_borderZero;
+
+    void main() {
+      vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
+
+      v_color = a_color;
+      v_nodeCoords = a_nodeCoords;
+
+      float bTop = u_borderWidth.x;
+      float bRight = u_borderWidth.y;
+      float bBottom = u_borderWidth.z;
+      float bLeft = u_borderWidth.w;
+      float gap = u_borderGap;
+
+      // Calculate the offset to expand the quad for border and gap
+      vec2 expansionOffset = vec2(0.0);
+      if (a_nodeCoords.x == 0.0) { // Left edge vertex
+          expansionOffset.x = -(bLeft + gap);
+      } else { // Right edge vertex (a_nodeCoords.x == 1.0)
+          expansionOffset.x = (bRight + gap);
+      }
+      if (a_nodeCoords.y == 0.0) { // Top edge vertex
+          expansionOffset.y = -(bTop + gap);
+      } else { // Bottom edge vertex (a_nodeCoords.y == 1.0)
+          expansionOffset.y = (bBottom + gap);
+      }
+
+      vec2 expanded_a_position = a_position + expansionOffset;
+      vec2 normalized = expanded_a_position * u_pixelRatio;
+
+      // u_dimensions is expanded, u_dimensions_orig is original content size
+      v_textureCoords.x = (a_textureCoords.x * u_dimensions.x - (bLeft + gap)) / u_dimensions_orig.x;
+      v_textureCoords.y = (a_textureCoords.y * u_dimensions.y - (bTop + gap)) / u_dimensions_orig.y;
+
+      v_borderZero = (u_borderWidth.x == 0.0 && u_borderWidth.y == 0.0 && u_borderWidth.z == 0.0 && u_borderWidth.w == 0.0) ? 1.0 : 0.0;
+      // If there's no border, there's no gap from the border logic perspective
+      // The Rounded shader itself would handle radius if borderZero is true.
+      v_halfDimensions = u_dimensions * 0.5; // u_dimensions is now expanded_dimensions
+      if(v_borderZero == 0.0) {
+        // Calculate radius and size for the inner edge of the border (where the gap begins)
+        v_borderEndRadius = vec4(
+          max(0.0, u_radius.x - max(bTop, bLeft) - 0.5),
+          max(0.0, u_radius.y - max(bTop, bRight) - 0.5),
+          max(0.0, u_radius.z - max(bBottom, bRight) - 0.5),
+          max(0.0, u_radius.w - max(bBottom, bLeft) - 0.5)
+        );
+        v_borderEndSize = vec2(
+            (u_dimensions.x - (bLeft + bRight) - 1.0),
+            (u_dimensions.y - (bTop + bBottom) - 1.0)
+        ) * 0.5;
+
+        // Calculate radius and size for the content area (after the gap)
+        v_innerRadius = vec4(
+          max(0.0, u_radius.x - max(bTop, bLeft) - u_borderGap - 0.5),
+          max(0.0, u_radius.y - max(bTop, bRight) - u_borderGap - 0.5),
+          max(0.0, u_radius.z - max(bBottom, bRight) - u_borderGap - 0.5),
+          max(0.0, u_radius.w - max(bBottom, bLeft) - u_borderGap - 0.5)
+        );
+        v_innerSize = vec2(
+            (u_dimensions.x - (bLeft + bRight) - (u_borderGap * 2.0) - 1.0),
+            (u_dimensions.y - (bTop + bBottom) - (u_borderGap * 2.0) - 1.0)
+        ) * 0.5;
+      }
+
+      gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
+      gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
+    }
+  `,
+  fragment: `
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
+    precision highp float;
+    # else
+    precision mediump float;
+    # endif
+
+    uniform vec2 u_resolution;
+    uniform float u_pixelRatio;
+    uniform float u_alpha;
+    uniform vec2 u_dimensions;
+    uniform sampler2D u_texture;
+
+    uniform vec4 u_radius;
+
+    uniform vec4 u_borderWidth;
+    uniform vec4 u_borderColor;
+    uniform vec4 u_borderGapColor;
+
+    varying vec4 v_borderEndRadius;
+    varying vec2 v_borderEndSize;
+
+    varying vec4 v_color;
+    varying vec2 v_textureCoords;
+    varying vec2 v_nodeCoords;
+
+    varying vec2 v_halfDimensions;
+    varying vec4 v_innerRadius;
+    varying vec2 v_innerSize;
+    varying float v_borderZero;
+
+    float roundedBox(vec2 p, vec2 s, vec4 r) {
+      r.xy = (p.x > 0.0) ? r.yz : r.xw;
+      r.x = (p.y > 0.0) ? r.y : r.x;
+      vec2 q = abs(p) - s + r.x;
+      return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
+    }
+
+    void main() {
+      vec4 contentTexColor = texture2D(u_texture, v_textureCoords) * v_color;
+
+      vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
+      float outerShapeDist = roundedBox(boxUv, v_halfDimensions, u_radius);
+
+      float edgeWidth = 1.0 / u_pixelRatio;
+      float outerShapeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerShapeDist);
+
+      if(v_borderZero == 1.0) { // No border, effectively no gap from border logic
+        gl_FragColor = mix(vec4(0.0), contentTexColor, outerShapeAlpha) * u_alpha;
+        return;
+      }
+
+      // Adjust boxUv for non-uniform borders
+      vec2 adjustedBoxUv = boxUv;
+      adjustedBoxUv.x += (u_borderWidth.y - u_borderWidth.w) * 0.5;
+      adjustedBoxUv.y += (u_borderWidth.z - u_borderWidth.x) * 0.5;
+
+      // Inner Border Edge (Gap starts here)
+      float borderEndDist = roundedBox(adjustedBoxUv, v_borderEndSize, v_borderEndRadius);
+      float borderEndAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderEndDist);
+
+      // Content Area (Gap ends here)
+      float contentDist = roundedBox(adjustedBoxUv, v_innerSize, v_innerRadius);
+      float contentAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, contentDist);
+
+      // Calculate Masks for mutually exclusive regions based on priority (Border Top, Gap Middle, Content Bottom)
+      float borderMask = clamp(outerShapeAlpha - borderEndAlpha, 0.0, 1.0);
+      float gapMask = clamp(borderEndAlpha - contentAlpha, 0.0, 1.0);
+
+      // Composite Layers
+      // 1. Content
+      vec4 composite = mix(vec4(0.0), contentTexColor, contentAlpha);
+      // 2. Gap
+      composite = mix(composite, u_borderGapColor, gapMask);
+      // 3. Border
+      composite = mix(composite, u_borderColor, borderMask);
+
+      gl_FragColor = composite * u_alpha;
+    }
+  `,
+};

package/src/shaders/index.ts

@@ -0,0 +1,2 @@
+export * from './RoundedWithBorder.js';
+export * from './templates/RoundedWithBorderTemplate.js';

package/src/shaders/templates/RoundedWithBorderTemplate.ts

@@ -0,0 +1,110 @@
+import type { ShaderProps } from '@lightningjs/renderer';
+import { toValidVec4, type Vec4 } from '../utils.js';
+
+export interface RoundedWithBorderProps {
+  radius: Vec4;
+  'border-w': Vec4;
+  'border-color': number;
+  'border-gap': number;
+  'border-gapColor': number;
+  'top-left': number;
+  'top-right': number;
+  'bottom-right': number;
+  'bottom-left': number;
+  'border-top': number;
+  'border-right': number;
+  'border-bottom': number;
+  'border-left': number;
+}
+
+export const RoundedWithBorderTemplate = {
+  props: {
+    radius: {
+      default: [0, 0, 0, 0],
+      resolve(value) {
+        return toValidVec4(value);
+      },
+    },
+    'top-left': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[0] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[0];
+      },
+    },
+    'top-right': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[1] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[1];
+      },
+    },
+    'bottom-right': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[2] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[2];
+      },
+    },
+    'bottom-left': {
+      default: 0,
+      set(value, props) {
+        (props.radius as Vec4)[3] = value;
+      },
+      get(props) {
+        return (props.radius as Vec4)[3];
+      },
+    },
+    'border-w': {
+      default: [0, 0, 0, 0],
+      resolve(value) {
+        return toValidVec4(value);
+      },
+    },
+    'border-color': 0xffffffff,
+    'border-gap': 0,
+    'border-gapColor': 0x00000000,
+    'border-top': {
+      default: 0,
+      set(value, props) {
+        (props['border-w'] as Vec4)[0] = value;
+      },
+      get(props) {
+        return (props['border-w'] as Vec4)[0];
+      },
+    },
+    'border-right': {
+      default: 0,
+      set(value, props) {
+        (props['border-w'] as Vec4)[1] = value;
+      },
+      get(props) {
+        return (props['border-w'] as Vec4)[1];
+      },
+    },
+    'border-bottom': {
+      default: 0,
+      set(value, props) {
+        (props['border-w'] as Vec4)[2] = value;
+      },
+      get(props) {
+        return (props['border-w'] as Vec4)[2];
+      },
+    },
+    'border-left': {
+      default: 0,
+      set(value, props) {
+        (props['border-w'] as Vec4)[3] = value;
+      },
+      get(props) {
+        return (props['border-w'] as Vec4)[3];
+      },
+    },
+  } as ShaderProps<RoundedWithBorderProps>,
+};

package/src/shaders/utils.ts

@@ -0,0 +1,44 @@
+export type Vec4 = [x: number, y: number, z: number, w: number];
+
+export function calcFactoredRadiusArray(
+  radius: Vec4,
+  width: number,
+  height: number,
+  out: Vec4 = [0, 0, 0, 0],
+): Vec4 {
+  [out[0], out[1], out[2], out[3]] = radius;
+  const factor = Math.min(
+    width / Math.max(width, radius[0] + radius[1]),
+    width / Math.max(width, radius[2] + radius[3]),
+    height / Math.max(height, radius[0] + radius[3]),
+    height / Math.max(height, radius[1] + radius[2]),
+    1,
+  );
+  out[0] *= factor;
+  out[1] *= factor;
+  out[2] *= factor;
+  out[3] *= factor;
+  return out;
+}
+
+export function toValidVec4(value: unknown): Vec4 {
+  if (typeof value === 'number') {
+    return [value, value, value, value];
+  }
+  if (Array.isArray(value)) {
+    switch (value.length) {
+      default:
+      case 4:
+        return value as Vec4;
+      case 3:
+        return [value[0], value[1], value[2], value[0]];
+      case 2:
+        return [value[0], value[1], value[0], value[1]];
+      case 1:
+        return [value[0], value[0], value[0], value[0]];
+      case 0:
+        break;
+    }
+  }
+  return [0, 0, 0, 0];
+}

package/src/core/timings.ts

@@ -1,261 +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.
- */
-
-/**
- * Core Utility Functions
- *
- * @module
- */
-
-export const EPSILON = 0.000001;
-export let ARRAY_TYPE =
-  typeof Float32Array !== 'undefined' ? Float32Array : Array;
-export const RANDOM = Math.random;
-export const ANGLE_ORDER = 'zyx';
-const degree = Math.PI / 180;
-
-export const setMatrixArrayType = (
-  type: Float32ArrayConstructor | ArrayConstructor,
-) => {
-  ARRAY_TYPE = type;
-};
-
-/**
- * Merges two colors based on a given progress value.
- *
- * This function takes two colors (c1 and c2) represented as 32-bit integers
- * in RGBA format and blends them based on the provided progress value (p).
- * The result is a new color that is a weighted combination of the input colors,
- * where the weight is determined by the progress value.
- *
- * @param {number} c1 - The first color in RGBA format (32-bit integer).
- * @param {number} c2 - The second color in RGBA format (32-bit integer).
- * @param {number} p - The progress value between 0 and 1.
- * @returns {number} The merged color as a 32-bit integer in RGBA format.
- */
-export function mergeColorProgress(
-  rgba1: number,
-  rgba2: number,
-  p: number,
-): number {
-  const r1 = Math.trunc(rgba1 >>> 24);
-  const g1 = Math.trunc((rgba1 >>> 16) & 0xff);
-  const b1 = Math.trunc((rgba1 >>> 8) & 0xff);
-  const a1 = Math.trunc(rgba1 & 0xff);
-
-  const r2 = Math.trunc(rgba2 >>> 24);
-  const g2 = Math.trunc((rgba2 >>> 16) & 0xff);
-  const b2 = Math.trunc((rgba2 >>> 8) & 0xff);
-  const a2 = Math.trunc(rgba2 & 0xff);
-
-  const r = Math.round(r2 * p + r1 * (1 - p));
-  const g = Math.round(g2 * p + g1 * (1 - p));
-  const b = Math.round(b2 * p + b1 * (1 - p));
-  const a = Math.round(a2 * p + a1 * (1 - p));
-
-  return ((r << 24) | (g << 16) | (b << 8) | a) >>> 0;
-}
-
-export const toRadian = (a: number) => {
-  return a * degree;
-};
-
-export const equals = (a: number, b: number) => {
-  return Math.abs(a - b) <= EPSILON * Math.max(1.0, Math.abs(a), Math.abs(b));
-};
-
-export const rand = (min: number, max: number) => {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-};
-
-export const isPowerOfTwo = (value: number) => {
-  return value && !(value & (value - 1));
-};
-
-const getTimingBezier = (
-  a: number,
-  b: number,
-  c: number,
-  d: number,
-): ((time: number) => number | undefined) => {
-  const xc = 3.0 * a;
-  const xb = 3.0 * (c - a) - xc;
-  const xa = 1.0 - xc - xb;
-  const yc = 3.0 * b;
-  const yb = 3.0 * (d - b) - yc;
-  const ya = 1.0 - yc - yb;
-
-  return function (time: number): number | undefined {
-    if (time >= 1.0) {
-      return 1;
-    }
-    if (time <= 0) {
-      return 0;
-    }
-
-    let t = 0.5,
-      cbx,
-      cbxd,
-      dx;
-
-    for (let it = 0; it < 20; it++) {
-      cbx = t * (t * (t * xa + xb) + xc);
-      dx = time - cbx;
-      if (dx > -1e-8 && dx < 1e-8) {
-        return t * (t * (t * ya + yb) + yc);
-      }
-
-      // Cubic bezier derivative.
-      cbxd = t * (t * (3 * xa) + 2 * xb) + xc;
-
-      if (cbxd > 1e-10 && cbxd < 1e-10) {
-        // Problematic. Fall back to binary search method.
-        break;
-      }
-
-      t += dx / cbxd;
-    }
-
-    // Fallback: binary search method. This is more reliable when there are near-0 slopes.
-    let minT = 0;
-    let maxT = 1;
-    for (let it = 0; it < 20; it++) {
-      t = 0.5 * (minT + maxT);
-
-      cbx = t * (t * (t * xa + xb) + xc);
-
-      dx = time - cbx;
-      if (dx > -1e-8 && dx < 1e-8) {
-        // Solution found!
-        return t * (t * (t * ya + yb) + yc);
-      }
-
-      if (dx < 0) {
-        maxT = t;
-      } else {
-        minT = t;
-      }
-    }
-  };
-};
-
-interface TimingFunctionMap {
-  [key: string]: (time: number) => number | undefined;
-}
-
-type TimingLookupArray = number[];
-interface TimingLookup {
-  [key: string]: TimingLookupArray;
-}
-
-const timingMapping: TimingFunctionMap = {};
-
-const timingLookup: TimingLookup = {
-  ease: [0.25, 0.1, 0.25, 1.0],
-  'ease-in': [0.42, 0, 1.0, 1.0],
-  'ease-out': [0, 0, 0.58, 1.0],
-  'ease-in-out': [0.42, 0, 0.58, 1.0],
-  'ease-in-sine': [0.12, 0, 0.39, 0],
-  'ease-out-sine': [0.12, 0, 0.39, 0],
-  'ease-in-out-sine': [0.37, 0, 0.63, 1],
-  'ease-in-cubic': [0.32, 0, 0.67, 0],
-  'ease-out-cubic': [0.33, 1, 0.68, 1],
-  'ease-in-out-cubic': [0.65, 0, 0.35, 1],
-  'ease-in-circ': [0.55, 0, 1, 0.45],
-  'ease-out-circ': [0, 0.55, 0.45, 1],
-  'ease-in-out-circ': [0.85, 0, 0.15, 1],
-  'ease-in-back': [0.36, 0, 0.66, -0.56],
-  'ease-out-back': [0.34, 1.56, 0.64, 1],
-  'ease-in-out-back': [0.68, -0.6, 0.32, 1.6],
-};
-
-const defaultTiming = (t: number): number => t;
-
-const parseCubicBezier = (str: string) => {
-  //cubic-bezier(0.84, 0.52, 0.56, 0.6)
-  const regex = /-?\d*\.?\d+/g;
-  const match = str.match(regex);
-
-  if (match) {
-    const [num1, num2, num3, num4] = match;
-    const a = parseFloat(num1 || '0.42');
-    const b = parseFloat(num2 || '0');
-    const c = parseFloat(num3 || '1');
-    const d = parseFloat(num4 || '1');
-
-    const timing = getTimingBezier(a, b, c, d);
-    timingMapping[str] = timing;
-
-    return timing;
-  }
-
-  // parse failed, return linear
-  console.warn('Unknown cubic-bezier timing: ' + str);
-  return defaultTiming;
-};
-
-export const getTimingFunction = (
-  str: string,
-): ((time: number) => number | undefined) => {
-  if (str === 'linear') {
-    return defaultTiming;
-  }
-
-  if (timingMapping[str] !== undefined) {
-    return timingMapping[str] || defaultTiming;
-  }
-
-  if (str === 'step-start') {
-    return () => {
-      return 1;
-    };
-  }
-
-  if (str === 'step-end') {
-    return (time: number) => {
-      return time === 1 ? 1 : 0;
-    };
-  }
-
-  const lookup = timingLookup[str];
-  if (lookup !== undefined) {
-    const [a, b, c, d] = lookup;
-    // @ts-ignore - TS doesn't understand that we've checked for undefined
-    const timing = getTimingBezier(a, b, c, d);
-    timingMapping[str] = timing;
-    return timing;
-  }
-
-  if (str.startsWith('cubic-bezier')) {
-    return parseCubicBezier(str);
-  }
-
-  console.warn('Unknown timing function: ' + str);
-  return defaultTiming;
-};
-
-/**
- * Convert bytes to string of megabytes with 2 decimal points
- *
- * @param bytes
- * @returns
- */
-export function bytesToMb(bytes: number) {
-  return (bytes / 1024 / 1024).toFixed(2);
-}