@lightningtv/solid 3.0.0-2 → 3.0.0-21

package/src/core/focusManager.ts

@@ -0,0 +1,359 @@
+import { Config, isDev } from './config.js';
+export type * from './focusKeyTypes.js';
+import { ElementNode } from './elementNode.js';
+import type {
+  KeyNameOrKeyCode,
+  KeyHoldOptions,
+  KeyMap,
+} from './focusKeyTypes.js';
+import { isFunction } from './utils.js';
+
+const keyMapEntries: Record<KeyNameOrKeyCode, string> = {
+  ArrowLeft: 'Left',
+  ArrowRight: 'Right',
+  ArrowUp: 'Up',
+  ArrowDown: 'Down',
+  Enter: 'Enter',
+  l: 'Last',
+  ' ': 'Space',
+  Backspace: 'Back',
+  Escape: 'Escape',
+};
+
+const keyHoldMapEntries: Record<KeyNameOrKeyCode, string> = {
+  // Enter: 'EnterHold',
+};
+
+const flattenKeyMap = (keyMap: any, targetMap: any): void => {
+  for (const [key, value] of Object.entries(keyMap)) {
+    if (Array.isArray(value)) {
+      value.forEach((v) => {
+        targetMap[v] = key;
+      });
+    } else if (value === null) {
+      delete targetMap[key];
+    } else {
+      targetMap[value as keyof any] = key;
+    }
+  }
+};
+
+let needFocusDebugStyles = true;
+const addFocusDebug = (
+  prevFocusPath: ElementNode[],
+  newFocusPath: ElementNode[],
+) => {
+  if (needFocusDebugStyles) {
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    style.innerHTML = `
+      [data-focus="3"] {
+        border: 2px solid rgba(255, 33, 33, 0.2);
+        border-radius: 5px;
+        transition: border-color 0.3s ease;
+      }
+
+      [data-focus="2"] {
+        border: 2px solid rgba(255, 33, 33, 0.4);
+        border-radius: 5px;
+        transition: border-color 0.3s ease;
+      }
+
+      [data-focus="1"] {
+        border: 4px solid rgba(255, 33, 33, 0.9);
+        border-radius: 5px;
+        transition: border-color 0.5s ease;
+      }
+    `;
+    document.head.appendChild(style);
+    needFocusDebugStyles = false;
+  }
+
+  prevFocusPath.forEach((elm) => {
+    elm.data = {
+      ...elm.data,
+      focus: undefined,
+    };
+  });
+
+  newFocusPath.forEach((elm, i) => {
+    elm.data = {
+      ...elm.data,
+      focus: i + 1,
+    };
+  });
+};
+
+let activeElement: ElementNode | undefined;
+export const setActiveElement = (elm: ElementNode) => {
+  updateFocusPath(elm, activeElement);
+  activeElement = elm;
+  // Callback for libraries to use signals / refs
+  Config.setActiveElement(elm);
+};
+
+let focusPath: ElementNode[] = [];
+const updateFocusPath = (
+  currentFocusedElm: ElementNode,
+  prevFocusedElm: ElementNode | undefined,
+) => {
+  let current = currentFocusedElm;
+  const fp: ElementNode[] = [];
+  while (current) {
+    if (
+      !current.states.has(Config.focusStateKey) ||
+      current === currentFocusedElm
+    ) {
+      current.states.add(Config.focusStateKey);
+      current.onFocus?.call(current, currentFocusedElm, prevFocusedElm);
+      current.onFocusChanged?.call(
+        current,
+        true,
+        currentFocusedElm,
+        prevFocusedElm,
+      );
+    }
+    fp.push(current);
+    current = current.parent!;
+  }
+
+  focusPath.forEach((elm) => {
+    if (!fp.includes(elm)) {
+      elm.states.remove(Config.focusStateKey);
+      elm.onBlur?.call(elm, currentFocusedElm, prevFocusedElm!);
+      elm.onFocusChanged?.call(elm, false, currentFocusedElm, prevFocusedElm);
+    }
+  });
+
+  if (Config.focusDebug) {
+    addFocusDebug(focusPath, fp);
+  }
+
+  focusPath = fp;
+  return fp;
+};
+
+let lastGlobalKeyPressTime = 0;
+
+const propagateKeyPress = (
+  e: KeyboardEvent,
+  mappedEvent?: string,
+  isHold: boolean = false,
+  isUp: boolean = false,
+): boolean => {
+  const currentTime = performance.now();
+  if (!isUp && Config.throttleInput) {
+    if (currentTime - lastGlobalKeyPressTime < Config.throttleInput) {
+      if (isDev && Config.keyDebug) {
+        console.log(
+          `Keypress throttled by global Config.throttleInput: ${Config.throttleInput}ms`,
+        );
+      }
+      return false;
+    }
+    lastGlobalKeyPressTime = currentTime;
+  }
+  let finalFocusElm: ElementNode | undefined;
+  let handlerAvailable: ElementNode | undefined;
+  const numItems = focusPath.length;
+  const captureEvent =
+    `onCapture${mappedEvent || e.key}` + isUp ? 'Release' : '';
+  const captureKey = isUp ? 'onCaptureKeyRelease' : 'onCaptureKey';
+
+  for (let i = numItems - 1; i >= 0; i--) {
+    const elm = focusPath[i]!;
+
+    // Check throttle for capture phase
+    if (elm.throttleInput) {
+      if (
+        elm._lastAnyKeyPressTime !== undefined &&
+        currentTime - elm._lastAnyKeyPressTime < elm.throttleInput
+      ) {
+        return true;
+      }
+    }
+
+    const captureHandler = elm[captureEvent] || elm[captureKey];
+    if (
+      isFunction(captureHandler) &&
+      captureHandler.call(elm, e, elm, finalFocusElm, mappedEvent) === true
+    ) {
+      elm._lastAnyKeyPressTime = currentTime;
+      return true;
+    }
+  }
+
+  let eventHandlerKey: string | undefined;
+  let releaseEventHandlerKey: string | undefined;
+  let fallbackHandlerKey: 'onKeyHold' | 'onKeyPress' | undefined;
+
+  if (mappedEvent) {
+    eventHandlerKey = `on${mappedEvent}`;
+    releaseEventHandlerKey = `on${mappedEvent}Release`;
+  }
+
+  if (!isUp) {
+    fallbackHandlerKey = isHold ? 'onKeyHold' : 'onKeyPress';
+  }
+
+  for (let i = 0; i < numItems; i++) {
+    const elm = focusPath[i]!;
+    if (!finalFocusElm) {
+      finalFocusElm = elm;
+    }
+
+    // Check throttle for bubbling phase
+    if (elm.throttleInput) {
+      if (
+        elm._lastAnyKeyPressTime !== undefined &&
+        currentTime - elm._lastAnyKeyPressTime < elm.throttleInput
+      ) {
+        return true;
+      }
+    }
+
+    let handled = false;
+
+    // Check for the release event handler if isUp is true and the key is defined
+    if (isUp && releaseEventHandlerKey) {
+      const eventHandler = elm[releaseEventHandlerKey];
+      if (isFunction(eventHandler)) {
+        handlerAvailable = elm;
+        if (eventHandler.call(elm, e, elm, finalFocusElm) === true)
+          handled = true;
+      }
+    } else if (!isUp && eventHandlerKey) {
+      // Check for the regular event handler if isUp is false and the key is defined
+      const eventHandler = elm[eventHandlerKey];
+      if (isFunction(eventHandler)) {
+        handlerAvailable = elm;
+        if (eventHandler.call(elm, e, elm, finalFocusElm) === true)
+          handled = true;
+      }
+    }
+
+    // Check for the fallback handler if its key is defined and not already handled by specific key handler
+    if (!handled && fallbackHandlerKey) {
+      const fallbackHandler = elm[fallbackHandlerKey];
+      if (isFunction(fallbackHandler)) {
+        handlerAvailable = elm;
+        if (
+          fallbackHandler.call(elm, e, mappedEvent, elm, finalFocusElm) === true
+        )
+          handled = true;
+      }
+    }
+
+    if (handled) {
+      elm._lastAnyKeyPressTime = currentTime;
+      return true;
+    }
+  }
+
+  if (isDev && Config.keyDebug && !isUp) {
+    if (handlerAvailable) {
+      console.log(
+        `Keypress bubbled, key="${e.key}", mappedEvent=${mappedEvent}, isHold=${isHold}, isUp=${isUp}`,
+        handlerAvailable,
+      );
+    } else {
+      console.log(
+        `No event handler available for keypress: key="${e.key}", mappedEvent=${mappedEvent}, isHold=${isHold}, isUp=${isUp}`,
+      );
+    }
+  }
+
+  return false;
+};
+
+const DEFAULT_KEY_HOLD_THRESHOLD = 500; // ms
+const keyHoldTimeouts: { [key: KeyNameOrKeyCode]: number | true } = {};
+
+const handleKeyEvents = (
+  delay: number,
+  keydown?: KeyboardEvent,
+  keyup?: KeyboardEvent,
+) => {
+  if (keydown) {
+    const key: KeyNameOrKeyCode = keydown.key || keydown.keyCode;
+    const mappedKeyHoldEvent =
+      keyHoldMapEntries[keydown.key] || keyHoldMapEntries[keydown.keyCode];
+    const mappedKeyEvent =
+      keyMapEntries[keydown.key] || keyMapEntries[keydown.keyCode];
+    if (mappedKeyHoldEvent) {
+      if (!keyHoldTimeouts[key]) {
+        keyHoldTimeouts[key] = window.setTimeout(() => {
+          keyHoldTimeouts[key] = true;
+          propagateKeyPress(keydown, mappedKeyHoldEvent, true);
+        }, delay);
+      }
+      return;
+    }
+
+    propagateKeyPress(keydown, mappedKeyEvent, false);
+  } else if (keyup) {
+    const key: KeyNameOrKeyCode = keyup.key || keyup.keyCode;
+    const mappedKeyEvent =
+      keyMapEntries[keyup.key] || keyMapEntries[keyup.keyCode];
+    if (keyHoldTimeouts[key] === true) {
+      delete keyHoldTimeouts[key];
+    } else if (keyHoldTimeouts[key]) {
+      clearTimeout(keyHoldTimeouts[key]);
+      delete keyHoldTimeouts[key];
+      // trigger key down event when hold didn't finish
+      propagateKeyPress(keyup, mappedKeyEvent, false);
+    }
+
+    propagateKeyPress(keyup, mappedKeyEvent, false, true);
+  }
+};
+
+interface FocusManagerOptions {
+  userKeyMap?: Partial<KeyMap>;
+  keyHoldOptions?: KeyHoldOptions;
+  ownerContext?: (cb: () => void) => void;
+}
+
+export const useFocusManager = ({
+  userKeyMap,
+  keyHoldOptions,
+  ownerContext = (cb) => {
+    cb();
+  },
+}: FocusManagerOptions = {}) => {
+  if (userKeyMap) {
+    flattenKeyMap(userKeyMap, keyMapEntries);
+  }
+
+  if (keyHoldOptions?.userKeyHoldMap) {
+    flattenKeyMap(keyHoldOptions.userKeyHoldMap, keyHoldMapEntries);
+  }
+
+  const delay = keyHoldOptions?.holdThreshold || DEFAULT_KEY_HOLD_THRESHOLD;
+  const runKeyEvent = handleKeyEvents.bind(null, delay);
+
+  // Owner context is for frameworks that need effects
+  const keyPressHandler = (event: KeyboardEvent) =>
+    ownerContext(() => {
+      runKeyEvent(event, undefined);
+    });
+
+  const keyUpHandler = (event: KeyboardEvent) =>
+    ownerContext(() => {
+      runKeyEvent(undefined, event);
+    });
+
+  document.addEventListener('keyup', keyUpHandler);
+  document.addEventListener('keydown', keyPressHandler);
+
+  return {
+    cleanup: () => {
+      document.removeEventListener('keydown', keyPressHandler);
+      document.removeEventListener('keyup', keyUpHandler);
+      for (const [_, timeout] of Object.entries(keyHoldTimeouts)) {
+        if (timeout && timeout !== true) clearTimeout(timeout);
+      }
+    },
+    focusPath: () => focusPath,
+  };
+};

package/src/core/index.ts

@@ -0,0 +1,13 @@
+export * from './elementNode.js';
+export * from './lightningInit.js';
+export * from './nodeTypes.js';
+export * from './utils.js';
+export * from './intrinsicTypes.js';
+export * from './focusKeyTypes.js';
+export * from './config.js';
+export * from './shaders.js';
+export type * from '@lightningjs/renderer';
+export { type AnimationSettings } from './intrinsicTypes.js';
+// hopefully fix up webpack error
+import { assertTruthy, deg2Rad } from '@lightningjs/renderer/utils';
+export { assertTruthy, deg2Rad };

package/src/core/intrinsicTypes.ts

@@ -0,0 +1,199 @@
+import * as lngr from '@lightningjs/renderer';
+import { ElementNode, type RendererNode } from './elementNode.js';
+import { NodeStates } from './states.js';
+import {
+  ShaderBorderProps,
+  ShaderHolePunchProps,
+  ShaderLinearGradientProps,
+  ShaderRadialGradientProps,
+  ShaderRoundedProps,
+  ShaderShadowProps,
+} from './shaders.js';
+import {
+  EventHandlers,
+  DefaultKeyMap,
+  KeyHoldMap,
+  FocusNode,
+} from './focusKeyTypes.js';
+import type { JSXElement } from 'solid-js';
+
+export type AnimationSettings = Partial<lngr.AnimationSettings>;
+
+export type AddColorString<T> = {
+  [K in keyof T]: K extends `color${string}` ? string | number : T[K];
+};
+
+export interface BorderStyleObject {
+  width: number;
+  color: number | string;
+}
+
+export type DollarString = `$${string}`;
+export type BorderStyle = BorderStyleObject;
+export type BorderRadius = number | number[];
+
+export interface Effects {
+  linearGradient?: Partial<ShaderLinearGradientProps>;
+  radialGradient?: Partial<ShaderRadialGradientProps>;
+  holePunch?: Partial<ShaderHolePunchProps>;
+  shadow?: Partial<ShaderShadowProps>;
+  rounded?: Partial<ShaderRoundedProps>;
+  borderRadius?: Partial<BorderRadius>;
+  border?: Partial<ShaderBorderProps>;
+}
+
+export type StyleEffects = Effects;
+
+export type NewOmit<T, K extends PropertyKey> = {
+  [P in keyof T as Exclude<P, K>]: T[P];
+};
+
+export type RemoveUnderscoreProps<T> = {
+  [K in keyof T as K extends `_${string}` ? never : K]: T[K];
+};
+
+type RendererText = AddColorString<
+  Partial<Omit<lngr.ITextNodeProps, 'debug' | 'shader' | 'parent'>>
+>;
+
+type CleanElementNode = NewOmit<
+  RemoveUnderscoreProps<ElementNode>,
+  | 'parent'
+  | 'insertChild'
+  | 'removeChild'
+  | 'selectedNode'
+  | 'shader'
+  | 'animate'
+  | 'chain'
+  | 'start'
+  | 'isTextNode'
+  | 'getText'
+  | 'destroy'
+  | 'hasChildren'
+  | 'getChildById'
+  | 'searchChildrenById'
+  | 'states'
+  | 'requiresLayout'
+  | 'updateLayout'
+  | 'render'
+  | 'style'
+>;
+/** Node text, children of a ElementNode of type TextNode */
+export interface ElementText
+  extends NewOmit<
+      ElementNode,
+      '_type' | 'parent' | 'children' | 'src' | 'scale'
+    >,
+    NewOmit<RendererText, 'x' | 'y' | 'w' | 'h'> {
+  _type: 'textNode';
+  parent?: ElementNode;
+  children: TextNode[];
+  text: string;
+  style: TextStyles;
+}
+
+export interface TextNode {
+  _type: 'text';
+  parent?: ElementText;
+  text: string;
+  [key: string]: any;
+}
+
+export interface NodeProps
+  extends RendererNode,
+    EventHandlers<DefaultKeyMap>,
+    EventHandlers<KeyHoldMap>,
+    FocusNode,
+    Partial<
+      NewOmit<
+        CleanElementNode,
+        | 'children'
+        | 'text'
+        | 'lng'
+        | 'rendered'
+        | 'renderer'
+        | 'emit'
+        | 'preFlexwidth'
+        | 'preFlexHeight'
+      >
+    > {
+  states?: NodeStates;
+  style?: NodeStyles;
+  children?: JSXElement | undefined;
+}
+export interface NodeStyles extends NewOmit<NodeProps, 'style'> {
+  [key: `$${string}`]: NodeProps;
+}
+
+export interface TextProps
+  extends RendererText,
+    Partial<
+      NewOmit<
+        CleanElementNode,
+        | 'lng'
+        | 'rendered'
+        | 'renderer'
+        | 'alignItems'
+        | 'autosize'
+        | 'children'
+        | 'data'
+        | 'direction'
+        | 'display'
+        | 'flexBoundary'
+        | 'flexDirection'
+        | 'gap'
+        | 'justifyContent'
+        | 'forwardFocus'
+        | 'forwardStates'
+        | 'linearGradient'
+        | 'src'
+        | 'scale'
+        | 'texture'
+        | 'textureOptions'
+      >
+    > {
+  states?: NodeStates;
+  fontWeight?: number | string;
+  style?: TextStyles;
+  children?: string | string[] | undefined;
+}
+
+export interface TextStyles extends NewOmit<TextProps, 'style'> {
+  [key: `$${string}`]: TextProps;
+}
+
+export type Styles = NodeStyles | TextStyles;
+
+// TODO: deprecated
+export interface IntrinsicNodeProps extends NodeProps {}
+export interface IntrinsicNodeStyleProps extends NodeStyles {}
+export interface IntrinsicTextNodeStyleProps extends TextStyles {}
+
+export type AnimationEvents = 'animating' | 'tick' | 'stopped';
+export type AnimationEventHandler = (
+  controller: lngr.IAnimationController,
+  name: string,
+  endValue: number,
+  props?: any,
+) => void;
+
+type EventPayloadMap = {
+  loaded: lngr.NodeLoadedPayload;
+  failed: lngr.NodeFailedPayload;
+  freed: Event;
+  inBounds: Event;
+  outOfBounds: Event;
+  inViewport: Event;
+  outOfViewport: Event;
+};
+
+type NodeEvents = keyof EventPayloadMap;
+
+type EventHandler<E extends NodeEvents> = (
+  target: ElementNode,
+  event?: EventPayloadMap[E],
+) => void;
+
+export type OnEvent = Partial<{
+  [K in NodeEvents]: EventHandler<K>;
+}>;

package/src/core/lightningInit.ts

@@ -0,0 +1,147 @@
+import * as lng from '@lightningjs/renderer';
+import { DOMRendererMain } from './domRenderer.js';
+import { DOM_RENDERING } from './config.js';
+import {
+  ShaderBorderPrefixedProps,
+  ShaderHolePunchProps,
+  ShaderLinearGradientProps,
+  ShaderRadialGradientProps,
+  ShaderRoundedProps,
+  ShaderShadowPrefixedProps,
+} from './shaders.js';
+
+export type SdfFontType = 'ssdf' | 'msdf';
+
+/** Based on {@link lng.CoreRenderer} */
+export interface IRendererCoreRenderer {
+  mode: 'canvas' | 'webgl' | undefined;
+}
+/** Based on {@link lng.TrFontManager} */
+export interface IRendererFontManager {
+  addFontFace: (...a: any[]) => void;
+}
+/** Based on {@link lng.Stage} */
+export interface IRendererStage {
+  root: IRendererNode;
+  renderer: IRendererCoreRenderer;
+  shManager: IRendererShaderManager;
+  animationManager: {
+    registerAnimation: (anim: any) => void;
+    unregisterAnimation: (anim: any) => void;
+  };
+  loadFont(kind: string, props: any): Promise<void>;
+}
+
+/** Based on {@link lng.CoreShaderManager} */
+export interface IRendererShaderManager {
+  registerShaderType: (name: string, shader: any) => void;
+}
+
+/** Based on {@link lng.CoreShaderNode} */
+export interface IRendererShader {
+  shaderType: IRendererShaderType;
+  props?: IRendererShaderProps;
+  program?: {};
+}
+/** Based on {@link lng.CoreShaderType} */
+export interface IRendererShaderType {}
+export type IRendererShaderProps = Partial<ShaderBorderPrefixedProps> &
+  Partial<ShaderShadowPrefixedProps> &
+  Partial<ShaderRoundedProps> &
+  Partial<ShaderHolePunchProps> &
+  Partial<ShaderRadialGradientProps> &
+  Partial<ShaderLinearGradientProps>;
+
+/** Based on {@link lng.Texture} */
+export interface IRendererTexture {
+  props: IRendererTextureProps;
+  type: lng.TextureType;
+}
+export interface IRendererTextureProps {}
+
+export interface IEventEmitter {
+  on: (e: string, cb: (...a: any[]) => void) => void;
+}
+
+export interface IRendererNodeShaded extends IEventEmitter {
+  stage: IRendererStage;
+  id: number;
+  animate: (
+    props: Partial<lng.INodeAnimateProps<any>>,
+    settings: Partial<lng.AnimationSettings>,
+  ) => lng.IAnimationController;
+  get absX(): number;
+  get absY(): number;
+}
+
+/** Based on {@link lng.INodeProps} */
+export interface IRendererNodeProps
+  extends Omit<lng.INodeProps<lng.CoreShaderNode>, 'shader' | 'parent'> {
+  shader: IRendererShader | null;
+  parent: IRendererNode | null;
+}
+/** Based on {@link lng.INode} */
+export interface IRendererNode extends IRendererNodeShaded, IRendererNodeProps {
+  div?: HTMLElement;
+  props: IRendererNodeProps;
+  renderState: lng.CoreNodeRenderState;
+}
+
+/** Based on {@link lng.ITextNodeProps} */
+export interface IRendererTextNodeProps
+  extends Omit<lng.ITextNodeProps, 'shader' | 'parent'> {
+  shader: IRendererShader | null;
+  parent: IRendererNode | null;
+  fontWeight?: string;
+}
+/** Based on {@link lng.ITextNode} */
+export interface IRendererTextNode
+  extends IRendererNodeShaded,
+    IRendererTextNodeProps {
+  div?: HTMLElement;
+  props: IRendererTextNodeProps;
+  renderState: lng.CoreNodeRenderState;
+}
+
+/** Based on {@link lng.RendererMain} */
+export interface IRendererMain extends IEventEmitter {
+  stage: IRendererStage;
+  root: IRendererNode;
+  createTextNode(props: Partial<IRendererTextNodeProps>): IRendererTextNode;
+  createNode(props: Partial<IRendererNodeProps>): IRendererNode;
+  createShader(kind: string, props: IRendererShaderProps): IRendererShader;
+  createTexture(
+    kind: keyof lng.TextureMap,
+    props: IRendererTextureProps,
+  ): IRendererTexture;
+}
+
+export let renderer: IRendererMain;
+
+export const getRenderer = () => renderer;
+
+export function startLightningRenderer(
+  options: lng.RendererMainSettings,
+  rootId: string | HTMLElement = 'app',
+) {
+  renderer = DOM_RENDERING
+    ? new DOMRendererMain(options, rootId)
+    : (new lng.RendererMain(options, rootId) as any as IRendererMain);
+  return renderer;
+}
+export function loadFonts(fonts: any[]) {
+  for (const font of fonts) {
+    // WebGL — SDF
+    if (
+      renderer.stage.renderer.mode === 'webgl' &&
+      'type' in font &&
+      (font.type === 'msdf' || font.type === 'ssdf')
+    ) {
+      renderer.stage.loadFont('sdf', font);
+    }
+    // Canvas — Web
+    else if ('fontUrl' in font && renderer.stage.renderer.mode !== 'webgl') {
+      renderer.stage.loadFont('canvas', font);
+    }
+  }
+}