@gtkx/react 0.9.4 → 0.10.0

package/dist/nodes/models/menu.js

@@ -0,0 +1,265 @@
+import { batch } from "@gtkx/ffi";
+import * as Gio from "@gtkx/ffi/gio";
+import { scheduleAfterCommit } from "../../scheduler.js";
+import { VirtualNode } from "../virtual.js";
+export class Menu extends VirtualNode {
+    actionMap;
+    actionPrefix;
+    parent;
+    menu;
+    type;
+    application;
+    action;
+    children = [];
+    constructor(type, props, actionMap, application) {
+        super("", props, undefined);
+        this.type = type;
+        this.actionMap = actionMap;
+        this.actionPrefix = application ? "app" : "menu";
+        this.application = application;
+        this.menu = new Gio.Menu();
+    }
+    setActionMap(actionMap, prefix) {
+        this.actionMap = actionMap;
+        this.actionPrefix = prefix;
+        for (const child of this.children) {
+            child.setActionMap(actionMap, prefix);
+            if (child.type === "item") {
+                child.createAction();
+            }
+        }
+    }
+    getAccels() {
+        const accels = this.props.accels;
+        if (!accels) {
+            return [];
+        }
+        return Array.isArray(accels) ? accels : [accels];
+    }
+    getActionName() {
+        return `${this.actionPrefix}.${this.props.id}`;
+    }
+    getOnActivate() {
+        if (!this.props.onActivate) {
+            throw new Error("Expected 'onActivate' prop to be present on MenuItem");
+        }
+        return this.props.onActivate;
+    }
+    getId() {
+        if (!this.props.id) {
+            throw new Error("Expected 'id' prop to be present on MenuItem");
+        }
+        return this.props.id;
+    }
+    getParent() {
+        if (!this.parent) {
+            throw new Error("Expected parent menu to be set on MenuNode");
+        }
+        return this.parent;
+    }
+    getActionMap() {
+        if (!this.actionMap) {
+            throw new Error("Expected actionMap to be set on MenuNode");
+        }
+        return this.actionMap;
+    }
+    createAction() {
+        batch(() => {
+            if (this.action) {
+                this.signalStore.set(this.action, "activate", undefined);
+            }
+            this.action = new Gio.SimpleAction(this.getId());
+            this.signalStore.set(this.action, "activate", this.getOnActivate());
+            this.getActionMap().addAction(this.action);
+            if (this.application && this.props.accels) {
+                this.application.setAccelsForAction(this.getActionName(), this.getAccels());
+            }
+        });
+    }
+    removeAction() {
+        batch(() => {
+            if (this.application && this.props.accels) {
+                this.application.setAccelsForAction(this.getActionName(), []);
+            }
+            if (this.action) {
+                this.getActionMap().removeAction(this.getId());
+                this.signalStore.set(this.action, "activate", undefined);
+                this.action = undefined;
+            }
+        });
+    }
+    getPosition() {
+        const parent = this.getParent();
+        for (let i = 0; i < parent.getNItems(); i++) {
+            if (this.type === "item") {
+                const actionName = parent.getItemAttributeValue(i, "action")?.getString();
+                if (actionName === this.getActionName()) {
+                    return i;
+                }
+            }
+            else {
+                const link = parent.getItemLink(i, this.type);
+                if (link?.equals(this.menu)) {
+                    return i;
+                }
+            }
+        }
+        return 0;
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    getMenu() {
+        return this.menu;
+    }
+    getAction() {
+        if (!this.action) {
+            throw new Error("Expected action to be created on MenuItem");
+        }
+        return this.action;
+    }
+    removeFromParent() {
+        if (!this.parent)
+            return;
+        const position = this.getPosition();
+        const parent = this.parent;
+        this.parent = undefined;
+        batch(() => parent.remove(position));
+    }
+    insertInParentBefore(before) {
+        if (this.type === "item" && this.actionMap) {
+            this.createAction();
+        }
+        scheduleAfterCommit(() => {
+            const parent = this.getParent();
+            const beforePosition = before.getPosition();
+            switch (this.type) {
+                case "item": {
+                    parent.insert(beforePosition, this.props.label, this.getActionName());
+                    break;
+                }
+                case "section":
+                    parent.insertSection(beforePosition, this.menu, this.props.label);
+                    break;
+                case "submenu":
+                    parent.insertSubmenu(beforePosition, this.menu, this.props.label);
+                    break;
+            }
+        });
+    }
+    appendToParent() {
+        if (this.type === "item" && this.actionMap) {
+            this.createAction();
+        }
+        scheduleAfterCommit(() => {
+            const parent = this.getParent();
+            switch (this.type) {
+                case "item":
+                    parent.append(this.props.label, this.getActionName());
+                    break;
+                case "section":
+                    parent.appendSection(this.menu, this.props.label);
+                    break;
+                case "submenu":
+                    parent.appendSubmenu(this.menu, this.props.label);
+                    break;
+            }
+        });
+    }
+    appendChild(child) {
+        if (!(child instanceof Menu)) {
+            return;
+        }
+        this.children.push(child);
+        if (this.actionMap) {
+            child.setActionMap(this.actionMap, this.actionPrefix);
+        }
+        child.setParent(this.menu);
+        child.appendToParent();
+    }
+    insertBefore(child, before) {
+        if (!(child instanceof Menu) || !(before instanceof Menu)) {
+            return;
+        }
+        const beforeIndex = this.children.indexOf(before);
+        if (beforeIndex >= 0) {
+            this.children.splice(beforeIndex, 0, child);
+        }
+        else {
+            this.children.push(child);
+        }
+        if (this.actionMap) {
+            child.setActionMap(this.actionMap, this.actionPrefix);
+        }
+        child.setParent(this.menu);
+        child.insertInParentBefore(before);
+    }
+    removeChild(child) {
+        if (!(child instanceof Menu)) {
+            return;
+        }
+        const index = this.children.indexOf(child);
+        if (index >= 0) {
+            this.children.splice(index, 1);
+        }
+        child.removeFromParent();
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (this.type === "item") {
+            this.updateItemProps(oldProps, newProps);
+        }
+        else if (this.type === "section" || this.type === "submenu") {
+            this.updateContainerProps(oldProps, newProps);
+        }
+    }
+    updateItemProps(oldProps, newProps) {
+        if (!this.parent || !this.actionMap) {
+            return;
+        }
+        if (!oldProps) {
+            return;
+        }
+        if (oldProps.id !== newProps.id || oldProps.label !== newProps.label) {
+            const parent = this.parent;
+            this.removeAction();
+            this.removeFromParent();
+            this.parent = parent;
+            this.createAction();
+            this.appendToParent();
+            return;
+        }
+        if (oldProps.onActivate !== newProps.onActivate) {
+            this.signalStore.set(this.getAction(), "activate", newProps.onActivate);
+        }
+        if (oldProps.accels !== newProps.accels) {
+            if (this.application) {
+                this.application.setAccelsForAction(this.getActionName(), this.getAccels());
+            }
+        }
+    }
+    updateContainerProps(oldProps, newProps) {
+        if (!this.parent) {
+            return;
+        }
+        if (!oldProps || oldProps.label !== newProps.label) {
+            const position = this.getPosition();
+            const parent = this.parent;
+            this.removeFromParent();
+            if (this.type === "section") {
+                parent.insertSection(position, this.menu, newProps.label);
+            }
+            else if (this.type === "submenu") {
+                parent.insertSubmenu(position, this.menu, newProps.label);
+            }
+        }
+    }
+    unmount() {
+        this.removeAction();
+        if (this.parent) {
+            this.removeFromParent();
+            this.parent = undefined;
+        }
+        super.unmount();
+    }
+}

package/dist/nodes/models/tree-list.d.ts

@@ -0,0 +1,28 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../../node.js";
+import { TreeStore } from "../internal/tree-store.js";
+import { VirtualNode } from "../virtual.js";
+export type TreeListProps = {
+    autoexpand?: boolean;
+    selectionMode?: Gtk.SelectionMode;
+    selected?: string[];
+    onSelectionChanged?: (ids: string[]) => void;
+};
+export declare class TreeList extends VirtualNode<TreeListProps> {
+    private store;
+    private treeListModel;
+    private selectionModel;
+    private handleSelectionChange?;
+    constructor(autoexpand?: boolean, selectionMode?: Gtk.SelectionMode);
+    private createChildModel;
+    getStore(): TreeStore;
+    getTreeListModel(): Gtk.TreeListModel;
+    getSelectionModel(): Gtk.SingleSelection | Gtk.MultiSelection;
+    appendChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    removeChild(child: Node): void;
+    updateProps(oldProps: TreeListProps | null, newProps: TreeListProps): void;
+    private createSelectionModel;
+    private getSelection;
+    private setSelection;
+}

package/dist/nodes/models/tree-list.js

@@ -0,0 +1,141 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { TreeStore } from "../internal/tree-store.js";
+import { TreeListItemNode } from "../tree-list-item.js";
+import { VirtualNode } from "../virtual.js";
+export class TreeList extends VirtualNode {
+    store;
+    treeListModel;
+    selectionModel;
+    handleSelectionChange;
+    constructor(autoexpand = false, selectionMode) {
+        super("", {}, undefined);
+        this.store = new TreeStore();
+        this.treeListModel = new Gtk.TreeListModel(this.store.getRootModel(), false, autoexpand, (item) => this.createChildModel(item));
+        this.selectionModel = this.createSelectionModel(selectionMode);
+        this.selectionModel.setModel(this.treeListModel);
+    }
+    createChildModel(item) {
+        const stringObject = item;
+        const parentId = stringObject.getString();
+        return this.store.getChildrenModel(parentId);
+    }
+    getStore() {
+        return this.store;
+    }
+    getTreeListModel() {
+        return this.treeListModel;
+    }
+    getSelectionModel() {
+        return this.selectionModel;
+    }
+    appendChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            return;
+        }
+        if (!child.props.id) {
+            throw new Error("Cannot append 'TreeListItem' to 'TreeList': missing required 'id' prop");
+        }
+        child.setStore(this.store);
+        this.store.addItem(child.props.id, {
+            value: child.props.value,
+            indentForDepth: child.props.indentForDepth,
+            indentForIcon: child.props.indentForIcon,
+            hideExpander: child.props.hideExpander,
+        });
+    }
+    insertBefore(child, before) {
+        if (!(child instanceof TreeListItemNode) || !(before instanceof TreeListItemNode)) {
+            return;
+        }
+        if (!child.props.id) {
+            throw new Error("Cannot insert 'TreeListItem' into 'TreeList': missing required 'id' prop");
+        }
+        if (!before.props.id) {
+            throw new Error("Cannot insert 'TreeListItem' into 'TreeList': 'before' node missing required 'id' prop");
+        }
+        child.setStore(this.store);
+        this.store.insertItemBefore(child.props.id, before.props.id, {
+            value: child.props.value,
+            indentForDepth: child.props.indentForDepth,
+            indentForIcon: child.props.indentForIcon,
+            hideExpander: child.props.hideExpander,
+        });
+    }
+    removeChild(child) {
+        if (!(child instanceof TreeListItemNode)) {
+            return;
+        }
+        if (!child.props.id) {
+            throw new Error("Cannot remove 'TreeListItem' from 'TreeList': missing required 'id' prop");
+        }
+        this.store.removeItem(child.props.id);
+        child.setStore(undefined);
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!oldProps || oldProps.autoexpand !== newProps.autoexpand) {
+            this.treeListModel.setAutoexpand(newProps.autoexpand ?? false);
+        }
+        if (!oldProps || oldProps.selectionMode !== newProps.selectionMode) {
+            this.signalStore.set(this.selectionModel, "selection-changed", undefined);
+            this.selectionModel = this.createSelectionModel(newProps.selectionMode);
+            this.selectionModel.setModel(this.treeListModel);
+        }
+        if (!oldProps ||
+            oldProps.onSelectionChanged !== newProps.onSelectionChanged ||
+            oldProps.selectionMode !== newProps.selectionMode) {
+            const onSelectionChanged = newProps.onSelectionChanged;
+            this.handleSelectionChange = () => {
+                onSelectionChanged?.(this.getSelection());
+            };
+            this.signalStore.set(this.selectionModel, "selection-changed", newProps.onSelectionChanged ? this.handleSelectionChange : undefined);
+        }
+        if (!oldProps || oldProps.selected !== newProps.selected || oldProps.selectionMode !== newProps.selectionMode) {
+            this.setSelection(newProps.selected);
+        }
+    }
+    createSelectionModel(mode) {
+        const selectionMode = mode ?? Gtk.SelectionMode.SINGLE;
+        const selectionModel = selectionMode === Gtk.SelectionMode.MULTIPLE
+            ? new Gtk.MultiSelection(this.treeListModel)
+            : new Gtk.SingleSelection(this.treeListModel);
+        if (selectionModel instanceof Gtk.SingleSelection) {
+            selectionModel.setAutoselect(false);
+            selectionModel.setCanUnselect(true);
+        }
+        return selectionModel;
+    }
+    getSelection() {
+        const selection = this.selectionModel.getSelection();
+        const size = selection.getSize();
+        const ids = [];
+        for (let i = 0; i < size; i++) {
+            const index = selection.getNth(i);
+            const row = this.treeListModel.getRow(index);
+            if (!row)
+                continue;
+            const stringObject = row.getItem();
+            if (stringObject) {
+                ids.push(stringObject.getString());
+            }
+        }
+        return ids;
+    }
+    setSelection(ids) {
+        const nItems = this.treeListModel.getNItems();
+        const selected = new Gtk.Bitset();
+        const mask = Gtk.Bitset.newRange(0, nItems);
+        if (ids) {
+            for (let i = 0; i < nItems; i++) {
+                const row = this.treeListModel.getRow(i);
+                if (!row)
+                    continue;
+                const stringObject = row.getItem();
+                if (stringObject && ids.includes(stringObject.getString())) {
+                    selected.add(i);
+                }
+            }
+        }
+        this.selectionModel.setSelection(selected, mask);
+    }
+}

package/dist/nodes/navigation-page.d.ts

@@ -0,0 +1,21 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type { AdwNavigationPageProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { VirtualNode } from "./virtual.js";
+type Props = Partial<AdwNavigationPageProps>;
+export declare class NavigationPageNode extends VirtualNode<Props> {
+    static priority: number;
+    private parent?;
+    private child?;
+    private page?;
+    static matches(type: string): boolean;
+    setParent(parent?: Adw.NavigationView): void;
+    appendChild(child: Node): void;
+    removeChild(): void;
+    unmount(): void;
+    updateProps(oldProps: Props | null, newProps: Props): void;
+    private onChildChange;
+    private addPage;
+    private removePage;
+}
+export {};

package/dist/nodes/navigation-page.js

@@ -0,0 +1,95 @@
+import * as Adw from "@gtkx/ffi/adw";
+import { registerNodeClass } from "../registry.js";
+import { scheduleAfterCommit } from "../scheduler.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export class NavigationPageNode extends VirtualNode {
+    static priority = -1;
+    parent;
+    child;
+    page;
+    static matches(type) {
+        return type === "AdwNavigationPage";
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    appendChild(child) {
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`Cannot append '${child.typeName}' to 'NavigationPage': expected Widget`);
+        }
+        const oldChild = this.child;
+        this.child = child.container;
+        scheduleAfterCommit(() => {
+            if (this.parent) {
+                this.onChildChange(oldChild);
+            }
+        });
+    }
+    removeChild() {
+        const oldChild = this.child;
+        scheduleAfterCommit(() => {
+            if (oldChild === this.child) {
+                this.child = undefined;
+            }
+            if (this.parent) {
+                this.onChildChange(oldChild);
+            }
+        });
+    }
+    unmount() {
+        if (this.parent && this.child) {
+            const oldChild = this.child;
+            this.child = undefined;
+            this.onChildChange(oldChild);
+        }
+        this.parent = undefined;
+        super.unmount();
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.page) {
+            return;
+        }
+        if (newProps.title && (!oldProps || oldProps.title !== newProps.title)) {
+            this.page.setTitle(newProps.title);
+        }
+        if (!oldProps || oldProps.tag !== newProps.tag) {
+            this.page.setTag(newProps.tag);
+        }
+        if (!oldProps || oldProps.canPop !== newProps.canPop) {
+            this.page.setCanPop(newProps.canPop ?? true);
+        }
+    }
+    onChildChange(oldChild) {
+        if (oldChild) {
+            this.removePage();
+        }
+        if (this.child) {
+            this.addPage();
+        }
+    }
+    addPage() {
+        if (!this.child || !this.parent) {
+            return;
+        }
+        let page;
+        if (this.props.tag) {
+            page = Adw.NavigationPage.pageNewWithTag(this.child, this.props.title ?? "", this.props.tag);
+        }
+        else {
+            page = new Adw.NavigationPage(this.child, this.props.title ?? "");
+        }
+        this.page = page;
+        this.parent.add(page);
+        this.updateProps(null, this.props);
+    }
+    removePage() {
+        if (!this.page || !this.parent) {
+            return;
+        }
+        this.parent.remove(this.page);
+        this.page = undefined;
+    }
+}
+registerNodeClass(NavigationPageNode);

package/dist/nodes/navigation-view.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/nodes/navigation-view.js

@@ -0,0 +1,29 @@
+import * as Adw from "@gtkx/ffi/adw";
+import { registerNodeClass } from "../registry.js";
+import { isContainerType } from "./internal/utils.js";
+import { NavigationPageNode } from "./navigation-page.js";
+import { WidgetNode } from "./widget.js";
+class NavigationViewNode extends WidgetNode {
+    static priority = -1;
+    static matches(_type, containerOrClass) {
+        return isContainerType(Adw.NavigationView, containerOrClass);
+    }
+    appendChild(child) {
+        if (child instanceof NavigationPageNode) {
+            child.setParent(this.container);
+            return;
+        }
+        super.appendChild(child);
+    }
+    insertBefore(child, _before) {
+        this.appendChild(child);
+    }
+    removeChild(child) {
+        if (child instanceof NavigationPageNode) {
+            child.unmount();
+            return;
+        }
+        super.removeChild(child);
+    }
+}
+registerNodeClass(NavigationViewNode);

package/dist/nodes/notebook-page-tab.d.ts

@@ -0,0 +1,15 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { SlotProps } from "../jsx.js";
+import { SlotNode } from "./slot.js";
+type Props = Partial<SlotProps>;
+export declare class NotebookPageTabNode extends SlotNode<Props> {
+    static priority: number;
+    private notebook?;
+    private page?;
+    static matches(type: string): boolean;
+    setPage(notebook?: Gtk.Notebook, page?: Gtk.Widget): void;
+    private getNotebook;
+    private getPage;
+    protected onChildChange(_oldChild: Gtk.Widget | undefined): void;
+}
+export {};

package/dist/nodes/notebook-page-tab.js

@@ -0,0 +1,42 @@
+import { registerNodeClass } from "../registry.js";
+import { SlotNode } from "./slot.js";
+export class NotebookPageTabNode extends SlotNode {
+    static priority = 1;
+    notebook;
+    page;
+    static matches(type) {
+        return type === "Notebook.PageTab";
+    }
+    setPage(notebook, page) {
+        this.notebook = notebook;
+        this.page = page;
+        this.setParent(notebook);
+    }
+    getNotebook() {
+        if (!this.notebook) {
+            throw new Error("Expected Notebook reference to be set on NotebookPageTabNode");
+        }
+        return this.notebook;
+    }
+    getPage() {
+        if (!this.page) {
+            throw new Error("Expected page reference to be set on NotebookPageTabNode");
+        }
+        return this.page;
+    }
+    onChildChange(_oldChild) {
+        if (!this.notebook || !this.page) {
+            return;
+        }
+        const notebook = this.getNotebook();
+        const page = this.getPage();
+        // Only call setTabLabel if the page is actually in the notebook
+        // (pageNum returns -1 if not found)
+        if (notebook.pageNum(page) === -1) {
+            return;
+        }
+        // setTabLabel accepts undefined to reset to default
+        notebook.setTabLabel(page, this.child);
+    }
+}
+registerNodeClass(NotebookPageTabNode);

package/dist/nodes/notebook-page.d.ts

@@ -0,0 +1,23 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { NotebookPageProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { SlotNode } from "./slot.js";
+type Props = Partial<NotebookPageProps>;
+export declare class NotebookPageNode extends SlotNode<Props> {
+    static priority: number;
+    position?: number;
+    private tabNode?;
+    static matches(type: string): boolean;
+    setNotebook(notebook?: Gtk.Notebook): void;
+    setPosition(position?: number): void;
+    private getNotebook;
+    private updateTabNode;
+    appendChild(child: Node): void;
+    removeChild(child?: Node): void;
+    unmount(): void;
+    updateProps(oldProps: Props | null, newProps: Props): void;
+    private attachPage;
+    private detachPage;
+    protected onChildChange(oldChild: Gtk.Widget | undefined): void;
+}
+export {};