@gtkx/react 0.18.0 → 0.18.2

package/src/nodes/models/list.ts

@@ -0,0 +1,140 @@
+import type * as Gio from "@gtkx/ffi/gio";
+import type * as GObject from "@gtkx/ffi/gobject";
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkListViewProps } from "../../jsx.js";
+import { SelectionModelController } from "../internal/selection-model-controller.js";
+import type { SignalStore } from "../internal/signal-store.js";
+import { TreeStore } from "../internal/tree-store.js";
+import { ListItemNode } from "../list-item.js";
+
+export type ListModelProps = Pick<GtkListViewProps, "autoexpand" | "selectionMode" | "selected" | "onSelectionChanged">;
+
+type ListModelConfig = {
+    owner: object;
+    signalStore: SignalStore;
+};
+
+export class ListModel {
+    private config: ListModelConfig;
+    private store: TreeStore;
+    private treeListModel: Gtk.TreeListModel;
+    private selectionManager: SelectionModelController;
+
+    private initialSelected: string[] | null | undefined;
+
+    constructor(config: ListModelConfig, props: ListModelProps = {}) {
+        this.config = config;
+        this.store = new TreeStore();
+        this.store.beginBatch();
+        this.initialSelected = props.selected;
+
+        this.treeListModel = new Gtk.TreeListModel(
+            this.store.getRootModel(),
+            false,
+            props.autoexpand ?? false,
+            (item: GObject.Object) => this.createChildModel(item),
+        );
+
+        this.selectionManager = new SelectionModelController(
+            { ...config, ...props },
+            this.treeListModel,
+            () => this.getSelection(),
+            (ids) => this.resolveSelectionIndices(ids),
+            () => this.treeListModel.getNItems(),
+        );
+    }
+
+    public flushBatch(): void {
+        this.store.flushBatch();
+        this.selectionManager.reapplySelection(this.initialSelected);
+        this.initialSelected = undefined;
+    }
+
+    private createChildModel(item: GObject.Object): Gio.ListModel | null {
+        if (!(item instanceof Gtk.StringObject)) return null;
+        const parentId = item.getString();
+        return this.store.getChildrenModel(parentId);
+    }
+
+    public getStore(): TreeStore {
+        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.addItemWithChildren(child);
+    }
+
+    private addItemWithChildren(node: ListItemNode, parentId?: string): void {
+        const id = node.props.id;
+
+        for (const child of node.getChildNodes()) {
+            this.addItemWithChildren(child, id);
+        }
+
+        this.store.addItem(id, ListItemNode.createItemData(node.props), parentId);
+    }
+
+    public insertBefore(child: ListItemNode, before: ListItemNode): void {
+        child.setStore(this.store);
+        this.store.insertItemBefore(child.props.id, before.props.id, ListItemNode.createItemData(child.props));
+    }
+
+    public removeChild(child: ListItemNode): void {
+        this.store.removeItem(child.props.id);
+        child.setStore(null);
+    }
+
+    public updateProps(oldProps: ListModelProps | null, newProps: ListModelProps): void {
+        if (!oldProps || oldProps.autoexpand !== newProps.autoexpand) {
+            this.treeListModel.setAutoexpand(newProps.autoexpand ?? false);
+        }
+
+        this.selectionManager.update(
+            oldProps ? { ...this.config, ...oldProps } : null,
+            { ...this.config, ...newProps },
+            this.treeListModel,
+        );
+    }
+
+    private getSelection(): string[] {
+        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 row = this.treeListModel.getRow(index);
+            if (!row) continue;
+
+            const item = row.getItem();
+            if (item instanceof Gtk.StringObject) {
+                ids.push(item.getString());
+            }
+        }
+
+        return ids;
+    }
+
+    private resolveSelectionIndices(ids: string[]): Gtk.Bitset {
+        const nItems = this.treeListModel.getNItems();
+        const selected = new Gtk.Bitset();
+        const idSet = new Set(ids);
+
+        for (let i = 0; i < nItems; i++) {
+            const row = this.treeListModel.getRow(i);
+            if (!row) continue;
+
+            const item = row.getItem();
+            if (item instanceof Gtk.StringObject && idSet.has(item.getString())) {
+                selected.add(i);
+            }
+        }
+
+        return selected;
+    }
+}

package/src/nodes/models/menu.ts

@@ -0,0 +1,310 @@
+import * as Gio from "@gtkx/ffi/gio";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../../node.js";
+import type { Container } from "../../types.js";
+import { VirtualNode } from "../virtual.js";
+
+export type MenuModelProps = {
+    id?: string;
+    label?: string;
+    accels?: string | string[];
+    onActivate?: () => boolean | undefined;
+};
+
+export type MenuType = "root" | "item" | "section" | "submenu";
+
+export class MenuModel extends VirtualNode<MenuModelProps, MenuModel, MenuModel> {
+    private actionMap: Gio.ActionMap | null = null;
+    private actionPrefix: string;
+    private menu: Gio.Menu;
+    private type: MenuType;
+    private application: Gtk.Application | null = null;
+    private action: Gio.SimpleAction | null = null;
+
+    constructor(
+        type: MenuType,
+        props: MenuModelProps,
+        rootContainer: Container,
+        actionMap?: Gio.ActionMap,
+        application?: Gtk.Application,
+    ) {
+        super("", props, undefined, rootContainer);
+        this.type = type;
+        this.actionMap = actionMap ?? null;
+        this.actionPrefix = application ? "app" : "menu";
+        this.application = application ?? null;
+        this.menu = new Gio.Menu();
+    }
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof MenuModel;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof MenuModel;
+    }
+
+    public setActionMap(actionMap: Gio.ActionMap, prefix: string): void {
+        this.actionMap = actionMap;
+        this.actionPrefix = prefix;
+
+        for (const child of this.children) {
+            child.setActionMap(actionMap, prefix);
+
+            if (child.type === "item") {
+                child.createAction();
+            }
+        }
+    }
+
+    private getAccels(): string[] {
+        const accels = this.props.accels;
+
+        if (!accels) {
+            return [];
+        }
+
+        return Array.isArray(accels) ? accels : [accels];
+    }
+
+    private getActionName(): string {
+        return `${this.actionPrefix}.${this.props.id}`;
+    }
+
+    private getOnActivate(): () => void {
+        if (!this.props.onActivate) {
+            throw new Error("Expected 'onActivate' prop to be present on MenuItem");
+        }
+
+        return this.props.onActivate;
+    }
+
+    private getId(): string {
+        if (!this.props.id) {
+            throw new Error("Expected 'id' prop to be present on MenuItem");
+        }
+
+        return this.props.id;
+    }
+
+    private getParentMenu(): Gio.Menu {
+        if (!this.parent) {
+            throw new Error("Expected parent menu to be set on MenuNode");
+        }
+
+        return this.parent.getMenu();
+    }
+
+    private getActionMap(): Gio.ActionMap {
+        if (!this.actionMap) {
+            throw new Error("Expected actionMap to be set on MenuNode");
+        }
+
+        return this.actionMap;
+    }
+
+    public createAction(): void {
+        if (this.action) {
+            this.signalStore.set(this, this.action, "activate", null);
+        }
+
+        this.action = new Gio.SimpleAction(this.getId());
+        this.signalStore.set(this, this.action, "activate", this.getOnActivate());
+        this.getActionMap().addAction(this.action);
+
+        if (this.application && this.props.accels) {
+            this.application.setAccelsForAction(this.getActionName(), this.getAccels());
+        }
+    }
+
+    private removeAction(): void {
+        if (this.application && this.props.accels) {
+            this.application.setAccelsForAction(this.getActionName(), []);
+        }
+
+        if (this.action) {
+            this.getActionMap().removeAction(this.getId());
+            this.signalStore.set(this, this.action, "activate", null);
+            this.action = null;
+        }
+    }
+
+    private getPosition(): number {
+        return this.findPositionIn(this.getParentMenu());
+    }
+
+    private findPositionIn(parentMenu: Gio.Menu): number {
+        for (let i = 0; i < parentMenu.getNItems(); i++) {
+            if (this.type === "item") {
+                const actionName = parentMenu.getItemAttributeValue(i, "action")?.getString();
+
+                if (actionName === this.getActionName()) {
+                    return i;
+                }
+            } else {
+                const link = parentMenu.getItemLink(i, this.type);
+
+                if (link && link === this.menu) {
+                    return i;
+                }
+            }
+        }
+
+        return -1;
+    }
+
+    public getMenu(): Gio.Menu {
+        return this.menu;
+    }
+
+    private getAction(): Gio.SimpleAction {
+        if (!this.action) {
+            throw new Error("Expected action to be created on MenuItem");
+        }
+
+        return this.action;
+    }
+
+    public removeFromParentMenu(): void {
+        if (!this.parent) return;
+
+        const parentMenu = this.parent.getMenu();
+        const position = this.findPositionIn(parentMenu);
+
+        if (position >= 0) {
+            parentMenu.remove(position);
+        }
+    }
+
+    public insertInParentBefore(before: MenuModel): void {
+        if (this.type === "item" && this.actionMap) {
+            this.createAction();
+        }
+
+        const parentMenu = this.getParentMenu();
+        const beforePosition = before.getPosition();
+
+        switch (this.type) {
+            case "item": {
+                parentMenu.insert(beforePosition, this.props.label, this.getActionName());
+                break;
+            }
+            case "section":
+                parentMenu.insertSection(beforePosition, this.menu, this.props.label);
+                break;
+            case "submenu":
+                parentMenu.insertSubmenu(beforePosition, this.menu, this.props.label);
+                break;
+        }
+    }
+
+    public appendToParentMenu(): void {
+        if (this.type === "item" && this.actionMap) {
+            this.createAction();
+        }
+
+        const parentMenu = this.getParentMenu();
+
+        switch (this.type) {
+            case "item":
+                parentMenu.append(this.props.label, this.getActionName());
+                break;
+            case "section":
+                parentMenu.appendSection(this.menu, this.props.label);
+                break;
+            case "submenu":
+                parentMenu.appendSubmenu(this.menu, this.props.label);
+                break;
+        }
+    }
+
+    public override appendChild(child: MenuModel): void {
+        super.appendChild(child);
+
+        if (this.actionMap) {
+            child.setActionMap(this.actionMap, this.actionPrefix);
+        }
+
+        child.appendToParentMenu();
+    }
+
+    public override insertBefore(child: MenuModel, before: MenuModel): void {
+        super.insertBefore(child, before);
+
+        if (this.actionMap) {
+            child.setActionMap(this.actionMap, this.actionPrefix);
+        }
+
+        child.insertInParentBefore(before);
+    }
+
+    public override removeChild(child: MenuModel): void {
+        child.removeFromParentMenu();
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: MenuModelProps | null, newProps: MenuModelProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        if (this.type === "item") {
+            this.updateItemProps(oldProps, newProps);
+        } else if (this.type === "section" || this.type === "submenu") {
+            this.updateContainerProps(oldProps, newProps);
+        }
+    }
+
+    private updateItemProps(oldProps: MenuModelProps | null, newProps: MenuModelProps): void {
+        if (!this.parent || !this.actionMap) {
+            return;
+        }
+
+        if (!oldProps) {
+            return;
+        }
+
+        if (oldProps.id !== newProps.id || oldProps.label !== newProps.label) {
+            this.removeAction();
+            this.removeFromParentMenu();
+            this.createAction();
+            this.appendToParentMenu();
+            return;
+        }
+
+        if (oldProps.onActivate !== newProps.onActivate) {
+            this.signalStore.set(this, this.getAction(), "activate", newProps.onActivate);
+        }
+
+        if (oldProps.accels !== newProps.accels) {
+            if (this.application) {
+                this.application.setAccelsForAction(this.getActionName(), this.getAccels());
+            }
+        }
+    }
+
+    private updateContainerProps(oldProps: MenuModelProps | null, newProps: MenuModelProps): void {
+        if (!this.parent) {
+            return;
+        }
+
+        if (!oldProps || oldProps.label !== newProps.label) {
+            const parentMenu = this.parent.getMenu();
+            const position = this.findPositionIn(parentMenu);
+
+            if (position >= 0) {
+                parentMenu.remove(position);
+
+                if (this.type === "section") {
+                    parentMenu.insertSection(position, this.menu, this.props.label);
+                } else if (this.type === "submenu") {
+                    parentMenu.insertSubmenu(position, this.menu, this.props.label);
+                }
+            }
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        this.removeAction();
+        this.removeFromParentMenu();
+        super.detachDeletedInstance();
+    }
+}

package/src/nodes/navigation-page.ts

@@ -0,0 +1,154 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { toCamelCase } from "@gtkx/gir";
+import type { NavigationPageProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { ContainerClass } from "../types.js";
+import { hasChanged } from "./internal/props.js";
+import { getFocusWidget, isDescendantOf, resolvePropertySetter } from "./internal/widget.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class NavigationPageNode extends VirtualNode<NavigationPageProps, WidgetNode, WidgetNode> {
+    private wrappedPage: Adw.NavigationPage | null = null;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode;
+    }
+
+    public override setParent(parent: WidgetNode | null): void {
+        if (!parent && this.parent && this.wrappedPage) {
+            const parentWidget = this.getParentWidget();
+            if (parentWidget instanceof Adw.NavigationView) {
+                parentWidget.remove(this.wrappedPage);
+            } else {
+                this.applySlotChild(parentWidget, this.wrappedPage);
+            }
+            this.wrappedPage = null;
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        const oldChildWidget = this.children[0]?.container ?? null;
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        const oldChildWidget = child.container;
+        super.removeChild(child);
+
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override commitUpdate(oldProps: NavigationPageProps | null, newProps: NavigationPageProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent && this.wrappedPage) {
+            const parentWidget = this.getParentWidget();
+            if (parentWidget instanceof Adw.NavigationView) {
+                parentWidget.remove(this.wrappedPage);
+            } else {
+                this.applySlotChild(parentWidget, this.wrappedPage);
+            }
+        }
+        this.wrappedPage = null;
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: NavigationPageProps | null, newProps: NavigationPageProps): void {
+        if (!this.wrappedPage) {
+            return;
+        }
+
+        if (hasChanged(oldProps, newProps, "id")) {
+            this.wrappedPage.setTag(newProps.id);
+        }
+
+        if (hasChanged(oldProps, newProps, "title")) {
+            this.wrappedPage.setTitle(newProps.title ?? "");
+        }
+
+        if (hasChanged(oldProps, newProps, "canPop")) {
+            this.wrappedPage.setCanPop(newProps.canPop ?? true);
+        }
+    }
+
+    private onChildChange(oldChild: Gtk.Widget | null): void {
+        const parentWidget = this.getParentWidget();
+        const title = this.props.title ?? "";
+        const childWidget = this.children[0]?.container ?? null;
+
+        if (childWidget) {
+            const wrappedChild = this.props.id
+                ? Adw.NavigationPage.newWithTag(childWidget, title, this.props.id)
+                : new Adw.NavigationPage(childWidget, title);
+
+            this.wrappedPage = wrappedChild;
+            this.applyOwnProps(null, this.props);
+
+            if (parentWidget instanceof Adw.NavigationView) {
+                if (oldChild instanceof Adw.NavigationPage) {
+                    parentWidget.remove(oldChild);
+                }
+
+                parentWidget.add(wrappedChild);
+            } else {
+                this.applySlotChild(parentWidget, oldChild);
+            }
+        } else if (parentWidget instanceof Adw.NavigationView) {
+            if (oldChild instanceof Adw.NavigationPage) {
+                parentWidget.remove(oldChild);
+            }
+            this.wrappedPage = null;
+        } else {
+            this.wrappedPage = null;
+            this.applySlotChild(parentWidget, oldChild);
+        }
+    }
+
+    private applySlotChild(parentWidget: Gtk.Widget, oldChild: Gtk.Widget | null): void {
+        const propId = toCamelCase(this.props.id ?? "");
+        const setter = resolvePropertySetter(parentWidget, propId);
+
+        if (!setter) {
+            const parentType = (parentWidget.constructor as ContainerClass).glibTypeName;
+            throw new Error(`Unable to find property for slot '${propId}' on type '${parentType}'`);
+        }
+
+        if (oldChild && !this.wrappedPage) {
+            const focus = getFocusWidget(oldChild);
+
+            if (focus && isDescendantOf(focus, oldChild)) {
+                parentWidget.grabFocus();
+            }
+        }
+
+        setter(this.wrappedPage);
+    }
+
+    private getParentWidget(): Gtk.Widget {
+        if (!this.parent) {
+            throw new Error("Expected parent widget to be set on NavigationPageNode");
+        }
+        return this.parent.container;
+    }
+}

package/src/nodes/navigation-view.ts

@@ -0,0 +1,58 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type { AdwNavigationViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { filterProps, hasChanged, primitiveArrayEqual } from "./internal/props.js";
+import { NavigationPageNode } from "./navigation-page.js";
+import { SlotNode } from "./slot.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["history", "onHistoryChanged"] as const;
+
+type NavigationViewProps = Pick<AdwNavigationViewProps, (typeof OWN_PROPS)[number]>;
+type NavigationViewChild = NavigationPageNode | SlotNode | WidgetNode;
+
+export class NavigationViewNode extends WidgetNode<Adw.NavigationView, NavigationViewProps, NavigationViewChild> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof NavigationPageNode || child instanceof SlotNode || child instanceof WidgetNode;
+    }
+
+    public override commitUpdate(oldProps: NavigationViewProps | null, newProps: NavigationViewProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: NavigationViewProps | null, newProps: NavigationViewProps): void {
+        const oldHistory = oldProps?.history;
+        const newHistory = newProps.history;
+
+        if (newHistory && !primitiveArrayEqual(oldHistory, newHistory)) {
+            this.container.replaceWithTags(newHistory, newHistory.length);
+        }
+
+        if (hasChanged(oldProps, newProps, "onHistoryChanged")) {
+            const { onHistoryChanged } = newProps;
+            const handler = onHistoryChanged ? () => onHistoryChanged(this.getCurrentHistory()) : undefined;
+
+            this.signalStore.set(this, this.container, "popped", handler);
+            this.signalStore.set(this, this.container, "pushed", handler);
+            this.signalStore.set(this, this.container, "replaced", handler);
+        }
+    }
+
+    private getCurrentHistory(): string[] {
+        const stack = this.container.getNavigationStack();
+        const history: string[] = [];
+        const nItems = stack.getNItems();
+
+        for (let i = 0; i < nItems; i++) {
+            const page = stack.getObject(i);
+            if (!(page instanceof Adw.NavigationPage)) continue;
+            const tag = page.getTag();
+            if (tag) {
+                history.push(tag);
+            }
+        }
+
+        return history;
+    }
+}