@gtkx/react 0.9.4 → 0.10.0

package/dist/nodes/column-view.js

@@ -1,256 +1,137 @@
-import * as GObject from "@gtkx/ffi/gobject";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { StringSorter } from "@gtkx/ffi/gtk";
-import { Node } from "../node.js";
-import { connectListItemFactorySignals } from "./list-item-factory.js";
-import { SelectableListNode } from "./selectable-list.js";
-import { VirtualItemNode } from "./virtual-item.js";
-export class ColumnViewNode extends SelectableListNode {
-    static consumedPropNames = [
-        "sortColumn",
-        "sortOrder",
-        "onSortChange",
-        "selected",
-        "onSelectionChanged",
-        "selectionMode",
-    ];
-    static matches(type) {
-        return type === "ColumnView.Root";
+import { registerNodeClass } from "../registry.js";
+import { ColumnViewColumnNode } from "./column-view-column.js";
+import { filterProps, isContainerType } from "./internal/utils.js";
+import { ListItemNode } from "./list-item.js";
+import { List } from "./models/list.js";
+import { WidgetNode } from "./widget.js";
+const PROP_NAMES = ["sortColumn", "sortOrder", "onSortChange"];
+class ColumnViewNode extends WidgetNode {
+    static priority = 1;
+    handleSortChange;
+    list;
+    static matches(_type, containerOrClass) {
+        return isContainerType(Gtk.ColumnView, containerOrClass);
+    }
+    constructor(typeName, props, container, rootContainer) {
+        super(typeName, props, container, rootContainer);
+        this.list = new List(props.selectionMode);
+    }
+    mount() {
+        super.mount();
+        this.container.setModel(this.list.getSelectionModel());
     }
-    initialize(props) {
-        const selectionState = this.initializeSelectionState(props);
-        this.state = {
-            ...selectionState,
-            columns: [],
-            sortColumn: props.sortColumn ?? null,
-            sortOrder: props.sortOrder ?? Gtk.SortType.ASCENDING,
-            onSortChange: props.onSortChange ?? null,
-            sorterChangedHandlerId: null,
-            lastNotifiedColumn: null,
-            lastNotifiedOrder: Gtk.SortType.ASCENDING,
-        };
-        super.initialize(props);
-        this.applySelectionModel();
-        this.connectSorterChangedSignal();
-    }
-    connectSorterChangedSignal() {
-        const sorter = this.widget.getSorter();
-        if (!sorter || !this.state.onSortChange)
-            return;
-        this.state.sorterChangedHandlerId = sorter.connect("changed", () => {
-            this.notifySortChange();
-        });
-    }
-    disconnectSorterChangedSignal() {
-        if (this.state.sorterChangedHandlerId === null)
+    appendChild(child) {
+        if (child instanceof ListItemNode) {
+            this.list.appendChild(child);
             return;
-        const sorter = this.widget.getSorter();
-        if (sorter) {
-            GObject.signalHandlerDisconnect(sorter, this.state.sorterChangedHandlerId);
         }
-        this.state.sorterChangedHandlerId = null;
-    }
-    notifySortChange() {
-        if (!this.state.onSortChange)
-            return;
-        const sorter = this.widget.getSorter();
-        if (!sorter)
-            return;
-        const column = sorter.getPrimarySortColumn();
-        const order = sorter.getPrimarySortOrder();
-        const columnId = column?.getId() ?? null;
-        if (columnId === this.state.lastNotifiedColumn && order === this.state.lastNotifiedOrder) {
-            return;
+        if (!(child instanceof ColumnViewColumnNode)) {
+            throw new Error(`Cannot append '${child.typeName}' to 'ColumnView': expected ColumnViewColumn`);
         }
-        this.state.lastNotifiedColumn = columnId;
-        this.state.lastNotifiedOrder = order;
-        this.state.onSortChange(columnId, order);
-    }
-    unmount() {
-        this.disconnectSorterChangedSignal();
-        this.cleanupSelection();
-        super.unmount();
-    }
-    appendChild(child) {
-        if (child instanceof ColumnViewColumnNode) {
-            child.parent = this;
-            this.addColumn(child);
-            return;
+        const existingColumn = this.findColumnInView(child.column);
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
         }
-        super.appendChild(child);
+        this.container.appendColumn(child.column);
+        child.setStore(this.list.getStore());
     }
     insertBefore(child, before) {
-        if (child instanceof ColumnViewColumnNode && before instanceof ColumnViewColumnNode) {
-            child.parent = this;
-            this.insertColumnBefore(child, before);
-            return;
-        }
-        super.insertBefore(child, before);
-    }
-    removeChild(child) {
-        if (child instanceof ColumnViewColumnNode) {
-            this.removeColumn(child);
-            child.unmount();
-            child.parent = null;
+        if (child instanceof ListItemNode) {
+            this.list.insertBefore(child, before);
             return;
         }
-        super.removeChild(child);
-    }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
-        const newSortColumn = newProps.sortColumn ?? null;
-        const newSortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
-        const newOnSortChange = newProps.onSortChange ?? null;
-        if (oldProps.onSortChange !== newProps.onSortChange) {
-            const hadCallback = this.state.onSortChange !== null;
-            this.state.onSortChange = newOnSortChange;
-            const hasCallback = this.state.onSortChange !== null;
-            if (!hadCallback && hasCallback) {
-                this.connectSorterChangedSignal();
-            }
-            else if (hadCallback && !hasCallback) {
-                this.disconnectSorterChangedSignal();
-            }
+        if (!(child instanceof ColumnViewColumnNode)) {
+            throw new Error(`Cannot insert '${child.typeName}' to 'ColumnView': expected ColumnViewColumn`);
         }
-        if (oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
-            this.state.sortColumn = newSortColumn;
-            this.state.sortOrder = newSortOrder;
-            this.applySortIndicator();
+        const existingColumn = this.findColumnInView(child.column);
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
         }
-        this.updateSelectionProps(oldProps, newProps);
-    }
-    applySortIndicator() {
-        if (this.state.sortColumn === null) {
-            this.widget.sortByColumn(this.state.sortOrder);
-            return;
-        }
-        const column = this.state.columns.find((c) => c.getId() === this.state.sortColumn);
-        if (column) {
-            this.widget.sortByColumn(this.state.sortOrder, column.getColumn());
+        if (before instanceof ColumnViewColumnNode) {
+            const beforeIndex = this.getColumnIndex(before.column);
+            this.container.insertColumn(beforeIndex, child.column);
         }
-    }
-    addColumn(columnNode) {
-        this.state.columns.push(columnNode);
-        this.widget.appendColumn(columnNode.getColumn());
-        columnNode.setColumnView(this);
-        if (columnNode.getId() === this.state.sortColumn) {
-            this.applySortIndicator();
+        else {
+            this.container.appendColumn(child.column);
         }
+        child.setStore(this.list.getStore());
     }
-    insertColumnBefore(column, before) {
-        const beforeIndex = this.state.columns.indexOf(before);
-        if (beforeIndex === -1) {
-            this.addColumn(column);
+    removeChild(child) {
+        if (child instanceof ListItemNode) {
+            this.list.removeChild(child);
             return;
         }
-        this.state.columns.splice(beforeIndex, 0, column);
-        this.widget.insertColumn(beforeIndex, column.getColumn());
-        column.setColumnView(this);
-    }
-    removeColumn(column) {
-        const index = this.state.columns.indexOf(column);
-        if (index !== -1) {
-            this.state.columns.splice(index, 1);
-            this.widget.removeColumn(column.getColumn());
-            column.setColumnView(null);
+        if (!(child instanceof ColumnViewColumnNode)) {
+            throw new Error(`Cannot remove '${child.typeName}' from 'ColumnView': expected ColumnViewColumn`);
         }
-    }
-}
-export class ColumnViewColumnNode extends Node {
-    static consumedPropNames = ["renderCell", "title", "expand", "resizable", "fixedWidth", "id", "sortable"];
-    static matches(type) {
-        return type === "ColumnView.Column";
-    }
-    isVirtual() {
-        return true;
-    }
-    columnView = null;
-    initialize(props) {
-        const factory = new Gtk.SignalListItemFactory();
-        const column = new Gtk.ColumnViewColumn(props.title, factory);
-        const columnId = props.id ?? undefined;
-        const sortable = props.sortable;
-        const sorter = sortable ? new StringSorter() : undefined;
-        this.state = {
-            column,
-            factory,
-            factoryHandlers: null,
-            renderCell: props.renderCell,
-            columnId,
-            listItemCache: new Map(),
-            sorter,
-        };
-        if (sorter) {
-            column.setSorter(sorter);
-        }
-        super.initialize(props);
-        if (columnId !== null) {
-            column.setId(columnId);
-        }
-        if (props.expand !== undefined) {
-            column.setExpand(props.expand);
-        }
-        if (props.resizable !== undefined) {
-            column.setResizable(props.resizable);
+        const existingColumn = this.findColumnInView(child.column);
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
         }
-        if (props.fixedWidth !== undefined) {
-            column.setFixedWidth(props.fixedWidth);
-        }
-        this.state.factoryHandlers = connectListItemFactorySignals({
-            factory,
-            listItemCache: this.state.listItemCache,
-            getRenderFn: () => this.state.renderCell,
-            getItemAtPosition: (position) => this.columnView?.getItems()[position] ?? null,
-        });
-    }
-    getColumn() {
-        return this.state.column;
-    }
-    getId() {
-        return this.state.columnId;
-    }
-    setColumnView(columnView) {
-        this.columnView = columnView;
-    }
-    unmount() {
-        this.state.factoryHandlers?.disconnect();
-        super.unmount();
+        child.setStore(undefined);
     }
     updateProps(oldProps, newProps) {
-        if (oldProps.renderCell !== newProps.renderCell) {
-            this.state.renderCell = newProps.renderCell;
-        }
-        if (oldProps.title !== newProps.title) {
-            this.state.column.setTitle(newProps.title);
-        }
-        if (oldProps.expand !== newProps.expand) {
-            this.state.column.setExpand(newProps.expand);
+        if (!oldProps || oldProps.onSortChange !== newProps.onSortChange) {
+            const sorter = this.container.getSorter();
+            const onSortChange = newProps.onSortChange;
+            if (sorter) {
+                this.handleSortChange = () => {
+                    onSortChange?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+                };
+                this.signalStore.set(sorter, "changed", this.handleSortChange);
+            }
         }
-        if (oldProps.resizable !== newProps.resizable) {
-            this.state.column.setResizable(newProps.resizable);
+        if (!oldProps || oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
+            const sortColumn = newProps.sortColumn;
+            const sortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
+            if (!sortColumn) {
+                this.container.sortByColumn(sortOrder);
+            }
+            else {
+                this.container.sortByColumn(sortOrder, this.getColumn(sortColumn));
+            }
         }
-        if (oldProps.fixedWidth !== newProps.fixedWidth) {
-            this.state.column.setFixedWidth(newProps.fixedWidth);
+        this.list.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
+        super.updateProps(filterProps(oldProps ?? {}, PROP_NAMES), filterProps(newProps, PROP_NAMES));
+    }
+    getColumn(columnId) {
+        const columns = this.container.getColumns();
+        for (let i = 0; i < columns.getNItems(); i++) {
+            const column = columns.getObject(i);
+            if (column.getId() === columnId) {
+                return column;
+            }
         }
-        if (oldProps.id !== newProps.id) {
-            this.state.columnId = newProps.id ?? undefined;
-            this.state.column.setId(this.state.columnId);
+        throw new Error(`Unable to find column '${columnId}' in ColumnView`);
+    }
+    getColumnIndex(column) {
+        const index = this.findColumnIndex(column);
+        if (index === -1) {
+            throw new Error(`Unable to find column '${column.getId()}' in ColumnView`);
         }
-        if (oldProps.sortable !== newProps.sortable) {
-            const sortable = newProps.sortable;
-            if (sortable && !this.state.sorter) {
-                this.state.sorter = new StringSorter();
-                this.state.column.setSorter(this.state.sorter);
-            }
-            else if (!sortable && this.state.sorter) {
-                this.state.column.setSorter(undefined);
-                this.state.sorter = undefined;
+        return index;
+    }
+    findColumnIndex(column) {
+        const columns = this.container.getColumns();
+        for (let i = 0; i < columns.getNItems(); i++) {
+            const col = columns.getObject(i);
+            if (col.getId() === column.getId()) {
+                return i;
             }
         }
+        return -1;
     }
-}
-export class ColumnViewItemNode extends VirtualItemNode {
-    static matches(type) {
-        return type === "ColumnView.Item";
+    findColumnInView(column) {
+        const columns = this.container.getColumns();
+        const targetId = column.getId();
+        for (let i = 0; i < columns.getNItems(); i++) {
+            const col = columns.getObject(i);
+            if (col.getId() === targetId) {
+                return col;
+            }
+        }
+        return null;
     }
 }
+registerNodeClass(ColumnViewNode);

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

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

package/dist/nodes/fixed-child.js

@@ -0,0 +1,45 @@
+import { registerNodeClass } from "../registry.js";
+import { SlotNode } from "./slot.js";
+class FixedChildNode extends SlotNode {
+    static priority = 1;
+    static matches(type) {
+        return type === "FixedChild";
+    }
+    getFixed() {
+        if (!this.parent) {
+            throw new Error("Expected Fixed reference to be set on FixedChildNode");
+        }
+        return this.parent;
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!oldProps || oldProps.x !== newProps.x || oldProps.y !== newProps.y) {
+            if (this.parent && this.child) {
+                this.positionChild();
+            }
+        }
+    }
+    positionChild() {
+        const fixed = this.getFixed();
+        const x = this.props.x ?? 0;
+        const y = this.props.y ?? 0;
+        if (this.child) {
+            const child = this.child;
+            const currentParent = child.getParent();
+            if (currentParent?.equals(fixed)) {
+                fixed.remove(child);
+            }
+            fixed.put(child, x, y);
+        }
+    }
+    onChildChange(oldChild) {
+        const fixed = this.getFixed();
+        if (oldChild) {
+            fixed.remove(oldChild);
+        }
+        if (this.child) {
+            this.positionChild();
+        }
+    }
+}
+registerNodeClass(FixedChildNode);

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

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

package/dist/nodes/grid-child.js

@@ -0,0 +1,54 @@
+import { registerNodeClass } from "../registry.js";
+import { SlotNode } from "./slot.js";
+class GridChildNode extends SlotNode {
+    static priority = 1;
+    static matches(type) {
+        return type === "GridChild";
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (!oldProps ||
+            oldProps.column !== newProps.column ||
+            oldProps.row !== newProps.row ||
+            oldProps.columnSpan !== newProps.columnSpan ||
+            oldProps.rowSpan !== newProps.rowSpan) {
+            if (this.parent && this.child) {
+                this.attachChild();
+            }
+        }
+    }
+    getGrid() {
+        if (!this.parent) {
+            throw new Error("Expected Grid reference to be set on GridChildNode");
+        }
+        return this.parent;
+    }
+    attachChild() {
+        const grid = this.getGrid();
+        const column = this.props.column ?? 0;
+        const row = this.props.row ?? 0;
+        const columnSpan = this.props.columnSpan ?? 1;
+        const rowSpan = this.props.rowSpan ?? 1;
+        const existingChild = grid.getChildAt(column, row);
+        if (existingChild && !existingChild.equals(this.child)) {
+            grid.remove(existingChild);
+        }
+        if (this.child) {
+            const currentParent = this.child.getParent();
+            if (currentParent?.equals(grid)) {
+                grid.remove(this.child);
+            }
+            grid.attach(this.child, column, row, columnSpan, rowSpan);
+        }
+    }
+    onChildChange(oldChild) {
+        const grid = this.getGrid();
+        if (oldChild) {
+            grid.remove(oldChild);
+        }
+        if (this.child) {
+            this.attachChild();
+        }
+    }
+}
+registerNodeClass(GridChildNode);

package/dist/nodes/index.d.ts

@@ -0,0 +1,34 @@
+import "./action-row-child.js";
+import "./action-row.js";
+import "./application.js";
+import "./autowrapped.js";
+import "./column-view-column.js";
+import "./column-view.js";
+import "./fixed-child.js";
+import "./grid-child.js";
+import "./list-item.js";
+import "./list-view.js";
+import "./menu.js";
+import "./navigation-page.js";
+import "./navigation-view.js";
+import "./notebook-page-tab.js";
+import "./notebook-page.js";
+import "./notebook.js";
+import "./overlay-child.js";
+import "./pack-child.js";
+import "./pack.js";
+import "./popover-menu.js";
+import "./simple-list-item.js";
+import "./simple-list-view.js";
+import "./slot.js";
+import "./stack-page.js";
+import "./stack.js";
+import "./toast-overlay.js";
+import "./toast.js";
+import "./toolbar-child.js";
+import "./toolbar.js";
+import "./tree-list-item.js";
+import "./tree-list-view.js";
+import "./virtual.js";
+import "./widget.js";
+import "./window.js";

package/dist/nodes/index.js

@@ -0,0 +1,34 @@
+import "./action-row-child.js";
+import "./action-row.js";
+import "./application.js";
+import "./autowrapped.js";
+import "./column-view-column.js";
+import "./column-view.js";
+import "./fixed-child.js";
+import "./grid-child.js";
+import "./list-item.js";
+import "./list-view.js";
+import "./menu.js";
+import "./navigation-page.js";
+import "./navigation-view.js";
+import "./notebook-page-tab.js";
+import "./notebook-page.js";
+import "./notebook.js";
+import "./overlay-child.js";
+import "./pack-child.js";
+import "./pack.js";
+import "./popover-menu.js";
+import "./simple-list-item.js";
+import "./simple-list-view.js";
+import "./slot.js";
+import "./stack-page.js";
+import "./stack.js";
+import "./toast-overlay.js";
+import "./toast.js";
+import "./toolbar-child.js";
+import "./toolbar.js";
+import "./tree-list-item.js";
+import "./tree-list-view.js";
+import "./virtual.js";
+import "./widget.js";
+import "./window.js";

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

@@ -0,0 +1,18 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type { ListStore } from "./list-store.js";
+import type { SignalStore } from "./signal-store.js";
+export type RenderItemFn<T> = (item: T | null) => ReactNode;
+export declare class ListItemRenderer {
+    private factory;
+    private store?;
+    private fiberRoots;
+    private renderFn?;
+    private signalStore;
+    constructor(signalStore: SignalStore);
+    getFactory(): Gtk.SignalListItemFactory;
+    setRenderFn(renderFn?: RenderItemFn<unknown>): void;
+    setStore(store?: ListStore): void;
+    private getStore;
+    private initialize;
+}

package/dist/nodes/internal/list-item-renderer.js

@@ -0,0 +1,67 @@
+import { getObjectId } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot } from "../../fiber-root.js";
+import { reconciler } from "../../reconciler.js";
+export class ListItemRenderer {
+    factory;
+    store;
+    fiberRoots = new Map();
+    renderFn = () => null;
+    signalStore;
+    constructor(signalStore) {
+        this.signalStore = signalStore;
+        this.factory = new Gtk.SignalListItemFactory();
+        this.initialize();
+    }
+    getFactory() {
+        return this.factory;
+    }
+    setRenderFn(renderFn) {
+        this.renderFn = renderFn;
+    }
+    setStore(store) {
+        this.store = store;
+    }
+    getStore() {
+        if (!this.store) {
+            throw new Error("Expected list store to be set on ListItemRenderer");
+        }
+        return this.store;
+    }
+    initialize() {
+        this.signalStore.set(this.factory, "setup", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const box = new Gtk.Box(Gtk.Orientation.VERTICAL, 0);
+            listItem.setChild(box);
+            const fiberRoot = createFiberRoot(box);
+            this.fiberRoots.set(ptr, fiberRoot);
+            const element = this.renderFn?.(null);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "bind", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (!fiberRoot)
+                return;
+            const id = listItem.getItem();
+            const item = this.getStore().getItem(id.getString());
+            const element = this.renderFn?.(item);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "unbind", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (!fiberRoot)
+                return;
+            reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
+        });
+        this.signalStore.set(this.factory, "teardown", (_self, listItem) => {
+            const ptr = getObjectId(listItem.id);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (fiberRoot) {
+                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
+                queueMicrotask(() => this.fiberRoots.delete(ptr));
+            }
+        });
+    }
+}

package/dist/nodes/internal/list-store.d.ts

@@ -0,0 +1,16 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+export declare class ListStore {
+    private items;
+    private model;
+    private newSortedIds;
+    private sortedIds;
+    private shouldSync;
+    addItem(id: string, item: unknown): void;
+    removeItem(id: string): void;
+    insertItemBefore(id: string, beforeId: string, item: unknown): void;
+    updateItem(id: string, item: unknown): void;
+    getItem(id: string): unknown;
+    getModel(): Gtk.StringList;
+    private scheduleSync;
+    private sync;
+}