@gtkx/react 0.15.0 → 0.17.1

package/dist/nodes/list-item.d.ts

@@ -2,11 +2,14 @@ import type { ListItemProps } from "../jsx.js";
 import type { ListStore } from "./internal/list-store.js";
 import { VirtualNode } from "./virtual.js";
 type Props = Partial<ListItemProps>;
-export declare class ListItemNode<T extends Omit<ListStore, "items" | "model"> = ListStore, P extends Props = Props> extends VirtualNode<P> {
+export declare class ListItemNode<T extends {
+    updateItem(id: string, value: unknown): void;
+} = ListStore, P extends Props = Props> extends VirtualNode<P> {
     static priority: number;
-    private store?;
+    private store;
     static matches(type: string): boolean;
-    setStore(store?: T | null): void;
+    setStore(store: T | null): void;
     updateProps(oldProps: P | null, newProps: P): void;
+    protected applyOwnProps(oldProps: P | null, newProps: P): void;
 }
 export {};

package/dist/nodes/list-item.js

@@ -1,8 +1,9 @@
 import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
 import { VirtualNode } from "./virtual.js";
 export class ListItemNode extends VirtualNode {
     static priority = 1;
-    store;
+    store = null;
     static matches(type) {
         return type === "ListItem";
     }
@@ -11,10 +12,12 @@ export class ListItemNode extends VirtualNode {
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (!this.store) {
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (!this.store)
             return;
-        }
-        if (!oldProps || oldProps.id !== newProps.id || oldProps.value !== newProps.value) {
+        if (hasChanged(oldProps, newProps, "id") || hasChanged(oldProps, newProps, "value")) {
             if (newProps.id !== undefined) {
                 this.store.updateItem(newProps.id, newProps.value);
             }

package/dist/nodes/list-view.js

@@ -1,11 +1,12 @@
+import { isObjectEqual } from "@gtkx/ffi";
 import { LIST_WIDGET_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
 import { ListItemRenderer } from "./internal/list-item-renderer.js";
-import { filterProps, matchesAnyClass } from "./internal/utils.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
 import { ListItemNode } from "./list-item.js";
-import { List } from "./models/list.js";
+import { ListModel } from "./models/list.js";
 import { WidgetNode } from "./widget.js";
-const PROP_NAMES = ["renderItem", "estimatedItemHeight"];
+const OWN_PROPS = ["renderItem", "estimatedItemHeight"];
 class ListViewNode extends WidgetNode {
     static priority = 1;
     itemRenderer;
@@ -15,13 +16,14 @@ class ListViewNode extends WidgetNode {
     }
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
-        this.list = new List({
+        this.list = new ListModel({ owner: this, signalStore: this.signalStore }, {
             selectionMode: props.selectionMode,
             selected: props.selected,
             onSelectionChanged: props.onSelectionChanged,
         });
-        this.itemRenderer = new ListItemRenderer();
+        this.itemRenderer = new ListItemRenderer(this.signalStore);
         this.itemRenderer.setStore(this.list.getStore());
+        this.list.getStore().setOnItemUpdated((id) => this.itemRenderer.rebindItem(id));
         this.container.setFactory(this.itemRenderer.getFactory());
     }
     mount() {
@@ -51,19 +53,22 @@ class ListViewNode extends WidgetNode {
         this.list.removeChild(child);
     }
     updateProps(oldProps, newProps) {
-        if (!oldProps || oldProps.renderItem !== newProps.renderItem) {
-            this.itemRenderer.setRenderFn(newProps.renderItem);
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "renderItem")) {
+            this.itemRenderer.setRenderFn(newProps.renderItem ?? null);
         }
-        if (!oldProps || oldProps.estimatedItemHeight !== newProps.estimatedItemHeight) {
-            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight);
+        if (hasChanged(oldProps, newProps, "estimatedItemHeight")) {
+            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight ?? null);
         }
         const previousModel = this.list.getSelectionModel();
-        this.list.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
+        this.list.updateProps(oldProps, newProps);
         const currentModel = this.list.getSelectionModel();
-        if (previousModel !== currentModel) {
+        if (!isObjectEqual(previousModel, currentModel)) {
             this.container.setModel(currentModel);
         }
-        super.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
     }
 }
 registerNodeClass(ListViewNode);

package/dist/nodes/menu.d.ts

@@ -1,8 +1,8 @@
 import type { Container } from "../types.js";
-import { Menu, type MenuProps } from "./models/menu.js";
-export declare class MenuNode extends Menu {
+import { MenuModel, type MenuProps } from "./models/menu.js";
+export declare class MenuNode extends MenuModel {
     static priority: number;
     static matches(type: string): boolean;
     private static getType;
-    constructor(typeName: string, props: MenuProps, _container: undefined, rootContainer?: Container);
+    constructor(typeName: string, props: MenuProps, _container: undefined, rootContainer: Container);
 }

package/dist/nodes/menu.js

@@ -1,7 +1,7 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
-import { Menu } from "./models/menu.js";
-export class MenuNode extends Menu {
+import { MenuModel } from "./models/menu.js";
+export class MenuNode extends MenuModel {
     static priority = 1;
     static matches(type) {
         return type === "MenuItem" || type === "MenuSection" || type === "MenuSubmenu";
@@ -19,7 +19,7 @@ export class MenuNode extends Menu {
         throw new Error(`Unable to find menu type '${typeName}'`);
     }
     constructor(typeName, props, _container, rootContainer) {
-        super(MenuNode.getType(typeName), props, undefined, rootContainer instanceof Gtk.Application ? rootContainer : undefined);
+        super(MenuNode.getType(typeName), props, rootContainer, undefined, rootContainer instanceof Gtk.Application ? rootContainer : undefined);
     }
 }
 registerNodeClass(MenuNode);

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

@@ -1,30 +1,28 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "../../node.js";
 import { ListStore } from "../internal/list-store.js";
-import { VirtualNode } from "../virtual.js";
+import type { SignalStore } from "../internal/signal-store.js";
 export type ListProps = {
     selectionMode?: Gtk.SelectionMode;
     selected?: string[];
     onSelectionChanged?: (ids: string[]) => void;
 };
-type SelectionModel = Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection;
-export declare class List extends VirtualNode<ListProps> {
+type ListModelConfig = {
+    owner: object;
+    signalStore: SignalStore;
+};
+export declare class ListModel {
+    private config;
     private store;
-    private selectionModel;
-    private handleSelectionChange?;
-    private pendingSelection?;
-    private selectionScheduled;
-    constructor(props?: ListProps);
-    private initSelectionHandler;
+    private selectionManager;
+    constructor(config: ListModelConfig, props?: ListProps);
     getStore(): ListStore;
-    getSelectionModel(): SelectionModel;
+    getSelectionModel(): Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection;
     appendChild(child: Node): void;
     insertBefore(child: Node, before: Node): void;
     removeChild(child: Node): void;
     updateProps(oldProps: ListProps | null, newProps: ListProps): void;
-    private createSelectionModel;
     private getSelection;
-    private setSelection;
-    private applySelection;
+    private resolveSelectionIndices;
 }
 export {};

package/dist/nodes/models/list.js

@@ -1,37 +1,21 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
 import { ListStore } from "../internal/list-store.js";
-import { signalStore } from "../internal/signal-store.js";
+import { SelectionModelManager } from "../internal/selection-model.js";
 import { ListItemNode } from "../list-item.js";
-import { VirtualNode } from "../virtual.js";
-export class List extends VirtualNode {
+export class ListModel {
+    config;
     store;
-    selectionModel;
-    handleSelectionChange;
-    pendingSelection;
-    selectionScheduled = false;
-    constructor(props = {}) {
-        super("", {}, undefined);
+    selectionManager;
+    constructor(config, props = {}) {
+        this.config = config;
         this.store = new ListStore();
-        this.selectionModel = this.createSelectionModel(props.selectionMode);
-        this.selectionModel.setModel(this.store.getModel());
-        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({ ...config, ...props }, this.store.getModel(), () => this.getSelection(), (ids) => this.resolveSelectionIndices(ids), () => this.store.getModel().getNItems());
     }
     getStore() {
         return this.store;
     }
     getSelectionModel() {
-        return this.selectionModel;
+        return this.selectionManager.getSelectionModel();
     }
     appendChild(child) {
         if (!(child instanceof ListItemNode)) {
@@ -55,39 +39,11 @@ export class List extends VirtualNode {
         child.setStore(null);
     }
     updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
-        if (oldProps && oldProps.selectionMode !== newProps.selectionMode) {
-            signalStore.set(this, this.selectionModel, "selection-changed", null);
-            this.selectionModel = this.createSelectionModel(newProps.selectionMode);
-            this.selectionModel.setModel(this.store.getModel());
-            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 model = this.store.getModel();
-        const selectionMode = mode ?? Gtk.SelectionMode.SINGLE;
-        if (selectionMode === Gtk.SelectionMode.NONE) {
-            return new Gtk.NoSelection(model);
-        }
-        if (selectionMode === Gtk.SelectionMode.MULTIPLE) {
-            return new Gtk.MultiSelection(model);
-        }
-        const selectionModel = new Gtk.SingleSelection(model);
-        selectionModel.setAutoselect(selectionMode === Gtk.SelectionMode.BROWSE);
-        selectionModel.setCanUnselect(selectionMode !== Gtk.SelectionMode.BROWSE);
-        return selectionModel;
+        this.selectionManager.update(oldProps ? { ...this.config, ...oldProps } : null, { ...this.config, ...newProps }, this.store.getModel());
     }
     getSelection() {
         const model = this.store.getModel();
-        const selection = this.selectionModel.getSelection();
+        const selection = this.selectionManager.getSelectionModel().getSelection();
         const size = selection.getSize();
         const ids = [];
         for (let i = 0; i < size; i++) {
@@ -99,29 +55,16 @@ export class List 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 model = this.store.getModel();
         const nItems = model.getNItems();
         const selected = new Gtk.Bitset();
-        const mask = Gtk.Bitset.newRange(0, nItems);
-        if (ids) {
-            for (const id of ids) {
-                const index = model.find(id);
-                if (index < nItems) {
-                    selected.add(index);
-                }
+        for (const id of ids) {
+            const index = model.find(id);
+            if (index < nItems) {
+                selected.add(index);
             }
         }
-        this.selectionModel.setSelection(selected, mask);
+        return selected;
     }
 }

package/dist/nodes/models/menu.d.ts

@@ -1,6 +1,7 @@
 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 MenuType = "root" | "item" | "section" | "submenu";
 export type MenuProps = {
@@ -9,16 +10,16 @@ export type MenuProps = {
     accels?: string | string[];
     onActivate?: () => void;
 };
-export declare class Menu extends VirtualNode<MenuProps> {
-    private actionMap?;
+export declare class MenuModel extends VirtualNode<MenuProps> {
+    private actionMap;
     private actionPrefix;
-    private parent?;
+    private parent;
     private menu;
     private type;
-    private application?;
-    private action?;
+    private application;
+    private action;
     private children;
-    constructor(type: MenuType, props: MenuProps, actionMap?: Gio.ActionMap, application?: Gtk.Application);
+    constructor(type: MenuType, props: MenuProps, rootContainer: Container, actionMap?: Gio.ActionMap, application?: Gtk.Application);
     setActionMap(actionMap: Gio.ActionMap, prefix: string): void;
     private getAccels;
     private getActionName;
@@ -34,7 +35,7 @@ export declare class Menu extends VirtualNode<MenuProps> {
     getMenu(): Gio.Menu;
     private getAction;
     removeFromParent(): void;
-    insertInParentBefore(before: Menu): void;
+    insertInParentBefore(before: MenuModel): void;
     appendToParent(): void;
     appendChild(child: Node): void;
     insertBefore(child: Node, before: Node): void;

package/dist/nodes/models/menu.js

@@ -1,23 +1,22 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
+import { isObjectEqual } from "@gtkx/ffi";
 import * as Gio from "@gtkx/ffi/gio";
 import { CommitPriority, scheduleAfterCommit } from "../../scheduler.js";
-import { signalStore } from "../internal/signal-store.js";
 import { VirtualNode } from "../virtual.js";
-export class Menu extends VirtualNode {
-    actionMap;
+export class MenuModel extends VirtualNode {
+    actionMap = null;
     actionPrefix;
-    parent;
+    parent = null;
     menu;
     type;
-    application;
-    action;
+    application = null;
+    action = null;
     children = [];
-    constructor(type, props, actionMap, application) {
-        super("", props, undefined);
+    constructor(type, props, rootContainer, actionMap, application) {
+        super("", props, undefined, rootContainer);
         this.type = type;
-        this.actionMap = actionMap;
+        this.actionMap = actionMap ?? null;
         this.actionPrefix = application ? "app" : "menu";
-        this.application = application;
+        this.application = application ?? null;
         this.menu = new Gio.Menu();
     }
     setActionMap(actionMap, prefix) {
@@ -65,29 +64,25 @@ export class Menu extends VirtualNode {
         return this.actionMap;
     }
     createAction() {
-        batch(() => {
-            if (this.action) {
-                signalStore.set(this, this.action, "activate", undefined);
-            }
-            this.action = new Gio.SimpleAction(this.getId());
-            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());
-            }
-        });
+        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());
+        }
     }
     removeAction() {
-        batch(() => {
-            if (this.application && this.props.accels) {
-                this.application.setAccelsForAction(this.getActionName(), []);
-            }
-            if (this.action) {
-                this.getActionMap().removeAction(this.getId());
-                signalStore.set(this, this.action, "activate", undefined);
-                this.action = undefined;
-            }
-        });
+        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;
+        }
     }
     getPosition() {
         return this.findPositionIn(this.getParent());
@@ -125,7 +120,7 @@ export class Menu extends VirtualNode {
         if (!this.parent)
             return;
         const parent = this.parent;
-        this.parent = undefined;
+        this.parent = null;
         scheduleAfterCommit(() => {
             const position = this.findPositionIn(parent);
             if (position >= 0) {
@@ -152,7 +147,7 @@ export class Menu extends VirtualNode {
                     parent.insertSubmenu(beforePosition, this.menu, this.props.label);
                     break;
             }
-        });
+        }, CommitPriority.NORMAL);
     }
     appendToParent() {
         if (this.type === "item" && this.actionMap) {
@@ -171,10 +166,10 @@ export class Menu extends VirtualNode {
                     parent.appendSubmenu(this.menu, this.props.label);
                     break;
             }
-        });
+        }, CommitPriority.NORMAL);
     }
     appendChild(child) {
-        if (!(child instanceof Menu)) {
+        if (!(child instanceof MenuModel)) {
             return;
         }
         this.children.push(child);
@@ -185,7 +180,7 @@ export class Menu extends VirtualNode {
         child.appendToParent();
     }
     insertBefore(child, before) {
-        if (!(child instanceof Menu) || !(before instanceof Menu)) {
+        if (!(child instanceof MenuModel) || !(before instanceof MenuModel)) {
             return;
         }
         const beforeIndex = this.children.indexOf(before);
@@ -202,7 +197,7 @@ export class Menu extends VirtualNode {
         child.insertInParentBefore(before);
     }
     removeChild(child) {
-        if (!(child instanceof Menu)) {
+        if (!(child instanceof MenuModel)) {
             return;
         }
         const index = this.children.indexOf(child);
@@ -237,7 +232,7 @@ export class Menu extends VirtualNode {
             return;
         }
         if (oldProps.onActivate !== newProps.onActivate) {
-            signalStore.set(this, this.getAction(), "activate", newProps.onActivate);
+            this.signalStore.set(this, this.getAction(), "activate", newProps.onActivate);
         }
         if (oldProps.accels !== newProps.accels) {
             if (this.application) {
@@ -251,18 +246,16 @@ export class Menu extends VirtualNode {
         }
         if (!oldProps || oldProps.label !== newProps.label) {
             const parent = this.parent;
-            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);
-                    }
+            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() {

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

@@ -1,5 +1,6 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import type { Node } from "../../node.js";
+import type { Container } from "../../types.js";
 import { TreeStore } from "../internal/tree-store.js";
 import { VirtualNode } from "../virtual.js";
 export type TreeListProps = {
@@ -8,27 +9,20 @@ export type TreeListProps = {
     selected?: string[];
     onSelectionChanged?: (ids: string[]) => void;
 };
-type SelectionModel = Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection;
 export declare class TreeList extends VirtualNode<TreeListProps> {
     private store;
     private treeListModel;
-    private selectionModel;
-    private handleSelectionChange?;
-    private pendingSelection?;
-    private selectionScheduled;
-    constructor(props?: TreeListProps);
-    private initSelectionHandler;
+    private selectionManager;
+    constructor(props: TreeListProps | undefined, rootContainer: Container);
     private createChildModel;
     getStore(): TreeStore;
     getTreeListModel(): Gtk.TreeListModel;
-    getSelectionModel(): SelectionModel;
+    getSelectionModel(): Gtk.NoSelection | Gtk.SingleSelection | Gtk.MultiSelection;
     appendChild(child: Node): void;
+    private addItemWithChildren;
     insertBefore(child: Node, before: Node): void;
     removeChild(child: Node): void;
     updateProps(oldProps: TreeListProps | null, newProps: TreeListProps): void;
-    private createSelectionModel;
     private getSelection;
-    private setSelection;
-    private applySelection;
+    private resolveSelectionIndices;
 }
-export {};