@gtkx/components 1.0.0 → 1.1.0

package/src/internal/tree-order.ts

@@ -1,11 +1,8 @@
 import type { ListItem } from "../types.js";
 import type { CollectionIndex, Level } from "./collection-index.js";
 import type { SlotMap } from "./slots.js";
-import { encodePart } from "./keys.js";
 
 type VisibleRow = {
-    level: Level;
-    slot: number;
     item: ListItem;
     position: number;
     isOpen: boolean;
@@ -26,9 +23,12 @@ type WalkOptions = {
     visit?: RowVisitor | undefined;
 };
 
-type WalkFrame = {
+type LevelFrame = {
     level: Level;
     cursor: number;
+};
+
+type WalkFrame = LevelFrame & {
     open: Set<number> | undefined;
     marked: Set<number> | undefined;
 };
@@ -40,23 +40,55 @@ type WalkState = {
     order: VisibleOrder;
 };
 
-const NO_LEVEL: Level = { path: "", items: [], expandableFlags: [] };
+type OpenFrame = LevelFrame & {
+    owner: ListItem | null;
+};
+
+type OpenWalk = {
+    index: CollectionIndex;
+    ids: Set<string>;
+    paths: Set<string>;
+    stack: OpenFrame[];
+    ancestors: Set<ListItem>;
+};
+
 const NO_ITEM: ListItem = { id: "", value: undefined };
 
-const getRowPath = (row: VisibleRow): string => row.level.path + encodePart(String(row.slot));
+function advanceStack<F extends LevelFrame>(
+    stack: F[],
+    onSlot: (frame: F, slot: number) => void,
+    onLeave?: (frame: F) => void,
+): void {
+    const frame = stack.at(-1);
+
+    if (frame === undefined) {
+        return;
+    }
+
+    if (frame.cursor >= frame.level.items.length) {
+        stack.pop();
+        onLeave?.(frame);
+
+        return;
+    }
+
+    const slot = frame.cursor;
+    frame.cursor += 1;
+    onSlot(frame, slot);
+}
 
 function frameFor(options: WalkOptions, level: Level): WalkFrame {
     return { level, cursor: 0, open: options.slots.get(level.path), marked: options.marks?.get(level.path) };
 }
 
-function descend(state: WalkState, path: string): void {
-    const child = state.options.index.children.get(path);
+function descend(state: WalkState, level: Level, slot: number): void {
+    const child = state.options.index.childLevel(level, slot);
 
-    if (child === undefined || child.items.length === 0) {
+    if (child === undefined) {
         return;
     }
 
-    state.order.expandedPaths.push(path);
+    state.order.expandedPaths.push(child.path);
     state.order.expandedIds.push(state.row.item.id);
     state.stack.push(frameFor(state.options, child));
 }
@@ -69,8 +101,6 @@ function visitSlot(state: WalkState, frame: WalkFrame, slot: number): void {
     }
 
     const { row } = state;
-    row.level = frame.level;
-    row.slot = slot;
     row.item = item;
     row.isOpen = frame.open?.has(slot) ?? false;
     row.isMarked = frame.marked?.has(slot) ?? false;
@@ -78,35 +108,74 @@ function visitSlot(state: WalkState, frame: WalkFrame, slot: number): void {
     row.position += 1;
 
     if (row.isOpen) {
-        descend(state, getRowPath(row));
+        descend(state, frame.level, slot);
     }
 }
 
-function advanceFrame(state: WalkState): void {
-    const frame = state.stack.at(-1);
+function walkVisible(options: WalkOptions): VisibleOrder {
+    const order: VisibleOrder = { expandedPaths: [], expandedIds: [] };
+    const row: VisibleRow = { item: NO_ITEM, position: 0, isOpen: false, isMarked: false };
+    const frames = options.index.groups.map((level) => frameFor(options, level));
+    const state: WalkState = { options, stack: frames.toReversed(), row, order };
 
-    if (frame === undefined || frame.cursor >= frame.level.items.length) {
-        state.stack.pop();
+    const onSlot = (frame: WalkFrame, slot: number): void => {
+        visitSlot(state, frame, slot);
+    };
+
+    while (state.stack.length > 0) {
+        advanceStack(state.stack, onSlot);
+    }
 
+    return order;
+}
+
+function openSlot(walk: OpenWalk, frame: OpenFrame, slot: number): void {
+    const item = frame.level.items[slot];
+
+    if (item === undefined || !walk.ids.has(item.id) || walk.ancestors.has(item)) {
         return;
     }
 
-    const slot = frame.cursor;
-    frame.cursor += 1;
-    visitSlot(state, frame, slot);
+    const child = walk.index.childLevel(frame.level, slot);
+
+    if (child === undefined) {
+        return;
+    }
+
+    walk.paths.add(child.path);
+    walk.ancestors.add(item);
+    walk.stack.push({ level: child, cursor: 0, owner: item });
 }
 
-function walkVisible(options: WalkOptions): VisibleOrder {
-    const order: VisibleOrder = { expandedPaths: [], expandedIds: [] };
-    const row: VisibleRow = { level: NO_LEVEL, slot: 0, item: NO_ITEM, position: 0, isOpen: false, isMarked: false };
-    const frames = options.index.groups.map((level) => frameFor(options, level));
-    const state: WalkState = { options, stack: frames.toReversed(), row, order };
+function leaveOpenFrame(walk: OpenWalk, frame: OpenFrame): void {
+    if (frame.owner !== null) {
+        walk.ancestors.delete(frame.owner);
+    }
+}
 
-    while (state.stack.length > 0) {
-        advanceFrame(state);
+function expandedPathsFor(index: CollectionIndex, ids: Set<string>): Set<string> {
+    const paths: Set<string> = new Set();
+
+    if (ids.size === 0 || !index.isTree) {
+        return paths;
     }
 
-    return order;
+    const frames = index.groups.map((level) => ({ level, cursor: 0, owner: null }));
+    const walk: OpenWalk = { index, ids, paths, stack: frames.toReversed(), ancestors: new Set() };
+
+    const onSlot = (frame: OpenFrame, slot: number): void => {
+        openSlot(walk, frame, slot);
+    };
+
+    const onLeave = (frame: OpenFrame): void => {
+        leaveOpenFrame(walk, frame);
+    };
+
+    while (walk.stack.length > 0) {
+        advanceStack(walk.stack, onSlot, onLeave);
+    }
+
+    return paths;
 }
 
 function buildVisibleOrder(index: CollectionIndex, slots: SlotMap): VisibleOrder {
@@ -131,6 +200,7 @@ function findPositions(index: CollectionIndex, slots: SlotMap, ids: Set<string>)
 
 export {
     buildVisibleOrder,
+    expandedPathsFor,
     findPositions,
     walkVisible,
     type VisibleOrder,

package/src/types.ts

@@ -17,7 +17,7 @@ type ListItem<T = unknown> = {
     id: string;
     /** Payload handed to the cell renderer as `ListItemRenderArgs.item`. */
     value: T;
-    /** Child items nested under this one, which turn a plain item list into a tree. */
+    /** Child items nested under this one, which turn a plain item list into a tree, read only as rows are drawn. */
     children?: ListItem<T>[] | undefined;
     /** Hides the tree expander arrow even when the item has children, through `hide-expander`. */
     shouldHideExpander?: boolean | undefined;
@@ -119,7 +119,8 @@ type ExpansionProps = {
     /**
      * Ids of the items to keep expanded; omitting it keeps every row collapsed, and `onExpandedChange` is how a
      * user's expansion is adopted into it. An id repeated in several branches names every matching row, so all of
-     * them expand together.
+     * them expand together. An item whose children lead back to itself expands one level at a time, since a row
+     * repeating an item already expanded above it stays collapsed.
      */
     expandedIds?: string[] | null | undefined;
     /** Called with one id per expanded row, in visible order, whenever expansion changes. */