@gtkx/react 0.18.9 → 0.19.0

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

@@ -1,24 +1,44 @@
-import * as Gtk from "@gtkx/ffi/gtk";
+import { SectionedListStore } from "./sectioned-list-store.js";
 
-export class SimpleListStore {
-    private ids: string[] = [];
-    private idToIndex = new Map<string, number>();
-    private model = new Gtk.StringList();
-    private pendingBatch: string[] | null = null;
+export class SimpleListStore extends SectionedListStore {
+    private batchMode = false;
 
-    public beginBatch(): void {
-        this.pendingBatch = [];
+    public override beginBatch(): void {
+        this.batchMode = true;
+        super.beginBatch();
     }
 
-    public flushBatch(): void {
-        const batch = this.pendingBatch;
-        this.pendingBatch = null;
-        if (batch && batch.length > 0) {
-            this.model.splice(0, 0, batch);
+    public override flushBatch(): void {
+        this.batchMode = false;
+        super.flushBatch();
+    }
+
+    protected override getInitialPendingBatch(): string[] | null {
+        return this.batchMode ? [] : null;
+    }
+
+    protected override getModelString(_itemId: string, item: unknown): string {
+        return item as string;
+    }
+
+    public getHeaderValueByLabel(label: string): unknown {
+        for (const section of this.sections) {
+            if (section.model.getNItems() > 0) {
+                const firstLabel = section.model.getString(0);
+                if (firstLabel === label) {
+                    return this.headerValues.get(section.id);
+                }
+            }
         }
+        return undefined;
     }
 
     public addItem(id: string, label: string): void {
+        this.flushRemovals();
+        if (this.sectioned) {
+            return;
+        }
+
         this.idToIndex.set(id, this.ids.length);
         this.ids.push(id);
 
@@ -30,6 +50,7 @@ export class SimpleListStore {
     }
 
     public appendItem(id: string, label: string): void {
+        this.flushRemovals();
         const existingIndex = this.idToIndex.get(id);
 
         if (existingIndex !== undefined) {
@@ -43,17 +64,8 @@ export class SimpleListStore {
         this.model.append(label);
     }
 
-    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);
-    }
-
     public insertItemBefore(id: string, beforeId: string, label: string): void {
+        this.flushRemovals();
         const beforeIndex = this.idToIndex.get(beforeId);
         if (beforeIndex === undefined) {
             this.addItem(id, label);
@@ -64,7 +76,20 @@ export class SimpleListStore {
         }
     }
 
-    public updateItem(id: string, label: string): void {
+    public updateItem(id: string, item: unknown): void {
+        this.flushRemovals();
+        const label = item as string;
+        if (this.sectioned) {
+            const sectionId = this.itemToSection.get(id);
+            if (!sectionId) return;
+            const section = this.sectionById.get(sectionId);
+            if (!section) return;
+            const indexInSection = section.itemIds.indexOf(id);
+            if (indexInSection >= 0) {
+                section.model.splice(indexInSection, 1, [label]);
+            }
+            return;
+        }
         const index = this.idToIndex.get(id);
         if (index === undefined) {
             this.addItem(id, label);
@@ -73,27 +98,19 @@ export class SimpleListStore {
         this.model.splice(index, 1, [label]);
     }
 
-    public getItem(id: string) {
+    public getItem(id: string): string | null {
+        this.flushRemovals();
+        if (this.sectioned) {
+            const sectionId = this.itemToSection.get(id);
+            if (!sectionId) return null;
+            const section = this.sectionById.get(sectionId);
+            if (!section) return null;
+            const indexInSection = section.itemIds.indexOf(id);
+            if (indexInSection < 0) return null;
+            return section.model.getString(indexInSection);
+        }
         const index = this.idToIndex.get(id);
         if (index === undefined) return null;
         return this.model.getString(index);
     }
-
-    public getIdAtIndex(index: number): string | null {
-        return this.ids[index] ?? null;
-    }
-
-    public getIndexById(id: string): number | null {
-        return this.idToIndex.get(id) ?? null;
-    }
-
-    public getModel(): 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);
-        }
-    }
 }

package/src/nodes/internal/text-buffer-controller.ts

@@ -18,6 +18,8 @@ type BufferProps = Pick<GtkTextViewProps, "enableUndo"> & BufferCallbackProps;
 export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffer> {
     private buffer: TBuffer | null = null;
     private textChildren: TextContentChild[] = [];
+    private initialMount = true;
+    private irreversibleStarted = false;
 
     constructor(
         private readonly owner: Node & TextContentParent,
@@ -41,6 +43,14 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
         return this.buffer;
     }
 
+    finalizeInitialMount(): void {
+        if (this.irreversibleStarted) {
+            this.buffer?.endIrreversibleAction();
+            this.irreversibleStarted = false;
+        }
+        this.initialMount = false;
+    }
+
     applyOwnProps(oldProps: BufferProps | null, newProps: BufferProps): void {
         const hasBufferProps =
             newProps.enableUndo !== undefined ||
@@ -130,6 +140,11 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
     appendChild(child: TextContentChild): void {
         const buffer = this.ensureBuffer();
 
+        if (this.initialMount && !this.irreversibleStarted) {
+            buffer.beginIrreversibleAction();
+            this.irreversibleStarted = true;
+        }
+
         const wasMoved = this.textChildren.indexOf(child) !== -1;
         if (wasMoved) {
             const existingIndex = this.textChildren.indexOf(child);
@@ -158,6 +173,7 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
             if (!child.hasBuffer()) {
                 child.setBuffer(buffer);
             }
+            this.setupEmbeddedObjects(child);
         } else if (child instanceof TextAnchorNode) {
             child.setTextViewAndBuffer(this.container, buffer);
         } else if (child instanceof TextPaintableNode) {
@@ -173,6 +189,11 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
     insertBefore(child: TextContentChild, before: TextContentChild): void {
         const buffer = this.ensureBuffer();
 
+        if (this.initialMount && !this.irreversibleStarted) {
+            buffer.beginIrreversibleAction();
+            this.irreversibleStarted = true;
+        }
+
         const existingIndex = this.textChildren.indexOf(child);
         if (existingIndex !== -1) {
             const oldOffset = child.getBufferOffset();
@@ -207,6 +228,7 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
             if (!child.hasBuffer()) {
                 child.setBuffer(buffer);
             }
+            this.setupEmbeddedObjects(child);
         } else if (child instanceof TextAnchorNode) {
             child.setTextViewAndBuffer(this.container, buffer);
         } else if (child instanceof TextPaintableNode) {
@@ -234,6 +256,21 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
         this.reapplyTagsFromOffset(offset);
     }
 
+    private setupEmbeddedObjects(tag: TextTagNode): void {
+        if (!this.buffer) return;
+
+        for (const child of tag.children) {
+            if (child instanceof TextPaintableNode || child instanceof TextAnchorNode) {
+                this.deleteTextAtRange(child.getBufferOffset(), child.getBufferOffset() + 1);
+                child.setTextViewAndBuffer(this.container, this.buffer);
+            } else if (child instanceof TextTagNode) {
+                this.setupEmbeddedObjects(child);
+            }
+        }
+
+        tag.reapplyTag();
+    }
+
     private getTotalLength(): number {
         let length = 0;
         for (const child of this.textChildren) {
@@ -248,7 +285,7 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
 
         const iter = new Gtk.TextIter();
         buffer.getIterAtOffset(iter, offset);
-        buffer.insert(iter, text, text.length);
+        buffer.insert(iter, text, -1);
     }
 
     private deleteTextAtRange(start: number, end: number): void {
@@ -292,10 +329,7 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
     private reapplyTagsFromOffset(fromOffset: number): void {
         for (const child of this.textChildren) {
             if (child instanceof TextTagNode) {
-                if (child.getBufferOffset() >= fromOffset) {
-                    child.reapplyTag();
-                    this.reapplyAllTagsRecursive(child.children);
-                } else if (child.getBufferOffset() + child.getLength() > fromOffset) {
+                if (child.getBufferOffset() + child.getLength() > fromOffset) {
                     child.reapplyTag();
                     this.reapplyAllTagsRecursive(child.children);
                 }
@@ -320,9 +354,18 @@ export class TextBufferController<TBuffer extends Gtk.TextBuffer = Gtk.TextBuffe
     onChildInserted(child: TextContentChild): void {
         if (!this.buffer) return;
 
-        const text = child.getText();
-        if (text.length > 0) {
-            this.insertTextAtOffset(text, child.getBufferOffset());
+        if (child instanceof TextPaintableNode) {
+            child.setTextViewAndBuffer(this.container, this.buffer);
+        } else if (child instanceof TextAnchorNode) {
+            child.setTextViewAndBuffer(this.container, this.buffer);
+        } else {
+            const text = child.getText();
+            if (text.length > 0) {
+                this.insertTextAtOffset(text, child.getBufferOffset());
+            }
+            if (child instanceof TextTagNode) {
+                this.setupEmbeddedObjects(child);
+            }
         }
 
         const containingIndex = this.findDirectChildContaining(child.getBufferOffset());

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

@@ -19,6 +19,8 @@ export class TreeStore {
     private items = new Map<string, TreeItemData>();
     private onItemUpdated: TreeItemUpdatedCallback | null = null;
     private pendingBatch: string[] | null = null;
+    private pendingRemovals: Set<string> | null = null;
+    private flushScheduled = false;
 
     public setOnItemUpdated(callback: TreeItemUpdatedCallback | null): void {
         this.onItemUpdated = callback;
@@ -46,6 +48,7 @@ export class TreeStore {
     }
 
     public addItem(id: string, data: TreeItemData, parentId?: string): void {
+        if (parentId === undefined) this.flushRemovals();
         this.items.set(id, data);
 
         if (parentId === undefined) {
@@ -104,15 +107,7 @@ export class TreeStore {
         this.childIdToIndex.delete(id);
         this.childModels.delete(id);
 
-        if (parentId === undefined) {
-            const index = this.rootIdToIndex.get(id);
-            if (index !== undefined) {
-                this.rootIds.splice(index, 1);
-                this.rootIdToIndex.delete(id);
-                this.rebuildRootIndices(index);
-                this.rootModel.remove(index);
-            }
-        } else {
+        if (parentId !== undefined) {
             const siblings = this.children.get(parentId);
             const indexMap = this.childIdToIndex.get(parentId);
             if (siblings && indexMap) {
@@ -131,10 +126,67 @@ export class TreeStore {
                     this.childIdToIndex.delete(parentId);
                 }
             }
+            return;
+        }
+
+        if (!this.rootIdToIndex.has(id)) return;
+
+        if (!this.pendingRemovals) {
+            this.pendingRemovals = new Set();
+            if (!this.flushScheduled) {
+                this.flushScheduled = true;
+                queueMicrotask(() => this.flushRemovals());
+            }
+        }
+        this.pendingRemovals.add(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.rootIdToIndex.get(id);
+            if (index !== undefined) {
+                indices.push(index);
+                this.rootIdToIndex.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.rootModel.splice(rangeStart, count);
+            this.rootIds.splice(rangeStart, count);
+
+            i--;
         }
+
+        this.rebuildRootIndices(0);
     }
 
     public insertItemBefore(id: string, beforeId: string, data: TreeItemData, parentId?: string): void {
+        if (parentId === undefined) this.flushRemovals();
         this.items.set(id, data);
 
         if (parentId === undefined) {

package/src/nodes/list-section.ts

@@ -0,0 +1,64 @@
+import type { ListSectionProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { ListItemNode } from "./list-item.js";
+import { VirtualNode } from "./virtual.js";
+
+type SectionStore = {
+    addItemToSection(sectionId: string, itemId: string, item: unknown): void;
+    addItemsToSection(sectionId: string, items: { itemId: string; item: unknown }[]): void;
+    removeItemFromSection(itemId: string): void;
+    updateHeaderValue(sectionId: string, value: unknown): void;
+    insertItemToSectionBefore(sectionId: string, itemId: string, beforeId: string, item: unknown): void;
+    updateItem(id: string, item: unknown): void;
+};
+
+export class ListSectionNode extends VirtualNode<ListSectionProps, Node, ListItemNode> {
+    private store: SectionStore | null = null;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ListItemNode;
+    }
+
+    public override appendChild(child: ListItemNode): void {
+        super.appendChild(child);
+        if (this.store) {
+            this.store.addItemToSection(this.props.id, child.props.id, child.props.value);
+        }
+    }
+
+    public override insertBefore(child: ListItemNode, before: ListItemNode): void {
+        super.insertBefore(child, before);
+        if (this.store) {
+            this.store.insertItemToSectionBefore(this.props.id, child.props.id, before.props.id, child.props.value);
+        }
+    }
+
+    public override removeChild(child: ListItemNode): void {
+        if (this.store) {
+            this.store.removeItemFromSection(child.props.id);
+        }
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: ListSectionProps | null, newProps: ListSectionProps): void {
+        super.commitUpdate(oldProps, newProps);
+        if (this.store && hasChanged(oldProps, newProps, "value")) {
+            this.store.updateHeaderValue(newProps.id, newProps.value);
+        }
+    }
+
+    public setStore(store: SectionStore | null): void {
+        this.store = store;
+        if (store && this.children.length > 0) {
+            store.addItemsToSection(
+                this.props.id,
+                this.children.map((child) => ({ itemId: child.props.id, item: child.props.value })),
+            );
+        }
+    }
+
+    public getChildNodes(): readonly ListItemNode[] {
+        return this.children;
+    }
+}

package/src/nodes/list-view.ts

@@ -4,27 +4,34 @@ import type { Node } from "../node.js";
 import type { Container } from "../types.js";
 import { ContainerSlotNode } from "./container-slot.js";
 import { EventControllerNode } from "./event-controller.js";
+import { GridItemRenderer } from "./internal/grid-item-renderer.js";
+import type { HeaderItemRenderer } from "./internal/header-item-renderer.js";
+import { updateHeaderRenderer } from "./internal/header-renderer-manager.js";
 import { ListItemRenderer } from "./internal/list-item-renderer.js";
 import { filterProps, hasChanged } from "./internal/props.js";
 import { ListItemNode } from "./list-item.js";
+import { ListSectionNode } from "./list-section.js";
 import { ListModel, type ListModelProps } from "./models/list.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
 
-const RENDERER_PROPS = ["renderItem", "estimatedItemHeight"] as const;
+const RENDERER_PROPS = ["renderItem", "renderHeader", "estimatedItemHeight"] as const;
 const OWN_PROPS = [...RENDERER_PROPS, "autoexpand", "selectionMode", "selected", "onSelectionChanged"] as const;
 
 type ListViewProps = Pick<GtkListViewProps, (typeof RENDERER_PROPS)[number]> & ListModelProps;
 
-type ListViewChild = ListItemNode | EventControllerNode | SlotNode | ContainerSlotNode;
+type ListViewChild = ListItemNode | ListSectionNode | EventControllerNode | SlotNode | ContainerSlotNode;
 
 export class ListViewNode extends WidgetNode<Gtk.ListView, ListViewProps, ListViewChild> {
-    private itemRenderer: ListItemRenderer;
+    private treeRenderer: ListItemRenderer | null = null;
+    private flatRenderer: GridItemRenderer | null = null;
+    private headerRenderer: HeaderItemRenderer | null = null;
     private list: ListModel;
 
     public override isValidChild(child: Node): boolean {
         return (
             child instanceof ListItemNode ||
+            child instanceof ListSectionNode ||
             child instanceof EventControllerNode ||
             child instanceof SlotNode ||
             child instanceof ContainerSlotNode
@@ -33,37 +40,54 @@ export class ListViewNode extends WidgetNode<Gtk.ListView, ListViewProps, ListVi
 
     constructor(typeName: string, props: ListViewProps, container: Gtk.ListView, rootContainer: Container) {
         super(typeName, props, container, rootContainer);
+
+        const flat = props.renderHeader != null;
+
         this.list = new ListModel(
             { owner: this, signalStore: this.signalStore },
             {
-                autoexpand: props.autoexpand,
+                autoexpand: flat ? undefined : props.autoexpand,
                 selectionMode: props.selectionMode,
                 selected: props.selected,
                 onSelectionChanged: props.onSelectionChanged,
             },
+            flat,
         );
-        this.itemRenderer = new ListItemRenderer(this.signalStore);
-        this.itemRenderer.setStore(this.list.getStore());
-        this.list.getStore().setOnItemUpdated((id) => this.itemRenderer.rebindItem(id));
-        this.container.setFactory(this.itemRenderer.getFactory());
+
+        if (flat) {
+            const store = this.list.getFlatStore();
+            this.flatRenderer = new GridItemRenderer(this.signalStore);
+            this.flatRenderer.setStore(store);
+            store.setOnItemUpdated((id) => this.flatRenderer?.rebindItem(id));
+            this.container.setFactory(this.flatRenderer.getFactory());
+        } else {
+            const store = this.list.getStore();
+            this.treeRenderer = new ListItemRenderer(this.signalStore);
+            this.treeRenderer.setStore(store);
+            store.setOnItemUpdated((id) => this.treeRenderer?.rebindItem(id));
+            this.container.setFactory(this.treeRenderer.getFactory());
+        }
     }
 
     public override appendChild(child: ListViewChild): void {
         super.appendChild(child);
-        if (child instanceof ListItemNode) {
+        if (child instanceof ListItemNode || child instanceof ListSectionNode) {
             this.list.appendChild(child);
         }
     }
 
     public override insertBefore(child: ListViewChild, before: ListViewChild): void {
         super.insertBefore(child, before);
-        if (child instanceof ListItemNode && before instanceof ListItemNode) {
+        if (
+            (child instanceof ListItemNode || child instanceof ListSectionNode) &&
+            (before instanceof ListItemNode || before instanceof ListSectionNode)
+        ) {
             this.list.insertBefore(child, before);
         }
     }
 
     public override removeChild(child: ListViewChild): void {
-        if (child instanceof ListItemNode) {
+        if (child instanceof ListItemNode || child instanceof ListSectionNode) {
             this.list.removeChild(child);
         }
         super.removeChild(child);
@@ -86,17 +110,44 @@ export class ListViewNode extends WidgetNode<Gtk.ListView, ListViewProps, ListVi
     }
 
     public override detachDeletedInstance(): void {
-        this.itemRenderer.dispose();
+        this.treeRenderer?.dispose();
+        this.flatRenderer?.dispose();
+        this.headerRenderer?.dispose();
         super.detachDeletedInstance();
     }
 
     private applyOwnProps(oldProps: ListViewProps | null, newProps: ListViewProps): void {
         if (hasChanged(oldProps, newProps, "renderItem")) {
-            this.itemRenderer.setRenderFn(newProps.renderItem ?? null);
+            if (this.treeRenderer) {
+                this.treeRenderer.setRenderFn(newProps.renderItem ?? null);
+            }
+            if (this.flatRenderer) {
+                const renderItem = newProps.renderItem;
+                this.flatRenderer.setRenderFn(renderItem ? (item: unknown) => renderItem(item, null) : null);
+            }
         }
 
         if (hasChanged(oldProps, newProps, "estimatedItemHeight")) {
-            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight ?? null);
+            const height = newProps.estimatedItemHeight ?? null;
+            if (this.treeRenderer) {
+                this.treeRenderer.setEstimatedItemHeight(height);
+            }
+            if (this.flatRenderer) {
+                this.flatRenderer.setEstimatedItemHeight(height);
+            }
+        }
+
+        if (hasChanged(oldProps, newProps, "renderHeader")) {
+            this.headerRenderer = updateHeaderRenderer(
+                this.headerRenderer,
+                {
+                    signalStore: this.signalStore,
+                    isEnabled: () => this.list.isFlatMode(),
+                    resolveItem: (id) => this.list.getFlatStore().getHeaderValue(id),
+                    setFactory: (factory) => this.container.setHeaderFactory(factory),
+                },
+                newProps.renderHeader,
+            );
         }
 
         const previousModel = this.list.getSelectionModel();