@gtkx/react 0.18.0 → 0.18.2

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

@@ -0,0 +1,237 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+
+export type TreeItemUpdatedCallback = (id: string) => void;
+
+export type TreeItemData<T = unknown> = {
+    value: T;
+    indentForDepth?: boolean;
+    indentForIcon?: boolean;
+    hideExpander?: boolean;
+};
+
+export class TreeStore {
+    private rootIds: string[] = [];
+    private rootIdToIndex = new Map<string, number>();
+    private children = new Map<string, string[]>();
+    private childIdToIndex = new Map<string, Map<string, number>>();
+    private rootModel = new Gtk.StringList();
+    private childModels = new Map<string, Gtk.StringList>();
+    private items = new Map<string, TreeItemData>();
+    private onItemUpdated: TreeItemUpdatedCallback | null = null;
+    private pendingBatch: string[] | null = null;
+
+    public setOnItemUpdated(callback: TreeItemUpdatedCallback | null): void {
+        this.onItemUpdated = callback;
+    }
+
+    public beginBatch(): void {
+        this.pendingBatch = [];
+    }
+
+    public flushBatch(): void {
+        const batch = this.pendingBatch;
+        this.pendingBatch = null;
+        if (batch && batch.length > 0) {
+            this.rootModel.splice(0, 0, batch);
+        }
+    }
+
+    public updateItem(id: string, item: TreeItemData): void {
+        if (this.items.has(id)) {
+            this.items.set(id, item);
+            this.onItemUpdated?.(id);
+        } else {
+            this.addItem(id, item);
+        }
+    }
+
+    public addItem(id: string, data: TreeItemData, parentId?: string): void {
+        this.items.set(id, data);
+
+        if (parentId === undefined) {
+            const existingIndex = this.rootIdToIndex.get(id);
+            if (existingIndex !== undefined) {
+                this.rootModel.remove(existingIndex);
+                this.rootIds.splice(existingIndex, 1);
+                this.rebuildRootIndices(existingIndex);
+            }
+
+            this.rootIdToIndex.set(id, this.rootIds.length);
+            this.rootIds.push(id);
+
+            if (this.pendingBatch) {
+                this.pendingBatch.push(id);
+            } else {
+                this.rootModel.append(id);
+            }
+        } else {
+            let siblings = this.children.get(parentId);
+            let indexMap = this.childIdToIndex.get(parentId);
+            if (!siblings) {
+                siblings = [];
+                this.children.set(parentId, siblings);
+            }
+            if (!indexMap) {
+                indexMap = new Map();
+                this.childIdToIndex.set(parentId, indexMap);
+            }
+
+            const existingIndex = indexMap.get(id);
+            if (existingIndex !== undefined) {
+                const model = this.childModels.get(parentId);
+                if (model) {
+                    model.remove(existingIndex);
+                }
+                siblings.splice(existingIndex, 1);
+                this.rebuildChildIndices(siblings, indexMap, existingIndex);
+            }
+
+            indexMap.set(id, siblings.length);
+            siblings.push(id);
+
+            let model = this.childModels.get(parentId);
+            if (!model) {
+                model = new Gtk.StringList();
+                this.childModels.set(parentId, model);
+            }
+            model.append(id);
+        }
+    }
+
+    public removeItem(id: string, parentId?: string): void {
+        this.items.delete(id);
+        this.children.delete(id);
+        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 {
+            const siblings = this.children.get(parentId);
+            const indexMap = this.childIdToIndex.get(parentId);
+            if (siblings && indexMap) {
+                const index = indexMap.get(id);
+                if (index !== undefined) {
+                    siblings.splice(index, 1);
+                    indexMap.delete(id);
+                    this.rebuildChildIndices(siblings, indexMap, index);
+                    const model = this.childModels.get(parentId);
+                    if (model) {
+                        model.remove(index);
+                    }
+                }
+                if (siblings.length === 0) {
+                    this.children.delete(parentId);
+                    this.childIdToIndex.delete(parentId);
+                }
+            }
+        }
+    }
+
+    public insertItemBefore(id: string, beforeId: string, data: TreeItemData, parentId?: string): void {
+        this.items.set(id, data);
+
+        if (parentId === undefined) {
+            const existingIndex = this.rootIdToIndex.get(id);
+            if (existingIndex !== undefined) {
+                this.rootModel.remove(existingIndex);
+                this.rootIds.splice(existingIndex, 1);
+                this.rootIdToIndex.delete(id);
+                this.rebuildRootIndices(existingIndex);
+            }
+
+            const beforeIndex = this.rootIdToIndex.get(beforeId);
+            if (beforeIndex === undefined) {
+                this.rootIdToIndex.set(id, this.rootIds.length);
+                this.rootIds.push(id);
+                this.rootModel.append(id);
+            } else {
+                this.rootIds.splice(beforeIndex, 0, id);
+                this.rebuildRootIndices(beforeIndex);
+                this.rootModel.splice(beforeIndex, 0, [id]);
+            }
+        } else {
+            let siblings = this.children.get(parentId);
+            let indexMap = this.childIdToIndex.get(parentId);
+            if (!siblings) {
+                siblings = [];
+                this.children.set(parentId, siblings);
+            }
+            if (!indexMap) {
+                indexMap = new Map();
+                this.childIdToIndex.set(parentId, indexMap);
+            }
+
+            let model = this.childModels.get(parentId);
+            if (!model) {
+                model = new Gtk.StringList();
+                this.childModels.set(parentId, model);
+            }
+
+            const existingIndex = indexMap.get(id);
+            if (existingIndex !== undefined) {
+                model.remove(existingIndex);
+                siblings.splice(existingIndex, 1);
+                indexMap.delete(id);
+                this.rebuildChildIndices(siblings, indexMap, existingIndex);
+            }
+
+            const beforeIndex = indexMap.get(beforeId);
+            if (beforeIndex === undefined) {
+                indexMap.set(id, siblings.length);
+                siblings.push(id);
+                model.append(id);
+            } else {
+                siblings.splice(beforeIndex, 0, id);
+                this.rebuildChildIndices(siblings, indexMap, beforeIndex);
+                model.splice(beforeIndex, 0, [id]);
+            }
+        }
+    }
+
+    public getItem(id: string): TreeItemData | undefined {
+        return this.items.get(id);
+    }
+
+    public getRootModel(): Gtk.StringList {
+        return this.rootModel;
+    }
+
+    public getChildrenModel(parentId: string): Gtk.StringList | null {
+        const childIds = this.children.get(parentId);
+        if (!childIds || childIds.length === 0) {
+            return null;
+        }
+
+        let model = this.childModels.get(parentId);
+        if (!model) {
+            model = new Gtk.StringList(childIds);
+            this.childModels.set(parentId, model);
+        }
+
+        return model;
+    }
+
+    public hasChildren(parentId: string): boolean {
+        const childIds = this.children.get(parentId);
+        return childIds !== undefined && childIds.length > 0;
+    }
+
+    private rebuildRootIndices(fromIndex: number): void {
+        for (let i = fromIndex; i < this.rootIds.length; i++) {
+            this.rootIdToIndex.set(this.rootIds[i] as string, i);
+        }
+    }
+
+    private rebuildChildIndices(siblings: string[], indexMap: Map<string, number>, fromIndex: number): void {
+        for (let i = fromIndex; i < siblings.length; i++) {
+            indexMap.set(siblings[i] as string, i);
+        }
+    }
+}

package/src/nodes/internal/widget.ts

@@ -0,0 +1,78 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { resolvePropMeta } from "../../metadata.js";
+import type { ContainerClass } from "../../types.js";
+import { isAddable, isAppendable, isContentWidget, isRemovable, isSingleChild } from "./predicates.js";
+
+export function detachChild(child: Gtk.Widget, container: Gtk.Widget): void {
+    if (isAppendable(container) || isAddable(container)) {
+        if (isRemovable(container)) {
+            container.remove(child);
+        }
+    } else if (isContentWidget(container)) {
+        container.setContent(null);
+    } else if (isSingleChild(container)) {
+        container.setChild(null);
+    } else if (isRemovable(container)) {
+        container.remove(child);
+    }
+}
+
+export function attachChild(child: Gtk.Widget, container: Gtk.Widget): void {
+    if (isAppendable(container)) {
+        container.append(child);
+    } else if (isAddable(container)) {
+        container.add(child);
+    } else if (isContentWidget(container)) {
+        container.setContent(child);
+    } else if (isSingleChild(container)) {
+        container.setChild(child);
+    } else {
+        throw new Error(`Cannot attach child to '${container.constructor.name}': container does not support children`);
+    }
+}
+
+export function isAttachedTo(child: Gtk.Widget | null, parent: Gtk.Widget | null): boolean {
+    if (!child || !parent) return false;
+    const childParent = child.getParent();
+    return childParent !== null && childParent === parent;
+}
+
+export function getFocusWidget(widget: Gtk.Widget): Gtk.Widget | null {
+    const root = widget.getRoot();
+    return root?.getFocus?.() ?? null;
+}
+
+export function isDescendantOf(widget: Gtk.Widget, ancestor: Gtk.Widget): boolean {
+    let current: Gtk.Widget | null = widget;
+
+    while (current) {
+        if (current === ancestor) {
+            return true;
+        }
+
+        current = current.getParent();
+    }
+
+    return false;
+}
+
+export function resolvePropertySetter(
+    parentWidget: Gtk.Widget,
+    propId: string,
+): ((child: Gtk.Widget | null) => void) | null {
+    const propMeta = resolvePropMeta(parentWidget, propId);
+
+    if (!propMeta) {
+        return null;
+    }
+
+    const [, setterName] = propMeta;
+    const setter = parentWidget[setterName as keyof Gtk.Widget];
+
+    if (typeof setter !== "function") {
+        const parentType = (parentWidget.constructor as ContainerClass).glibTypeName;
+        throw new Error(`Expected setter function for property '${propId}' on type '${parentType}'`);
+    }
+
+    return setter.bind(parentWidget) as (child: Gtk.Widget | null) => void;
+}

package/src/nodes/level-bar.ts

@@ -0,0 +1,36 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkLevelBarProps } from "../jsx.js";
+import { filterProps, shallowArrayEqual } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["offsets"] as const;
+
+type LevelBarProps = Pick<GtkLevelBarProps, (typeof OWN_PROPS)[number]>;
+type Offset = { id: string; value: number };
+
+export class LevelBarNode extends WidgetNode<Gtk.LevelBar, LevelBarProps> {
+    private appliedOffsets: Offset[] = [];
+
+    public override commitUpdate(oldProps: LevelBarProps | null, newProps: LevelBarProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(newProps);
+    }
+
+    private applyOwnProps(newProps: LevelBarProps): void {
+        const newOffsets = newProps.offsets ?? [];
+
+        if (shallowArrayEqual(this.appliedOffsets, newOffsets)) {
+            return;
+        }
+
+        for (const offset of this.appliedOffsets) {
+            this.container.removeOffsetValue(offset.id);
+        }
+
+        for (const offset of newOffsets) {
+            this.container.addOffsetValue(offset.id, offset.value);
+        }
+
+        this.appliedOffsets = [...newOffsets];
+    }
+}

package/src/nodes/list-item.ts

@@ -0,0 +1,107 @@
+import type { ListItemProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { type TreeItemData, TreeStore } from "./internal/tree-store.js";
+import { VirtualNode } from "./virtual.js";
+
+type ItemStore = { updateItem(id: string, value: unknown): void };
+
+export class ListItemNode extends VirtualNode<ListItemProps, Node, ListItemNode> {
+    private store: ItemStore | null = null;
+    private parentItemId: string | null = null;
+
+    public static createItemData(props: ListItemProps): TreeItemData {
+        return {
+            value: props.value,
+            indentForDepth: props.indentForDepth,
+            indentForIcon: props.indentForIcon,
+            hideExpander: props.hideExpander,
+        };
+    }
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ListItemNode;
+    }
+
+    public override appendChild(child: ListItemNode): void {
+        super.appendChild(child);
+        child.setParentItemId(this.props.id);
+
+        if (this.store instanceof TreeStore) {
+            this.store.addItem(child.props.id, ListItemNode.createItemData(child.props), this.props.id);
+            child.setStore(this.store);
+        }
+    }
+
+    public override insertBefore(child: ListItemNode, before: ListItemNode): void {
+        super.insertBefore(child, before);
+        child.setParentItemId(this.props.id);
+
+        if (this.store instanceof TreeStore) {
+            this.store.insertItemBefore(
+                child.props.id,
+                before.props.id,
+                ListItemNode.createItemData(child.props),
+                this.props.id,
+            );
+            child.setStore(this.store);
+        }
+    }
+
+    public override removeChild(child: ListItemNode): void {
+        if (this.store instanceof TreeStore) {
+            this.store.removeItem(child.props.id, this.props.id);
+        }
+
+        child.setStore(null);
+        child.setParentItemId(null);
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: ListItemProps | null, newProps: ListItemProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: ListItemProps | null, newProps: ListItemProps): void {
+        if (!this.store) return;
+
+        if (this.store instanceof TreeStore) {
+            const propsChanged =
+                hasChanged(oldProps, newProps, "id") ||
+                hasChanged(oldProps, newProps, "value") ||
+                hasChanged(oldProps, newProps, "indentForDepth") ||
+                hasChanged(oldProps, newProps, "indentForIcon") ||
+                hasChanged(oldProps, newProps, "hideExpander");
+
+            if (propsChanged) {
+                this.store.updateItem(newProps.id, ListItemNode.createItemData(newProps));
+            }
+        } else {
+            if (hasChanged(oldProps, newProps, "id") || hasChanged(oldProps, newProps, "value")) {
+                this.store.updateItem(newProps.id, newProps.value);
+            }
+        }
+    }
+
+    public setStore(store: ItemStore | null): void {
+        this.store = store;
+        if (store === null || store instanceof TreeStore) {
+            for (const child of this.children) {
+                child.setStore(store);
+            }
+        }
+    }
+
+    public getChildNodes(): readonly ListItemNode[] {
+        return this.children;
+    }
+
+    public setParentItemId(parentId: string | null): void {
+        this.parentItemId = parentId;
+    }
+
+    public getParentItemId(): string | null {
+        return this.parentItemId;
+    }
+}

package/src/nodes/list-view.ts

@@ -0,0 +1,97 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkListViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { ListItemRenderer } from "./internal/list-item-renderer.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { ListItemNode } from "./list-item.js";
+import { ListModel, type ListModelProps } from "./models/list.js";
+import { WidgetNode } from "./widget.js";
+
+const RENDERER_PROPS = ["renderItem", "estimatedItemHeight"] as const;
+const OWN_PROPS = [...RENDERER_PROPS, "autoexpand", "selectionMode", "selected", "onSelectionChanged"] as const;
+
+type ListViewProps = Pick<GtkListViewProps, (typeof RENDERER_PROPS)[number]> & ListModelProps;
+
+export class ListViewNode extends WidgetNode<Gtk.ListView, ListViewProps, ListItemNode> {
+    private itemRenderer: ListItemRenderer;
+    private list: ListModel;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ListItemNode;
+    }
+
+    constructor(typeName: string, props: ListViewProps, container: Gtk.ListView, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.list = new ListModel(
+            { owner: this, signalStore: this.signalStore },
+            {
+                autoexpand: props.autoexpand,
+                selectionMode: props.selectionMode,
+                selected: props.selected,
+                onSelectionChanged: props.onSelectionChanged,
+            },
+        );
+        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());
+    }
+
+    public override appendChild(child: ListItemNode): void {
+        super.appendChild(child);
+        this.list.appendChild(child);
+    }
+
+    public override insertBefore(child: ListItemNode, before: ListItemNode): void {
+        super.insertBefore(child, before);
+        this.list.insertBefore(child, before);
+    }
+
+    public override removeChild(child: ListItemNode): void {
+        this.list.removeChild(child);
+        super.removeChild(child);
+    }
+
+    public override finalizeInitialChildren(props: ListViewProps): boolean {
+        super.finalizeInitialChildren(props);
+        return true;
+    }
+
+    public override commitUpdate(oldProps: ListViewProps | null, newProps: ListViewProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override commitMount(): void {
+        super.commitMount();
+        this.list.flushBatch();
+        this.container.setModel(this.list.getSelectionModel());
+    }
+
+    public override detachDeletedInstance(): void {
+        this.itemRenderer.dispose();
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: ListViewProps | null, newProps: ListViewProps): void {
+        if (hasChanged(oldProps, newProps, "renderItem")) {
+            this.itemRenderer.setRenderFn(newProps.renderItem ?? null);
+        }
+
+        if (hasChanged(oldProps, newProps, "estimatedItemHeight")) {
+            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight ?? null);
+        }
+
+        const previousModel = this.list.getSelectionModel();
+        this.list.updateProps(
+            oldProps ? filterProps(oldProps, RENDERER_PROPS) : null,
+            filterProps(newProps, RENDERER_PROPS),
+        );
+        const currentModel = this.list.getSelectionModel();
+
+        if (previousModel !== currentModel) {
+            this.container.setModel(currentModel);
+        }
+    }
+}

package/src/nodes/menu.ts

@@ -0,0 +1,27 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Container } from "../types.js";
+import { MenuModel, type MenuModelProps, type MenuType } from "./models/menu.js";
+
+export class MenuNode extends MenuModel {
+    private static getType(typeName: string): MenuType {
+        if (typeName === "MenuItem") {
+            return "item";
+        } else if (typeName === "MenuSection") {
+            return "section";
+        } else if (typeName === "MenuSubmenu") {
+            return "submenu";
+        }
+
+        throw new Error(`Unable to find menu type '${typeName}'`);
+    }
+
+    constructor(typeName: string, props: MenuModelProps, _container: undefined, rootContainer: Container) {
+        super(
+            MenuNode.getType(typeName),
+            props,
+            rootContainer,
+            undefined,
+            rootContainer instanceof Gtk.Application ? rootContainer : undefined,
+        );
+    }
+}

package/src/nodes/models/grid.ts

@@ -0,0 +1,105 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkGridViewProps } from "../../jsx.js";
+import { ListStore } from "../internal/list-store.js";
+import { SelectionModelController } from "../internal/selection-model-controller.js";
+import type { SignalStore } from "../internal/signal-store.js";
+import type { ListItemNode } from "../list-item.js";
+
+export type GridModelProps = Pick<GtkGridViewProps, "selectionMode" | "selected" | "onSelectionChanged">;
+
+type GridModelConfig = {
+    owner: object;
+    signalStore: SignalStore;
+};
+
+export class GridModel {
+    private config: GridModelConfig;
+    private store: ListStore;
+    private selectionManager: SelectionModelController;
+
+    private initialSelected: string[] | null | undefined;
+
+    constructor(config: GridModelConfig, props: GridModelProps = {}) {
+        this.config = config;
+        this.store = new ListStore();
+        this.store.beginBatch();
+        this.initialSelected = props.selected;
+        this.selectionManager = new SelectionModelController(
+            { ...config, ...props },
+            this.store.getModel(),
+            () => this.getSelection(),
+            (ids) => this.resolveSelectionIndices(ids),
+            () => this.store.getModel().getNItems(),
+        );
+    }
+
+    public flushBatch(): void {
+        this.store.flushBatch();
+        this.selectionManager.reapplySelection(this.initialSelected);
+        this.initialSelected = undefined;
+    }
+
+    public getStore(): ListStore {
+        return this.store;
+    }
+
+    public getSelectionModel(): Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection {
+        return this.selectionManager.getSelectionModel();
+    }
+
+    public appendChild(child: ListItemNode): void {
+        child.setStore(this.store);
+        this.store.addItem(child.props.id, child.props.value);
+    }
+
+    public insertBefore(child: ListItemNode, before: ListItemNode): void {
+        child.setStore(this.store);
+        this.store.insertItemBefore(child.props.id, before.props.id, child.props.value);
+    }
+
+    public removeChild(child: ListItemNode): void {
+        this.store.removeItem(child.props.id);
+        child.setStore(null);
+    }
+
+    public updateProps(oldProps: GridModelProps | null, newProps: GridModelProps): void {
+        this.selectionManager.update(
+            oldProps ? { ...this.config, ...oldProps } : null,
+            { ...this.config, ...newProps },
+            this.store.getModel(),
+        );
+    }
+
+    private getSelection(): string[] {
+        const model = this.store.getModel();
+        const selection = this.selectionManager.getSelectionModel().getSelection();
+        const size = selection.getSize();
+        const ids: string[] = [];
+
+        for (let i = 0; i < size; i++) {
+            const index = selection.getNth(i);
+            const id = model.getString(index);
+
+            if (id !== null) {
+                ids.push(id);
+            }
+        }
+
+        return ids;
+    }
+
+    private resolveSelectionIndices(ids: string[]): Gtk.Bitset {
+        const model = this.store.getModel();
+        const nItems = model.getNItems();
+        const selected = new Gtk.Bitset();
+
+        for (const id of ids) {
+            const index = model.find(id);
+            if (index < nItems) {
+                selected.add(index);
+            }
+        }
+
+        return selected;
+    }
+}