@lightningtv/solid 2.4.5 → 2.4.6

package/src/primitives/utils/createSpriteMap.ts

@@ -0,0 +1,32 @@
+import { renderer, type TextureMap } from '@lightningtv/core';
+
+export interface SpriteDef {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function createSpriteMap(
+  src: string,
+  subTextures: SpriteDef[],
+): Record<string, InstanceType<TextureMap['SubTexture']>> {
+  const spriteMapTexture = renderer.createTexture('ImageTexture', {
+    src,
+  });
+
+  return subTextures.reduce<
+    Record<string, InstanceType<TextureMap['SubTexture']>>
+  >((acc, t) => {
+    const { x, y, width, height } = t;
+    acc[t.name] = renderer.createTexture('SubTexture', {
+      texture: spriteMapTexture,
+      x,
+      y,
+      width,
+      height,
+    });
+    return acc;
+  }, {});
+}

package/src/primitives/utils/handleNavigation.ts

@@ -0,0 +1,100 @@
+import { ElementNode, assertTruthy } from '@lightningtv/core';
+import { type KeyHandler } from '@lightningtv/core/focusManager';
+import type { NavigableElement, OnSelectedChanged } from '../types.js';
+
+export function onGridFocus(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];
+  }
+  if (!(child instanceof ElementNode)) return false;
+  child.setFocus();
+  return true;
+}
+
+// Converts params from onFocus to onSelectedChanged
+export function handleOnSelect(onSelectedChanged: OnSelectedChanged) {
+  return function (this: NavigableElement) {
+    return onSelectedChanged.call(
+      this,
+      this.selected,
+      this,
+      this.children[this.selected] as ElementNode,
+    );
+  };
+}
+
+export function handleNavigation(
+  direction: 'up' | 'right' | 'down' | 'left',
+): KeyHandler {
+  return function () {
+    const numChildren = this.children.length;
+    const wrap = this.wrap;
+    const lastSelected = this.selected || 0;
+
+    if (numChildren === 0) {
+      return false;
+    }
+
+    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);
+    }
+
+    if (this.selected === -1) {
+      this.selected = lastSelected;
+      if (this.children[this.selected]?.states!.has('focus')) {
+        // This child is already focused, so bubble up to next handler
+        return false;
+      }
+    }
+    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;
+  };
+}

package/src/primitives/utils/withScrolling.ts

@@ -0,0 +1,136 @@
+import type {
+  ElementNode,
+  ElementText,
+  INode,
+  Styles,
+} from '@lightningtv/core';
+
+// Adds properties expected by withScrolling
+export interface ScrollableElement extends ElementNode {
+  scrollIndex?: number;
+  selected: number;
+  offset?: number;
+  _targetPosition?: number;
+  _screenOffset?: number;
+}
+
+// From the renderer, not exported
+const InViewPort = 8;
+const isNotShown = (node: ElementNode | ElementText) => {
+  return node.lng.renderState !== InViewPort;
+};
+/*
+  Auto Scrolling starts scrolling right away until the last item is shown. Keeping a full view of the list.
+  Edge starts scrolling when it reaches the edge of the viewport.
+  Always scroll moves the list every time
+*/
+
+export function withScrolling(isRow: boolean) {
+  const dimension = isRow ? 'width' : 'height';
+  const axis = isRow ? 'x' : 'y';
+
+  return (
+    selected: number | ElementNode,
+    component?: ElementNode,
+    selectedElement?: ElementNode | ElementText,
+    lastSelected?: number,
+  ) => {
+    let componentRef = component as ScrollableElement;
+    if (typeof selected !== 'number') {
+      componentRef = selected as ScrollableElement;
+      selected = componentRef.selected || 0;
+    }
+    if (!componentRef || !componentRef.children.length) return;
+
+    const lng = componentRef.lng as INode;
+    const screenSize = isRow ? lng.stage.root.width : lng.stage.root.height;
+    // Determine if movement is incremental or decremental
+    const isIncrementing =
+      lastSelected === undefined || lastSelected - 1 !== selected;
+
+    if (componentRef._screenOffset === undefined) {
+      componentRef._screenOffset =
+        componentRef.offset ??
+        (isRow ? lng.absX : lng.absY) - componentRef[axis];
+    }
+
+    const screenOffset = componentRef._screenOffset;
+    const gap = componentRef.gap || 0;
+    const scroll = componentRef.scroll || 'auto';
+
+    // Allows manual position control
+    const targetPosition = componentRef._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 =
+      selectedElement || (componentRef.children[selected] as ElementNode);
+    const selectedPosition = selectedElement[axis] ?? 0;
+    const selectedSize = selectedElement[dimension] ?? 0;
+    const selectedScale =
+      selectedElement.scale ??
+      (selectedElement.style?.focus as Styles)?.scale ??
+      1;
+    const selectedSizeScaled = selectedSize * selectedScale;
+    const containerSize = componentRef[dimension] ?? 0;
+    const maxOffset = Math.min(
+      screenSize - containerSize - screenOffset - 2 * gap,
+      0,
+    );
+
+    // Determine the next element based on whether incrementing or decrementing
+    const nextIndex = isIncrementing ? selected + 1 : selected - 1;
+    const nextElement = componentRef.children[nextIndex] || null;
+
+    // Default nextPosition to align with the selected position and offset
+    let nextPosition = rootPosition;
+
+    // Update nextPosition based on scroll type and specific conditions
+    if (selectedElement.centerScroll) {
+      nextPosition = -selectedPosition + (screenSize - selectedSizeScaled) / 2;
+    } else if (scroll === 'always') {
+      nextPosition = -selectedPosition + offset;
+    } else if (scroll === 'center') {
+      nextPosition =
+        -selectedPosition +
+        (screenSize - selectedSizeScaled) / 2 -
+        screenOffset;
+    } else if (!nextElement) {
+      // If at the last element, align to end
+      nextPosition = isIncrementing ? maxOffset : offset;
+    } else if (scroll === 'auto') {
+      if (
+        isIncrementing &&
+        componentRef.scrollIndex &&
+        componentRef.scrollIndex > 0 &&
+        componentRef.selected >= componentRef.scrollIndex
+      ) {
+        nextPosition = rootPosition - selectedSize - gap;
+      } else if (isIncrementing) {
+        nextPosition = -selectedPosition + offset;
+      } else {
+        nextPosition = rootPosition + selectedSize + gap;
+      }
+    } // Handle Edge scrolling
+    else if (isIncrementing && isNotShown(nextElement)) {
+      nextPosition = rootPosition - selectedSize - gap;
+    } else if (isNotShown(nextElement)) {
+      nextPosition = -selectedPosition + offset;
+    }
+
+    // Prevent container from moving beyond bounds
+    nextPosition =
+      isIncrementing && scroll !== 'always'
+        ? Math.max(nextPosition, maxOffset)
+        : Math.min(nextPosition, offset);
+
+    // Update position if it has changed
+    if (componentRef[axis] !== nextPosition) {
+      componentRef[axis] = nextPosition;
+      // Store the new position to keep track during animations
+      componentRef._targetPosition = nextPosition;
+    }
+  };
+}