@lightningtv/solid 3.0.0-2 → 3.0.0-21

package/src/core/timings.ts

@@ -0,0 +1,261 @@
+/*
+ * 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);
+}

package/src/core/utils.ts

@@ -0,0 +1,222 @@
+import { type INode, type Point } from '@lightningjs/renderer';
+import { Config, isDev } from './config.js';
+import type { Styles, ElementText, TextNode } from './intrinsicTypes.js';
+import { ElementNode } from './elementNode.js';
+import { NodeType } from './nodeTypes.js';
+
+function hasDebug(node: any) {
+  return isObject(node) && node.debug;
+}
+
+export function log(
+  msg: string,
+  node: ElementNode | ElementText | TextNode,
+  ...args: any[]
+) {
+  if (isDev) {
+    if (Config.debug || hasDebug(node) || hasDebug(args[0])) {
+      console.log(msg, node, ...args);
+    }
+  }
+}
+
+export const isFunc = (obj: unknown): obj is CallableFunction =>
+  obj instanceof Function;
+
+export const isFunction = (obj: unknown): obj is Function =>
+  typeof obj === 'function';
+
+export function isObject(
+  item: unknown,
+): item is Record<string | number | symbol, unknown> {
+  return typeof item === 'object';
+}
+
+export function isArray(item: unknown): item is any[] {
+  return Array.isArray(item);
+}
+
+export function isString(item: unknown): item is string {
+  return typeof item === 'string';
+}
+
+export function isNumber(item: unknown): item is number {
+  return typeof item === 'number';
+}
+
+export function isInteger(item: unknown): item is number {
+  return Number.isInteger(item);
+}
+
+export function isINode(node: object): node is INode {
+  return 'destroy' in node && typeof node.destroy === 'function';
+}
+
+export function isElementNode(node: unknown): node is ElementNode {
+  return node instanceof ElementNode;
+}
+
+export function isElementText(
+  node: ElementNode | ElementText | TextNode,
+): node is ElementText {
+  return node._type === NodeType.TextNode;
+}
+
+export function isTextNode(
+  node: ElementNode | ElementText | TextNode,
+): node is TextNode {
+  return node._type === NodeType.Text;
+}
+
+export function keyExists(
+  obj: Record<string, unknown>,
+  keys: (string | number | symbol)[],
+) {
+  for (const key of keys) {
+    if (key in obj) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function spliceItem<T>(
+  arr: T[],
+  item: T,
+  deleteCount: number,
+  ...insert: T[]
+): number {
+  const index = arr.indexOf(item);
+  if (index > -1) {
+    arr.splice(index, deleteCount, ...insert);
+  }
+  return index;
+}
+
+export function flattenStyles(
+  obj: Styles | undefined | (Styles | undefined)[],
+  result: Styles = {},
+): Styles {
+  if (isArray(obj)) {
+    obj.forEach((item) => {
+      flattenStyles(item, result);
+    });
+  } else if (obj) {
+    // handle the case where the object is not an array
+    for (const key in obj) {
+      // be careful of 0 values
+      if (result[key] === undefined) {
+        result[key as keyof Styles] = obj[key as keyof Styles]!;
+      }
+    }
+  }
+
+  return result;
+}
+
+export function logRenderTree(node: ElementNode) {
+  const tree = [node];
+  let parent = node.parent;
+  while (parent) {
+    tree.push(parent);
+    parent = parent.parent;
+  }
+  tree.reverse();
+
+  let output = `
+function convertEffectsToShader(styleEffects) {
+  const effects = [];
+  let index = 0;
+
+  for (const [type, props] of Object.entries(styleEffects)) {
+    effects.push({ type, props });
+    index++;
+  }
+  return createShader('DynamicShader', { effects });
+}
+`;
+  tree.forEach((node, i) => {
+    if (!node._rendererProps) {
+      return;
+    }
+    node._rendererProps.parent = undefined;
+    node._rendererProps.shader = undefined;
+    const props = JSON.stringify(node._rendererProps, null, 2);
+    const effects = node._effects
+      ? `props${i}.shader = convertEffectsToShader(${JSON.stringify(node._effects, null, 2)});`
+      : '';
+    const parent = i === 0 ? 'rootNode' : `node${i - 1}`;
+    output += `
+const props${i} = ${props};
+props${i}.parent = ${parent};
+${effects}
+const node${i} = renderer.createNode(props${i});
+`;
+  });
+
+  return output;
+}
+
+export interface Rect extends Point {
+  width: number;
+  height: number;
+}
+
+/**
+ * Calculates the rectangle of an element on the screen,
+ * taking into account its position, size, and scaling.
+ *
+ * @param el   - The element to calculate the rectangle for.
+ * @param from - Optional ancestor element to calculate the rectangle relative to.
+ * @param out  - Optional output rectangle to fill with the result.
+ * @returns The rectangle of the element on the screen.
+ */
+export function getElementScreenRect(
+  el: ElementNode | ElementText,
+  from?: ElementNode,
+  out: Rect = { x: 0, y: 0, width: 0, height: 0 },
+): Rect {
+  out.x = 0;
+  out.y = 0;
+  out.width = el.width;
+  out.height = el.height;
+
+  if (el.scaleX != null) out.width *= el.scaleX;
+  if (el.scaleY != null) out.height *= el.scaleY;
+
+  let curr = el as ElementNode | undefined | null;
+  while (curr != null && curr !== from) {
+    out.x += curr.x;
+    out.y += curr.y;
+
+    if (curr.scaleX != null) {
+      out.x += (curr.width / 2) * (1 - curr.scaleX);
+    }
+    if (curr.scaleY != null) {
+      out.y += (curr.height / 2) * (1 - curr.scaleY);
+    }
+
+    curr = curr.parent;
+  }
+
+  if (Config.rendererOptions != null) {
+    let dpr = Config.rendererOptions.deviceLogicalPixelRatio;
+    if (dpr != null) {
+      out.x *= dpr;
+      out.y *= dpr;
+      out.width *= dpr;
+      out.height *= dpr;
+    }
+  }
+
+  return out;
+}
+
+/**
+ * Checks if the element has focus.\
+ * ({@link ElementNode.states} contains the {@link Config.focusStateKey} focus state)
+ */
+export function isFocused(el: ElementNode | ElementText): boolean {
+  return el?.states?.has(Config.focusStateKey);
+}
+export const hasFocus = isFocused;

package/src/devtools/index.ts

@@ -1,5 +1,5 @@
 import * as debug from '@solid-devtools/debugger/types';
-import * as lng from '@lightningtv/core';
+import * as lng from '../core/index.js';
 
 const EMPTY_CHILDREN: (lng.ElementNode | lng.ElementText)[] = [];
 

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from '@lightningtv/solid/jsx-runtime';
-export * from '@lightningtv/core';
-export type * from '@lightningtv/core';
-export type { KeyHandler, KeyMap } from '@lightningtv/core/focusManager';
+export * from './core/index.js';
+export type * from './core/index.js';
+export type { KeyHandler, KeyMap } from './core/focusManager.js';
 export * from './activeElement.js';
 export * from './utils.js';
 export * from './render.js';

package/src/primitives/Column.tsx

@@ -1,10 +1,9 @@
 import { type Component } from 'solid-js';
 import { ElementNode, combineStyles, type NodeStyles } from '@lightningtv/solid';
 import {
-  handleNavigation,
-  onGridFocus,
+  navigableForwardFocus, handleNavigation
 } from './utils/handleNavigation.js';
-import { withScrolling } from './utils/withScrolling.js';
+import { scrollColumn } from './utils/withScrolling.js';
 import { chainFunctions } from './utils/chainFunctions.js';
 import type { ColumnProps } from './types.js';
 
@@ -20,16 +19,15 @@ const ColumnStyles: NodeStyles = {
   },
 };
 
-const onUp = handleNavigation('up');
-const onDown = handleNavigation('down');
-const scroll = withScrolling(false);
-
 function scrollToIndex(this: ElementNode, index: number) {
   this.selected = index;
-  scroll(index, this);
-  this.setFocus();
+  scrollColumn(index, this);
+  this.children[index]?.setFocus();
 }
 
+const onUp = handleNavigation('up');
+const onDown = handleNavigation('down');
+
 export const Column: Component<ColumnProps> = (props) => {
   return (
     <view
@@ -38,15 +36,15 @@ export const Column: Component<ColumnProps> = (props) => {
       onDown={/* @once */ chainFunctions(props.onDown, onDown)}
       selected={props.selected || 0}
       scrollToIndex={scrollToIndex}
-      forwardFocus={/* once */ onGridFocus(props.onSelectedChanged)}
+      forwardFocus={navigableForwardFocus}
       onLayout={
         /* @once */
-        props.selected ? chainFunctions(props.onLayout, scroll) : props.onLayout
+        props.selected ? chainFunctions(props.onLayout, scrollColumn) : props.onLayout
       }
       onSelectedChanged={
         /* @once */ chainFunctions(
           props.onSelectedChanged,
-          props.scroll !== 'none' ? scroll : undefined,
+          props.scroll !== 'none' ? scrollColumn : undefined,
         )
       }
       style={/* @once */ combineStyles(props.style, ColumnStyles)}

package/src/primitives/FPSCounter.tsx

@@ -3,7 +3,7 @@ import { createSignal } from 'solid-js';
 
 const fpsStyle = {
   color: 0x000000ff,
-  height: 180,
+  height: 192,
   width: 330,
   x: 1900,
   y: 6,
@@ -27,6 +27,7 @@ const [fps, setFps] = createSignal(0);
 const [avgFps, setAvgFps] = createSignal(0);
 const [minFps, setMinFps] = createSignal(99);
 const [maxFps, setMaxFps] = createSignal(0);
+const [quads, setQuads] = createSignal(0);
 const [criticalThresholdSignal, setCriticalThresholdSignal] = createSignal('');
 const [targetThresholdSignal, setTargetThresholdSignal] = createSignal('');
 const [renderableMemUsedSignal, setRenderableMemUsedSignal] = createSignal('');
@@ -86,6 +87,10 @@ export function setupFPS(root: any) {
       frameCount++;
     }
   });
+
+  root.renderer.on('quadsUpdate', (target: RendererMain, quadsData: any) => {
+    setQuads(quadsData.quads);
+  });
 }
 
 export const FPSCounter = (props: NodeProps) => {
@@ -173,6 +178,15 @@ export const FPSCounter = (props: NodeProps) => {
             {loadedTexturesSignal().toString()}
           </text>
         </view>
+
+        <view height={infoFontSize}>
+          <text fontSize={infoFontSize} style={fpsLabel}>
+            quads:
+          </text>
+          <text fontSize={infoFontSize} style={fpsLabel} x={230}>
+            {quads().toString()}
+          </text>
+        </view>
       </view>
     </view>
   );