@gtkx/components 2.0.0-beta.10 → 2.0.0-beta.11

package/src/internal/collection-model.ts

@@ -1,6 +1,8 @@
+import type { ReactNode, Ref } from "react";
 import * as Gio from "@gtkx/gi/gio";
 import * as GObject from "@gtkx/gi/gobject";
 import * as Gtk from "@gtkx/gi/gtk";
+import { createElementComponent } from "@gtkx/react";
 import { registerClass } from "@gtkx/runtime";
 import type { CollectionIndex, Level } from "./collection-index.js";
 import type { TreeExpansion } from "./tree-expansion.js";
@@ -25,35 +27,29 @@ type SlotRun = {
     length: number;
 };
 
-type LevelSync = {
-    store: LevelStore;
-    level: Level;
-};
-
 type ModelState = {
-    root: Gio.ListStore;
-    rootModels: GObject.Object[];
-    model: Gtk.FlattenListModel;
-    groupStores: LevelStore[];
+    root: CollectionRootStore | null;
+    model: Gtk.FlattenListModel | null;
+    groupStores: Map<number, LevelStore>;
     trees: Map<LevelStore, Gtk.TreeListModel>;
-    treeModels: Gtk.TreeListModel[];
     expansion: TreeExpansion;
     index: CollectionIndex;
 };
 
 type CollectionModel = {
-    model: Gtk.FlattenListModel;
     expansion: TreeExpansion;
     rowAt: (position: number) => Gtk.TreeListRow | null;
+    bind: (root: CollectionRootStore, model: Gtk.FlattenListModel) => void;
+    clear: () => void;
     sync: (index: CollectionIndex) => void;
 };
 
+type CollectionRootProps = { ref: Ref<CollectionRootStore> };
+
 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, undefined, true);
-const SLOTS = sharedSlots();
-
-const newRootStore = (): Gio.ListStore => new Gio.ListStore({ itemType: GObject.TYPE_OBJECT });
+const EMPTY_INDEX = createCollectionIndex(undefined, [], true);
 
 function sharedSlots(): WeakMap<GObject.Object, SlotRef> {
     const cached: unknown = Reflect.get(globalThis, SLOTS_KEY);
@@ -81,6 +77,19 @@ function registeredStoreClass(): typeof LazyLevelStore {
     return LazyLevelStore;
 }
 
+function registeredRootClass(): unknown {
+    const cached: unknown = Reflect.get(globalThis, ROOT_CLASS_KEY);
+
+    if (typeof cached === "function") {
+        return cached;
+    }
+
+    registerClass(CollectionRootStore, { typeName: "GtkxCollectionRootStore", implements: [Gio.ListModel] });
+    Reflect.set(globalThis, ROOT_CLASS_KEY, CollectionRootStore);
+
+    return CollectionRootStore;
+}
+
 function slotRefFor(value: GObject.Object | null): SlotRef | null {
     const item = value instanceof Gtk.TreeListRow ? value.getItem() : value;
 
@@ -88,7 +97,7 @@ function slotRefFor(value: GObject.Object | null): SlotRef | null {
         return null;
     }
 
-    const ref = SLOTS.get(item);
+    const ref = sharedSlots().get(item);
 
     return ref === undefined || ref.slot === -1 ? null : ref;
 }
@@ -194,44 +203,7 @@ function emitFlips(store: LevelStore, flipped: Set<number>): void {
     }
 }
 
-function childSync(
-    context: SyncContext,
-    store: LevelStore,
-    slot: number,
-    flipped: Set<number>,
-): LevelSync | undefined {
-    const child = store.childStores.get(slot) ?? null;
-
-    if (child === null || flipped.has(slot)) {
-        return undefined;
-    }
-
-    const level = context.index.childLevel(store.level, slot);
-
-    return level === undefined ? undefined : { store: child, level };
-}
-
-function childSyncs(context: SyncContext, store: LevelStore, overlap: number, flipped: Set<number>): LevelSync[] {
-    const syncs: LevelSync[] = [];
-    const slots = store.childStores.keys().toArray().toSorted((left, right) => left - right);
-
-    for (const slot of slots) {
-        if (slot >= overlap) {
-            continue;
-        }
-
-        const sync = childSync(context, store, slot, flipped);
-
-        if (sync !== undefined) {
-            syncs.push(sync);
-        }
-    }
-
-    return syncs;
-}
-
-function syncEntry(context: SyncContext, entry: LevelSync): LevelSync[] {
-    const { store, level } = entry;
+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);
@@ -242,17 +214,15 @@ function syncEntry(context: SyncContext, entry: LevelSync): LevelSync[] {
     emitTailSplice(store, previousLength, level.items.length);
     emitFlips(store, flipped);
 
-    return childSyncs(context, store, overlap, flipped);
-}
-
-function syncLevel(context: SyncContext, store: LevelStore, level: Level): void {
-    const pending: LevelSync[] = [{ store, level }];
+    for (const [slot, child] of store.childStores) {
+        if (slot >= overlap || flipped.has(slot)) {
+            continue;
+        }
 
-    while (pending.length > 0) {
-        const entry = pending.pop();
+        const childLevel = context.index.childLevel(level, slot);
 
-        if (entry !== undefined) {
-            pending.push(...syncEntry(context, entry).toReversed());
+        if (childLevel !== undefined) {
+            syncLevel(context, child, childLevel);
         }
     }
 }
@@ -287,102 +257,81 @@ function childStoreFor(state: ModelState, object: GObject.Object): Gio.ListModel
 }
 
 function treeFor(state: ModelState, store: LevelStore): Gtk.TreeListModel {
-    return (
-        state.trees.get(store) ?? Gtk.TreeListModel.new(store, false, false, (object) => childStoreFor(state, object))
-    );
-}
+    const existing = state.trees.get(store);
 
-function nextTrees(state: ModelState, index: CollectionIndex): Map<LevelStore, Gtk.TreeListModel> {
-    if (!index.isTree) {
-        return new Map();
+    if (existing !== undefined) {
+        return existing;
     }
 
-    return new Map(state.groupStores.map((store) => [store, treeFor(state, store)]));
-}
-
-function pruneRebuiltLevels(state: ModelState, next: Map<LevelStore, Gtk.TreeListModel>): void {
-    const stores: Set<LevelStore> = new Set([...state.trees.keys(), ...next.keys()]);
+    const created = Gtk.TreeListModel.new(store, false, false, (object) => childStoreFor(state, object));
+    state.trees.set(store, created);
 
-    for (const store of stores) {
-        if (state.trees.get(store) !== next.get(store)) {
-            pruneSlots(state.expansion, store.level.path, () => true);
-        }
-    }
-}
-
-function adoptTrees(state: ModelState, index: CollectionIndex): void {
-    const next = nextTrees(state, index);
-    pruneRebuiltLevels(state, next);
-    state.trees = next;
-    state.treeModels = next.values().toArray();
+    return created;
 }
 
-function desiredRootModels(state: ModelState, index: CollectionIndex): GObject.Object[] {
-    adoptTrees(state, index);
+function rowAt(state: ModelState, position: number): Gtk.TreeListRow | null {
+    const item = state.model?.getItem(position);
 
-    return index.isTree ? [...state.treeModels] : [...state.groupStores];
+    return item instanceof Gtk.TreeListRow ? item : null;
 }
 
-function rowAt(state: ModelState, position: number): Gtk.TreeListRow | null {
-    let offset = position;
+function pruneGroups(state: ModelState, previous: CollectionIndex): void {
+    const hasModeChanged = previous.isTree !== state.index.isTree;
 
-    for (const tree of state.treeModels) {
-        const count = tree.getNItems();
+    for (const [group, store] of state.groupStores) {
+        const isRemoved = group >= state.index.groups.length;
 
-        if (offset < count) {
-            return tree.getRow(offset);
+        if (isRemoved || hasModeChanged) {
+            pruneSlots(state.expansion, store.level.path, () => true);
+            state.trees.delete(store);
         }
 
-        offset -= count;
+        if (isRemoved) {
+            state.groupStores.delete(group);
+        }
     }
-
-    return null;
 }
 
-function hasSameModels(previous: GObject.Object[], next: GObject.Object[]): boolean {
-    return previous.length === next.length && next.every((model, index) => previous[index] === model);
-}
+function syncRoot(state: ModelState, previous: CollectionIndex): void {
+    const before = previous.groups.length;
+    const after = state.index.groups.length;
 
-function syncRoot(state: ModelState, index: CollectionIndex): void {
-    const next = desiredRootModels(state, index);
+    if (previous.isTree !== state.index.isTree) {
+        state.root?.itemsChanged(0, before, after);
 
-    if (hasSameModels(state.rootModels, next)) {
         return;
     }
 
-    state.root.splice(0, state.rootModels.length, next);
-    state.rootModels = next;
-}
-
-function adjustGroupStores(state: ModelState, context: SyncContext): void {
-    const { groups } = context.index;
-    state.groupStores.length = Math.min(state.groupStores.length, groups.length);
-
-    for (const level of groups.slice(state.groupStores.length)) {
-        state.groupStores.push(newLevelStore(level));
+    if (before !== after) {
+        const start = Math.min(before, after);
+        state.root?.itemsChanged(start, before - start, after - start);
     }
 }
 
-function stepGroupStores(state: ModelState, context: SyncContext, surviving: number): void {
-    for (const [group, level] of context.index.groups.entries()) {
-        const store = state.groupStores[group];
+function stepGroupStores(state: ModelState, context: SyncContext): void {
+    for (const [group, store] of state.groupStores) {
+        const level = context.index.groups[group];
 
-        if (store !== undefined && group < surviving) {
+        if (level !== undefined && store.level !== level) {
             syncLevel(context, store, level);
         }
     }
 }
 
 function syncModel(state: ModelState, index: CollectionIndex): void {
+    if (state.root === null) {
+        return;
+    }
+
     const context: SyncContext = { index, expansion: state.expansion };
-    const surviving = Math.min(state.groupStores.length, index.groups.length);
+    const previous = state.index;
     state.index = index;
     state.expansion.isSyncing = true;
 
     try {
-        adjustGroupStores(state, context);
-        syncRoot(state, index);
-        stepGroupStores(state, context, surviving);
+        pruneGroups(state, previous);
+        syncRoot(state, previous);
+        stepGroupStores(state, context);
     } finally {
         state.expansion.isSyncing = false;
     }
@@ -390,31 +339,91 @@ function syncModel(state: ModelState, index: CollectionIndex): void {
     adoptIndex(state.expansion, index);
 }
 
-function createCollectionModel(): CollectionModel {
-    registeredStoreClass();
-    const root = newRootStore();
+function clearModel(state: ModelState): void {
+    const root = state.root;
+    const previousLength = state.index.groups.length;
+    state.expansion.isSyncing = true;
 
+    try {
+        if (root !== null) {
+            root.state = null;
+        }
+
+        state.root = null;
+        state.model = null;
+        state.index = EMPTY_INDEX;
+        state.groupStores.clear();
+        state.trees.clear();
+        state.expansion.expanded.clear();
+        state.expansion.slots.clear();
+        adoptIndex(state.expansion, EMPTY_INDEX);
+
+        if (previousLength > 0) {
+            root?.itemsChanged(0, previousLength, 0);
+        }
+    } finally {
+        state.expansion.isSyncing = false;
+    }
+}
+
+function createCollectionModel(): CollectionModel {
     const state: ModelState = {
-        root,
-        rootModels: [],
-        model: Gtk.FlattenListModel.new(root),
-        groupStores: [],
+        root: null,
+        model: null,
+        groupStores: new Map(),
         trees: new Map(),
-        treeModels: [],
         expansion: createTreeExpansion(EMPTY_INDEX),
         index: EMPTY_INDEX,
     };
 
     return {
-        model: state.model,
         expansion: state.expansion,
         rowAt: (position) => rowAt(state, position),
+        bind: (root, model) => {
+            root.state = state;
+            state.root = root;
+            state.model = model;
+        },
+        clear: () => {
+            clearModel(state);
+        },
         sync: (index) => {
             syncModel(state, index);
         },
     };
 }
 
+class CollectionRootStore extends GObject.Object implements Gio.ListModelImpl {
+    declare itemsChanged: Gio.ListModel["itemsChanged"];
+    state: ModelState | null = null;
+
+    vfuncGetItemType(): bigint {
+        return GObject.TYPE_OBJECT;
+    }
+
+    vfuncGetNItems(): number {
+        return this.state?.index.groups.length ?? 0;
+    }
+
+    vfuncGetItem(position: number): GObject.Object | null {
+        const state = this.state;
+        const level = state?.index.groups[position];
+
+        if (state === null || level === undefined) {
+            return null;
+        }
+
+        let store = state.groupStores.get(position);
+
+        if (store === undefined) {
+            store = newLevelStore(level);
+            state.groupStores.set(position, store);
+        }
+
+        return state.index.isTree ? treeFor(state, store) : store;
+    }
+}
+
 class LazyLevelStore extends GObject.Object implements Gio.ListModelImpl {
     declare itemsChanged: Gio.ListModel["itemsChanged"];
     level: Level = { path: "", items: [], expandableFlags: [] };
@@ -427,7 +436,7 @@ class LazyLevelStore extends GObject.Object implements Gio.ListModelImpl {
         const created = Gtk.StringObject.new("");
         this.refs.set(position, ref);
         this.objects.set(position, created);
-        SLOTS.set(created, ref);
+        sharedSlots().set(created, ref);
 
         return created;
     }
@@ -449,4 +458,17 @@ class LazyLevelStore extends GObject.Object implements Gio.ListModelImpl {
     }
 }
 
-export { createCollectionModel, slotPathAt, slotRefFor, type CollectionModel, type SlotRef };
+const CollectionRoot: (props: CollectionRootProps) => ReactNode = createElementComponent<CollectionRootProps>(
+    "GtkxCollectionRootStore",
+    registeredRootClass(),
+);
+
+export {
+    CollectionRoot,
+    createCollectionModel,
+    slotPathAt,
+    slotRefFor,
+    type CollectionModel,
+    type CollectionRootStore,
+    type SlotRef,
+};

package/src/internal/collection.ts

@@ -1,14 +1,15 @@
+import type * as Gtk from "@gtkx/gi/gtk";
 import type { ListItem } from "../types.js";
-import type { CollectionIndex } from "./collection-index.js";
+import type { CollectionIndex, SectionIdentity } 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 { findIds, findRows } from "./tree-order.js";
 
-type Collection = Pick<CollectionModel, "model" | "expansion" | "rowAt"> & {
+type Collection = Pick<CollectionModel, "expansion" | "rowAt"> & {
     isTree: boolean;
     itemAt: (ref: SlotRef) => ListItem | undefined;
-    sectionFor: (levelPath: string) => unknown;
+    sectionFor: (levelPath: string) => SectionIdentity | undefined;
     idAt: (position: number) => string | null;
     idsAt: (positions: number[]) => string[];
     pathAt: (position: number) => string | null;
@@ -19,42 +20,42 @@ type Collection = Pick<CollectionModel, "model" | "expansion" | "rowAt"> & {
 const NO_ROWS: MatchedRows = { positions: [], ids: [] };
 const NO_IDS: string[] = [];
 
-function rowsFor(collectionModel: CollectionModel, ids: string[]): MatchedRows {
+function rowsFor(gtkModel: CollectionModel, ids: string[]): MatchedRows {
     if (ids.length === 0) {
         return NO_ROWS;
     }
 
-    const { expansion } = collectionModel;
+    const { expansion } = gtkModel;
 
     return findRows(expansion.index, expansion.slots, new Set(ids));
 }
 
-function positionFor(collectionModel: CollectionModel, id: string): number {
-    const [first = -1] = rowsFor(collectionModel, [id]).positions;
+function positionFor(gtkModel: CollectionModel, id: string): number {
+    const [first = -1] = rowsFor(gtkModel, [id]).positions;
 
     return first;
 }
 
-function refAt(collectionModel: CollectionModel, position: number): SlotRef | null {
+function refAt(model: Gtk.FlattenListModel | null, position: number): SlotRef | null {
     if (position < 0) {
         return null;
     }
 
-    return slotRefFor(collectionModel.model.getItem(position));
+    return slotRefFor(model?.getItem(position) ?? null);
 }
 
 function itemAt(index: CollectionIndex, ref: SlotRef): ListItem | undefined {
     return index.itemAt(ref.store.level.path, ref.slot);
 }
 
-function idAt(collectionModel: CollectionModel, index: CollectionIndex, position: number): string | null {
-    const ref = refAt(collectionModel, position);
+function idAt(model: Gtk.FlattenListModel | null, index: CollectionIndex, position: number): string | null {
+    const ref = refAt(model, position);
 
     return ref === null ? null : (itemAt(index, ref)?.id ?? null);
 }
 
-function pathAt(collectionModel: CollectionModel, position: number): string | null {
-    const ref = refAt(collectionModel, position);
+function pathAt(model: Gtk.FlattenListModel | null, position: number): string | null {
+    const ref = refAt(model, position);
 
     if (ref === null) {
         return null;
@@ -63,12 +64,12 @@ function pathAt(collectionModel: CollectionModel, position: number): string | nu
     return slotPathAt(ref.store, ref.slot);
 }
 
-function idsAt(collectionModel: CollectionModel, positions: number[]): string[] {
+function idsAt(gtkModel: CollectionModel, positions: number[]): string[] {
     if (positions.length === 0) {
         return NO_IDS;
     }
 
-    const { expansion } = collectionModel;
+    const { expansion } = gtkModel;
 
     return findIds(expansion.index, expansion.slots, new Set(positions));
 }
@@ -79,19 +80,22 @@ function isCollectionIdle(collection: Collection): boolean {
     return !expansion.isApplying && !expansion.isSyncing;
 }
 
-function createCollection(collectionModel: CollectionModel, index: CollectionIndex): Collection {
+function createCollection(
+    gtkModel: CollectionModel,
+    index: CollectionIndex,
+    model: Gtk.FlattenListModel | null,
+): Collection {
     return {
-        model: collectionModel.model,
-        expansion: collectionModel.expansion,
+        expansion: gtkModel.expansion,
         isTree: index.isTree,
-        rowAt: collectionModel.rowAt,
+        rowAt: gtkModel.rowAt,
         itemAt: (ref) => itemAt(index, ref),
         sectionFor: index.sectionFor,
-        idAt: (position) => idAt(collectionModel, index, position),
-        idsAt: (positions) => idsAt(collectionModel, positions),
-        pathAt: (position) => pathAt(collectionModel, position),
-        positionFor: (id) => positionFor(collectionModel, id),
-        rowsFor: (ids) => rowsFor(collectionModel, ids),
+        idAt: (position) => idAt(model, index, position),
+        idsAt: (positions) => idsAt(gtkModel, positions),
+        pathAt: (position) => pathAt(model, position),
+        positionFor: (id) => positionFor(gtkModel, id),
+        rowsFor: (ids) => rowsFor(gtkModel, ids),
     };
 }
 

package/src/internal/controlled-sync.ts

@@ -1,18 +1,15 @@
 import { useLatestRef } from "@gtkx/react/internal";
 import { startTransition, useLayoutEffect, useState } from "react";
-import type { Collection } from "./collection.js";
 
-type ControlledIds = string[] | null | undefined;
-
-type ControlledSyncOptions = {
-    ids: ControlledIds;
-    collection: Collection;
-    widget?: object | null | undefined;
-    apply: (ids: ControlledIds) => void;
+type ControlledSyncOptions<T> = {
+    value: T;
+    source?: object | null | undefined;
+    target?: object | null | undefined;
+    apply: (value: T) => void;
 };
 
-function useControlledSync(options: ControlledSyncOptions): () => void {
-    const { ids, collection, widget } = options;
+function useControlledSync<T>(options: ControlledSyncOptions<T>): () => void {
+    const { value, source, target } = options;
     const [drift, setDrift] = useState(0);
 
     const markDrift = (): void => {
@@ -24,8 +21,8 @@ function useControlledSync(options: ControlledSyncOptions): () => void {
     const applyRef = useLatestRef(options.apply);
 
     useLayoutEffect(() => {
-        applyRef.current(ids);
-    }, [applyRef, widget, collection, ids, drift]);
+        applyRef.current(value);
+    }, [applyRef, target, source, value, drift]);
 
     return markDrift;
 }