@gtkx/react 0.15.0 → 0.17.1

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

@@ -1,33 +1,17 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
-import { signalStore } from "../internal/signal-store.js";
+import { SelectionModelManager } from "../internal/selection-model.js";
 import { TreeStore } from "../internal/tree-store.js";
-import { TreeListItemNode } from "../tree-list-item.js";
+import { createTreeItemData, TreeListItemNode } from "../tree-list-item.js";
 import { VirtualNode } from "../virtual.js";
 export class TreeList extends VirtualNode {
     store;
     treeListModel;
-    selectionModel;
-    handleSelectionChange;
-    pendingSelection;
-    selectionScheduled = false;
-    constructor(props = {}) {
-        super("", {}, undefined);
+    selectionManager;
+    constructor(props = {}, rootContainer) {
+        super("", {}, undefined, rootContainer);
         this.store = new TreeStore();
         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);
+        this.selectionManager = new SelectionModelManager({ owner: this, signalStore: this.signalStore, ...props }, this.treeListModel, () => this.getSelection(), (ids) => this.resolveSelectionIndices(ids), () => this.treeListModel.getNItems());
     }
     createChildModel(item) {
         if (!(item instanceof Gtk.StringObject))
@@ -42,7 +26,7 @@ export class TreeList extends VirtualNode {
         return this.treeListModel;
     }
     getSelectionModel() {
-        return this.selectionModel;
+        return this.selectionManager.getSelectionModel();
     }
     appendChild(child) {
         if (!(child instanceof TreeListItemNode)) {
@@ -51,16 +35,17 @@ 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);
-        scheduleAfterCommit(() => {
-            this.store.addItem(id, {
-                value: child.props.value,
-                indentForDepth: child.props.indentForDepth,
-                indentForIcon: child.props.indentForIcon,
-                hideExpander: child.props.hideExpander,
-            });
-        });
+        this.addItemWithChildren(child);
+    }
+    addItemWithChildren(node, parentId) {
+        const id = node.props.id;
+        if (id === undefined)
+            return;
+        for (const child of node.getChildNodes()) {
+            this.addItemWithChildren(child, id);
+        }
+        this.store.addItem(id, createTreeItemData(node.props), parentId);
     }
     insertBefore(child, before) {
         if (!(child instanceof TreeListItemNode) || !(before instanceof TreeListItemNode)) {
@@ -75,14 +60,7 @@ export class TreeList extends VirtualNode {
         const id = child.props.id;
         const beforeId = before.props.id;
         child.setStore(this.store);
-        scheduleAfterCommit(() => {
-            this.store.insertItemBefore(id, beforeId, {
-                value: child.props.value,
-                indentForDepth: child.props.indentForDepth,
-                indentForIcon: child.props.indentForIcon,
-                hideExpander: child.props.hideExpander,
-            });
-        });
+        this.store.insertItemBefore(id, beforeId, createTreeItemData(child.props));
     }
     removeChild(child) {
         if (!(child instanceof TreeListItemNode)) {
@@ -92,9 +70,7 @@ export class TreeList extends VirtualNode {
             throw new Error("Cannot remove 'TreeListItem' from 'TreeList': missing required 'id' prop");
         }
         const id = child.props.id;
-        scheduleAfterCommit(() => {
-            this.store.removeItem(id);
-        });
+        this.store.removeItem(id);
         child.setStore(null);
     }
     updateProps(oldProps, newProps) {
@@ -102,36 +78,10 @@ export class TreeList extends VirtualNode {
         if (!oldProps || oldProps.autoexpand !== newProps.autoexpand) {
             this.treeListModel.setAutoexpand(newProps.autoexpand ?? false);
         }
-        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) {
-            this.initSelectionHandler(newProps.onSelectionChanged);
-        }
-        if (!oldProps || oldProps.selected !== newProps.selected) {
-            this.setSelection(newProps.selected);
-        }
-    }
-    createSelectionModel(mode) {
-        const selectionMode = mode ?? Gtk.SelectionMode.SINGLE;
-        if (selectionMode === Gtk.SelectionMode.NONE) {
-            return new Gtk.NoSelection(this.treeListModel);
-        }
-        if (selectionMode === Gtk.SelectionMode.MULTIPLE) {
-            return new Gtk.MultiSelection(this.treeListModel);
-        }
-        const selectionModel = new Gtk.SingleSelection(this.treeListModel);
-        selectionModel.setAutoselect(selectionMode === Gtk.SelectionMode.BROWSE);
-        selectionModel.setCanUnselect(selectionMode !== Gtk.SelectionMode.BROWSE);
-        return selectionModel;
+        this.selectionManager.update(oldProps ? { owner: this, signalStore: this.signalStore, ...oldProps } : null, { owner: this, signalStore: this.signalStore, ...newProps }, this.treeListModel);
     }
     getSelection() {
-        const selection = this.selectionModel.getSelection();
+        const selection = this.selectionManager.getSelectionModel().getSelection();
         const size = selection.getSize();
         const ids = [];
         for (let i = 0; i < size; i++) {
@@ -146,31 +96,18 @@ export class TreeList extends VirtualNode {
         }
         return ids;
     }
-    setSelection(ids) {
-        this.pendingSelection = ids;
-        if (!this.selectionScheduled) {
-            this.selectionScheduled = true;
-            scheduleAfterCommit(() => this.applySelection(), CommitPriority.LOW);
-        }
-    }
-    applySelection() {
-        this.selectionScheduled = false;
-        const ids = this.pendingSelection;
-        this.pendingSelection = undefined;
+    resolveSelectionIndices(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 item = row.getItem();
-                if (item instanceof Gtk.StringObject && ids.includes(item.getString())) {
-                    selected.add(i);
-                }
+        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 && ids.includes(item.getString())) {
+                selected.add(i);
             }
         }
-        this.selectionModel.setSelection(selected, mask);
+        return selected;
     }
 }

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

@@ -6,6 +6,7 @@ export declare class NavigationPageNode extends SlotNode<Props> {
     static priority: number;
     static matches(type: string): boolean;
     updateProps(oldProps: Props | null, newProps: Props): void;
+    protected applyOwnProps(oldProps: Props | null, newProps: Props): void;
     protected onChildChange(oldChild: Adw.NavigationPage | null): void;
 }
 export {};

package/dist/nodes/navigation-page.js

@@ -1,6 +1,6 @@
-import { batch } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
 import { SlotNode } from "./slot.js";
 export class NavigationPageNode extends SlotNode {
     static priority = 1;
@@ -9,48 +9,43 @@ export class NavigationPageNode extends SlotNode {
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         const child = this.child;
         if (!(child instanceof Adw.NavigationPage)) {
             return;
         }
-        if (!oldProps || oldProps.id !== newProps.id) {
-            if (newProps.id !== undefined) {
-                child.setTag(newProps.id);
-            }
+        if (hasChanged(oldProps, newProps, "id") && newProps.id !== undefined) {
+            child.setTag(newProps.id);
         }
-        if (!oldProps || oldProps.title !== newProps.title) {
-            if (newProps.title !== undefined) {
-                child.setTitle(newProps.title);
-            }
+        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
+            child.setTitle(newProps.title);
         }
-        if (!oldProps || oldProps.canPop !== newProps.canPop) {
-            if (newProps.canPop !== undefined) {
-                child.setCanPop(newProps.canPop);
-            }
+        if (hasChanged(oldProps, newProps, "canPop") && newProps.canPop !== undefined) {
+            child.setCanPop(newProps.canPop);
         }
     }
     onChildChange(oldChild) {
-        batch(() => {
-            const navigationView = this.getParent();
-            const title = this.props.title ?? "";
-            if (this.child) {
-                this.child = this.props.id
-                    ? Adw.NavigationPage.newWithTag(this.child, title, this.props.id)
-                    : new Adw.NavigationPage(this.child, title);
-                this.updateProps(null, this.props);
-            }
-            if (navigationView instanceof Adw.NavigationView) {
-                if (oldChild instanceof Adw.NavigationPage) {
-                    navigationView.remove(oldChild);
-                }
-                if (this.child) {
-                    navigationView.add(this.child);
-                }
+        const navigationView = this.getParent();
+        const title = this.props.title ?? "";
+        if (this.child) {
+            this.child = this.props.id
+                ? Adw.NavigationPage.newWithTag(this.child, title, this.props.id)
+                : new Adw.NavigationPage(this.child, title);
+            this.updateProps(null, this.props);
+        }
+        if (navigationView instanceof Adw.NavigationView) {
+            if (oldChild instanceof Adw.NavigationPage) {
+                navigationView.remove(oldChild);
             }
-            else {
-                super.onChildChange(oldChild);
+            if (this.child) {
+                navigationView.add(this.child);
             }
-        });
+        }
+        else {
+            super.onChildChange(oldChild);
+        }
     }
 }
 registerNodeClass(NavigationPageNode);

package/dist/nodes/navigation-view.js

@@ -1,16 +1,15 @@
 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 { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { filterProps, hasChanged, matchesAnyClass, primitiveArrayEqual } from "./internal/utils.js";
 import { NavigationPageNode } from "./navigation-page.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
-const PROPS = ["history", "onHistoryChanged"];
+const OWN_PROPS = ["history", "onHistoryChanged"];
 class NavigationViewNode extends WidgetNode {
     static priority = 1;
     static matches(_type, containerOrClass) {
-        return isContainerType(Adw.NavigationView, containerOrClass);
+        return matchesAnyClass([Adw.NavigationView], containerOrClass);
     }
     appendChild(child) {
         if (child instanceof NavigationPageNode) {
@@ -45,35 +44,38 @@ class NavigationViewNode extends WidgetNode {
         throw new Error(`Cannot remove '${child.typeName}' from 'NavigationView': expected x.NavigationPage or Widget`);
     }
     updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         const oldHistory = oldProps?.history;
         const newHistory = newProps.history;
-        if (newHistory && !this.arraysEqual(oldHistory, newHistory)) {
+        if (newHistory && !primitiveArrayEqual(oldHistory, newHistory)) {
             this.syncHistory(newHistory);
         }
-        if (!oldProps || oldProps.onHistoryChanged !== newProps.onHistoryChanged) {
+        if (hasChanged(oldProps, 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);
+                this.signalStore.set(this, this.container, "popped", handleHistoryChanged);
+                this.signalStore.set(this, this.container, "pushed", handleHistoryChanged);
+                this.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);
+                this.signalStore.set(this, this.container, "popped", null);
+                this.signalStore.set(this, this.container, "pushed", null);
+                this.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);
-        });
+        }, CommitPriority.NORMAL);
     }
     getCurrentHistory() {
         const stack = this.container.getNavigationStack();
@@ -88,18 +90,5 @@ class NavigationViewNode extends WidgetNode {
         }
         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.d.ts

@@ -4,10 +4,10 @@ import { SlotNode } from "./slot.js";
 type Props = Partial<SlotProps>;
 export declare class NotebookPageTabNode extends SlotNode<Props> {
     static priority: number;
-    private notebook?;
-    private page?;
+    private notebook;
+    private page;
     static matches(type: string): boolean;
-    setPage(notebook?: Gtk.Notebook, page?: Gtk.Widget): void;
+    setPage(notebook: Gtk.Notebook | null, page: Gtk.Widget | null): void;
     updateProps(oldProps: Props | null, newProps: Props): void;
     private getNotebook;
     private getPage;

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

@@ -1,10 +1,9 @@
-import { batch } from "@gtkx/ffi";
 import { registerNodeClass } from "../registry.js";
 import { SlotNode } from "./slot.js";
 export class NotebookPageTabNode extends SlotNode {
     static priority = 1;
-    notebook;
-    page;
+    notebook = null;
+    page = null;
     static matches(type) {
         return type === "NotebookPageTab";
     }
@@ -29,17 +28,15 @@ export class NotebookPageTabNode extends SlotNode {
         return this.page;
     }
     onChildChange(_oldChild) {
-        batch(() => {
-            if (!this.notebook || !this.page) {
-                return;
-            }
-            const notebook = this.getNotebook();
-            const page = this.getPage();
-            if (notebook.pageNum(page) === -1) {
-                return;
-            }
-            notebook.setTabLabel(page, this.child);
-        });
+        if (!this.notebook || !this.page) {
+            return;
+        }
+        const notebook = this.getNotebook();
+        const page = this.getPage();
+        if (notebook.pageNum(page) === -1) {
+            return;
+        }
+        notebook.setTabLabel(page, this.child);
     }
 }
 registerNodeClass(NotebookPageTabNode);

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

@@ -5,18 +5,20 @@ import { SlotNode } from "./slot.js";
 type Props = Partial<NotebookPageProps>;
 export declare class NotebookPageNode extends SlotNode<Props> {
     static priority: number;
-    position?: number | null;
-    private tabNode?;
+    position: number | null;
+    private tabNode;
     static matches(type: string): boolean;
-    setNotebook(notebook?: Gtk.Notebook): void;
-    setPosition(position?: number | null): void;
+    setParent(parent: Gtk.Widget | null): void;
+    setPosition(position: number | null): void;
     private getNotebook;
     private updateTabNode;
     appendChild(child: Node): void;
-    removeChild(child?: Node): void;
+    removeChild(child: Node): void;
     unmount(): void;
     updateProps(oldProps: Props | null, newProps: Props): void;
+    protected applyOwnProps(oldProps: Props | null, newProps: Props): void;
     private attachPage;
+    private applyPageProps;
     private detachPage;
     protected onChildChange(oldChild: Gtk.Widget | null): void;
 }

package/dist/nodes/notebook-page.js

@@ -1,19 +1,19 @@
-import { batch } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
-import { scheduleAfterCommit } from "../scheduler.js";
+import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { hasChanged } from "./internal/utils.js";
 import { NotebookPageTabNode } from "./notebook-page-tab.js";
 import { SlotNode } from "./slot.js";
 import { WidgetNode } from "./widget.js";
 export class NotebookPageNode extends SlotNode {
     static priority = 1;
-    position;
-    tabNode;
+    position = null;
+    tabNode = null;
     static matches(type) {
         return type === "NotebookPage";
     }
-    setNotebook(notebook) {
-        this.setParent(notebook);
+    setParent(parent) {
+        super.setParent(parent);
         this.updateTabNode();
     }
     setPosition(position) {
@@ -35,7 +35,7 @@ export class NotebookPageNode extends SlotNode {
             this.tabNode = child;
             scheduleAfterCommit(() => {
                 this.updateTabNode();
-            });
+            }, CommitPriority.NORMAL);
             return;
         }
         if (!(child instanceof WidgetNode)) {
@@ -48,26 +48,31 @@ export class NotebookPageNode extends SlotNode {
                 this.onChildChange(oldChild ?? null);
             }
             this.updateTabNode();
-        });
+        }, CommitPriority.NORMAL);
     }
     removeChild(child) {
         if (child instanceof NotebookPageTabNode) {
-            this.tabNode = undefined;
+            this.tabNode = null;
             return;
         }
-        super.removeChild();
+        super.removeChild(child);
     }
     unmount() {
-        this.tabNode = undefined;
+        this.tabNode = null;
         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);
-                tabLabel.setLabel(newProps.label ?? "");
-            }
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "label") && this.child && this.parent && !this.tabNode?.child) {
+            const tabLabel = this.getNotebook().getTabLabel(this.child);
+            tabLabel.setLabel(newProps.label ?? "");
+        }
+        const pagePropsChanged = hasChanged(oldProps, newProps, "tabExpand") || hasChanged(oldProps, newProps, "tabFill");
+        if (this.child && this.parent && pagePropsChanged) {
+            this.applyPageProps();
         }
     }
     attachPage() {
@@ -84,9 +89,26 @@ export class NotebookPageNode extends SlotNode {
         }
         if (this.position != null) {
             notebook.insertPage(child, this.position, tabLabel);
+        }
+        else {
+            notebook.appendPage(child, tabLabel);
+        }
+        this.applyPageProps();
+    }
+    applyPageProps() {
+        const child = this.child;
+        if (!child || !this.parent)
             return;
+        const notebook = this.getNotebook();
+        const page = notebook.getPage(child);
+        if (!page)
+            return;
+        if (this.props.tabExpand !== undefined) {
+            page.setTabExpand(this.props.tabExpand);
+        }
+        if (this.props.tabFill !== undefined) {
+            page.setTabFill(this.props.tabFill);
         }
-        notebook.appendPage(child, tabLabel);
     }
     detachPage(childToDetach) {
         const notebook = this.getNotebook();
@@ -94,14 +116,12 @@ export class NotebookPageNode extends SlotNode {
         notebook.removePage(pageNum);
     }
     onChildChange(oldChild) {
-        batch(() => {
-            if (oldChild) {
-                this.detachPage(oldChild);
-            }
-            if (this.child) {
-                this.attachPage();
-            }
-        });
+        if (oldChild) {
+            this.detachPage(oldChild);
+        }
+        if (this.child) {
+            this.attachPage();
+        }
     }
 }
 registerNodeClass(NotebookPageNode);

package/dist/nodes/notebook.js

@@ -12,7 +12,7 @@ class NotebookNode extends WidgetNode {
         if (!(child instanceof NotebookPageNode)) {
             throw new Error(`Cannot append '${child.typeName}' to 'Notebook': expected x.NotebookPage`);
         }
-        child.setNotebook(this.container);
+        child.setParent(this.container);
     }
     insertBefore(child, before) {
         if (!(child instanceof NotebookPageNode) || !(before instanceof NotebookPageNode)) {
@@ -20,7 +20,7 @@ class NotebookNode extends WidgetNode {
         }
         const beforePosition = this.container.pageNum(before.getChild());
         child.setPosition(beforePosition);
-        child.setNotebook(this.container);
+        child.setParent(this.container);
     }
     removeChild(child) {
         if (!(child instanceof NotebookPageNode)) {