@gtkx/react 0.18.9 → 0.19.0

package/src/nodes/internal/base-item-renderer.ts

@@ -54,7 +54,6 @@ export abstract class BaseItemRenderer<TStore = unknown> {
 
     protected createBox(): Gtk.Box {
         const box = new Gtk.Box(Gtk.Orientation.HORIZONTAL);
-        box.setValign(Gtk.Align.CENTER);
 
         if (this.estimatedItemHeight !== null) {
             box.setSizeRequest(-1, this.estimatedItemHeight);

package/src/nodes/internal/construct.ts

@@ -0,0 +1,90 @@
+import { type Arg, call, type NativeHandle, registerNativeObject, setInstantiating, type Type } from "@gtkx/ffi";
+import { typeFromName } from "@gtkx/ffi/gobject";
+import { CONSTRUCT_ONLY_PROPS, CONSTRUCTOR_PROPS } from "../../generated/internal.js";
+import type { Container, ContainerClass, Props } from "../../types.js";
+
+type ConstructOnlyPropInfo = { girName: string; ffiType: Type };
+
+/**
+ * Collects construct-only property metadata by walking the class hierarchy.
+ * Returns all active construct-only props (those with values set in the initial props)
+ * that are NOT already handled by the designated constructor parameters.
+ */
+function collectActiveConstructOnlyProps(
+    containerClass: ContainerClass,
+    props: Props,
+): Array<{ girName: string; ffiType: Type; value: unknown }> {
+    const result: Array<{ girName: string; ffiType: Type; value: unknown }> = [];
+    const constructorParams = new Set(CONSTRUCTOR_PROPS[containerClass.glibTypeName] ?? []);
+
+    // biome-ignore lint/suspicious/noExplicitAny: Walking static prototype chain
+    let current: any = containerClass;
+    while (current?.glibTypeName) {
+        const propsForType: Record<string, ConstructOnlyPropInfo> | undefined =
+            CONSTRUCT_ONLY_PROPS[current.glibTypeName as string];
+        if (propsForType) {
+            for (const [camelName, meta] of Object.entries(propsForType)) {
+                if (constructorParams.has(camelName)) continue;
+                if (props[camelName] !== undefined) {
+                    const rawValue = props[camelName];
+                    const value =
+                        meta.ffiType.type === "gobject" &&
+                        rawValue &&
+                        typeof rawValue === "object" &&
+                        "handle" in rawValue
+                            ? (rawValue as { handle: NativeHandle }).handle
+                            : rawValue;
+                    result.push({ girName: meta.girName, ffiType: meta.ffiType, value });
+                }
+            }
+        }
+        current = Object.getPrototypeOf(current);
+    }
+
+    return result;
+}
+
+/**
+ * Creates a container (widget or controller) with construct-only properties.
+ *
+ * When construct-only props are present that aren't handled by the designated
+ * constructor, uses `g_object_new` to set them during object construction.
+ * Otherwise falls back to the normal constructor.
+ */
+export function createContainerWithConstructOnly(
+    containerClass: ContainerClass,
+    props: Props,
+    normalConstructor: () => Container,
+): Container {
+    const constructOnlyArgs = collectActiveConstructOnlyProps(containerClass, props);
+
+    if (constructOnlyArgs.length === 0) {
+        return normalConstructor();
+    }
+
+    const typeName = containerClass.glibTypeName;
+    const gtype = typeFromName(typeName);
+
+    const args: Arg[] = [{ type: { type: "int", size: 64, unsigned: true }, value: gtype, optional: false }];
+
+    for (const { girName, ffiType, value } of constructOnlyArgs) {
+        args.push({ type: { type: "string", ownership: "borrowed" }, value: girName, optional: false });
+        args.push({ type: ffiType, value, optional: false });
+    }
+
+    args.push({ type: { type: "null" }, value: null, optional: false });
+
+    const handle = call("libgobject-2.0.so.0", "g_object_new", args, {
+        type: "gobject",
+        ownership: "full",
+    }) as NativeHandle;
+
+    setInstantiating(true);
+    // biome-ignore lint/suspicious/noExplicitAny: Dynamic instantiation with isInstantiating flag
+    const instance = new (containerClass as any)() as Container & { handle: NativeHandle };
+    setInstantiating(false);
+    instance.handle = handle;
+    registerNativeObject(instance);
+
+    return instance;
+}

package/src/nodes/internal/header-item-renderer.ts

@@ -0,0 +1,105 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type Reconciler from "react-reconciler";
+import { createFiberRoot } from "../../fiber-root.js";
+import { reconciler } from "../../reconciler.js";
+import type { SignalStore } from "./signal-store.js";
+
+type RenderHeaderFn = (item: unknown) => ReactNode;
+
+type ItemResolver = (id: string) => unknown;
+
+export class HeaderItemRenderer {
+    private factory: Gtk.SignalListItemFactory;
+    private fiberRoots = new Map<object, Reconciler.FiberRoot>();
+    private tornDown = new Set<object>();
+    private renderFn: RenderHeaderFn | null = () => null;
+    private boundHeaders = new Map<string, object>();
+    private signalStore: SignalStore;
+    private resolveItem: ItemResolver | null = null;
+
+    constructor(signalStore: SignalStore) {
+        this.signalStore = signalStore;
+        this.factory = new Gtk.SignalListItemFactory();
+        this.initializeFactory();
+    }
+
+    public getFactory(): Gtk.SignalListItemFactory {
+        return this.factory;
+    }
+
+    public setResolveItem(resolver: ItemResolver | null): void {
+        this.resolveItem = resolver;
+    }
+
+    public setRenderFn(renderFn: RenderHeaderFn | null): void {
+        this.renderFn = renderFn;
+        this.rebindAllHeaders();
+    }
+
+    public dispose(): void {
+        this.signalStore.clear(this);
+        this.fiberRoots.clear();
+        this.tornDown.clear();
+        this.boundHeaders.clear();
+    }
+
+    private rebindAllHeaders(): void {
+        for (const [id, header] of this.boundHeaders) {
+            const fiberRoot = this.fiberRoots.get(header);
+            if (!fiberRoot) continue;
+            const item = this.resolveItem?.(id) ?? null;
+            const element = this.renderFn?.(item);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {});
+        }
+    }
+
+    private initializeFactory(): void {
+        this.signalStore.set(this, this.factory, "setup", (listHeader: Gtk.ListHeader) => {
+            const box = new Gtk.Box(Gtk.Orientation.HORIZONTAL);
+            listHeader.setChild(box);
+            const fiberRoot = createFiberRoot(box);
+            this.fiberRoots.set(listHeader, fiberRoot);
+            const element = this.renderFn?.(null);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {});
+        });
+
+        this.signalStore.set(this, this.factory, "bind", (listHeader: Gtk.ListHeader) => {
+            const fiberRoot = this.fiberRoots.get(listHeader);
+            if (!fiberRoot) return;
+
+            const stringObject = listHeader.getItem();
+            let id: string | null = null;
+            if (stringObject instanceof Gtk.StringObject) {
+                id = stringObject.getString();
+            }
+
+            if (id !== null) {
+                this.boundHeaders.set(id, listHeader);
+            }
+
+            const item = id !== null && this.resolveItem ? this.resolveItem(id) : null;
+            const element = this.renderFn?.(item);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {});
+        });
+
+        this.signalStore.set(this, this.factory, "unbind", (listHeader: Gtk.ListHeader) => {
+            const stringObject = listHeader.getItem();
+            if (stringObject instanceof Gtk.StringObject) {
+                this.boundHeaders.delete(stringObject.getString());
+            }
+        });
+
+        this.signalStore.set(this, this.factory, "teardown", (listHeader: Gtk.ListHeader) => {
+            const fiberRoot = this.fiberRoots.get(listHeader);
+            if (fiberRoot) {
+                this.tornDown.add(listHeader);
+                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => {});
+                queueMicrotask(() => {
+                    this.fiberRoots.delete(listHeader);
+                    this.tornDown.delete(listHeader);
+                });
+            }
+        });
+    }
+}

package/src/nodes/internal/header-renderer-manager.ts

@@ -0,0 +1,33 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import { HeaderItemRenderer } from "./header-item-renderer.js";
+import type { SignalStore } from "./signal-store.js";
+
+type HeaderRendererConfig = {
+    signalStore: SignalStore;
+    isEnabled: () => boolean;
+    resolveItem: (id: string) => unknown;
+    setFactory: (factory: Gtk.SignalListItemFactory | null) => void;
+};
+
+export function updateHeaderRenderer(
+    current: HeaderItemRenderer | null,
+    config: HeaderRendererConfig,
+    renderFn: ((item: unknown) => ReactNode) | null | undefined,
+): HeaderItemRenderer | null {
+    if (renderFn) {
+        if (!current && config.isEnabled()) {
+            current = new HeaderItemRenderer(config.signalStore);
+            current.setResolveItem(config.resolveItem);
+            config.setFactory(current.getFactory());
+        }
+        if (current) {
+            current.setRenderFn(renderFn);
+        }
+    } else if (current) {
+        config.setFactory(null);
+        current.dispose();
+        current = null;
+    }
+    return current;
+}

package/src/nodes/internal/list-store.ts

@@ -1,32 +1,33 @@
-import * as Gtk from "@gtkx/ffi/gtk";
+import { SectionedListStore } from "./sectioned-list-store.js";
 
 type ItemUpdatedCallback = (id: string) => void;
 
-export class ListStore {
-    private model = new Gtk.StringList();
-    private ids: string[] = [];
-    private idToIndex = new Map<string, number>();
+export class ListStore extends SectionedListStore {
     private items = new Map<string, unknown>();
     private onItemUpdated: ItemUpdatedCallback | null = null;
-    private pendingBatch: string[] | null = null;
 
     public setOnItemUpdated(callback: ItemUpdatedCallback | null): void {
         this.onItemUpdated = callback;
     }
 
-    public beginBatch(): void {
-        this.pendingBatch = [];
+    protected override getInitialPendingBatch(): string[] | null {
+        return null;
     }
 
-    public flushBatch(): void {
-        const batch = this.pendingBatch;
-        this.pendingBatch = null;
-        if (batch && batch.length > 0) {
-            this.model.splice(0, 0, batch);
-        }
+    protected override getModelString(itemId: string, _item: unknown): string {
+        return itemId;
+    }
+
+    protected override onItemAdded(itemId: string, item: unknown): void {
+        this.items.set(itemId, item);
+    }
+
+    protected override onItemRemoved(itemId: string): void {
+        this.items.delete(itemId);
     }
 
     public addItem(id: string, item: unknown): void {
+        this.flushRemovals();
         this.items.set(id, item);
 
         const existingIndex = this.idToIndex.get(id);
@@ -46,18 +47,8 @@ export class ListStore {
         }
     }
 
-    public removeItem(id: string): void {
-        const index = this.idToIndex.get(id);
-        if (index === undefined) return;
-
-        this.model.remove(index);
-        this.ids.splice(index, 1);
-        this.idToIndex.delete(id);
-        this.rebuildIndices(index);
-        this.items.delete(id);
-    }
-
     public insertItemBefore(id: string, beforeId: string, item: unknown): void {
+        this.flushRemovals();
         this.items.set(id, item);
 
         const existingIndex = this.idToIndex.get(id);
@@ -93,13 +84,24 @@ export class ListStore {
         return this.items.get(id);
     }
 
-    public getModel(): Gtk.StringList {
+    public getHeaderValue(itemId: string): unknown {
+        const sectionId = this.itemToSection.get(itemId);
+        if (sectionId) {
+            return this.headerValues.get(sectionId);
+        }
+        return undefined;
+    }
+
+    public getHeaderValueById(sectionId: string): unknown {
+        return this.headerValues.get(sectionId);
+    }
+
+    public getStringList(): import("@gtkx/ffi/gtk").StringList {
         return this.model;
     }
 
-    private rebuildIndices(fromIndex: number): void {
-        for (let i = fromIndex; i < this.ids.length; i++) {
-            this.idToIndex.set(this.ids[i] as string, i);
-        }
+    public getNItems(): number {
+        this.flushRemovals();
+        return this.ids.length;
     }
 }

package/src/nodes/internal/sectioned-list-store.ts

@@ -0,0 +1,287 @@
+import * as Gio from "@gtkx/ffi/gio";
+import * as GObject from "@gtkx/ffi/gobject";
+import * as Gtk from "@gtkx/ffi/gtk";
+
+interface SectionData {
+    id: string;
+    model: Gtk.StringList;
+    itemIds: string[];
+    pendingBatch: string[] | null;
+}
+
+export abstract class SectionedListStore {
+    protected ids: string[] = [];
+    protected idToIndex = new Map<string, number>();
+    protected model = new Gtk.StringList();
+    protected pendingBatch: string[] | null = null;
+    private pendingRemovals: Set<string> | null = null;
+    private flushScheduled = false;
+
+    protected sectioned = false;
+    protected sections: SectionData[] = [];
+    protected sectionById = new Map<string, SectionData>();
+    protected itemToSection = new Map<string, string>();
+    protected headerValues = new Map<string, unknown>();
+    protected sectionContainer: Gio.ListStore | null = null;
+    protected flatModel: Gtk.FlattenListModel | null = null;
+
+    public enableSections(): void {
+        if (this.sectioned) return;
+        this.sectioned = true;
+        this.sectionContainer = new Gio.ListStore(GObject.typeFromName("GtkStringList"));
+        this.flatModel = new Gtk.FlattenListModel(this.sectionContainer);
+    }
+
+    public beginBatch(): void {
+        if (this.sectioned) {
+            for (const section of this.sections) {
+                section.pendingBatch = [];
+            }
+        } else {
+            this.pendingBatch = [];
+        }
+    }
+
+    public flushBatch(): void {
+        if (this.sectioned) {
+            for (const section of this.sections) {
+                const batch = section.pendingBatch;
+                section.pendingBatch = null;
+                if (batch && batch.length > 0) {
+                    section.model.splice(0, 0, batch);
+                }
+            }
+        } else {
+            const batch = this.pendingBatch;
+            this.pendingBatch = null;
+            if (batch && batch.length > 0) {
+                this.model.splice(0, 0, batch);
+            }
+        }
+    }
+
+    public addSection(id: string, value: unknown): void {
+        if (!this.sectioned) this.enableSections();
+
+        this.headerValues.set(id, value);
+        if (this.sectionById.has(id)) return;
+
+        const sectionModel = new Gtk.StringList();
+        const section: SectionData = {
+            id,
+            model: sectionModel,
+            itemIds: [],
+            pendingBatch: this.getInitialPendingBatch(),
+        };
+        this.sections.push(section);
+        this.sectionById.set(id, section);
+        this.sectionContainer?.append(sectionModel);
+    }
+
+    public removeSection(id: string): void {
+        const section = this.sectionById.get(id);
+        if (!section) return;
+
+        for (const itemId of [...section.itemIds]) {
+            this.removeItemFromSection(itemId);
+        }
+
+        const sectionIndex = this.sections.indexOf(section);
+        if (sectionIndex >= 0) {
+            this.sections.splice(sectionIndex, 1);
+            this.sectionContainer?.remove(sectionIndex);
+        }
+        this.sectionById.delete(id);
+        this.headerValues.delete(id);
+    }
+
+    public removeItemFromSection(itemId: string): void {
+        const sectionId = this.itemToSection.get(itemId);
+        if (!sectionId) return;
+
+        const section = this.sectionById.get(sectionId);
+        if (!section) return;
+
+        const indexInSection = section.itemIds.indexOf(itemId);
+        if (indexInSection >= 0) {
+            section.itemIds.splice(indexInSection, 1);
+            section.model.remove(indexInSection);
+        }
+
+        this.itemToSection.delete(itemId);
+        this.onItemRemoved(itemId);
+        this.rebuildGlobalIndices();
+    }
+
+    public removeItem(id: string): void {
+        if (this.sectioned) {
+            this.removeItemFromSection(id);
+            return;
+        }
+
+        if (!this.idToIndex.has(id)) return;
+
+        if (!this.pendingRemovals) {
+            this.pendingRemovals = new Set();
+            if (!this.flushScheduled) {
+                this.flushScheduled = true;
+                queueMicrotask(() => this.flushRemovals());
+            }
+        }
+        this.pendingRemovals.add(id);
+        this.onItemRemoved(id);
+    }
+
+    public flushRemovals(): void {
+        this.flushScheduled = false;
+        const removals = this.pendingRemovals;
+        if (!removals || removals.size === 0) {
+            this.pendingRemovals = null;
+            return;
+        }
+        this.pendingRemovals = null;
+
+        const indices: number[] = [];
+        for (const id of removals) {
+            const index = this.idToIndex.get(id);
+            if (index !== undefined) {
+                indices.push(index);
+                this.idToIndex.delete(id);
+            }
+        }
+
+        if (indices.length === 0) return;
+
+        indices.sort((a, b) => a - b);
+
+        let i = indices.length - 1;
+        while (i >= 0) {
+            let rangeStart = indices[i] ?? 0;
+            const rangeEnd = rangeStart;
+
+            while (i > 0) {
+                const prev = indices[i - 1];
+                if (prev !== rangeStart - 1) break;
+                i--;
+                rangeStart = prev ?? 0;
+            }
+
+            const count = rangeEnd - rangeStart + 1;
+            this.model.splice(rangeStart, count);
+            this.ids.splice(rangeStart, count);
+
+            i--;
+        }
+
+        this.rebuildIndices(0);
+    }
+
+    public addItemToSection(sectionId: string, itemId: string, item: unknown): void {
+        const section = this.sectionById.get(sectionId);
+        if (!section) return;
+
+        this.onItemAdded(itemId, item);
+        this.itemToSection.set(itemId, sectionId);
+        section.itemIds.push(itemId);
+        this.rebuildGlobalIndices();
+
+        const modelString = this.getModelString(itemId, item);
+        if (section.pendingBatch) {
+            section.pendingBatch.push(modelString);
+        } else {
+            section.model.append(modelString);
+        }
+    }
+
+    public addItemsToSection(sectionId: string, items: { itemId: string; item: unknown }[]): void {
+        const section = this.sectionById.get(sectionId);
+        if (!section) return;
+        if (items.length === 0) return;
+
+        const modelStrings: string[] = [];
+        for (const { itemId, item } of items) {
+            this.onItemAdded(itemId, item);
+            this.itemToSection.set(itemId, sectionId);
+            section.itemIds.push(itemId);
+            modelStrings.push(this.getModelString(itemId, item));
+        }
+
+        this.rebuildGlobalIndices();
+
+        if (section.pendingBatch) {
+            for (const s of modelStrings) {
+                section.pendingBatch.push(s);
+            }
+        } else {
+            section.model.splice(section.model.getNItems(), 0, modelStrings);
+        }
+    }
+
+    public insertItemToSectionBefore(sectionId: string, itemId: string, beforeId: string, item: unknown): void {
+        const section = this.sectionById.get(sectionId);
+        if (!section) return;
+
+        this.onItemAdded(itemId, item);
+        this.itemToSection.set(itemId, sectionId);
+
+        const modelString = this.getModelString(itemId, item);
+        const beforeIndex = section.itemIds.indexOf(beforeId);
+        if (beforeIndex >= 0) {
+            section.itemIds.splice(beforeIndex, 0, itemId);
+            this.rebuildGlobalIndices();
+            section.model.splice(beforeIndex, 0, [modelString]);
+        } else {
+            section.itemIds.push(itemId);
+            this.rebuildGlobalIndices();
+            section.model.append(modelString);
+        }
+    }
+
+    public updateHeaderValue(sectionId: string, value: unknown): void {
+        this.headerValues.set(sectionId, value);
+    }
+
+    public isSectioned(): boolean {
+        return this.sectioned;
+    }
+
+    public getModel(): Gio.ListModel {
+        if (this.sectioned && this.flatModel) return this.flatModel;
+        return this.model;
+    }
+
+    public getIdAtIndex(index: number): string | null {
+        this.flushRemovals();
+        return this.ids[index] ?? null;
+    }
+
+    public getIndexById(id: string): number | null {
+        this.flushRemovals();
+        return this.idToIndex.get(id) ?? null;
+    }
+
+    protected rebuildGlobalIndices(): void {
+        this.ids = [];
+        this.idToIndex.clear();
+        for (const section of this.sections) {
+            for (const itemId of section.itemIds) {
+                this.idToIndex.set(itemId, this.ids.length);
+                this.ids.push(itemId);
+            }
+        }
+    }
+
+    protected rebuildIndices(fromIndex: number): void {
+        for (let i = fromIndex; i < this.ids.length; i++) {
+            this.idToIndex.set(this.ids[i] as string, i);
+        }
+    }
+
+    protected abstract getInitialPendingBatch(): string[] | null;
+
+    protected abstract getModelString(itemId: string, item: unknown): string;
+
+    protected onItemAdded(_itemId: string, _item: unknown): void {}
+
+    protected onItemRemoved(_itemId: string): void {}
+}

package/src/nodes/internal/selection-helpers.ts

@@ -0,0 +1,35 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+
+type StoreWithIdLookup = {
+    getIdAtIndex(index: number): string | null;
+};
+
+type StoreWithIndexLookup = {
+    getIndexById(id: string): number | null;
+    getNItems(): number;
+};
+
+export function getSelectionFromStore(selection: Gtk.Bitset, store: StoreWithIdLookup): string[] {
+    const size = selection.getSize();
+    const ids: string[] = [];
+    for (let i = 0; i < size; i++) {
+        const index = selection.getNth(i);
+        const id = store.getIdAtIndex(index);
+        if (id !== null) {
+            ids.push(id);
+        }
+    }
+    return ids;
+}
+
+export function resolveSelectionIndices(ids: string[], store: StoreWithIndexLookup): Gtk.Bitset {
+    const nItems = store.getNItems();
+    const selected = new Gtk.Bitset();
+    for (const id of ids) {
+        const index = store.getIndexById(id);
+        if (index !== null && index < nItems) {
+            selected.add(index);
+        }
+    }
+    return selected;
+}

package/src/nodes/internal/selection-model-controller.ts

@@ -54,6 +54,10 @@ export class SelectionModelController {
             return this.selectionModel;
         }
 
+        if (this.selectionModel.getModel() !== model) {
+            this.selectionModel.setModel(model);
+        }
+
         if (!oldProps || oldProps.onSelectionChanged !== newProps.onSelectionChanged) {
             this.initSelectionHandler(newProps.onSelectionChanged);
         }