@lightningtv/solid 3.0.0-2 → 3.0.0-20

package/src/primitives/utils/handleNavigation.ts

@@ -1,101 +1,324 @@
-import { ElementNode, assertTruthy, Config } from '@lightningtv/core';
-import { type KeyHandler } from '@lightningtv/core/focusManager';
-import type { NavigableElement, OnSelectedChanged } from '../types.js';
-
-export function onGridFocus(onSelectedChanged: OnSelectedChanged | undefined) {
-  return function (this: ElementNode) {
-    if (!this || this.children.length === 0) return false;
-
-    this.selected = this.selected || 0;
-    let child = this.selected
-      ? this.children[this.selected]
-      : this.selectedNode;
-
-    while (child?.skipFocus) {
-      this.selected++;
-      child = this.children[this.selected];
+import * as s from 'solid-js';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
+
+declare module '@lightningtv/core' {
+  interface ElementNode {
+    /** For children of {@link lngp.NavigableElement}, set to `true` to prevent being selected */
+    skipFocus?: boolean;
+  }
+}
+
+function idxInArray(idx: number, arr: readonly any[]): boolean {
+  return idx === 0 || (idx >= 0 && idx < arr.length);
+}
+
+function findFirstFocusableChildIdx(
+  el: lngp.NavigableElement,
+  from = 0,
+  delta = 1,
+): number {
+  for (let i = from; ; i += delta) {
+    if (!idxInArray(i, el.children)) {
+      if (el.wrap) {
+        i = (i + el.children.length) % el.children.length;
+      } else break;
+    }
+    if (!el.children[i]?.skipFocus) {
+      return i;
     }
-    if (!(child instanceof ElementNode)) return false;
+  }
+  return -1;
+}
+
+function selectChild(el: lngp.NavigableElement, index: number): boolean {
+  const child = el.children[index];
+
+  if (child == null || child.skipFocus) {
+    el.selected = -1;
+    return false;
+  }
+
+  const lastSelected = el.selected;
+  el.selected = index;
+
+  if (!lng.isFocused(child)) {
     child.setFocus();
+  }
 
-    if (onSelectedChanged) {
-      const grid = this as NavigableElement;
-      onSelectedChanged.call(grid, grid.selected, grid, child);
-    }
-    return true;
+  // Always call onSelectedChanged on first focus for clients
+  el.onSelectedChanged?.(index, el, child as lng.ElementNode, lastSelected);
+
+  return true;
+}
+
+/** @deprecated Use {@link navigableForwardFocus} instead */
+export function onGridFocus(
+  _?: lngp.OnSelectedChanged,
+): lng.ForwardFocusHandler {
+  return function () {
+    return navigableForwardFocus.call(this, this);
   };
 }
 
+/**
+ * Forwards focus to the first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={navigableForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
+  const navigable = this as lngp.NavigableElement;
+
+  let selected = navigable.selected;
+
+  if (selected !== 0) {
+    selected = lng.clamp(selected, 0, this.children.length - 1);
+    while (!idxInArray(selected, this.children)) {
+      selected--;
+    }
+  }
+
+  selected = findFirstFocusableChildIdx(navigable, selected);
+  // update selected as firstfocusable maybe different if first element has skipFocus
+  navigable.selected = selected;
+  return selectChild(navigable, selected);
+};
+
 export function handleNavigation(
   direction: 'up' | 'right' | 'down' | 'left',
-): KeyHandler {
+): lng.KeyHandler {
   return function () {
-    const numChildren = this.children.length;
-    const wrap = this.wrap;
-    const lastSelected = this.selected || 0;
+    return moveSelection(
+      this as lngp.NavigableElement,
+      direction === 'up' || direction === 'left' ? -1 : 1,
+    );
+  };
+}
+
+/**
+ * Handles navigation key events for navigable elements, \
+ * such as {@link lngp.Row} and {@link lngp.Column}.
+ *
+ * Uses {@link moveSelection} to select the next or previous child based on the key pressed.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   onUp={navigableHandleNavigation}
+ *   onDown={navigableHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const navigableHandleNavigation: lng.KeyHandler = function (e) {
+  return moveSelection(
+    this as lngp.NavigableElement,
+    e.key === 'ArrowUp' || e.key === 'ArrowLeft' ? -1 : 1,
+  );
+};
+
+/**
+ * Moves the selection within a {@link lngp.NavigableElement}.
+ */
+export function moveSelection(
+  el: lngp.NavigableElement,
+  delta: number,
+): boolean {
+  let selected = findFirstFocusableChildIdx(el, el.selected + delta, delta);
 
-    if (numChildren === 0) {
+  if (selected === -1) {
+    if (
+      !idxInArray(el.selected, el.children) ||
+      el.children[el.selected]!.skipFocus ||
+      lng.isFocused(el.children[el.selected]!)
+    ) {
       return false;
     }
+    selected = el.selected;
+  }
 
-    if (direction === 'right' || direction === 'down') {
-      do {
-        this.selected = ((this.selected || 0) % numChildren) + 1;
-        if (this.selected >= numChildren) {
-          if (!wrap) {
-            this.selected = -1;
-            break;
-          }
-          this.selected = 0;
-        }
-      } while (this.children[this.selected]?.skipFocus);
-    } else if (direction === 'left' || direction === 'up') {
-      do {
-        this.selected = ((this.selected || 0) % numChildren) - 1;
-        if (this.selected < 0) {
-          if (!wrap) {
-            this.selected = -1;
-            break;
-          }
-          this.selected = numChildren - 1;
-        }
-      } while (this.children[this.selected]?.skipFocus);
-    }
+  const active = el.children[selected]!;
+
+  if (el.plinko) {
+    // Set the next item to have the same selected index
+    // so we move up / down directly
+    const lastSelectedChild = el.children[el.selected];
+    lng.assertTruthy(lastSelectedChild instanceof lng.ElementNode);
+
+    const num = lastSelectedChild.selected || 0;
+    active.selected =
+      num < active.children.length ? num : active.children.length - 1;
+  }
 
-    if (this.selected === -1) {
-      this.selected = lastSelected;
-      if (
-        this.children[this.selected]?.states!.has(
-          Config.focusStateKey || '$focus',
-        )
-      ) {
-        // This child is already focused, so bubble up to next handler
-        return false;
+  return selectChild(el, selected);
+}
+
+function distanceBetweenRectCenters(a: lng.Rect, b: lng.Rect): number {
+  const dx = Math.abs(a.x + a.width / 2 - (b.x + b.width / 2)) / 2;
+  const dy = Math.abs(a.y + a.height / 2 - (b.y + b.height / 2)) / 2;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function findClosestFocusableChildIdx(
+  el: lng.ElementNode,
+  prevEl: lng.ElementNode,
+): number {
+  // select child closest to the previous active element
+  const prevRect = lng.getElementScreenRect(prevEl);
+  const elRect = lng.getElementScreenRect(el);
+  const childRect: lng.Rect = { x: 0, y: 0, width: 0, height: 0 };
+
+  let closestIdx = -1;
+  let closestDist = Infinity;
+
+  for (const [idx, child] of el.children.entries()) {
+    if (!child.skipFocus) {
+      lng.getElementScreenRect(child, el, childRect);
+      childRect.x += elRect.x;
+      childRect.y += elRect.y;
+      const distance = distanceBetweenRectCenters(prevRect, childRect);
+      if (distance < closestDist) {
+        closestDist = distance;
+        closestIdx = idx;
       }
     }
-    const active = this.children[this.selected || 0];
-    assertTruthy(active instanceof ElementNode);
-    const navigableThis = this as NavigableElement;
-
-    navigableThis.onSelectedChanged &&
-      navigableThis.onSelectedChanged.call(
-        navigableThis,
-        navigableThis.selected,
-        navigableThis,
-        active,
-        lastSelected,
-      );
-
-    if (this.plinko) {
-      // Set the next item to have the same selected index
-      // so we move up / down directly
-      const lastSelectedChild = this.children[lastSelected];
-      assertTruthy(lastSelectedChild instanceof ElementNode);
-      const num = lastSelectedChild.selected || 0;
-      active.selected =
-        num < active.children.length ? num : active.children.length - 1;
-    }
-    active.setFocus();
-    return true;
-  };
+  }
+
+  return closestIdx;
 }
+
+/**
+ * Forwards focus to the closest or first focusable child of a {@link lngp.NavigableElement} and
+ * selects it.
+ *
+ * To determine the closest child, it uses the distance between the center of the previous focused element
+ * and the center of each child element.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   forwardFocus={spatialForwardFocus}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const spatialForwardFocus: lng.ForwardFocusHandler = function () {
+  const prevEl = s.untrack(lng.activeElement);
+  if (prevEl) {
+    const idx = findClosestFocusableChildIdx(this, prevEl);
+    const selected = selectChild(this as lngp.NavigableElement, idx);
+    if (selected) return true;
+  }
+  const idx = findFirstFocusableChildIdx(this as lngp.NavigableElement);
+  return selectChild(this as lngp.NavigableElement, idx);
+};
+
+/**
+ * Handles spatial navigation within a {@link lngp.NavigableElement} by moving focus
+ * based on the arrow keys pressed.
+ *
+ * This function allows for navigation in a grid-like manner for flex-wrap containers, \
+ * where pressing the arrow keys will either:
+ * - move focus to the next/prev child in the same row/column
+ * - or find the closest child in the next/prev row/column.
+ *
+ * @example
+ * ```tsx
+ * <view
+ *   selected={0}
+ *   display="flex"
+ *   flexWrap="wrap"
+ *   onUp={spatialHandleNavigation}
+ *   onDown={spatialHandleNavigation}
+ *   onSelectedChanged={(idx, el, child, lastIdx) => {...}}
+ * >
+ * ```
+ */
+export const spatialHandleNavigation: lng.KeyHandler = function (e) {
+  let selected = this.selected;
+
+  if (typeof selected !== 'number' || !idxInArray(selected, this.children)) {
+    selected = findFirstFocusableChildIdx(this as lngp.NavigableElement);
+    return selectChild(this as lngp.NavigableElement, selected);
+  }
+
+  const prevChild = this.children[selected]!;
+
+  const move = { x: 0, y: 0 };
+  switch (e.key) {
+    case 'ArrowLeft':
+      move.x = -1;
+      break;
+    case 'ArrowRight':
+      move.x = 1;
+      break;
+    case 'ArrowUp':
+      move.y = -1;
+      break;
+    case 'ArrowDown':
+      move.y = 1;
+      break;
+    default:
+      return false;
+  }
+
+  const flexDir = this.flexDirection === 'column' ? 'y' : 'x';
+  const crossDir = flexDir === 'x' ? 'y' : 'x';
+  const flexDelta = move[flexDir];
+  const crossDelta = move[crossDir];
+
+  // Select next/prev child in the current column/row
+  if (flexDelta !== 0) {
+    for (
+      let i = selected + flexDelta;
+      idxInArray(i, this.children);
+      i += flexDelta
+    ) {
+      const child = this.children[i]!;
+      if (child.skipFocus) continue;
+
+      // Different column/row
+      if (child[crossDir] !== prevChild[crossDir]) break;
+
+      return selectChild(this as lngp.NavigableElement, i);
+    }
+  }
+  // Find child in next/prev column/row
+  else {
+    let closestIdx = -1;
+    let closestDist = Infinity;
+
+    for (
+      let i = selected + crossDelta;
+      idxInArray(i, this.children);
+      i += crossDelta
+    ) {
+      const child = this.children[i]!;
+      if (child.skipFocus) continue;
+
+      // Same column/row, skip
+      if (child[crossDir] === prevChild[crossDir]) continue;
+
+      // Different column/row, check distance
+      const distance = Math.abs(child[flexDir] - prevChild[flexDir]);
+      if (distance >= closestDist) break; // getting further away
+
+      closestDist = distance;
+      closestIdx = i;
+    }
+
+    return selectChild(this as lngp.NavigableElement, closestIdx);
+  }
+
+  return false;
+};

package/src/primitives/utils/withScrolling.ts

@@ -5,14 +5,28 @@ import type {
   Styles,
 } from '@lightningtv/core';
 
+export type Scroller = (
+  selected: number | ElementNode,
+  component?: ElementNode,
+  selectedElement?: ElementNode | ElementText,
+  lastSelected?: number,
+) => void;
+
 // Adds properties expected by withScrolling
 export interface ScrollableElement extends ElementNode {
   scrollIndex?: number;
+  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center';
   selected: number;
   offset?: number;
   endOffset?: number;
+  onScrolled?: (
+    elm: ScrollableElement,
+    offset: number,
+    isInitial: boolean,
+  ) => void;
   _targetPosition?: number;
   _screenOffset?: number;
+  _initialPosition?: number;
 }
 
 // From the renderer, not exported
@@ -26,16 +40,12 @@ const isNotShown = (node: ElementNode | ElementText) => {
   Always scroll moves the list every time
 */
 
-export function withScrolling(isRow: boolean) {
+/** Use {@link scrollRow} or {@link scrollColumn} */
+export function withScrolling(isRow: boolean): Scroller {
   const dimension = isRow ? 'width' : 'height';
   const axis = isRow ? 'x' : 'y';
 
-  return (
-    selected: number | ElementNode,
-    component?: ElementNode,
-    selectedElement?: ElementNode | ElementText,
-    lastSelected?: number,
-  ) => {
+  return (selected, component, selectedElement, lastSelected) => {
     let componentRef = component as ScrollableElement;
     if (typeof selected !== 'number') {
       componentRef = selected as ScrollableElement;
@@ -44,12 +54,17 @@ export function withScrolling(isRow: boolean) {
     if (
       !componentRef ||
       componentRef.scroll === 'none' ||
+      selected === lastSelected ||
       !componentRef.children.length
     )
       return;
 
-    const lng = componentRef.lng as INode;
-    const screenSize = isRow ? lng.stage.root.width : lng.stage.root.height;
+    if (componentRef._initialPosition === undefined) {
+      componentRef._initialPosition = componentRef[axis];
+    }
+
+    const lng = componentRef.lng as unknown as INode;
+    const screenSize = isRow ? lng.stage.root.w : lng.stage.root.h;
     // Determine if movement is incremental or decremental
     const isIncrementing =
       lastSelected === undefined || lastSelected - 1 !== selected;
@@ -58,6 +73,7 @@ export function withScrolling(isRow: boolean) {
       if (componentRef.parent!.clipping) {
         const p = componentRef.parent!;
         componentRef.endOffset =
+          componentRef.endOffset ??
           screenSize - ((isRow ? p.absX : p.absY) || 0) - p[dimension];
       }
 
@@ -68,14 +84,20 @@ export function withScrolling(isRow: boolean) {
 
     const screenOffset = componentRef._screenOffset;
     const gap = componentRef.gap || 0;
-    const scroll = componentRef.scroll || 'auto';
+    // when creating we set scroll to always so we setup the right location for selected and scrollIndex
+    const scroll =
+      componentRef.scroll ||
+      (lastSelected === undefined
+        ? componentRef.scrollIndex
+          ? 'center'
+          : 'always'
+        : 'auto');
 
     // Allows manual position control
     const targetPosition = componentRef._targetPosition ?? componentRef[axis];
-    const rootPosition =
-      isIncrementing || scroll === 'auto'
-        ? Math.min(targetPosition, componentRef[axis])
-        : Math.max(targetPosition, componentRef[axis]);
+    const rootPosition = isIncrementing
+      ? Math.min(targetPosition, componentRef[axis])
+      : Math.max(targetPosition, componentRef[axis]);
     componentRef.offset = componentRef.offset ?? rootPosition;
     const offset = componentRef.offset;
     selectedElement =
@@ -97,7 +119,7 @@ export function withScrolling(isRow: boolean) {
       screenSize -
         containerSize -
         screenOffset -
-        (componentRef.endOffset || 2 * gap),
+        (componentRef.endOffset ?? 2 * gap),
       offset,
     );
 
@@ -138,7 +160,8 @@ export function withScrolling(isRow: boolean) {
           nextPosition = rootPosition + selectedSize + gap;
         }
       } else if (isIncrementing) {
-        nextPosition = -selectedPosition + offset;
+        //nextPosition = -selectedPosition + offset;
+        nextPosition = rootPosition - selectedSize - gap;
       } else {
         nextPosition = rootPosition + selectedSize + gap;
       }
@@ -157,9 +180,17 @@ export function withScrolling(isRow: boolean) {
 
     // Update position if it has changed
     if (componentRef[axis] !== nextPosition) {
+      if (componentRef.onScrolled) {
+        const isInitial = nextPosition === componentRef._initialPosition;
+        componentRef.onScrolled(componentRef, nextPosition, isInitial);
+      }
+
       componentRef[axis] = nextPosition;
       // Store the new position to keep track during animations
       componentRef._targetPosition = nextPosition;
     }
   };
 }
+
+export const scrollRow = /* @__PURE__ */ withScrolling(true);
+export const scrollColumn = /* @__PURE__ */ withScrolling(false);

package/src/render.ts

@@ -5,7 +5,6 @@ import {
   type TextProps,
   startLightningRenderer,
   type RendererMainSettings,
-  type IRendererMain,
 } from '@lightningtv/core';
 import nodeOpts from './solidOpts.js';
 import {
@@ -14,15 +13,15 @@ import {
   createRenderEffect,
   untrack,
   type JSXElement,
-  type ValidComponent,
   createRoot,
+  type Component,
 } from 'solid-js';
 import type { SolidNode } from './types.js';
 import { activeElement, setActiveElement } from './activeElement.js';
 
 const solidRenderer = solidCreateRenderer<SolidNode>(nodeOpts);
 
-let renderer: IRendererMain;
+let renderer;
 export const rootNode = nodeOpts.createElement('App');
 
 const render = function (code: () => JSXElement) {
@@ -120,10 +119,8 @@ function processTasks(): void {
  * ```
  * @description https://www.solidjs.com/docs/latest/api#dynamic
  */
-export function Dynamic<T>(
-  props: T & {
-    component?: ValidComponent;
-  },
+export function Dynamic<T extends Record<string, any>>(
+  props: T & { component?: Component<T> | undefined | null },
 ): JSXElement {
   const [p, others] = splitProps(props, ['component']);
 
@@ -159,3 +156,8 @@ export const Text = (props: TextProps) => {
   spread(el, props, false);
   return el as unknown as JSXElement;
 };
+
+export function registerDefaultShader(name: string, shader: any) {
+  // noop for v2
+  // renderer.stage.shManager.registerShaderType('rounded', Rounded);
+}

package/src/solidOpts.ts

@@ -11,30 +11,41 @@ import type { SolidNode, SolidRendererOptions } from './types.js';
 
 declare module '@lightningtv/core' {
   interface ElementNode {
-    _queueInsert?: true;
-    _queueRemove?: true;
+    /** @internal for managing series of insertions and deletions */
+    _queueDelete?: number;
+    preserve?: boolean;
   }
 }
 
-let elementQueue: ElementNode[] = [];
+Object.defineProperty(ElementNode.prototype, 'preserve', {
+  get(): boolean | undefined {
+    return this._queueDelete === 0;
+  },
+  set(v: boolean) {
+    this._queueDelete = v ? 0 : undefined;
+  },
+});
+
+let elementDeleteQueue: ElementNode[] = [];
 
-function flushQueue(): void {
-  for (let el of elementQueue) {
-    if (el._queueRemove && !el._queueInsert) {
+function flushDeleteQueue(): void {
+  for (let el of elementDeleteQueue) {
+    if (Number(el._queueDelete) < 0) {
       el.destroy();
     }
-    el._queueInsert = el._queueRemove = undefined;
+    el._queueDelete = undefined;
   }
-  elementQueue.length = 0;
+  elementDeleteQueue.length = 0;
 }
 
-function addToQueue(node: ElementNode): void {
-  if (node._queueInsert && node._queueRemove) {
-    return; // Already in the queue
-  }
-
-  if (elementQueue.push(node) === 1) {
-    queueMicrotask(flushQueue);
+function pushDeleteQueue(node: ElementNode, n: number): void {
+  if (node._queueDelete === undefined) {
+    node._queueDelete = n;
+    if (elementDeleteQueue.push(node) === 1) {
+      queueMicrotask(flushDeleteQueue);
+    }
+  } else {
+    node._queueDelete += n;
   }
 }
 
@@ -59,12 +70,14 @@ export default {
   insertNode(parent: ElementNode, node: SolidNode, anchor: SolidNode): void {
     log('INSERT: ', parent, node, anchor);
 
+    let prevParent = node.parent;
     parent.insertChild(node, anchor);
 
     if (node instanceof ElementNode) {
-      node._queueInsert = true;
       node.parent!.rendered && node.render(true);
-      addToQueue(node);
+      if (prevParent !== undefined) {
+        pushDeleteQueue(node, 1);
+      }
     } else if (isElementText(parent)) {
       // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
       parent.text = parent.getText();
@@ -79,8 +92,10 @@ export default {
     parent.removeChild(node);
 
     if (node instanceof ElementNode) {
-      node._queueRemove = true;
-      addToQueue(node);
+      pushDeleteQueue(node, -1);
+    } else if (isElementText(parent)) {
+      // TextNodes can be placed outside of <text> nodes when <Show> is used as placeholder
+      parent.text = parent.getText();
     }
   },
   getParentNode(node: SolidNode): ElementNode | ElementText | undefined {

package/src/utils.ts

@@ -61,3 +61,13 @@ export function combineStylesMemo<T extends Styles>(
     ...style1,
   }));
 }
+
+export const clamp = (value: number, min: number, max: number) =>
+  min < max
+    ? Math.min(Math.max(value, min), max)
+    : Math.min(Math.max(value, max), min);
+
+export function mod(n: number, m: number): number {
+  if (m === 0) return 0;
+  return ((n % m) + m) % m;
+}