@lightningtv/solid 2.10.6 → 2.10.8

package/src/primitives/Virtual.tsx

@@ -10,24 +10,22 @@ export type VirtualProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
   bufferSize?: number;
   wrap?: boolean;
   scrollIndex?: number;
-  doScroll?: lngp.Scroller;
   onEndReached?: () => void;
   onEndReachedThreshold?: number;
-  fallback?: s.JSX.Element;
+  debugInfo?: boolean;
+  factorScale?: boolean;
+  uniformSize?: boolean;
   children: (item: s.Accessor<T>, index: s.Accessor<number>) => s.JSX.Element;
 };
 
 function createVirtual<T>(
   component: typeof lngp.Row | typeof lngp.Column,
   props: VirtualProps<T>,
-  scrollFn: ReturnType<typeof lngp.withScrolling>,
   keyHandlers: Record<string, lng.KeyHandler>
 ) {
   const [cursor, setCursor] = s.createSignal(props.selected ?? 0);
   const bufferSize = s.createMemo(() => props.bufferSize || 2);
-  const scrollIndex = s.createMemo(() => {
-    return props.scrollIndex || 0;
-  });
+  const scrollIndex = s.createMemo(() => props.scrollIndex || 0);
   const items = s.createMemo(() => props.each || []);
   const itemCount = s.createMemo(() => items().length);
   const scrollType = s.createMemo(() => props.scroll || 'auto');
@@ -39,55 +37,270 @@ function createVirtual<T>(
     return props.selected || 0;
   };
 
-  const start = () => {
-    if (itemCount() === 0) return 0;
-    if (props.wrap) {
-      return utils.mod(cursor() - Math.max(bufferSize(), scrollIndex()), itemCount());
-    }
-    if (scrollType() === 'always') {
-      return Math.min(Math.max(cursor() - bufferSize(), 0), itemCount() - props.displaySize - bufferSize());
-    }
-    if (scrollType() === 'auto') {
-      return utils.clamp(cursor() - Math.max(bufferSize(), scrollIndex()), 0, Math.max(0, itemCount() - props.displaySize - bufferSize()));
-    }
-    return utils.clamp(cursor() - bufferSize(), 0, Math.max(0, itemCount() - props.displaySize));
-  };
+  let cachedScaledSize: number | undefined;
+  let targetPosition: number | undefined;
+  let cachedAnimationController: lng.IAnimationController | undefined;
+  const uniformSize = s.createMemo(() => {
+    return props.uniformSize !== false;
+  });
 
-  const end = () => {
-    if (itemCount() === 0) return 0;
-    if (props.wrap) {
-      return (start() + props.displaySize + bufferSize()) % itemCount();
-    }
-    return Math.min(itemCount(), start() + props.displaySize + bufferSize());
-  };
+  type SliceState = { start: number; slice: T[]; selected: number, delta: number, shiftBy: number, atStart: boolean };
+    const [slice, setSlice] = s.createSignal<SliceState>({
+      start: 0,
+      slice: [],
+      selected: 0,
+      delta: 0,
+      shiftBy: 0,
+      atStart: true,
+    });
 
-  const getSlice = s.createMemo(() => {
-    if (itemCount() === 0) return [];
-    if (!props.wrap) {
-      return items().slice(start(), end());
+    function normalizeDeltaForWindow(delta: number, windowLen: number): number {
+      if (!windowLen) return 0;
+      const half = windowLen / 2;
+      if (delta > half) return delta - windowLen;
+      if (delta < -half) return delta + windowLen;
+      return delta;
     }
-    // Wrapping slice
-    const sIdx = start();
-    const eIdx = (sIdx + props.displaySize + bufferSize()) % itemCount();
-    if (sIdx < eIdx) {
-      return items().slice(sIdx, eIdx);
+
+    function computeSize(selected: number = 0) {
+      if (uniformSize() && cachedScaledSize) {
+        return cachedScaledSize;
+      } else if (viewRef) {
+        const gap = viewRef.gap || 0;
+        const isRow = component === lngp.Row;
+        const dimension = isRow ? 'width' : 'height';
+        const prevSelectedChild = viewRef.children[selected];
+
+        if (prevSelectedChild instanceof lng.ElementNode) {
+          const itemSize = prevSelectedChild[dimension] || 0;
+          const focusStyle = (prevSelectedChild.style?.focus as lng.NodeStyles);
+          const scale = (focusStyle?.scale ?? prevSelectedChild.scale ?? 1);
+          const scaledSize = itemSize * (props.factorScale ? scale : 1) + gap;
+          cachedScaledSize = scaledSize;
+          return scaledSize;
+        }
+      }
+      return 0;
     }
-    return [...items().slice(sIdx), ...items().slice(0, eIdx)];
-  });
 
-  const [slice, setSlice] = s.createSignal(getSlice());
+    function computeSlice(c: number, delta: number, prev: SliceState): SliceState {
+      const total = itemCount();
+      if (total === 0) return { start: 0, slice: [], selected: 0, delta, shiftBy: 0, atStart: true };
+
+      const length = props.displaySize + bufferSize();
+      let start = prev.start;
+      let selected = prev.selected;
+      let atStart = prev.atStart;
+      let shiftBy = -delta;
+
+      switch (scrollType()) {
+        case 'always':
+          if (props.wrap) {
+            start = utils.mod(c - 1, total);
+            selected = 1;
+          } else {
+            start = utils.clamp(
+              c - bufferSize(),
+              0,
+              Math.max(0, total - props.displaySize - bufferSize()),
+            );
+            if (delta === 0 && c > 3) {
+              shiftBy = c < 3 ? -c : -2;
+              selected = 2;
+            } else {
+              selected =
+                c < bufferSize()
+                  ? c
+                  : c >= total - props.displaySize
+                  ? c - (total - props.displaySize) + bufferSize()
+                  : bufferSize();
+            }
+          }
+          break;
+
+        case 'auto':
+        if (props.wrap) {
+          if (scrollIndex() && prev.selected < scrollIndex()) {
+            start = total - 1;
+            selected = Math.max(1, prev.selected + delta);
+          } else {
+            start = utils.mod(c - (scrollIndex() || 1), total);
+            selected = Math.max(1, prev.selected);
+          }
+        } else {
+          if (delta < 0) {
+            // Moving left
+            if (prev.start > 0 && prev.selected >= props.displaySize) {
+              // Move selection left inside slice
+              start = prev.start;
+              selected = prev.selected - 1;
+            } else if (prev.start > 0) {
+              // Move selection left inside slice
+              start = prev.start - 1;
+              selected = prev.selected;
+              // shiftBy = 0;
+            } else if (prev.start === 0 && !prev.atStart) {
+              start = 0;
+              selected = prev.selected - 1;
+              atStart = true;
+            }  else if (selected >= props.displaySize - 1) {
+              // Shift window left, keep selection pinned
+              start = 0;
+              selected = prev.selected - 1;
+            } else {
+              start = 0;
+              selected = prev.selected - 1;
+              shiftBy = 0;
+            }
+          } else if (delta > 0) {
+            // Moving right
+            if (prev.selected < scrollIndex()) {
+              // Move selection right inside slice
+              start = prev.start;
+              selected = prev.selected + 1;
+              shiftBy = 0;
+            } else if (prev.selected === scrollIndex()) {
+              start = prev.start;
+              selected = prev.selected + 1;
+              atStart = false;
+            } else if (prev.start === 0 && prev.selected === 0) {
+              start = 0;
+              selected = 1;
+              atStart = false;
+            } else if (prev.start >= total - props.displaySize) {
+              // At end: clamp slice, selection drifts right
+              start = prev.start;
+              selected = c - start;
+              shiftBy = 0;
+            } else {
+              // Shift window right, keep selection pinned
+              start = prev.start + 1;
+              selected = Math.max(prev.selected, scrollIndex() + 1);;
+            }
+          } else {
+            // Initial setup
+            if (c > 0) {
+              start = Math.min(c - (scrollIndex() || 1), total - props.displaySize - bufferSize());
+              selected = Math.max(scrollIndex() || 1, c - start);
+              shiftBy = total - c < 3 ? c - total : -1;
+              atStart = false;
+            } else {
+              start = prev.start;
+              selected = prev.selected;
+            }
+          }
+        }
+        break;
+
+        case 'edge':
+          const startScrolling = Math.max(1, props.displaySize - 1);
+          if (props.wrap) {
+            if (delta > 0) {
+              if (prev.selected < startScrolling) {
+                selected = prev.selected + 1;
+                shiftBy = 0;
+              } else {
+                start = utils.mod(prev.start + 1, total);
+                selected = startScrolling;
+              }
+            } else if (delta < 0) {
+              if (prev.selected > 1) {
+                selected = prev.selected - 1;
+                shiftBy = 0;
+              } else {
+                start = utils.mod(prev.start - 1, total);
+                selected = 1;
+              }
+            } else {
+              start = utils.mod(c - 1, total);
+              selected = 1;
+            }
+          } else {
+            if (delta === 0 && c > 0) {
+              //initial setup
+              selected = c > startScrolling ? startScrolling : c;
+              start = Math.max(0, c - startScrolling + 1);
+              shiftBy = c > startScrolling ? -1 : 0;
+              atStart = c < startScrolling;
+            } else if (delta > 0) {
+              if (prev.selected < startScrolling - 1) {
+                selected = prev.selected + 1;
+                shiftBy = 0;
+              } else {
+                start = prev.start + 1;
+                selected = prev.selected;
+                atStart = false;
+              }
+            } else if (delta < 0) {
+              if (prev.selected > 1) {
+                selected = prev.selected - 1;
+                shiftBy = 0;
+              } else if (c > 1) {
+                start = Math.max(0, c - 1);
+                selected = 1;
+              } else if (!atStart) {
+                start = 0;
+                selected = 0;
+                atStart = true;
+              } else {
+                start = 0;
+                selected = 0;
+                shiftBy = 0;
+                atStart = true;
+              }
+            }
+          }
+          break;
+
+        case 'none':
+        default:
+          start = 0;
+          selected = c;
+          shiftBy = 0;
+          break;
+      }
+
+      let newSlice = prev.slice;
+      if (start !== prev.start || newSlice.length === 0) {
+        newSlice = props.wrap
+          ? Array.from(
+              { length },
+              (_, i) => items()[utils.mod(start + i, total)],
+            ) as T[]
+          : items().slice(start, start + length);
+      }
+
+      const state: SliceState = { start, slice: newSlice, selected, delta, shiftBy, atStart };
+
+      if (props.debugInfo) {
+        console.log(`[Virtual]`, {
+          cursor: c,
+          delta,
+          start,
+          selected,
+          shiftBy,
+          slice: state.slice,
+        });
+      }
+
+      return state;
+    }
 
   let viewRef!: lngp.NavigableElement;
 
   function scrollToIndex(this: lng.ElementNode, index: number) {
     if (itemCount() === 0) return;
-    let target = index;
-    if (props.wrap) {
-      target = utils.mod(index, itemCount());
-    } else {
-      target = utils.clamp(index, 0, itemCount() - 1);
-    }
-    updateSelected([target]);
+    updateSelected([utils.clamp(index, 0, itemCount() - 1)]);
+  }
+
+  let lastNavTime = 0;
+
+  function getAdaptiveDuration(duration: number = 250) {
+    const now = performance.now();
+    const delta = now - lastNavTime;
+    lastNavTime = now;
+    if (delta < duration) return delta;
+    return duration;
   }
 
   const onSelectedChanged: lngp.OnSelectedChanged = function (_idx, elm, _active, _lastIdx) {
@@ -95,116 +308,108 @@ function createVirtual<T>(
     let lastIdx = _lastIdx || 0;
     let active = _active;
     const initialRun = idx === lastIdx;
+    const total = itemCount();
+    const isRow = component === lngp.Row;
+    const axis = isRow ? 'x' : 'y';
+
+    if (props.onSelectedChanged) {
+      props.onSelectedChanged.call(this as lngp.NavigableElement, idx, this as lngp.NavigableElement, active, lastIdx);
+    }
 
     if (initialRun && !props.wrap) return;
 
+    const rawDelta = idx - (lastIdx ?? 0);
+    const windowLen =
+          elm?.children?.length ?? props.displaySize + bufferSize();
+    const delta = props.wrap
+          ? normalizeDeltaForWindow(rawDelta, windowLen)
+          : rawDelta;
+
     if (!initialRun) {
-      if (props.wrap) {
-        setCursor(c => utils.mod(c + idx - lastIdx, itemCount()));
-      } else {
-        setCursor(c => utils.clamp(c + idx - lastIdx, 0, Math.max(0, itemCount() - 1)));
-      }
+      setCursor(c => {
+        const next = c + delta;
+        return props.wrap
+          ? utils.mod(next, total)
+          : utils.clamp(next, 0, total - 1);
+      });
 
-      setSlice(getSlice());
+      const newState = computeSlice(cursor(), delta, slice());
+      setSlice(newState);
+      elm.selected = newState.selected;
 
-      const c = cursor();
-      const scroll = scrollType();
-      if (props.wrap) {
-        this.selected = Math.max(bufferSize(), scrollIndex());
-      } else if (props.scrollIndex) {
-        this.selected = Math.min(c, props.scrollIndex);
-        if (c >= itemCount() - props.displaySize + bufferSize()) {
-          this.selected = c - (itemCount() - props.displaySize) + bufferSize();
-        }
-      } else if (scroll === 'always' || scroll === 'auto') {
-        if (c < bufferSize()) {
-          this.selected = c;
-        } else if (c >= itemCount() - props.displaySize) {
-          this.selected = c - (itemCount() - props.displaySize) + bufferSize();
-        } else {
-          this.selected = bufferSize();
-        }
-      }
-
-      if (props.onEndReachedThreshold !== undefined && cursor() >= items().length - props.onEndReachedThreshold) {
+      if (
+        props.onEndReachedThreshold !== undefined &&
+        cursor() >= itemCount() - props.onEndReachedThreshold
+      ) {
         props.onEndReached?.();
       }
+
+      if (newState.shiftBy === 0) return;
     }
-    const isRow = component === lngp.Row;
-    const prevChildPos = isRow
-      ? this.x + active.x
-      : this.y + active.y;
+
+    const prevChildPos = (targetPosition ?? this[axis]) + active[axis];
 
     queueMicrotask(() => {
-      this.updateLayout();
-      if (this._initialPosition === undefined && props.wrap) {
-        this.offset = 0;
-        const axis = isRow ? 'x' : 'y';
-        this._initialPosition = this[axis];
-        if (scrollIndex() > 0) {
-          active = this.children[1] as lng.ElementNode;
-        }
-      }
-      if (component === lngp.Row) {
-        this.lng.x = this._targetPosition = prevChildPos - active.x;
-      } else {
-        this.lng.y = this._targetPosition = prevChildPos - active.y;
+      elm.updateLayout();
+      const childSize = computeSize(slice().selected);
+
+      if (cachedAnimationController && cachedAnimationController.state === 'running') {
+        cachedAnimationController.stop();;
       }
-      scrollFn(idx, elm, active, lastIdx);
+      this.lng[axis] = prevChildPos - active[axis];
+      let offset = this.lng[axis] + (childSize * slice().shiftBy);
+      targetPosition = offset;
+      cachedAnimationController = this.animate(
+        { [axis]: offset },
+        { ...this.animationSettings, duration: getAdaptiveDuration(this.animationSettings?.duration)}
+      ).start();
     });
   };
 
-  const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
-
-  const updateSelected = ([selected, _items]: [number?, any?]) => {
-    if (!viewRef || selected === undefined) return;
-    const sel = selected;
+  const updateSelected = ([sel, _items]: [number?, any?]) => {
+    if (!viewRef || sel === undefined || itemCount() === 0) return;
     const item = items()[sel];
-    let active = viewRef.children.find(x => x.item === item);
-    const lastSelected = viewRef.selected;
-
-    if (active instanceof lng.ElementNode) {
-      viewRef.selected = viewRef.children.indexOf(active);
-      chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-      active.setFocus();
-    } else {
-      setCursor(sel);
-      setSlice(getSlice());
-      queueMicrotask(() => {
-        viewRef.updateLayout();
-        active = viewRef.children.find(x => x.item === item);
-        if (active instanceof lng.ElementNode) {
-          viewRef.selected = viewRef.children.indexOf(active);
-          chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-        }
-      });
-    }
+    setCursor(sel);
+    const newState = computeSlice(cursor(), 0, slice());
+    setSlice(newState);
+
+    queueMicrotask(() => {
+      viewRef.updateLayout();
+      if (slice().shiftBy) {
+        const isRow = component === lngp.Row;
+        const axis = isRow ? 'x' : 'y';
+        const childSize = computeSize(slice().selected);
+        viewRef.lng[axis] = viewRef.lng[axis]! + (childSize * slice().shiftBy);
+        targetPosition = viewRef.lng[axis];
+      }
+      let activeIndex = viewRef.children.findIndex(x => x.item === item);
+      if (activeIndex === -1) return;
+      viewRef.selected = activeIndex;
+      viewRef.children[activeIndex]?.setFocus();
+    });
   };
 
-  s.createEffect(s.on([() => props.selected, items], updateSelected));
+  s.createEffect(s.on([() => props.selected, items], updateSelected, { defer: true }));
 
   s.createEffect(s.on(items, () => {
-    if (!viewRef) return;
+    if (!viewRef || itemCount() === 0) return;
     if (cursor() >= itemCount()) {
-      setCursor(Math.max(0, itemCount() - 1));
+      setCursor(itemCount() - 1);
     }
-    setSlice(getSlice());
-  }, { defer: true }));
+    const newState = computeSlice(cursor(), 0, slice());
+    setSlice(newState);
+    viewRef.selected = newState.selected;
+  }));
 
   return (<view
       {...props}
+      {...keyHandlers}
       ref={lngp.chainRefs(el => { viewRef = el as lngp.NavigableElement; }, props.ref)}
       selected={selected()}
       cursor={cursor()}
-      {...keyHandlers}
       forwardFocus={/* @once */ lngp.navigableForwardFocus}
       scrollToIndex={/* @once */ scrollToIndex}
-      onCreate={/* @once */
-        props.selected
-          ? lngp.chainFunctions(props.onCreate, scrollFn)
-          : props.onCreate
-      }
-      onSelectedChanged={/* @once */ chainedOnSelectedChanged}
+      onSelectedChanged={/* @once */ onSelectedChanged}
       style={/* @once */ lng.combineStyles(
         props.style,
         component === lngp.Row
@@ -221,21 +426,21 @@ function createVirtual<T>(
             }
       )}
     >
-      <List each={slice()}>{props.children}</List>
+      <List each={slice().slice}>{props.children}</List>
     </view>
   );
 }
 
 export function VirtualRow<T>(props: VirtualProps<T>) {
-  return createVirtual(lngp.Row, props, props.doScroll || lngp.withScrolling(true), {
-    onLeft: lngp.chainFunctions(props.onLeft, lngp.navigableHandleNavigation) as lng.KeyHandler,
-    onRight: lngp.chainFunctions(props.onRight, lngp.navigableHandleNavigation) as lng.KeyHandler,
+  return createVirtual(lngp.Row, props, {
+    onLeft: lngp.chainFunctions(props.onLeft, lngp.handleNavigation('left')) as lng.KeyHandler,
+    onRight: lngp.chainFunctions(props.onRight, lngp.handleNavigation('right')) as lng.KeyHandler,
   });
 }
 
 export function VirtualColumn<T>(props: VirtualProps<T>) {
-  return createVirtual(lngp.Column, props, props.doScroll || lngp.withScrolling(false), {
-    onUp: lngp.chainFunctions(props.onUp, lngp.navigableHandleNavigation) as lng.KeyHandler,
-    onDown: lngp.chainFunctions(props.onDown, lngp.navigableHandleNavigation) as lng.KeyHandler,
+  return createVirtual(lngp.Column, props, {
+    onUp: lngp.chainFunctions(props.onUp, lngp.handleNavigation('up')) as lng.KeyHandler,
+    onDown: lngp.chainFunctions(props.onDown, lngp.handleNavigation('down')) as lng.KeyHandler,
   });
 }

package/src/primitives/VirtualGrid.tsx

@@ -14,12 +14,6 @@ const rowStyles: lng.NodeStyles = {
   },
 };
 
-function scrollToIndex(this: lng.ElementNode, index: number) {
-  this.selected = index;
-  columnScroll(index, this);
-  this.setFocus();
-}
-
 export type VirtualGridProps<T> = lng.NewOmit<lngp.RowProps, 'children'> & {
   each: readonly T[] | undefined | null | false;
   columns: number; // items per row
@@ -99,9 +93,9 @@ export function VirtualGrid<T>(props: VirtualGridProps<T>): s.JSX.Element {
     const prevRowIndex = Math.floor((lastIdx || 0) / perRow);
     const prevStart = start();
 
+    setCursor(prevStart + idx);
     if (newRowIndex === prevRowIndex) return;
 
-    setCursor(prevStart + idx);
     setSlice(items().slice(start(), end()));
 
     // this.selected is relative to the slice
@@ -118,49 +112,70 @@ export function VirtualGrid<T>(props: VirtualGridProps<T>): s.JSX.Element {
     queueMicrotask(() => {
       const prevRowY = this.y + active.y;
       this.updateLayout();
-      // if (prevRowY > active.y) {
-      // }
       this.lng.y = prevRowY - active.y;
-      // this.y = prevRowY - active.y;
       columnScroll(idx, elm, active, lastIdx);
     });
   };
 
   const chainedOnSelectedChanged = lngp.chainFunctions(props.onSelectedChanged, onSelectedChanged)!;
 
-  s.createEffect(
-    s.on([() => props.selected, items], ([selected]) => {
-      if (!viewRef || selected == null) return;
+  let cachedSelected: number | undefined;
+  const updateSelected = ([selected, _items]: [number?, any?]) => {
+    if (!viewRef || selected == null) return;
 
-      const item = items()[selected];
-      let active = viewRef.children.find(x => x.item === item);
-      const lastSelected = viewRef.selected;
+    if (cachedSelected !== undefined) {
+      selected = cachedSelected;
+      cachedSelected = undefined;
+    }
 
-      if (active instanceof lng.ElementNode) {
-        viewRef.selected = viewRef.children.indexOf(active);
-        chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-      } else {
-        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);
-            chainedOnSelectedChanged.call(viewRef, viewRef.selected, viewRef, active, lastSelected);
-          }
-        });
-      }
-    })
-  );
+    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) => {
+    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}