@gtkx/react 0.12.1 → 0.13.1

package/dist/nodes/models/menu.js

@@ -1,6 +1,6 @@
 import { batch, isObjectEqual } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
-import { scheduleAfterCommit } from "../../scheduler.js";
+import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
 import { signalStore } from "../internal/signal-store.js";
 import { VirtualNode } from "../virtual.js";
 export class Menu extends VirtualNode {
@@ -90,7 +90,9 @@ export class Menu extends VirtualNode {
         });
     }
     getPosition() {
-        const parent = this.getParent();
+        return this.findPositionIn(this.getParent());
+    }
+    findPositionIn(parent) {
         for (let i = 0; i < parent.getNItems(); i++) {
             if (this.type === "item") {
                 const actionName = parent.getItemAttributeValue(i, "action")?.getString();
@@ -105,7 +107,7 @@ export class Menu extends VirtualNode {
                 }
             }
         }
-        return 0;
+        return -1;
     }
     setParent(parent) {
         this.parent = parent;
@@ -122,10 +124,14 @@ export class Menu extends VirtualNode {
     removeFromParent() {
         if (!this.parent)
             return;
-        const position = this.getPosition();
         const parent = this.parent;
         this.parent = undefined;
-        batch(() => parent.remove(position));
+        scheduleAfterCommit(() => {
+            const position = this.findPositionIn(parent);
+            if (position >= 0) {
+                parent.remove(position);
+            }
+        }, CommitPriority.HIGH);
     }
     insertInParentBefore(before) {
         if (this.type === "item" && this.actionMap) {
@@ -244,23 +250,24 @@ export class Menu extends VirtualNode {
             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);
-            }
+            batch(() => {
+                const position = this.findPositionIn(parent);
+                if (position >= 0) {
+                    parent.remove(position);
+                    if (this.type === "section") {
+                        parent.insertSection(position, this.menu, this.props.label);
+                    }
+                    else if (this.type === "submenu") {
+                        parent.insertSubmenu(position, this.menu, this.props.label);
+                    }
+                }
+            });
         }
     }
     unmount() {
         this.removeAction();
-        if (this.parent) {
-            this.removeFromParent();
-            this.parent = undefined;
-        }
+        this.removeFromParent();
         super.unmount();
     }
 }

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

@@ -13,7 +13,8 @@ export declare class TreeList extends VirtualNode<TreeListProps> {
     private treeListModel;
     private selectionModel;
     private handleSelectionChange?;
-    constructor(autoexpand?: boolean, selectionMode?: Gtk.SelectionMode);
+    constructor(props?: TreeListProps);
+    private initSelectionHandler;
     private createChildModel;
     getStore(): TreeStore;
     getTreeListModel(): Gtk.TreeListModel;

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

@@ -1,4 +1,5 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import { scheduleAfterCommit } from "../../scheduler.js";
 import { signalStore } from "../internal/signal-store.js";
 import { TreeStore } from "../internal/tree-store.js";
 import { TreeListItemNode } from "../tree-list-item.js";
@@ -8,12 +9,23 @@ export class TreeList extends VirtualNode {
     treeListModel;
     selectionModel;
     handleSelectionChange;
-    constructor(autoexpand = false, selectionMode) {
+    constructor(props = {}) {
         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.treeListModel = new Gtk.TreeListModel(this.store.getRootModel(), false, props.autoexpand ?? false, (item) => this.createChildModel(item));
+        this.selectionModel = this.createSelectionModel(props.selectionMode);
         this.selectionModel.setModel(this.treeListModel);
+        this.initSelectionHandler(props.onSelectionChanged);
+    }
+    initSelectionHandler(onSelectionChanged) {
+        if (!onSelectionChanged) {
+            signalStore.set(this, this.selectionModel, "selection-changed", null);
+            return;
+        }
+        this.handleSelectionChange = () => {
+            onSelectionChanged(this.getSelection());
+        };
+        signalStore.set(this, this.selectionModel, "selection-changed", this.handleSelectionChange);
     }
     createChildModel(item) {
         if (!(item instanceof Gtk.StringObject))
@@ -37,12 +49,15 @@ export class TreeList extends VirtualNode {
         if (!child.props.id) {
             throw new Error("Cannot append 'TreeListItem' to 'TreeList': missing required 'id' prop");
         }
+        const id = child.props.id;
         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,
+        scheduleAfterCommit(() => {
+            this.store.addItem(id, {
+                value: child.props.value,
+                indentForDepth: child.props.indentForDepth,
+                indentForIcon: child.props.indentForIcon,
+                hideExpander: child.props.hideExpander,
+            });
         });
     }
     insertBefore(child, before) {
@@ -55,12 +70,16 @@ export class TreeList extends VirtualNode {
         if (!before.props.id) {
             throw new Error("Cannot insert 'TreeListItem' into 'TreeList': 'before' node missing required 'id' prop");
         }
+        const id = child.props.id;
+        const beforeId = before.props.id;
         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,
+        scheduleAfterCommit(() => {
+            this.store.insertItemBefore(id, beforeId, {
+                value: child.props.value,
+                indentForDepth: child.props.indentForDepth,
+                indentForIcon: child.props.indentForIcon,
+                hideExpander: child.props.hideExpander,
+            });
         });
     }
     removeChild(child) {
@@ -70,7 +89,10 @@ export class TreeList extends VirtualNode {
         if (!child.props.id) {
             throw new Error("Cannot remove 'TreeListItem' from 'TreeList': missing required 'id' prop");
         }
-        this.store.removeItem(child.props.id);
+        const id = child.props.id;
+        scheduleAfterCommit(() => {
+            this.store.removeItem(id);
+        });
         child.setStore(null);
     }
     updateProps(oldProps, newProps) {
@@ -78,21 +100,18 @@ export class TreeList extends VirtualNode {
         if (!oldProps || oldProps.autoexpand !== newProps.autoexpand) {
             this.treeListModel.setAutoexpand(newProps.autoexpand ?? false);
         }
-        if (!oldProps || oldProps.selectionMode !== newProps.selectionMode) {
+        if (oldProps && oldProps.selectionMode !== newProps.selectionMode) {
             signalStore.set(this, this.selectionModel, "selection-changed", null);
             this.selectionModel = this.createSelectionModel(newProps.selectionMode);
             this.selectionModel.setModel(this.treeListModel);
+            this.initSelectionHandler(newProps.onSelectionChanged);
+            this.setSelection(newProps.selected);
+            return;
         }
-        if (!oldProps ||
-            oldProps.onSelectionChanged !== newProps.onSelectionChanged ||
-            oldProps.selectionMode !== newProps.selectionMode) {
-            const onSelectionChanged = newProps.onSelectionChanged;
-            this.handleSelectionChange = () => {
-                onSelectionChanged?.(this.getSelection());
-            };
-            signalStore.set(this, this.selectionModel, "selection-changed", newProps.onSelectionChanged ? this.handleSelectionChange : null);
+        if (!oldProps || oldProps.onSelectionChanged !== newProps.onSelectionChanged) {
+            this.initSelectionHandler(newProps.onSelectionChanged);
         }
-        if (!oldProps || oldProps.selected !== newProps.selected || oldProps.selectionMode !== newProps.selectionMode) {
+        if (!oldProps || oldProps.selected !== newProps.selected) {
             this.setSelection(newProps.selected);
         }
     }

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

@@ -0,0 +1,16 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { NavigationPageProps } from "../jsx.js";
+import { SlotNode } from "./slot.js";
+type Props = Partial<NavigationPageProps>;
+export declare class NavigationPageNode extends SlotNode<Props> {
+    static priority: number;
+    private page?;
+    static matches(type: string): boolean;
+    getPage(): Adw.NavigationPage | undefined;
+    updateProps(oldProps: Props | null, newProps: Props): void;
+    private addPage;
+    private removePage;
+    protected onChildChange(oldChild: Gtk.Widget | null): void;
+}
+export {};

package/dist/nodes/navigation-page.js

@@ -0,0 +1,58 @@
+import { isObjectEqual } from "@gtkx/ffi";
+import * as Adw from "@gtkx/ffi/adw";
+import { registerNodeClass } from "../registry.js";
+import { SlotNode } from "./slot.js";
+export class NavigationPageNode extends SlotNode {
+    static priority = 1;
+    page;
+    static matches(type) {
+        return type === "NavigationPage";
+    }
+    getPage() {
+        return this.page;
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.page) {
+            return;
+        }
+        if (newProps.id !== undefined && (!oldProps || oldProps.id !== newProps.id)) {
+            this.page.setTag(newProps.id);
+        }
+        if (newProps.title !== undefined && (!oldProps || oldProps.title !== newProps.title)) {
+            this.page.setTitle(newProps.title);
+        }
+        if (newProps.canPop !== undefined && (!oldProps || oldProps.canPop !== newProps.canPop)) {
+            this.page.setCanPop(newProps.canPop);
+        }
+    }
+    addPage() {
+        const child = this.getChild();
+        const parent = this.getParent();
+        const title = this.props.title ?? "";
+        const page = this.props.id
+            ? Adw.NavigationPage.newWithTag(child, title, this.props.id)
+            : new Adw.NavigationPage(child, title);
+        parent.add(page);
+        this.page = page;
+        this.updateProps(null, this.props);
+    }
+    removePage(oldChild) {
+        const parent = this.getParent();
+        if (!oldChild || !this.page) {
+            return;
+        }
+        const pageChild = this.page.getChild();
+        if (pageChild && isObjectEqual(pageChild, oldChild)) {
+            parent.remove(this.page);
+            this.page = undefined;
+        }
+    }
+    onChildChange(oldChild) {
+        this.removePage(oldChild);
+        if (this.child) {
+            this.addPage();
+        }
+    }
+}
+registerNodeClass(NavigationPageNode);

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

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

package/dist/nodes/navigation-view.js

@@ -0,0 +1,105 @@
+import * as Adw from "@gtkx/ffi/adw";
+import { registerNodeClass } from "../registry.js";
+import { scheduleAfterCommit } from "../scheduler.js";
+import { signalStore } from "./internal/signal-store.js";
+import { filterProps, isContainerType } from "./internal/utils.js";
+import { NavigationPageNode } from "./navigation-page.js";
+import { SlotNode } from "./slot.js";
+import { WidgetNode } from "./widget.js";
+const PROPS = ["history", "onHistoryChanged"];
+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;
+        }
+        if (child instanceof SlotNode || child instanceof WidgetNode) {
+            super.appendChild(child);
+            return;
+        }
+        throw new Error(`Cannot append '${child.typeName}' to 'NavigationView': expected x.NavigationPage or Widget`);
+    }
+    insertBefore(child, before) {
+        if (child instanceof NavigationPageNode) {
+            child.setParent(this.container);
+            return;
+        }
+        if (child instanceof SlotNode || child instanceof WidgetNode) {
+            super.insertBefore(child, before);
+            return;
+        }
+        throw new Error(`Cannot insert '${child.typeName}' into 'NavigationView': expected x.NavigationPage or Widget`);
+    }
+    removeChild(child) {
+        if (child instanceof NavigationPageNode) {
+            return;
+        }
+        if (child instanceof SlotNode || child instanceof WidgetNode) {
+            super.removeChild(child);
+            return;
+        }
+        throw new Error(`Cannot remove '${child.typeName}' from 'NavigationView': expected x.NavigationPage or Widget`);
+    }
+    updateProps(oldProps, newProps) {
+        const oldHistory = oldProps?.history;
+        const newHistory = newProps.history;
+        if (newHistory && !this.arraysEqual(oldHistory, newHistory)) {
+            this.syncHistory(newHistory);
+        }
+        if (!oldProps || oldProps.onHistoryChanged !== newProps.onHistoryChanged) {
+            const onHistoryChanged = newProps.onHistoryChanged;
+            if (onHistoryChanged) {
+                const handleHistoryChanged = () => {
+                    const history = this.getCurrentHistory();
+                    onHistoryChanged(history);
+                };
+                signalStore.set(this, this.container, "popped", handleHistoryChanged);
+                signalStore.set(this, this.container, "pushed", handleHistoryChanged);
+                signalStore.set(this, this.container, "replaced", handleHistoryChanged);
+            }
+            else {
+                signalStore.set(this, this.container, "popped", null);
+                signalStore.set(this, this.container, "pushed", null);
+                signalStore.set(this, this.container, "replaced", null);
+            }
+        }
+        super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));
+    }
+    syncHistory(history) {
+        const container = this.container;
+        scheduleAfterCommit(() => {
+            container.replaceWithTags(history, history.length);
+        });
+    }
+    getCurrentHistory() {
+        const stack = this.container.getNavigationStack();
+        const history = [];
+        const nItems = stack.getNItems();
+        for (let i = 0; i < nItems; i++) {
+            const page = stack.getObject(i);
+            const tag = page?.getTag();
+            if (tag) {
+                history.push(tag);
+            }
+        }
+        return history;
+    }
+    arraysEqual(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b)
+            return false;
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (a[i] !== b[i])
+                return false;
+        }
+        return true;
+    }
+}
+registerNodeClass(NavigationViewNode);

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

@@ -5,7 +5,7 @@ export class NotebookPageTabNode extends SlotNode {
     notebook;
     page;
     static matches(type) {
-        return type === "Notebook.PageTab";
+        return type === "NotebookPageTab";
     }
     setPage(notebook, page) {
         this.notebook = notebook;

package/dist/nodes/notebook-page.js

@@ -9,7 +9,7 @@ export class NotebookPageNode extends SlotNode {
     position;
     tabNode;
     static matches(type) {
-        return type === "Notebook.Page";
+        return type === "NotebookPage";
     }
     setNotebook(notebook) {
         this.setParent(notebook);
@@ -38,7 +38,7 @@ export class NotebookPageNode extends SlotNode {
             return;
         }
         if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to 'Notebook.Page': expected Widget or Notebook.PageTab`);
+            throw new Error(`Cannot append '${child.typeName}' to 'x.NotebookPage': expected Widget or x.NotebookPageTab`);
         }
         const oldChild = this.child;
         this.child = child.container;
@@ -61,6 +61,7 @@ export class NotebookPageNode extends SlotNode {
         super.unmount();
     }
     updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
         if (!oldProps || oldProps.label !== newProps.label) {
             if (this.child && this.parent && !this.tabNode?.child) {
                 const tabLabel = this.getNotebook().getTabLabel(this.child);

package/dist/nodes/notebook.js

@@ -10,13 +10,13 @@ class NotebookNode extends WidgetNode {
     }
     appendChild(child) {
         if (!(child instanceof NotebookPageNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to 'Notebook': expected Notebook.Page`);
+            throw new Error(`Cannot append '${child.typeName}' to 'Notebook': expected x.NotebookPage`);
         }
         child.setNotebook(this.container);
     }
     insertBefore(child, before) {
         if (!(child instanceof NotebookPageNode) || !(before instanceof NotebookPageNode)) {
-            throw new Error(`Cannot insert '${child.typeName}' to 'Notebook': expected Notebook.Page`);
+            throw new Error(`Cannot insert '${child.typeName}' into 'Notebook': expected x.NotebookPage`);
         }
         const beforePosition = this.container.pageNum(before.getChild());
         child.setPosition(beforePosition);
@@ -24,7 +24,7 @@ class NotebookNode extends WidgetNode {
     }
     removeChild(child) {
         if (!(child instanceof NotebookPageNode)) {
-            throw new Error(`Cannot remove '${child.typeName}' from 'Notebook': expected Notebook.Page`);
+            throw new Error(`Cannot remove '${child.typeName}' from 'Notebook': expected x.NotebookPage`);
         }
         child.setPosition(null);
     }

package/dist/nodes/overlay-child.js

@@ -1,4 +1,4 @@
-import { isObjectEqual } from "@gtkx/ffi";
+import { batch, isObjectEqual } from "@gtkx/ffi";
 import { registerNodeClass } from "../registry.js";
 import { SlotNode } from "./slot.js";
 class OverlayChildNode extends SlotNode {
@@ -12,23 +12,38 @@ class OverlayChildNode extends SlotNode {
         }
         return this.parent;
     }
-    onChildChange(oldChild) {
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!this.parent || !this.child) {
+            return;
+        }
         const overlay = this.getOverlay();
-        if (oldChild) {
-            const parent = oldChild.getParent();
-            if (parent && isObjectEqual(parent, overlay)) {
-                overlay.removeOverlay(oldChild);
-            }
+        if (!oldProps || oldProps.measure !== newProps.measure) {
+            overlay.setMeasureOverlay(this.child, newProps.measure ?? false);
+        }
+        if (!oldProps || oldProps.clipOverlay !== newProps.clipOverlay) {
+            overlay.setClipOverlay(this.child, newProps.clipOverlay ?? false);
         }
-        if (this.child) {
-            overlay.addOverlay(this.child);
-            if (this.props.measure !== undefined) {
-                overlay.setMeasureOverlay(this.child, this.props.measure);
+    }
+    onChildChange(oldChild) {
+        const overlay = this.getOverlay();
+        batch(() => {
+            if (oldChild) {
+                const parent = oldChild.getParent();
+                if (parent && isObjectEqual(parent, overlay)) {
+                    overlay.removeOverlay(oldChild);
+                }
             }
-            if (this.props.clipOverlay !== undefined) {
-                overlay.setClipOverlay(this.child, this.props.clipOverlay);
+            if (this.child) {
+                overlay.addOverlay(this.child);
+                if (this.props.measure !== undefined) {
+                    overlay.setMeasureOverlay(this.child, this.props.measure);
+                }
+                if (this.props.clipOverlay !== undefined) {
+                    overlay.setClipOverlay(this.child, this.props.clipOverlay);
+                }
             }
-        }
+        });
     }
 }
 registerNodeClass(OverlayChildNode);

package/dist/nodes/pack-child.d.ts

@@ -1,21 +1,14 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
-import type { Node } from "../node.js";
-import { VirtualNode } from "./virtual.js";
+import { VirtualChildNode } from "./virtual-child.js";
 type PackableWidget = Gtk.Widget & {
     packStart(child: Gtk.Widget): void;
     packEnd(child: Gtk.Widget): void;
     remove(child: Gtk.Widget): void;
 };
-export declare class PackChild extends VirtualNode {
+export declare class PackChild extends VirtualChildNode<PackableWidget> {
     static priority: number;
     static matches(type: string): boolean;
-    private parent?;
-    private children;
-    private getPosition;
-    setParent(newParent?: PackableWidget): void;
-    unmount(): void;
-    appendChild(child: Node): void;
-    insertBefore(child: Node): void;
-    removeChild(child: Node): void;
+    protected getPositionLabel(): string;
+    protected attachChild(parent: PackableWidget, widget: Gtk.Widget): void;
 }
 export {};

package/dist/nodes/pack-child.js

@@ -1,76 +1,20 @@
-import { isObjectEqual } from "@gtkx/ffi";
 import { registerNodeClass } from "../registry.js";
-import { scheduleAfterCommit } from "../scheduler.js";
-import { VirtualNode } from "./virtual.js";
-import { WidgetNode } from "./widget.js";
-export class PackChild extends VirtualNode {
+import { VirtualChildNode } from "./virtual-child.js";
+export class PackChild extends VirtualChildNode {
     static priority = 1;
     static matches(type) {
-        return type === "Pack.Start" || type === "Pack.End";
+        return type === "PackStart" || type === "PackEnd";
     }
-    parent;
-    children = [];
-    getPosition() {
-        return this.typeName === "Pack.Start" ? "start" : "end";
+    getPositionLabel() {
+        return this.typeName === "PackStart" ? "start" : "end";
     }
-    setParent(newParent) {
-        this.parent = newParent;
-    }
-    unmount() {
-        const parent = this.parent;
-        const childrenToRemove = [...this.children];
-        if (parent && childrenToRemove.length > 0) {
-            scheduleAfterCommit(() => {
-                for (const widget of childrenToRemove) {
-                    const currentParent = widget.getParent();
-                    if (currentParent && isObjectEqual(currentParent, parent)) {
-                        parent.remove(widget);
-                    }
-                }
-            });
-        }
-        this.children = [];
-        this.parent = undefined;
-        super.unmount();
-    }
-    appendChild(child) {
-        if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot append '${child.typeName}' to '${this.typeName}': expected Widget`);
-        }
-        const widget = child.container;
-        this.children.push(widget);
-        scheduleAfterCommit(() => {
-            if (this.parent) {
-                if (this.getPosition() === "start") {
-                    this.parent.packStart(widget);
-                }
-                else {
-                    this.parent.packEnd(widget);
-                }
-            }
-        });
-    }
-    insertBefore(child) {
-        this.appendChild(child);
-    }
-    removeChild(child) {
-        if (!(child instanceof WidgetNode)) {
-            throw new Error(`Cannot remove '${child.typeName}' from '${this.typeName}': expected Widget`);
+    attachChild(parent, widget) {
+        if (this.getPositionLabel() === "start") {
+            parent.packStart(widget);
         }
-        const widget = child.container;
-        const parent = this.parent;
-        const index = this.children.indexOf(widget);
-        if (index !== -1) {
-            this.children.splice(index, 1);
+        else {
+            parent.packEnd(widget);
         }
-        scheduleAfterCommit(() => {
-            if (parent) {
-                const currentParent = widget.getParent();
-                if (currentParent && isObjectEqual(currentParent, parent)) {
-                    parent.remove(widget);
-                }
-            }
-        });
     }
 }
 registerNodeClass(PackChild);