@gtkx/components 2.0.0-beta.12 → 2.0.0-beta.13

package/src/internal/collection-model.ts

@@ -7,16 +7,32 @@ import { registerClass } from "@gtkx/runtime";
 import type { CollectionIndex, Level } from "./collection-index.js";
 import type { TreeExpansion } from "./tree-expansion.js";
 import { createCollectionIndex } from "./collection-index.js";
+import type { LevelKeys, Relocate, Splice } from "./level-splice.js";
 import { encodePart } from "./keys.js";
-import { adoptIndex, createTreeExpansion, pruneSlots } from "./tree-expansion.js";
+import {
+    findSplice,
+    hasSplice,
+    matchMoves,
+    NO_SPLICE,
+    relocateEntries,
+    relocateSlot,
+    searchableSplice,
+} from "./level-splice.js";
+import { adoptIndex, createTreeExpansion, pruneSlots, relocateSlots } from "./tree-expansion.js";
 
 type LevelStore = Gio.ListModel & LazyLevelStore;
 
 type SlotRef = {
+    key: string;
     store: LazyLevelStore;
     slot: number;
 };
 
+type SlotItem = {
+    ref: SlotRef;
+    object: Gtk.StringObject;
+};
+
 type SyncContext = {
     index: CollectionIndex;
     expansion: TreeExpansion;
@@ -27,7 +43,13 @@ type SlotRun = {
     length: number;
 };
 
+type Serial = {
+    value: number;
+};
+
 type ModelState = {
+    version: number;
+    listeners: Set<() => void>;
     root: CollectionRootStore | null;
     model: Gtk.FlattenListModel | null;
     groupStores: Map<number, LevelStore>;
@@ -38,10 +60,13 @@ type ModelState = {
 
 type CollectionModel = {
     expansion: TreeExpansion;
+    subscribe: (onChange: () => void) => () => void;
+    getVersion: () => number;
+    isPending: (index: CollectionIndex) => boolean;
     rowAt: (position: number) => Gtk.TreeListRow | null;
     bind: (root: CollectionRootStore, model: Gtk.FlattenListModel) => void;
     clear: () => void;
-    sync: (index: CollectionIndex) => void;
+    sync: (index: CollectionIndex, onSectionsFilled: () => void) => void;
 };
 
 type CollectionRootProps = { ref: Ref<CollectionRootStore> };
@@ -50,6 +75,13 @@ const STORE_CLASS_KEY = Symbol.for("gtkx.components.lazy-level-store");
 const ROOT_CLASS_KEY = Symbol.for("gtkx.components.collection-root-store");
 const SLOTS_KEY = Symbol.for("gtkx.components.lazy-level-store.slots");
 const EMPTY_INDEX = createCollectionIndex(undefined, [], true);
+const serial: Serial = { value: 0 };
+
+function nextKey(): string {
+    serial.value += 1;
+
+    return String(serial.value);
+}
 
 function sharedSlots(): WeakMap<GObject.Object, SlotRef> {
     const cached: unknown = Reflect.get(globalThis, SLOTS_KEY);
@@ -90,16 +122,20 @@ function registeredRootClass(): unknown {
     return CollectionRootStore;
 }
 
-function slotRefFor(value: GObject.Object | null): SlotRef | null {
+function anySlotRefFor(value: GObject.Object | null): SlotRef | null {
     const item = value instanceof Gtk.TreeListRow ? value.getItem() : value;
 
-    if (item === null) {
-        return null;
-    }
+    return item === null ? null : (sharedSlots().get(item) ?? null);
+}
 
-    const ref = sharedSlots().get(item);
+function slotRefFor(value: GObject.Object | null): SlotRef | null {
+    const ref = anySlotRefFor(value);
 
-    return ref === undefined || ref.slot === -1 ? null : ref;
+    return ref === null || ref.slot === -1 ? null : ref;
+}
+
+function levelStoreFor(value: GObject.Object | null): LazyLevelStore | null {
+    return anySlotRefFor(value)?.store ?? null;
 }
 
 function slotPathAt(store: LazyLevelStore, slot: number): string {
@@ -113,22 +149,68 @@ function newLevelStore(level: Level): LevelStore {
     return store;
 }
 
-function collectFlips(previous: Level, next: Level, overlap: number): Set<number> {
+function itemKeys(previous: Level, next: Level): LevelKeys {
+    return {
+        previousLength: previous.items.length,
+        nextLength: next.items.length,
+        previousKey: (slot) => previous.items[slot]?.id ?? "",
+        nextKey: (slot) => next.items[slot]?.id ?? "",
+    };
+}
+
+function groupKey(index: CollectionIndex, group: number): string {
+    const level = index.groups[group];
+
+    return level?.section?.id ?? "";
+}
+
+function groupKeys(previous: CollectionIndex, next: CollectionIndex): LevelKeys {
+    return {
+        previousLength: previous.groups.length,
+        nextLength: next.groups.length,
+        previousKey: (group) => groupKey(previous, group),
+        nextKey: (group) => groupKey(next, group),
+    };
+}
+
+function isExpandableAt(level: Level, slot: number): boolean {
+    return level.expandableFlags[slot] ?? false;
+}
+
+function collectFlips(previous: Level, next: Level, splice: Splice): Set<number> {
     const flipped: Set<number> = new Set();
 
     if (previous.expandableFlags.length === 0 && next.expandableFlags.length === 0) {
         return flipped;
     }
 
-    for (let slot = 0; slot < overlap; slot++) {
-        if ((previous.expandableFlags[slot] ?? false) !== (next.expandableFlags[slot] ?? false)) {
+    for (let slot = 0; slot < splice.start; slot++) {
+        if (isExpandableAt(previous, slot) !== isExpandableAt(next, slot)) {
             flipped.add(slot);
         }
     }
 
+    const shift = splice.added - splice.removed;
+
+    for (let slot = splice.start + splice.removed; slot < previous.items.length; slot++) {
+        if (isExpandableAt(previous, slot) !== isExpandableAt(next, slot + shift)) {
+            flipped.add(slot + shift);
+        }
+    }
+
     return flipped;
 }
 
+function detachStore(store: LevelStore): void {
+    for (const { ref } of store.slots.values()) {
+        ref.slot = -1;
+    }
+
+    for (const child of store.childStores.values()) {
+        detachStore(child);
+    }
+}
+
 function pruneFlips(context: SyncContext, store: LevelStore, flipped: Set<number>): void {
     if (flipped.size === 0) {
         return;
@@ -137,42 +219,45 @@ function pruneFlips(context: SyncContext, store: LevelStore, flipped: Set<number
     pruneSlots(context.expansion, store.level.path, (slot) => flipped.has(slot));
 
     for (const slot of flipped) {
-        store.childStores.delete(slot);
-    }
-}
+        const child = store.childStores.get(slot);
 
-function detachRefs(store: LevelStore, nextLength: number): void {
-    for (const [slot, ref] of store.refs) {
-        if (slot < nextLength) {
-            continue;
+        if (child !== undefined) {
+            detachStore(child);
+            store.childStores.delete(slot);
         }
-
-        ref.slot = -1;
-        store.refs.delete(slot);
-        store.objects.delete(slot);
-        store.childStores.delete(slot);
     }
 }
 
-function shrinkStore(context: SyncContext, store: LevelStore, previousLength: number, nextLength: number): void {
-    if (previousLength <= nextLength) {
+function renewKeys(store: LevelStore, previous: Level, from: number, to: number): void {
+    if (from === to) {
         return;
     }
 
-    detachRefs(store, nextLength);
-    pruneSlots(context.expansion, store.level.path, (slot) => slot >= nextLength);
+    for (const [slot, { ref }] of store.slots) {
+        if (slot >= from && slot < to && previous.items[slot]?.id !== store.level.items[slot]?.id) {
+            ref.key = nextKey();
+        }
+    }
 }
 
-function emitTailSplice(store: LevelStore, previousLength: number, nextLength: number): void {
-    if (nextLength < previousLength) {
-        store.itemsChanged(nextLength, previousLength - nextLength, 0);
+function relocateStore(context: SyncContext, store: LevelStore, keys: LevelKeys, splice: Splice): void {
+    const moves = matchMoves(keys, splice, store.slots.keys());
+    const shift: Relocate = (slot) => relocateSlot(splice, slot);
 
-        return;
-    }
+    store.slots = relocateEntries(
+        store.slots,
+        (slot) => relocateSlot(splice, slot, moves),
+        ({ ref }) => {
+            ref.slot = -1;
+        },
+    );
 
-    if (nextLength > previousLength) {
-        store.itemsChanged(previousLength, 0, nextLength - previousLength);
+    for (const [slot, { ref }] of store.slots) {
+        ref.slot = slot;
     }
+
+    store.childStores = relocateEntries(store.childStores, shift, detachStore);
+    relocateSlots(context.expansion, store.level.path, shift);
 }
 
 function extendRuns(runs: SlotRun[], slot: number): void {
@@ -205,20 +290,26 @@ function emitFlips(store: LevelStore, flipped: Set<number>): void {
 
 function syncLevel(context: SyncContext, store: LevelStore, level: Level): void {
     const previous = store.level;
-    const previousLength = previous.items.length;
-    const overlap = Math.min(previousLength, level.items.length);
-    const flipped = collectFlips(previous, level, overlap);
+    const keys = itemKeys(previous, level);
+    const found = previous.items === level.items ? NO_SPLICE : findSplice(keys);
+    const splice = searchableSplice(found, found.added);
     store.level = level;
+    renewKeys(store, previous, found.start, splice.start);
+
+    if (hasSplice(splice)) {
+        relocateStore(context, store, keys, splice);
+    }
+
+    const flipped = collectFlips(previous, level, splice);
     pruneFlips(context, store, flipped);
-    shrinkStore(context, store, previousLength, level.items.length);
-    emitTailSplice(store, previousLength, level.items.length);
+
+    if (hasSplice(splice)) {
+        store.itemsChanged(splice.start, splice.removed, splice.added);
+    }
+
     emitFlips(store, flipped);
 
     for (const [slot, child] of store.childStores) {
-        if (slot >= overlap || flipped.has(slot)) {
-            continue;
-        }
-
         const childLevel = context.index.childLevel(level, slot);
 
         if (childLevel !== undefined) {
@@ -230,7 +321,7 @@ function syncLevel(context: SyncContext, store: LevelStore, level: Level): void
 function ensureChildStore(index: CollectionIndex, store: LazyLevelStore, slot: number): LevelStore | null {
     const existing = store.childStores.get(slot) ?? null;
 
-    if (existing !== null || !(store.level.expandableFlags[slot] ?? false)) {
+    if (existing !== null || !isExpandableAt(store.level, slot)) {
         return existing;
     }
 
@@ -275,37 +366,51 @@ function rowAt(state: ModelState, position: number): Gtk.TreeListRow | null {
     return item instanceof Gtk.TreeListRow ? item : null;
 }
 
-function pruneGroups(state: ModelState, previous: CollectionIndex): void {
-    const hasModeChanged = previous.isTree !== state.index.isTree;
+function dropGroup(state: ModelState, store: LevelStore): void {
+    detachStore(store);
+    state.trees.delete(store);
+}
 
-    for (const [group, store] of state.groupStores) {
-        const isRemoved = group >= state.index.groups.length;
+function replaceGroups(state: ModelState, before: number): void {
+    for (const store of state.groupStores.values()) {
+        dropGroup(state, store);
+    }
 
-        if (isRemoved || hasModeChanged) {
-            pruneSlots(state.expansion, store.level.path, () => true);
-            state.trees.delete(store);
-        }
+    state.groupStores.clear();
+    state.expansion.expanded.clear();
+    state.expansion.slots.clear();
+    state.root?.itemsChanged(0, before, state.index.groups.length);
+}
 
-        if (isRemoved) {
-            state.groupStores.delete(group);
-        }
-    }
+function addedRows(index: CollectionIndex, splice: Splice): number {
+    return index.groups
+        .slice(splice.start, splice.start + splice.added)
+        .reduce((rows, level) => rows + level.items.length, 0);
 }
 
 function syncRoot(state: ModelState, previous: CollectionIndex): void {
-    const before = previous.groups.length;
-    const after = state.index.groups.length;
-
     if (previous.isTree !== state.index.isTree) {
-        state.root?.itemsChanged(0, before, after);
+        replaceGroups(state, previous.groups.length);
 
         return;
     }
 
-    if (before !== after) {
-        const start = Math.min(before, after);
-        state.root?.itemsChanged(start, before - start, after - start);
+    const keys = groupKeys(previous, state.index);
+    const found = findSplice(keys);
+    const splice = searchableSplice(found, addedRows(state.index, found));
+
+    if (!hasSplice(splice)) {
+        return;
     }
+
+    const moves = matchMoves(keys, splice, state.groupStores.keys());
+    const relocate: Relocate = (group) => relocateSlot(splice, group, moves);
+    state.groupStores = relocateEntries(state.groupStores, relocate, (store) => {
+        dropGroup(state, store);
+    });
+    relocateSlots(state.expansion, "", relocate);
+
+    state.root?.itemsChanged(splice.start, splice.removed, splice.added);
 }
 
 function stepGroupStores(state: ModelState, context: SyncContext): void {
@@ -318,7 +423,17 @@ function stepGroupStores(state: ModelState, context: SyncContext): void {
     }
 }
 
-function syncModel(state: ModelState, index: CollectionIndex): void {
+function rowCount(index: CollectionIndex): number {
+    return index.groups.reduce((rows, level) => rows + level.items.length, 0);
+}
+
+function hasFilledSections(previous: CollectionIndex, index: CollectionIndex): boolean {
+    return (
+        rowCount(previous) === 0 && index.groups.some((level) => level.section !== undefined && level.items.length > 0)
+    );
+}
+
+function syncModel(state: ModelState, index: CollectionIndex, onSectionsFilled: () => void): void {
     if (state.root === null) {
         return;
     }
@@ -329,14 +444,22 @@ function syncModel(state: ModelState, index: CollectionIndex): void {
     state.expansion.isSyncing = true;
 
     try {
-        pruneGroups(state, previous);
         syncRoot(state, previous);
         stepGroupStores(state, context);
+
+        if (hasFilledSections(previous, index)) {
+            onSectionsFilled();
+        }
     } finally {
         state.expansion.isSyncing = false;
     }
 
     adoptIndex(state.expansion, index);
+    state.version += 1;
+
+    for (const listener of state.listeners) {
+        listener();
+    }
 }
 
 function clearModel(state: ModelState): void {
@@ -368,6 +491,8 @@ function clearModel(state: ModelState): void {
 
 function createCollectionModel(): CollectionModel {
     const state: ModelState = {
+        version: 0,
+        listeners: new Set(),
         root: null,
         model: null,
         groupStores: new Map(),
@@ -378,6 +503,15 @@ function createCollectionModel(): CollectionModel {
 
     return {
         expansion: state.expansion,
+        subscribe: (onChange) => {
+            state.listeners.add(onChange);
+
+            return () => {
+                state.listeners.delete(onChange);
+            };
+        },
+        getVersion: () => state.version,
+        isPending: (index) => state.root !== null && state.index !== index,
         rowAt: (position) => rowAt(state, position),
         bind: (root, model) => {
             root.state = state;
@@ -387,8 +521,8 @@ function createCollectionModel(): CollectionModel {
         clear: () => {
             clearModel(state);
         },
-        sync: (index) => {
-            syncModel(state, index);
+        sync: (index, onSectionsFilled) => {
+            syncModel(state, index, onSectionsFilled);
         },
     };
 }
@@ -426,19 +560,18 @@ class CollectionRootStore extends GObject.Object implements Gio.ListModelImpl {
 
 class LazyLevelStore extends GObject.Object implements Gio.ListModelImpl {
     declare itemsChanged: Gio.ListModel["itemsChanged"];
+    key: string = nextKey();
     level: Level = { path: "", items: [], expandableFlags: [] };
-    refs: Map<number, SlotRef> = new Map();
-    objects: Map<number, Gtk.StringObject> = new Map();
+    slots: Map<number, SlotItem> = new Map();
     childStores: Map<number, LevelStore> = new Map();
 
     private createItem(position: number): Gtk.StringObject {
-        const ref = { store: this, slot: position };
-        const created = Gtk.StringObject.new("");
-        this.refs.set(position, ref);
-        this.objects.set(position, created);
-        sharedSlots().set(created, ref);
+        const ref = { key: nextKey(), store: this, slot: position };
+        const object = Gtk.StringObject.new("");
+        this.slots.set(position, { ref, object });
+        sharedSlots().set(object, ref);
 
-        return created;
+        return object;
     }
 
     vfuncGetItemType(): bigint {
@@ -454,7 +587,7 @@ class LazyLevelStore extends GObject.Object implements Gio.ListModelImpl {
             return null;
         }
 
-        return this.objects.get(position) ?? this.createItem(position);
+        return this.slots.get(position)?.object ?? this.createItem(position);
     }
 }
 
@@ -466,9 +599,11 @@ const CollectionRoot: (props: CollectionRootProps) => ReactNode = createElementC
 export {
     CollectionRoot,
     createCollectionModel,
+    levelStoreFor,
     slotPathAt,
     slotRefFor,
     type CollectionModel,
     type CollectionRootStore,
+    type LazyLevelStore,
     type SlotRef,
 };

package/src/internal/collection.ts

@@ -1,18 +1,19 @@
 import type * as Gtk from "@gtkx/gi/gtk";
 import type { ListItem } from "../types.js";
-import type { CollectionIndex, SectionIdentity } from "./collection-index.js";
+import type { CollectionIndex } from "./collection-index.js";
 import type { CollectionModel, SlotRef } from "./collection-model.js";
 import type { MatchedRows } from "./tree-order.js";
 import { slotPathAt, slotRefFor } from "./collection-model.js";
+import { orderFor } from "./tree-expansion.js";
 import { findIds, findRows } from "./tree-order.js";
 
-type Collection = Pick<CollectionModel, "expansion" | "rowAt"> & {
+type Collection = Pick<CollectionModel, "expansion" | "rowAt" | "subscribe" | "getVersion"> & {
     isTree: boolean;
     itemAt: (ref: SlotRef) => ListItem | undefined;
-    sectionFor: (levelPath: string) => SectionIdentity | undefined;
     idAt: (position: number) => string | null;
     idsAt: (positions: number[]) => string[];
     pathAt: (position: number) => string | null;
+    isPending: () => boolean;
     positionFor: (id: string) => number;
     rowsFor: (ids: string[]) => MatchedRows;
 };
@@ -31,9 +32,7 @@ function rowsFor(gtkModel: CollectionModel, ids: string[]): MatchedRows {
 }
 
 function positionFor(gtkModel: CollectionModel, id: string): number {
-    const [first = -1] = rowsFor(gtkModel, [id]).positions;
-
-    return first;
+    return orderFor(gtkModel.expansion).positions.get(id) ?? -1;
 }
 
 function refAt(model: Gtk.FlattenListModel | null, position: number): SlotRef | null {
@@ -44,14 +43,14 @@ function refAt(model: Gtk.FlattenListModel | null, position: number): SlotRef |
     return slotRefFor(model?.getItem(position) ?? null);
 }
 
-function itemAt(index: CollectionIndex, ref: SlotRef): ListItem | undefined {
-    return index.itemAt(ref.store.level.path, ref.slot);
+function itemAt(ref: SlotRef): ListItem | undefined {
+    return ref.store.level.items[ref.slot];
 }
 
-function idAt(model: Gtk.FlattenListModel | null, index: CollectionIndex, position: number): string | null {
+function idAt(model: Gtk.FlattenListModel | null, position: number): string | null {
     const ref = refAt(model, position);
 
-    return ref === null ? null : (itemAt(index, ref)?.id ?? null);
+    return ref === null ? null : (itemAt(ref)?.id ?? null);
 }
 
 function pathAt(model: Gtk.FlattenListModel | null, position: number): string | null {
@@ -89,11 +88,13 @@ function createCollection(
         expansion: gtkModel.expansion,
         isTree: index.isTree,
         rowAt: gtkModel.rowAt,
-        itemAt: (ref) => itemAt(index, ref),
-        sectionFor: index.sectionFor,
-        idAt: (position) => idAt(model, index, position),
+        subscribe: gtkModel.subscribe,
+        getVersion: gtkModel.getVersion,
+        itemAt,
+        idAt: (position) => idAt(model, position),
         idsAt: (positions) => idsAt(gtkModel, positions),
         pathAt: (position) => pathAt(model, position),
+        isPending: () => gtkModel.isPending(index),
         positionFor: (id) => positionFor(gtkModel, id),
         rowsFor: (ids) => rowsFor(gtkModel, ids),
     };

package/src/internal/controlled-sync.ts

@@ -8,6 +8,13 @@ type ControlledSyncOptions<T> = {
     apply: (value: T) => void;
 };
 
+function hasSameIds(reported: string[], requested: string[]): boolean {
+    const wanted = new Set(requested);
+    const actual = new Set(reported);
+
+    return actual.size === wanted.size && actual.isSubsetOf(wanted);
+}
+
 function useControlledSync<T>(options: ControlledSyncOptions<T>): () => void {
     const { value, source, target } = options;
     const [drift, setDrift] = useState(0);
@@ -27,4 +34,4 @@ function useControlledSync<T>(options: ControlledSyncOptions<T>): () => void {
     return markDrift;
 }
 
-export { useControlledSync };
+export { hasSameIds, useControlledSync };