@gtkx/react 0.18.0 → 0.18.2

package/src/nodes/application.ts

@@ -0,0 +1,56 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { Node } from "../node.js";
+import type { Container, Props } from "../types.js";
+import { MenuNode } from "./menu.js";
+import { MenuModel } from "./models/menu.js";
+
+export class ApplicationNode extends Node<Gtk.Application, Props, Node, Node> {
+    private menu: MenuModel;
+
+    constructor(typeName: string, props: Props, container: Gtk.Application, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        const application = rootContainer instanceof Gtk.Application ? rootContainer : undefined;
+        this.menu = new MenuModel("root", {}, rootContainer, container, application);
+    }
+
+    public override isValidChild(): boolean {
+        return true;
+    }
+
+    public override appendChild(child: Node): void {
+        if (child instanceof MenuNode) {
+            this.menu.appendChild(child);
+            this.container.setMenubar(this.menu.getMenu());
+            return;
+        }
+
+        super.appendChild(child);
+    }
+
+    public override insertBefore(child: Node, before: Node): void {
+        if (child instanceof MenuNode) {
+            if (before instanceof MenuNode) {
+                this.menu.insertBefore(child, before);
+            } else {
+                this.menu.appendChild(child);
+            }
+            this.container.setMenubar(this.menu.getMenu());
+            return;
+        }
+
+        super.insertBefore(child, before);
+    }
+
+    public override removeChild(child: Node): void {
+        if (child instanceof MenuNode) {
+            this.menu.removeChild(child);
+
+            if (this.menu.getMenu().getNItems() === 0) {
+                this.container.setMenubar(null);
+            }
+            return;
+        }
+
+        super.removeChild(child);
+    }
+}

package/src/nodes/calendar.ts

@@ -0,0 +1,38 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkCalendarProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { filterProps, primitiveArrayEqual } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["markedDays"] as const;
+
+type CalendarProps = Pick<GtkCalendarProps, (typeof OWN_PROPS)[number]>;
+
+export class CalendarNode extends WidgetNode<Gtk.Calendar, CalendarProps, EventControllerNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof EventControllerNode;
+    }
+    private appliedMarks: number[] = [];
+
+    public override commitUpdate(oldProps: CalendarProps | null, newProps: CalendarProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(newProps);
+    }
+
+    private applyOwnProps(newProps: CalendarProps): void {
+        const newMarkedDays = newProps.markedDays ?? [];
+
+        if (primitiveArrayEqual(this.appliedMarks, newMarkedDays)) {
+            return;
+        }
+
+        this.container.clearMarks();
+
+        for (const day of newMarkedDays) {
+            this.container.markDay(day);
+        }
+
+        this.appliedMarks = [...newMarkedDays];
+    }
+}

package/src/nodes/color-dialog-button.ts

@@ -0,0 +1,69 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkColorDialogButtonProps } from "../jsx.js";
+import type { Container } from "../types.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["rgba", "onRgbaChanged", "title", "modal", "withAlpha"] as const;
+
+type ColorDialogButtonProps = Pick<GtkColorDialogButtonProps, (typeof OWN_PROPS)[number]>;
+
+export class ColorDialogButtonNode extends WidgetNode<Gtk.ColorDialogButton, ColorDialogButtonProps> {
+    private dialog: Gtk.ColorDialog;
+
+    public static override createContainer(
+        _props: ColorDialogButtonProps,
+        containerClass: typeof Gtk.Widget,
+    ): Container | null {
+        const dialog = new Gtk.ColorDialog();
+        const button = new (containerClass as typeof Gtk.ColorDialogButton)(dialog);
+        return button;
+    }
+
+    constructor(
+        typeName: string,
+        props: ColorDialogButtonProps,
+        container: Gtk.ColorDialogButton,
+        rootContainer: Container,
+    ) {
+        super(typeName, props, container, rootContainer);
+        const dialog = container.getDialog();
+        if (!dialog) {
+            throw new Error("ColorDialogButton must have a dialog");
+        }
+        this.dialog = dialog;
+    }
+
+    public override commitUpdate(oldProps: ColorDialogButtonProps | null, newProps: ColorDialogButtonProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: ColorDialogButtonProps | null, newProps: ColorDialogButtonProps): void {
+        if (hasChanged(oldProps, newProps, "title")) {
+            this.dialog.setTitle(newProps.title ?? "");
+        }
+
+        if (hasChanged(oldProps, newProps, "modal")) {
+            this.dialog.setModal(newProps.modal ?? true);
+        }
+
+        if (hasChanged(oldProps, newProps, "withAlpha")) {
+            this.dialog.setWithAlpha(newProps.withAlpha ?? true);
+        }
+
+        if (hasChanged(oldProps, newProps, "rgba") && newProps.rgba) {
+            this.container.setRgba(newProps.rgba);
+        }
+
+        if (hasChanged(oldProps, newProps, "onRgbaChanged")) {
+            const callback = newProps.onRgbaChanged;
+            this.signalStore.set(
+                this,
+                this.container,
+                "notify::rgba",
+                callback ? () => callback(this.container.getRgba()) : undefined,
+            );
+        }
+    }
+}

package/src/nodes/column-view-column.ts

@@ -0,0 +1,84 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ColumnViewColumnProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { ListItemRenderer } from "./internal/list-item-renderer.js";
+import { hasChanged } from "./internal/props.js";
+import type { TreeStore } from "./internal/tree-store.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class ColumnViewColumnNode extends VirtualNode<ColumnViewColumnProps, WidgetNode<Gtk.ColumnView>, never> {
+    public override isValidChild(_child: Node): boolean {
+        return false;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode && parent.container instanceof Gtk.ColumnView;
+    }
+    private column: Gtk.ColumnViewColumn;
+    private itemRenderer: ListItemRenderer;
+
+    constructor(typeName: string, props: ColumnViewColumnProps, container: undefined, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.itemRenderer = new ListItemRenderer(this.signalStore);
+        this.column = new Gtk.ColumnViewColumn();
+        this.column.setFactory(this.itemRenderer.getFactory());
+    }
+
+    public override commitUpdate(oldProps: ColumnViewColumnProps | null, newProps: ColumnViewColumnProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.itemRenderer.dispose();
+        super.detachDeletedInstance();
+    }
+
+    public getColumn(): Gtk.ColumnViewColumn {
+        return this.column;
+    }
+
+    public setStore(model: TreeStore | null): void {
+        this.itemRenderer.setStore(model);
+    }
+
+    public setEstimatedRowHeight(height: number | null): void {
+        this.itemRenderer.setEstimatedItemHeight(height);
+    }
+
+    private applyOwnProps(oldProps: ColumnViewColumnProps | null, newProps: ColumnViewColumnProps): void {
+        if (hasChanged(oldProps, newProps, "renderCell")) {
+            this.itemRenderer.setRenderFn(newProps.renderCell);
+        }
+
+        if (hasChanged(oldProps, newProps, "title")) {
+            this.column.setTitle(newProps.title);
+        }
+
+        if (hasChanged(oldProps, newProps, "expand")) {
+            this.column.setExpand(newProps.expand ?? false);
+        }
+
+        if (hasChanged(oldProps, newProps, "resizable")) {
+            this.column.setResizable(newProps.resizable ?? false);
+        }
+
+        if (hasChanged(oldProps, newProps, "fixedWidth")) {
+            this.column.setFixedWidth(newProps.fixedWidth ?? -1);
+        }
+
+        if (hasChanged(oldProps, newProps, "id")) {
+            this.column.setId(newProps.id);
+        }
+
+        if (hasChanged(oldProps, newProps, "sortable")) {
+            if (newProps.sortable) {
+                this.column.setSorter(new Gtk.StringSorter());
+            } else {
+                this.column.setSorter(null);
+            }
+        }
+    }
+}

package/src/nodes/column-view.ts

@@ -0,0 +1,192 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkColumnViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { ColumnViewColumnNode } from "./column-view-column.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { ListItemNode } from "./list-item.js";
+import { ListModel, type ListModelProps } from "./models/list.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"] as const;
+
+type ColumnViewProps = Pick<GtkColumnViewProps, (typeof OWN_PROPS)[number]> & ListModelProps;
+type ColumnViewChild = ListItemNode | ColumnViewColumnNode;
+
+export class ColumnViewNode extends WidgetNode<Gtk.ColumnView, ColumnViewProps, ColumnViewChild> {
+    private handleSortChange: (() => void) | null = null;
+    private list: ListModel;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ListItemNode || child instanceof ColumnViewColumnNode;
+    }
+    private columnNodes = new Set<ColumnViewColumnNode>();
+    private estimatedRowHeight: number | null = null;
+
+    constructor(typeName: string, props: ColumnViewProps, container: Gtk.ColumnView, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.list = new ListModel(
+            { owner: this, signalStore: this.signalStore },
+            {
+                selectionMode: props.selectionMode,
+                selected: props.selected,
+                onSelectionChanged: props.onSelectionChanged,
+            },
+        );
+    }
+
+    public override appendChild(child: ColumnViewChild): void {
+        super.appendChild(child);
+
+        if (child instanceof ListItemNode) {
+            this.list.appendChild(child);
+            return;
+        }
+
+        const existingColumn = this.findColumnInView(child.getColumn());
+
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
+        }
+
+        child.setStore(this.list.getStore());
+        child.setEstimatedRowHeight(this.estimatedRowHeight);
+        this.container.appendColumn(child.getColumn());
+        this.columnNodes.add(child);
+    }
+
+    public override insertBefore(child: ColumnViewChild, before: ColumnViewChild): void {
+        super.insertBefore(child, before);
+
+        if (child instanceof ListItemNode) {
+            if (before instanceof ListItemNode) {
+                this.list.insertBefore(child, before);
+            }
+            return;
+        }
+
+        const existingColumn = this.findColumnInView(child.getColumn());
+
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
+        }
+
+        child.setStore(this.list.getStore());
+        child.setEstimatedRowHeight(this.estimatedRowHeight);
+
+        if (before instanceof ColumnViewColumnNode) {
+            const beforeIndex = this.getColumnIndex(before.getColumn());
+            this.container.insertColumn(beforeIndex, child.getColumn());
+        } else {
+            this.container.appendColumn(child.getColumn());
+        }
+
+        this.columnNodes.add(child);
+    }
+
+    public override removeChild(child: ColumnViewChild): void {
+        if (child instanceof ListItemNode) {
+            this.list.removeChild(child);
+            super.removeChild(child);
+            return;
+        }
+
+        const existingColumn = this.findColumnInView(child.getColumn());
+
+        if (existingColumn) {
+            this.container.removeColumn(existingColumn);
+        }
+
+        child.setStore(null);
+        this.columnNodes.delete(child);
+        super.removeChild(child);
+    }
+
+    public override finalizeInitialChildren(props: ColumnViewProps): boolean {
+        super.finalizeInitialChildren(props);
+        return true;
+    }
+
+    public override commitUpdate(oldProps: ColumnViewProps | null, newProps: ColumnViewProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+        this.list.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+    }
+
+    public override commitMount(): void {
+        super.commitMount();
+        this.list.flushBatch();
+        this.container.setModel(this.list.getSelectionModel());
+    }
+
+    public override detachDeletedInstance(): void {
+        this.columnNodes.clear();
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: ColumnViewProps | null, newProps: ColumnViewProps): void {
+        if (hasChanged(oldProps, newProps, "onSortChanged")) {
+            const sorter = this.container.getSorter();
+            const onSortChanged = newProps.onSortChanged;
+
+            if (sorter instanceof Gtk.ColumnViewSorter) {
+                this.handleSortChange = () => {
+                    onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+                };
+
+                this.signalStore.set(this, sorter, "changed", this.handleSortChange);
+            }
+        }
+
+        if (hasChanged(oldProps, newProps, "sortColumn") || hasChanged(oldProps, newProps, "sortOrder")) {
+            const sortColumn = newProps.sortColumn;
+            const sortOrder = newProps.sortOrder ?? Gtk.SortType.ASCENDING;
+
+            if (!sortColumn) {
+                this.container.sortByColumn(sortOrder, undefined);
+            } else {
+                this.container.sortByColumn(sortOrder, this.getColumn(sortColumn));
+            }
+        }
+
+        if (hasChanged(oldProps, newProps, "estimatedRowHeight")) {
+            this.estimatedRowHeight = newProps.estimatedRowHeight ?? null;
+            for (const column of this.columnNodes) {
+                column.setEstimatedRowHeight(this.estimatedRowHeight);
+            }
+        }
+    }
+
+    private findColumn<T>(predicate: (column: Gtk.ColumnViewColumn, index: number) => T | null): T | null {
+        const columns = this.container.getColumns();
+        for (let i = 0; i < columns.getNItems(); i++) {
+            const column = columns.getObject(i);
+            if (!(column instanceof Gtk.ColumnViewColumn)) continue;
+            const result = predicate(column, i);
+            if (result !== null) return result;
+        }
+        return null;
+    }
+
+    private getColumn(columnId: string): Gtk.ColumnViewColumn {
+        const column = this.findColumn((col) => (col.getId() === columnId ? col : null));
+        if (!column) {
+            throw new Error(`Unable to find column '${columnId}' in ${this.typeName}`);
+        }
+        return column;
+    }
+
+    private getColumnIndex(column: Gtk.ColumnViewColumn): number {
+        const targetId = column.getId();
+        const index = this.findColumn((col, i) => (col.getId() === targetId ? i : null));
+        if (index === null) {
+            throw new Error(`Unable to find column '${targetId}' in ${this.typeName}`);
+        }
+        return index;
+    }
+
+    private findColumnInView(column: Gtk.ColumnViewColumn): Gtk.ColumnViewColumn | null {
+        const targetId = column.getId();
+        return this.findColumn((col) => (col.getId() === targetId ? col : null));
+    }
+}

package/src/nodes/container-slot.ts

@@ -0,0 +1,87 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { ContainerSlotProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { isRemovable } from "./internal/predicates.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class ContainerSlotNode extends VirtualNode<ContainerSlotProps, WidgetNode, WidgetNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode;
+    }
+
+    public override setParent(parent: WidgetNode | null): void {
+        if (!parent && this.parent) {
+            this.detachAllChildren(this.parent.container);
+        }
+
+        super.setParent(parent);
+
+        if (parent) {
+            for (const child of this.children) {
+                this.attachToParent(parent.container, child.container);
+            }
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+        }
+    }
+
+    public override insertBefore(child: WidgetNode, before: WidgetNode): void {
+        super.insertBefore(child, before);
+
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        if (this.parent && isRemovable(this.parent.container)) {
+            const widget = child.container;
+            const currentParent = widget.getParent();
+            if (currentParent && currentParent === this.parent.container) {
+                this.parent.container.remove(widget);
+            }
+        }
+
+        super.removeChild(child);
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent) {
+            this.detachAllChildren(this.parent.container);
+        }
+        super.detachDeletedInstance();
+    }
+
+    private attachToParent(parent: Gtk.Widget, child: Gtk.Widget): void {
+        const methodName = this.props.id;
+        const method = parent[methodName as keyof Gtk.Widget];
+
+        if (typeof method !== "function") {
+            throw new Error(`Method '${methodName}' not found on '${parent.constructor.name}'`);
+        }
+
+        (method as (child: Gtk.Widget) => void).call(parent, child);
+    }
+
+    private detachAllChildren(parent: Gtk.Widget): void {
+        if (!isRemovable(parent)) return;
+
+        for (const child of this.children) {
+            const currentParent = child.container.getParent();
+            if (currentParent && currentParent === parent) {
+                parent.remove(child.container);
+            }
+        }
+    }
+}

package/src/nodes/dialog.ts

@@ -0,0 +1,25 @@
+import type * as Adw from "@gtkx/ffi/adw";
+import type { Props } from "../types.js";
+import { WidgetNode } from "./widget.js";
+import { WindowNode } from "./window.js";
+
+export class DialogNode extends WidgetNode<Adw.Dialog> {
+    protected override shouldAttachToParent(): boolean {
+        return false;
+    }
+
+    public override finalizeInitialChildren(props: Props): boolean {
+        this.commitUpdate(null, props);
+        return true;
+    }
+
+    public override commitMount(): void {
+        const parent = this.parent instanceof WindowNode ? this.parent.container : undefined;
+        this.container.present(parent);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.container.forceClose();
+        super.detachDeletedInstance();
+    }
+}

package/src/nodes/drawing-area.ts

@@ -0,0 +1,51 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkDrawingAreaProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["onDraw"] as const;
+
+type DrawFunc = (self: Gtk.DrawingArea, cr: import("@gtkx/ffi/cairo").Context, width: number, height: number) => void;
+type DrawingAreaProps = Pick<GtkDrawingAreaProps, (typeof OWN_PROPS)[number]>;
+type PendingDrawFunc = { container: Gtk.DrawingArea; fn: DrawFunc };
+
+const pendingDrawFuncs: PendingDrawFunc[] = [];
+
+function ensurePendingBatch(): PendingDrawFunc[] {
+    if (pendingDrawFuncs.length === 0) {
+        queueMicrotask(flushPendingDrawFuncs);
+    }
+
+    return pendingDrawFuncs;
+}
+
+function flushPendingDrawFuncs(): void {
+    const batch = pendingDrawFuncs.splice(0);
+
+    for (const { container, fn } of batch) {
+        container.setDrawFunc(fn);
+    }
+}
+
+export class DrawingAreaNode extends WidgetNode<Gtk.DrawingArea, DrawingAreaProps, EventControllerNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof EventControllerNode;
+    }
+
+    public override commitUpdate(oldProps: DrawingAreaProps | null, newProps: DrawingAreaProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: DrawingAreaProps | null, newProps: DrawingAreaProps): void {
+        if (hasChanged(oldProps, newProps, "onDraw")) {
+            if (this.container.getAllocatedWidth() > 0) {
+                this.container.setDrawFunc(newProps.onDraw);
+            } else if (newProps.onDraw) {
+                ensurePendingBatch().push({ container: this.container, fn: newProps.onDraw });
+            }
+        }
+    }
+}