@gtkx/components 1.0.0 → 1.2.0

package/src/internal/expansion.ts

@@ -1,4 +1,3 @@
-import type * as Gtk from "@gtkx/gi/gtk";
 import { useState } from "react";
 import type { Collection } from "./collection.js";
 import type { TreeExpansion } from "./tree-expansion.js";
@@ -8,7 +7,7 @@ import { useControlledSync } from "./controlled-sync.js";
 import { joinParts } from "./keys.js";
 import { trackPaths } from "./slots.js";
 import { adoptOrder, markExpanded, orderFor } from "./tree-expansion.js";
-import { walkVisible } from "./tree-order.js";
+import { expandedPathsFor, walkVisible } from "./tree-order.js";
 
 type ExpansionOptions = {
     collection: Collection;
@@ -35,30 +34,20 @@ function newLastExpansion(): LastExpansion {
     return { key: "" };
 }
 
-function wantedSet(expansion: TreeExpansion, expandedIds: string[]): Set<string> {
-    const wanted: Set<string> = new Set();
-
-    for (const id of expandedIds) {
-        for (const path of expansion.index.expandablePathsFor(id)) {
-            wanted.add(path);
-        }
-    }
-
-    return wanted;
-}
-
 function hasSameExpansion(expanded: Set<string>, wanted: Set<string>): boolean {
     return expanded.size === wanted.size && wanted.isSubsetOf(expanded);
 }
 
-function toggleOptions(expansion: TreeExpansion, tree: Gtk.TreeListModel, wanted: Set<string>): WalkOptions {
+function toggleOptions(collection: Collection, wanted: Set<string>): WalkOptions {
+    const { expansion } = collection;
+
     return {
         index: expansion.index,
         slots: trackPaths(wanted),
         marks: trackPaths(wanted.symmetricDifference(expansion.expanded)),
         visit: (row) => {
             if (row.isMarked) {
-                tree.getRow(row.position)?.setExpanded(row.isOpen);
+                collection.rowAt(row.position)?.setExpanded(row.isOpen);
             }
         },
     };
@@ -74,14 +63,15 @@ function walkApplying(expansion: TreeExpansion, options: WalkOptions): VisibleOr
     }
 }
 
-function applyWanted(expansion: TreeExpansion, tree: Gtk.TreeListModel, expandedIds: string[]): void {
-    const wanted = wantedSet(expansion, expandedIds);
+function applyWanted(collection: Collection, expandedIds: string[]): void {
+    const { expansion } = collection;
+    const wanted = expandedPathsFor(expansion.index, new Set(expandedIds));
 
     if (hasSameExpansion(expansion.expanded, wanted)) {
         return;
     }
 
-    adoptOrder(expansion, walkApplying(expansion, toggleOptions(expansion, tree, wanted)));
+    adoptOrder(expansion, walkApplying(expansion, toggleOptions(collection, wanted)));
 }
 
 function reportExpansion(context: ExpansionContext): void {
@@ -97,18 +87,16 @@ function reportExpansion(context: ExpansionContext): void {
 }
 
 function applyControlledExpansion(context: ExpansionContext, expandedIds: string[] | null | undefined): void {
-    const tree = context.collection.treeModel();
-
-    if (tree === null) {
+    if (!context.collection.isTree) {
         return;
     }
 
-    applyWanted(context.collection.expansion, tree, expandedIds ?? []);
+    applyWanted(context.collection, expandedIds ?? []);
     reportExpansion(context);
 }
 
 function isExpansionIdle(collection: Collection): boolean {
-    return collection.treeModel() !== null && isCollectionIdle(collection);
+    return collection.isTree && isCollectionIdle(collection);
 }
 
 function didRowDrift(collection: Collection, change: ItemsChange): boolean {

package/src/internal/tree-expansion.ts

@@ -14,7 +14,7 @@ type TreeExpansion = {
     isSyncing: boolean;
 };
 
-function dropSubtree(expansion: TreeExpansion, path: string): void {
+function dropLevel(expansion: TreeExpansion, path: string, pending: string[]): void {
     expansion.expanded.delete(path);
     const level = expansion.slots.get(path);
 
@@ -25,7 +25,19 @@ function dropSubtree(expansion: TreeExpansion, path: string): void {
     expansion.slots.delete(path);
 
     for (const slot of level) {
-        dropSubtree(expansion, path + encodePart(String(slot)));
+        pending.push(path + encodePart(String(slot)));
+    }
+}
+
+function dropSubtree(expansion: TreeExpansion, path: string): void {
+    const pending: string[] = [path];
+
+    while (pending.length > 0) {
+        const current = pending.pop();
+
+        if (current !== undefined) {
+            dropLevel(expansion, current, pending);
+        }
     }
 }
 
@@ -87,12 +99,6 @@ function markExpanded(expansion: TreeExpansion, path: string, isExpanded: boolea
     prunePath(expansion, path);
 }
 
-function resetExpansion(expansion: TreeExpansion): void {
-    expansion.expanded = new Set();
-    expansion.slots = new Map();
-    expansion.order = null;
-}
-
 function adoptIndex(expansion: TreeExpansion, index: CollectionIndex): void {
     expansion.index = index;
     expansion.order = null;
@@ -105,6 +111,5 @@ export {
     markExpanded,
     orderFor,
     pruneSlots,
-    resetExpansion,
     type TreeExpansion,
 };

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. */