@gtkx/react 0.1.47 → 0.1.49

package/dist/nodes/column-view.js

@@ -1,6 +1,8 @@
 import { getObject, getObjectId } from "@gtkx/ffi";
+import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { scheduleFlush } from "../batch.js";
+import { isColumnContainer, isItemContainer, } from "../container-interfaces.js";
 import { createFiberRoot } from "../fiber-root.js";
 import { Node } from "../node.js";
 import { reconciler } from "../reconciler.js";
@@ -10,29 +12,122 @@ export class ColumnViewNode extends Node {
     }
     stringList;
     selectionModel;
+    sortListModel;
     items = [];
     columns = [];
     committedLength = 0;
-    constructor(type, props, app) {
-        super(type, props, app);
+    sortColumn = null;
+    sortOrder = Gtk.SortType.ASCENDING;
+    sortFn = null;
+    isSorting = false;
+    onSortChange = null;
+    sorterChangedHandlerId = null;
+    lastNotifiedColumn = null;
+    lastNotifiedOrder = Gtk.SortType.ASCENDING;
+    constructor(type, props) {
+        super(type, props);
         this.stringList = new Gtk.StringList([]);
-        this.selectionModel = new Gtk.SingleSelection(this.stringList);
+        this.sortListModel = new Gtk.SortListModel(this.stringList, this.widget.getSorter());
+        this.sortListModel.setIncremental(true);
+        this.selectionModel = new Gtk.SingleSelection(this.sortListModel);
         this.widget.setModel(this.selectionModel);
+        this.sortColumn = props.sortColumn ?? null;
+        this.sortOrder = props.sortOrder ?? Gtk.SortType.ASCENDING;
+        this.sortFn = props.sortFn ?? null;
+        this.onSortChange =
+            props.onSortChange ?? null;
+        this.connectSorterChangedSignal();
+    }
+    connectSorterChangedSignal() {
+        const sorter = this.widget.getSorter();
+        if (!sorter || !this.onSortChange)
+            return;
+        this.sorterChangedHandlerId = sorter.connect("changed", () => {
+            this.waitForSortComplete(() => this.notifySortChange());
+        });
+    }
+    waitForSortComplete(callback) {
+        const sortingInProgress = this.sortListModel.getPending() > 0;
+        if (sortingInProgress) {
+            setTimeout(() => this.waitForSortComplete(callback), 0);
+        }
+        else {
+            callback();
+        }
+    }
+    disconnectSorterChangedSignal() {
+        if (this.sorterChangedHandlerId === null)
+            return;
+        const sorter = this.widget.getSorter();
+        if (sorter) {
+            GObject.signalHandlerDisconnect(sorter, this.sorterChangedHandlerId);
+        }
+        this.sorterChangedHandlerId = null;
+    }
+    notifySortChange() {
+        if (!this.onSortChange)
+            return;
+        const baseSorter = this.widget.getSorter();
+        if (!baseSorter)
+            return;
+        const sorter = getObject(baseSorter.ptr, Gtk.ColumnViewSorter);
+        const column = sorter.getPrimarySortColumn();
+        const order = sorter.getPrimarySortOrder();
+        const columnId = column?.getId() ?? null;
+        const sortStateUnchanged = columnId === this.lastNotifiedColumn && order === this.lastNotifiedOrder;
+        if (sortStateUnchanged) {
+            return;
+        }
+        this.lastNotifiedColumn = columnId;
+        this.lastNotifiedOrder = order;
+        this.onSortChange(columnId, order);
     }
     getItems() {
         return this.items;
     }
-    addColumn(column) {
-        this.columns.push(column);
-        const gtkColumn = column.getGtkColumn();
-        this.widget.appendColumn(gtkColumn);
-        column.setColumnView(this);
+    getSortFn() {
+        return this.sortFn;
+    }
+    compareItems(a, b, columnId) {
+        if (this.isSorting || !this.sortFn)
+            return 0;
+        this.isSorting = true;
+        try {
+            return this.sortFn(a, b, columnId);
+        }
+        finally {
+            this.isSorting = false;
+        }
+    }
+    addColumn(columnNode) {
+        this.columns.push(columnNode);
+        const column = columnNode.getColumn();
+        this.widget.appendColumn(column);
+        columnNode.setColumnView(this);
+        if (columnNode.getId() === this.sortColumn && this.sortColumn !== null) {
+            this.applySortByColumn();
+        }
+    }
+    applySortByColumn() {
+        if (this.sortColumn === null) {
+            this.widget.sortByColumn(this.sortOrder, null);
+            return;
+        }
+        if (!this.columns)
+            return;
+        const column = this.columns.find((c) => c.getId() === this.sortColumn);
+        if (column) {
+            this.widget.sortByColumn(this.sortOrder, column.getColumn());
+        }
+    }
+    findColumnById(id) {
+        return this.columns.find((c) => c.getId() === id);
     }
     removeColumn(column) {
         const index = this.columns.indexOf(column);
         if (index !== -1) {
             this.columns.splice(index, 1);
-            this.widget.removeColumn(column.getGtkColumn());
+            this.widget.removeColumn(column.getColumn());
             column.setColumnView(null);
         }
     }
@@ -43,15 +138,15 @@ export class ColumnViewNode extends Node {
             return;
         }
         this.columns.splice(beforeIndex, 0, column);
-        this.widget.insertColumn(beforeIndex, column.getGtkColumn());
+        this.widget.insertColumn(beforeIndex, column.getColumn());
         column.setColumnView(this);
     }
     syncStringList = () => {
         const newLength = this.items.length;
         if (newLength === this.committedLength)
             return;
-        const placeholders = Array.from({ length: newLength }, () => "");
-        this.stringList.splice(0, this.committedLength, placeholders);
+        const itemIndicesForSorter = Array.from({ length: newLength }, (_, i) => String(i));
+        this.stringList.splice(0, this.committedLength, itemIndicesForSorter);
         this.committedLength = newLength;
     };
     addItem(item) {
@@ -75,6 +170,47 @@ export class ColumnViewNode extends Node {
             scheduleFlush(this.syncStringList);
         }
     }
+    consumedProps() {
+        const consumed = super.consumedProps();
+        consumed.add("sortColumn");
+        consumed.add("sortOrder");
+        consumed.add("onSortChange");
+        consumed.add("sortFn");
+        return consumed;
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        const newSortColumn = newProps.sortColumn ?? null;
+        const newSortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
+        const newSortFn = newProps.sortFn ?? null;
+        const newOnSortChange = newProps.onSortChange ?? null;
+        if (oldProps.onSortChange !== newProps.onSortChange) {
+            const hadCallback = this.onSortChange !== null;
+            this.onSortChange = newOnSortChange;
+            const hasCallback = this.onSortChange !== null;
+            const callbackAdded = !hadCallback && hasCallback;
+            const callbackRemoved = hadCallback && !hasCallback;
+            if (callbackAdded) {
+                this.connectSorterChangedSignal();
+            }
+            else if (callbackRemoved) {
+                this.disconnectSorterChangedSignal();
+            }
+        }
+        if (oldProps.sortFn !== newProps.sortFn) {
+            this.sortFn = newSortFn;
+            if (this.columns) {
+                for (const column of this.columns) {
+                    column.updateSorterFromRoot();
+                }
+            }
+        }
+        if (oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
+            this.sortColumn = newSortColumn;
+            this.sortOrder = newSortOrder;
+            this.applySortByColumn();
+        }
+    }
 }
 export class ColumnViewColumnNode extends Node {
     static matches(type) {
@@ -83,24 +219,30 @@ export class ColumnViewColumnNode extends Node {
     isVirtual() {
         return true;
     }
-    gtkColumn;
+    column;
     factory;
     renderCell;
     columnView = null;
     listItemCache = new Map();
-    constructor(type, props, app) {
-        super(type, props, app);
+    columnId = null;
+    sorter = null;
+    constructor(type, props) {
+        super(type, props);
         this.factory = new Gtk.SignalListItemFactory();
-        this.gtkColumn = new Gtk.ColumnViewColumn(props.title, this.factory);
+        this.column = new Gtk.ColumnViewColumn(props.title, this.factory);
         this.renderCell = props.renderCell;
+        this.columnId = props.id ?? null;
+        if (this.columnId !== null) {
+            this.column.setId(this.columnId);
+        }
         if (props.expand !== undefined) {
-            this.gtkColumn.setExpand(props.expand);
+            this.column.setExpand(props.expand);
         }
         if (props.resizable !== undefined) {
-            this.gtkColumn.setResizable(props.resizable);
+            this.column.setResizable(props.resizable);
         }
         if (props.fixedWidth !== undefined) {
-            this.gtkColumn.setFixedWidth(props.fixedWidth);
+            this.column.setFixedWidth(props.fixedWidth);
         }
         this.factory.connect("setup", (_self, listItemObj) => {
             const listItem = getObject(listItemObj.ptr, Gtk.ListItem);
@@ -142,19 +284,55 @@ export class ColumnViewColumnNode extends Node {
             }
         });
     }
-    getGtkColumn() {
-        return this.gtkColumn;
+    getColumn() {
+        return this.column;
+    }
+    getId() {
+        return this.columnId;
     }
     setColumnView(columnView) {
         this.columnView = columnView;
+        this.updateSorterFromRoot();
+    }
+    updateSorterFromRoot() {
+        if (!this.columnView || this.columnId === null) {
+            this.column.setSorter(null);
+            this.sorter = null;
+            return;
+        }
+        const rootSortFn = this.columnView.getSortFn();
+        if (rootSortFn === null) {
+            this.column.setSorter(null);
+            this.sorter = null;
+            return;
+        }
+        const columnId = this.columnId;
+        const columnView = this.columnView;
+        const wrappedSortFn = (stringObjPtrA, stringObjPtrB) => {
+            const items = columnView.getItems();
+            const stringObjA = getObject(stringObjPtrA, Gtk.StringObject);
+            const stringObjB = getObject(stringObjPtrB, Gtk.StringObject);
+            const indexA = Number.parseInt(stringObjA.getString(), 10);
+            const indexB = Number.parseInt(stringObjB.getString(), 10);
+            if (Number.isNaN(indexA) || Number.isNaN(indexB))
+                return 0;
+            const itemA = items[indexA] ?? null;
+            const itemB = items[indexB] ?? null;
+            if (itemA === null || itemB === null)
+                return 0;
+            const result = columnView.compareItems(itemA, itemB, columnId);
+            return typeof result === "number" ? result : 0;
+        };
+        this.sorter = new Gtk.CustomSorter(wrappedSortFn);
+        this.column.setSorter(this.sorter);
     }
     attachToParent(parent) {
-        if (parent instanceof ColumnViewNode) {
+        if (isColumnContainer(parent)) {
             parent.addColumn(this);
         }
     }
     attachToParentBefore(parent, before) {
-        if (parent instanceof ColumnViewNode && before instanceof ColumnViewColumnNode) {
+        if (isColumnContainer(parent) && before instanceof ColumnViewColumnNode) {
             parent.insertColumnBefore(this, before);
         }
         else {
@@ -162,7 +340,7 @@ export class ColumnViewColumnNode extends Node {
         }
     }
     detachFromParent(parent) {
-        if (parent instanceof ColumnViewNode) {
+        if (isColumnContainer(parent)) {
             parent.removeColumn(this);
         }
     }
@@ -173,25 +351,30 @@ export class ColumnViewColumnNode extends Node {
         consumed.add("expand");
         consumed.add("resizable");
         consumed.add("fixedWidth");
+        consumed.add("id");
         return consumed;
     }
     updateProps(oldProps, newProps) {
         if (oldProps.renderCell !== newProps.renderCell) {
             this.renderCell = newProps.renderCell;
         }
-        if (!this.gtkColumn)
+        if (!this.column)
             return;
         if (oldProps.title !== newProps.title) {
-            this.gtkColumn.setTitle(newProps.title);
+            this.column.setTitle(newProps.title);
         }
         if (oldProps.expand !== newProps.expand) {
-            this.gtkColumn.setExpand(newProps.expand);
+            this.column.setExpand(newProps.expand);
         }
         if (oldProps.resizable !== newProps.resizable) {
-            this.gtkColumn.setResizable(newProps.resizable);
+            this.column.setResizable(newProps.resizable);
         }
         if (oldProps.fixedWidth !== newProps.fixedWidth) {
-            this.gtkColumn.setFixedWidth(newProps.fixedWidth);
+            this.column.setFixedWidth(newProps.fixedWidth);
+        }
+        if (oldProps.id !== newProps.id) {
+            this.columnId = newProps.id ?? null;
+            this.column.setId(this.columnId);
         }
     }
 }
@@ -203,20 +386,20 @@ export class ColumnViewItemNode extends Node {
         return true;
     }
     item;
-    constructor(type, props, app) {
-        super(type, props, app);
+    constructor(type, props) {
+        super(type, props);
         this.item = props.item;
     }
     getItem() {
         return this.item;
     }
     attachToParent(parent) {
-        if (parent instanceof ColumnViewNode) {
+        if (isItemContainer(parent)) {
             parent.addItem(this.item);
         }
     }
     attachToParentBefore(parent, before) {
-        if (parent instanceof ColumnViewNode && before instanceof ColumnViewItemNode) {
+        if (isItemContainer(parent) && before instanceof ColumnViewItemNode) {
             parent.insertItemBefore(this.item, before.getItem());
         }
         else {
@@ -224,7 +407,7 @@ export class ColumnViewItemNode extends Node {
         }
     }
     detachFromParent(parent) {
-        if (parent instanceof ColumnViewNode) {
+        if (isItemContainer(parent)) {
             parent.removeItem(this.item);
         }
     }

package/dist/nodes/dropdown.d.ts

@@ -1,24 +1,15 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import { type ItemContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-type ItemLabelFn = (item: unknown) => string;
-declare class DropDownStore {
-    private stringList;
-    private items;
-    private labelFn;
-    constructor(labelFn: ItemLabelFn);
-    getModel(): Gtk.StringList;
-    append(item: unknown): void;
-    remove(item: unknown): void;
-    getItem(index: number): unknown;
-    get length(): number;
-}
-export declare class DropDownNode extends Node<Gtk.DropDown> {
+export declare class DropDownNode extends Node<Gtk.DropDown> implements ItemContainer<unknown> {
     static matches(type: string): boolean;
     private store;
     private onSelectionChanged?;
-    constructor(type: string, props: Props, app: Gtk.Application);
-    getStore(): DropDownStore;
+    constructor(type: string, props: Props);
+    addItem(item: unknown): void;
+    insertItemBefore(item: unknown, _beforeItem: unknown): void;
+    removeItem(item: unknown): void;
     protected consumedProps(): Set<string>;
     updateProps(oldProps: Props, newProps: Props): void;
 }
@@ -26,9 +17,8 @@ export declare class DropDownItemNode extends Node<never> {
     static matches(type: string): boolean;
     protected isVirtual(): boolean;
     private item;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    constructor(type: string, props: Props);
     getItem(): unknown;
     attachToParent(parent: Node): void;
     detachFromParent(parent: Node): void;
 }
-export {};

package/dist/nodes/dropdown.js

@@ -1,4 +1,5 @@
 import * as Gtk from "@gtkx/ffi/gtk";
+import { isItemContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
 class DropDownStore {
     stringList;
@@ -36,8 +37,8 @@ export class DropDownNode extends Node {
     }
     store;
     onSelectionChanged;
-    constructor(type, props, app) {
-        super(type, props, app);
+    constructor(type, props) {
+        super(type, props);
         const labelFn = props.itemLabel ?? ((item) => String(item));
         this.onSelectionChanged = props.onSelectionChanged;
         this.store = new DropDownStore(labelFn);
@@ -51,8 +52,14 @@ export class DropDownNode extends Node {
             this.connectSignal(this.widget, "notify::selected", handler);
         }
     }
-    getStore() {
-        return this.store;
+    addItem(item) {
+        this.store.append(item);
+    }
+    insertItemBefore(item, _beforeItem) {
+        this.addItem(item);
+    }
+    removeItem(item) {
+        this.store.remove(item);
     }
     consumedProps() {
         const consumed = super.consumedProps();
@@ -75,21 +82,21 @@ export class DropDownItemNode extends Node {
         return true;
     }
     item;
-    constructor(type, props, app) {
-        super(type, props, app);
+    constructor(type, props) {
+        super(type, props);
         this.item = props.item;
     }
     getItem() {
         return this.item;
     }
     attachToParent(parent) {
-        if (!(parent instanceof DropDownNode))
+        if (!isItemContainer(parent))
             return;
-        parent.getStore().append(this.item);
+        parent.addItem(this.item);
     }
     detachFromParent(parent) {
-        if (!(parent instanceof DropDownNode))
+        if (!isItemContainer(parent))
             return;
-        parent.getStore().remove(this.item);
+        parent.removeItem(this.item);
     }
 }

package/dist/nodes/flow-box.d.ts

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ChildContainer } from "../container-interfaces.js";
+import { Node } from "../node.js";
+export declare class FlowBoxNode extends Node<Gtk.FlowBox> implements ChildContainer {
+    static matches(type: string): boolean;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
+}

package/dist/nodes/flow-box.js

@@ -0,0 +1,25 @@
+import { Node } from "../node.js";
+const isFlowBoxChild = (widget) => "getIndex" in widget && "getChild" in widget && typeof widget.getIndex === "function";
+export class FlowBoxNode extends Node {
+    static matches(type) {
+        return type === "FlowBox";
+    }
+    attachChild(child) {
+        this.widget.append(child);
+    }
+    insertChildBefore(child, before) {
+        const beforeParent = before.getParent();
+        if (beforeParent && isFlowBoxChild(beforeParent)) {
+            this.widget.insert(child, beforeParent.getIndex());
+        }
+        else {
+            this.widget.append(child);
+        }
+    }
+    detachChild(child) {
+        const flowBoxChild = child.getParent();
+        if (flowBoxChild) {
+            this.widget.remove(flowBoxChild);
+        }
+    }
+}

package/dist/nodes/grid.d.ts

@@ -1,8 +1,11 @@
 import type * as Gtk from "@gtkx/ffi/gtk";
+import { type GridContainer } from "../container-interfaces.js";
 import type { Props } from "../factory.js";
 import { Node } from "../node.js";
-export declare class GridNode extends Node<Gtk.Grid> {
+export declare class GridNode extends Node<Gtk.Grid> implements GridContainer {
     static matches(type: string): boolean;
+    attachToGrid(child: Gtk.Widget, column: number, row: number, colSpan: number, rowSpan: number): void;
+    removeFromGrid(child: Gtk.Widget): void;
 }
 export declare class GridChildNode extends Node<never> {
     static matches(type: string): boolean;
@@ -12,8 +15,8 @@ export declare class GridChildNode extends Node<never> {
     private columnSpan;
     private rowSpan;
     private childWidget;
-    private parentGrid;
-    constructor(type: string, props: Props, app: Gtk.Application);
+    private parentContainer;
+    constructor(type: string, props: Props);
     appendChild(child: Node): void;
     removeChild(child: Node): void;
     private attachChildToGrid;

package/dist/nodes/grid.js

@@ -1,8 +1,16 @@
+import { isGridContainer } from "../container-interfaces.js";
 import { Node } from "../node.js";
+import { getNumberProp } from "../props.js";
 export class GridNode extends Node {
     static matches(type) {
         return type === "Grid.Root";
     }
+    attachToGrid(child, column, row, colSpan, rowSpan) {
+        this.widget.attach(child, column, row, colSpan, rowSpan);
+    }
+    removeFromGrid(child) {
+        this.widget.remove(child);
+    }
 }
 export class GridChildNode extends Node {
     static matches(type) {
@@ -16,19 +24,19 @@ export class GridChildNode extends Node {
     columnSpan;
     rowSpan;
     childWidget = null;
-    parentGrid = null;
-    constructor(type, props, app) {
-        super(type, props, app);
-        this.column = props.column ?? 0;
-        this.row = props.row ?? 0;
-        this.columnSpan = props.columnSpan ?? 1;
-        this.rowSpan = props.rowSpan ?? 1;
+    parentContainer = null;
+    constructor(type, props) {
+        super(type, props);
+        this.column = getNumberProp(props, "column", 0);
+        this.row = getNumberProp(props, "row", 0);
+        this.columnSpan = getNumberProp(props, "columnSpan", 1);
+        this.rowSpan = getNumberProp(props, "rowSpan", 1);
     }
     appendChild(child) {
         const widget = child.getWidget();
         if (widget) {
             this.childWidget = widget;
-            if (this.parentGrid) {
+            if (this.parentContainer) {
                 this.attachChildToGrid();
             }
         }
@@ -41,33 +49,27 @@ export class GridChildNode extends Node {
         }
     }
     attachChildToGrid() {
-        if (!this.parentGrid || !this.childWidget)
+        if (!this.parentContainer || !this.childWidget)
             return;
-        const grid = this.parentGrid.getWidget();
-        if (!grid)
-            return;
-        grid.attach(this.childWidget, this.column, this.row, this.columnSpan, this.rowSpan);
+        this.parentContainer.attachToGrid(this.childWidget, this.column, this.row, this.columnSpan, this.rowSpan);
     }
     detachChildFromGrid() {
-        if (!this.parentGrid || !this.childWidget)
-            return;
-        const grid = this.parentGrid.getWidget();
-        if (!grid)
+        if (!this.parentContainer || !this.childWidget)
             return;
-        grid.remove(this.childWidget);
+        this.parentContainer.removeFromGrid(this.childWidget);
     }
     attachToParent(parent) {
-        if (parent instanceof GridNode) {
-            this.parentGrid = parent;
+        if (isGridContainer(parent)) {
+            this.parentContainer = parent;
             if (this.childWidget) {
                 this.attachChildToGrid();
             }
         }
     }
     detachFromParent(parent) {
-        if (parent instanceof GridNode) {
+        if (isGridContainer(parent)) {
             this.detachChildFromGrid();
-            this.parentGrid = null;
+            this.parentContainer = null;
         }
     }
     updateProps(oldProps, newProps) {
@@ -77,10 +79,10 @@ export class GridChildNode extends Node {
             oldProps.rowSpan !== newProps.rowSpan;
         if (positionChanged) {
             this.detachChildFromGrid();
-            this.column = newProps.column ?? 0;
-            this.row = newProps.row ?? 0;
-            this.columnSpan = newProps.columnSpan ?? 1;
-            this.rowSpan = newProps.rowSpan ?? 1;
+            this.column = getNumberProp(newProps, "column", 0);
+            this.row = getNumberProp(newProps, "row", 0);
+            this.columnSpan = getNumberProp(newProps, "columnSpan", 1);
+            this.rowSpan = getNumberProp(newProps, "rowSpan", 1);
             this.attachChildToGrid();
         }
     }

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

@@ -0,0 +1,9 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ChildContainer } from "../container-interfaces.js";
+import { Node } from "../node.js";
+export declare class ListBoxNode extends Node<Gtk.ListBox> implements ChildContainer {
+    static matches(type: string): boolean;
+    attachChild(child: Gtk.Widget): void;
+    insertChildBefore(child: Gtk.Widget, before: Gtk.Widget): void;
+    detachChild(child: Gtk.Widget): void;
+}

package/dist/nodes/list-box.js

@@ -0,0 +1,21 @@
+import { Node } from "../node.js";
+const isListBoxRow = (widget) => "getIndex" in widget && "isSelected" in widget && typeof widget.getIndex === "function";
+export class ListBoxNode extends Node {
+    static matches(type) {
+        return type === "ListBox";
+    }
+    attachChild(child) {
+        this.widget.append(child);
+    }
+    insertChildBefore(child, before) {
+        if (isListBoxRow(before)) {
+            this.widget.insert(child, before.getIndex());
+        }
+        else {
+            this.widget.append(child);
+        }
+    }
+    detachChild(child) {
+        this.widget.remove(child);
+    }
+}