@lightningtv/solid 3.0.0-17 → 3.0.0-19

package/src/primitives/VirtualGrid.tsx

@@ -0,0 +1,199 @@
+import * as s from 'solid-js';
+import * as lng from '@lightningtv/solid';
+import * as lngp from '@lightningtv/solid/primitives';
+import { List } from '@solid-primitives/list';
+import * as utils from '../utils.js';
+
+const columnScroll = lngp.withScrolling(false);
+
+const rowStyles: lng.NodeStyles = {
+  display: 'flex',
+  flexWrap: 'wrap',
+  transition: {
+    y: true,
+  },
+};
+
+export type VirtualGridProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
+  each: readonly T[] | undefined | null | false;
+  columns: number; // items per row
+  rows?: number; // number of visible rows (default: 1)
+  buffer?: number;
+  onEndReached?: () => void;
+  onEndReachedThreshold?: number;
+  children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
+};
+
+export function VirtualGrid<T>(props: VirtualGridProps<T>): s.JSX.Element {
+  const bufferSize = () => props.buffer ?? 2;
+  const [ cursor, setCursor ] = s.createSignal(props.selected ?? 0);
+  const items = s.createMemo(() => props.each || []);
+  const itemsPerRow = () => props.columns;
+  const numberOfRows = () => props.rows ?? 1;
+  const totalVisibleItems = () => itemsPerRow() * numberOfRows();
+
+  const start = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+    const rawStart = newRowIndex * perRow - bufferSize() * perRow;
+    return Math.max(0, rawStart);
+  });
+
+  const end = s.createMemo(() => {
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(cursor() / perRow);
+    const rawEnd = (newRowIndex + bufferSize()) * perRow + totalVisibleItems();
+    return Math.min(items().length, rawEnd);
+  });
+
+  const [slice, setSlice] = s.createSignal(items().slice(start(), end()));
+
+  let viewRef!: lngp.NavigableElement;
+
+  function onVerticalNav(dir: -1 | 1): lngp.KeyHandler {
+    return function () {
+      const perRow = itemsPerRow();
+      const currentRowIndex = Math.floor(cursor() / perRow);
+      const maxRows = Math.floor(items().length / perRow);
+
+      if (
+        currentRowIndex === 0 && dir === -1
+        || currentRowIndex === maxRows && dir === 1
+      ) return;
+
+      const selected = this.selected || 0;
+      const offset = dir * perRow;
+      const newIndex = utils.clamp(selected + offset, 0, items().length - 1);
+      const lastIdx = selected;
+      this.selected = newIndex;
+      const active = this.children[this.selected];
+
+      if (active instanceof lng.ElementNode) {
+        active.setFocus();
+        chainedOnSelectedChanged.call(
+          this as lngp.NavigableElement,
+          this.selected,
+          this as lngp.NavigableElement,
+          active,
+          lastIdx
+        );
+        return true;
+      }
+    };
+  }
+
+  const onUp = onVerticalNav(-1);
+  const onDown = onVerticalNav(1);
+
+  const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, active, _lastIdx,) {
+    let idx = _idx;
+    let lastIdx = _lastIdx;
+    const perRow = itemsPerRow();
+    const newRowIndex = Math.floor(idx / perRow);
+    const prevRowIndex = Math.floor((lastIdx || 0) / perRow);
+    const prevStart = start();
+
+    setCursor(prevStart + idx);
+    if (newRowIndex === prevRowIndex) return;
+
+    setSlice(items().slice(start(), end()));
+
+    // this.selected is relative to the slice
+    // and it doesn't get corrected automatically after children change
+    const idxCorrection = prevStart - start();
+    if (lastIdx) lastIdx += idxCorrection;
+    idx += idxCorrection;
+    this.selected += idxCorrection;
+
+    if (props.onEndReachedThreshold !== undefined && cursor() >= items().length - props.onEndReachedThreshold) {
+      props.onEndReached?.();
+    }
+
+    queueMicrotask(() => {
+      const prevRowY = this.y + active.y;
+      this.updateLayout();
+      this.lng.y = prevRowY - active.y;
+      columnScroll(idx, elm, active, lastIdx);
+    });
+  };
+
+  const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
+
+  let cachedSelected: number | undefined;
+  const updateSelected = ([selected, _items]: [number?, any?]) => {
+    if (!viewRef || selected == null) return;
+
+    if (cachedSelected !== undefined) {
+      selected = cachedSelected;
+      cachedSelected = undefined;
+    }
+
+    if (selected >= items().length && props.onEndReached) {
+      props.onEndReached?.();
+      cachedSelected = selected;
+      return;
+    }
+
+    const item = items()[selected];
+    let active = viewRef.children.find(x => x.item === item);
+    const lastSelected = viewRef.selected;
+
+    if (active instanceof lng.ElementNode) {
+      viewRef.selected = viewRef.children.indexOf(active);
+      active.setFocus();
+      chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+    } else {
+      setCursor(selected);
+      setSlice(items().slice(start(), end()));
+
+      queueMicrotask(() => {
+        viewRef.updateLayout();
+        active = viewRef.children.find(x => x.item === item);
+        if (active instanceof lng.ElementNode) {
+          viewRef.selected = viewRef.children.indexOf(active);
+          active.setFocus();
+          chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
+        }
+      });
+    }
+  };
+
+  const scrollToIndex = (index: number) => {
+    s.untrack(() => updateSelected([index]));
+  }
+
+  s.createEffect(s.on([() => props.selected, items], updateSelected));
+
+  s.createEffect(
+    s.on(items, () => {
+      if (!viewRef) return;
+      if (cachedSelected !== undefined) {
+        updateSelected([cachedSelected]);
+        return;
+      }
+      setSlice(items().slice(start(), end()));
+    }, { defer: true })
+  );
+
+
+  return (
+    <view
+      {...props}
+      scroll={props.scroll || 'always'}
+      ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
+      selected={props.selected || 0}
+      cursor={cursor()}
+      onLeft={/* @once */ lngp.chainFunctions(props.onLeft, lngp.navigableHandleNavigation)}
+      onRight={/* @once */ lngp.chainFunctions(props.onRight, lngp.navigableHandleNavigation)}
+      onUp={/* @once */ lngp.chainFunctions(props.onUp, onUp)}
+      onDown={/* @once */ lngp.chainFunctions(props.onDown, onDown)}
+      forwardFocus={/* @once */ lngp.navigableForwardFocus}
+      onCreate={/* @once */ props.selected ? lngp.chainFunctions(props.onCreate, columnScroll) : props.onCreate}
+      scrollToIndex={/* @once */ scrollToIndex}
+      onSelectedChanged={/* @once */ chainedOnSelectedChanged}
+      style={/* @once */ lng.combineStyles(props.style, rowStyles)}
+    >
+      <List each={slice()}>{props.children}</List>
+    </view>
+  );
+}

package/src/primitives/Visible.tsx

@@ -13,7 +13,6 @@ import { ElementNode } from '@lightningtv/solid';
 export function Visible<T>(props: {
   when: T | undefined | null | false;
   keyed?: boolean;
-  fallback?: JSX.Element;
   children: JSX.Element;
 }): JSX.Element {
   let child: ChildrenReturn | undefined;
@@ -55,6 +54,6 @@ export function Visible<T>(props: {
       }
     });
 
-    return c ? child : props.fallback;
+    return c || child ? child : null;
   }) as unknown as JSX.Element;
 };

package/src/primitives/createFocusStack.tsx

@@ -17,7 +17,7 @@
  * - `restoreFocus()`: Restores focus to the last stored element and removes it from the stack. Returns `true` if successful, `false` otherwise.
  * - `clearFocusStack()`: Empties the focus stack.
  */
-import { createSignal, createContext, useContext, JSX } from 'solid-js';
+import * as s from 'solid-js';
 import { type ElementNode } from '@lightningtv/solid';
 
 interface FocusStackContextType {
@@ -26,13 +26,16 @@ interface FocusStackContextType {
   clearFocusStack: () => void;
 }
 
-const FocusStackContext = createContext<FocusStackContextType | undefined>(undefined);
+const FocusStackContext = s.createContext<FocusStackContextType | undefined>(undefined);
 
-export function FocusStackProvider(props: { children: JSX.Element}) {
-  const [_focusStack, setFocusStack] = createSignal<ElementNode[]>([]);
+export function FocusStackProvider(props: { children: s.JSX.Element}) {
+  const [_focusStack, setFocusStack] = s.createSignal<ElementNode[]>([]);
 
   function storeFocus(element: ElementNode, prevElement?: ElementNode) {
-    setFocusStack((stack) => [...stack, prevElement || element]);
+    const elm = prevElement || element;
+    if (elm) {
+      setFocusStack(stack => [...stack, elm]);
+    }
   }
 
   function restoreFocus(): boolean {
@@ -59,10 +62,18 @@ export function FocusStackProvider(props: { children: JSX.Element}) {
   );
 }
 
-export function useFocusStack() {
-  const context = useContext(FocusStackContext);
+export function useFocusStack(autoClear = true) {
+  const context = s.useContext(FocusStackContext);
   if (!context) {
     throw new Error("useFocusStack must be used within a FocusStackProvider");
   }
+
+  if (autoClear) {
+    s.onCleanup(() => {
+      // delay clearing the focus stack so restoreFocus can happen first.
+      setTimeout(() => context.clearFocusStack(), 5);
+    });
+  }
+
   return context;
 }

package/src/primitives/index.ts

@@ -4,6 +4,7 @@ export * from './createInfiniteItems.js';
 export * from './useMouse.js';
 export * from './portal.jsx';
 export * from './Lazy.jsx';
+export * from './Image.jsx';
 export * from './Visible.jsx';
 export * from './router.js';
 export * from './Column.jsx';
@@ -16,7 +17,10 @@ export * from './Suspense.jsx';
 export * from './Marquee.jsx';
 export * from './createFocusStack.jsx';
 export * from './useHold.js';
-export { withScrolling } from './utils/withScrolling.js';
+export * from './KeepAlive.jsx';
+export * from './VirtualGrid.jsx';
+export * from './Virtual.jsx';
+export * from './utils/withScrolling.js';
 export {
   type AnyFunction,
   chainFunctions,

package/src/primitives/types.ts

@@ -54,6 +54,7 @@ export interface NavigableProps extends NodeProps {
 // @ts-expect-error animationSettings is not identical - weird
 export interface NavigableElement extends ElementNode, NavigableProps {
   selected: number;
+  scrollToIndex: (this: NavigableElement, index: number) => void;
 }
 
 export interface NavigableStyleProperties {

package/src/primitives/useMouse.ts

@@ -1,4 +1,4 @@
-import type { ElementText, INode, TextNode } from '@lightningtv/core';
+import type { ElementText, TextNode } from '@lightningtv/core';
 import {
   ElementNode,
   activeElement,
@@ -6,12 +6,24 @@ import {
   isTextNode,
   rootNode,
   Config,
+  isFunc,
 } from '@lightningtv/solid';
 import { makeEventListener } from '@solid-primitives/event-listener';
 import { useMousePosition } from '@solid-primitives/mouse';
 import { createScheduled, throttle } from '@solid-primitives/scheduled';
 import { createEffect } from 'solid-js';
 
+declare module '@lightningtv/core' {
+  interface ElementNode {
+    /** function to be called on mouse click */
+    onMouseClick?: (
+      this: ElementNode,
+      event: MouseEvent,
+      active: ElementNode,
+    ) => void;
+  }
+}
+
 function createKeyboardEvent(
   key: string,
   keyCode: number,
@@ -29,6 +41,7 @@ function createKeyboardEvent(
   });
 }
 
+let scrollTimeout: number;
 const handleScroll = throttle((e: WheelEvent): void => {
   const deltaY = e.deltaY;
   if (deltaY < 0) {
@@ -36,6 +49,14 @@ const handleScroll = throttle((e: WheelEvent): void => {
   } else if (deltaY > 0) {
     document.body.dispatchEvent(createKeyboardEvent('ArrowDown', 40));
   }
+
+  // clear the last timeout if the user is still scrolling
+  clearTimeout(scrollTimeout);
+  // after 250ms of no scroll events, we send a keyup event to stop the scrolling
+  scrollTimeout = setTimeout(() => {
+    document.body.dispatchEvent(createKeyboardEvent('ArrowUp', 38, 'keyup'));
+    document.body.dispatchEvent(createKeyboardEvent('ArrowDown', 40, 'keyup'));
+  }, 250);
 }, 250);
 
 const handleClick = (e: MouseEvent): void => {
@@ -46,18 +67,42 @@ const handleClick = (e: MouseEvent): void => {
     testCollision(
       e.clientX,
       e.clientY,
-      (active.lng.absX as number) || 0 * precision,
-      (active.lng.absY as number) || 0 * precision,
-      active.width || 0 * precision,
-      active.height || 0 * precision,
+      ((active.lng.absX as number) || 0) * precision,
+      ((active.lng.absY as number) || 0) * precision,
+      (active.width || 0) * precision,
+      (active.height || 0) * precision,
     )
   ) {
+    if (isFunc(active.onMouseClick)) {
+      active.onMouseClick.call(active, e, active);
+      return;
+    }
+
     document.dispatchEvent(createKeyboardEvent('Enter', 13));
     setTimeout(
       () =>
         document.body.dispatchEvent(createKeyboardEvent('Enter', 13, 'keyup')),
       1,
     );
+  } else {
+    let parent = active?.parent;
+    while (parent) {
+      if (
+        isFunc(parent.onMouseClick) &&
+        testCollision(
+          e.clientX,
+          e.clientY,
+          ((parent.lng.absX as number) || 0) * precision,
+          ((parent.lng.absY as number) || 0) * precision,
+          (parent.width || 0) * precision,
+          (parent.height || 0) * precision,
+        )
+      ) {
+        parent.onMouseClick.call(parent, e, active!);
+        return;
+      }
+      parent = parent.parent;
+    }
   }
 };
 
@@ -95,8 +140,8 @@ function getChildrenByPosition(
         testCollision(
           x,
           y,
-          (currentNode.lng.absX as number) || 0 * precision,
-          (currentNode.lng.absY as number) || 0 * precision,
+          ((currentNode.lng.absX as number) || 0) * precision,
+          ((currentNode.lng.absY as number) || 0) * precision,
           (currentNode.width || 0) * precision,
           (currentNode.height || 0) * precision,
         )

package/src/primitives/utils/handleNavigation.ts

@@ -24,7 +24,7 @@ function findFirstFocusableChildIdx(
         i = (i + el.children.length) % el.children.length;
       } else break;
     }
-    if (!el.children[i]!.skipFocus) {
+    if (!el.children[i]?.skipFocus) {
       return i;
     }
   }
@@ -41,12 +41,14 @@ function selectChild(el: lngp.NavigableElement, index: number): boolean {
 
   const lastSelected = el.selected;
   el.selected = index;
-  child.setFocus();
 
-  if (lastSelected !== index || !lng.hasFocus(el)) {
-    el.onSelectedChanged?.(index, el, child as lng.ElementNode, lastSelected);
+  if (!lng.isFocused(child)) {
+    child.setFocus();
   }
 
+  // Always call onSelectedChanged on first focus for clients
+  el.onSelectedChanged?.(index, el, child as lng.ElementNode, lastSelected);
+
   return true;
 }
 
@@ -90,10 +92,11 @@ export const navigableForwardFocus: lng.ForwardFocusHandler = function () {
   let selected = navigable.selected;
   selected = idxInArray(selected, this.children) ? selected : 0;
   selected = findFirstFocusableChildIdx(navigable, selected);
+  // update selected as firstfocusable maybe different if first element has skipFocus
+  navigable.selected = selected;
   return selectChild(navigable, selected);
 };
 
-/** @deprecated Use {@link navigableHandleNavigation} instead */
 export function handleNavigation(
   direction: 'up' | 'right' | 'down' | 'left',
 ): lng.KeyHandler {

package/src/primitives/utils/withScrolling.ts

@@ -5,6 +5,13 @@ 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;
@@ -33,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;
@@ -51,6 +54,7 @@ export function withScrolling(isRow: boolean) {
     if (
       !componentRef ||
       componentRef.scroll === 'none' ||
+      selected === lastSelected ||
       !componentRef.children.length
     )
       return;
@@ -60,7 +64,7 @@ export function withScrolling(isRow: boolean) {
     }
 
     const lng = componentRef.lng as unknown as INode;
-    const screenSize = isRow ? lng.stage.root.width : lng.stage.root.height;
+    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;
@@ -69,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];
       }
 
@@ -90,10 +95,9 @@ export function withScrolling(isRow: boolean) {
 
     // 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 =
@@ -115,7 +119,7 @@ export function withScrolling(isRow: boolean) {
       screenSize -
         containerSize -
         screenOffset -
-        (componentRef.endOffset || 2 * gap),
+        (componentRef.endOffset ?? 2 * gap),
       offset,
     );
 
@@ -156,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;
       }
@@ -186,3 +191,6 @@ export function withScrolling(isRow: boolean) {
     }
   };
 }
+
+export const scrollRow = /* @__PURE__ */ withScrolling(true);
+export const scrollColumn = /* @__PURE__ */ withScrolling(false);

package/src/render.ts

@@ -156,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/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;
+}