@gtkx/react 0.18.0 → 0.18.2

package/src/nodes/drop-down.ts

@@ -0,0 +1,92 @@
+import type { AdwComboRowProps, GtkDropDownProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { DropDownWidget } from "../registry.js";
+import type { Container } from "../types.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { SimpleListStore } from "./internal/simple-list-store.js";
+import { ListItemNode } from "./list-item.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["selectedId", "onSelectionChanged"] as const;
+
+type DropDownProps = Pick<GtkDropDownProps | AdwComboRowProps, (typeof OWN_PROPS)[number]>;
+
+export class DropDownNode extends WidgetNode<DropDownWidget, DropDownProps, ListItemNode> {
+    private store = new SimpleListStore();
+    private initialSelectedId: string | null | undefined;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ListItemNode;
+    }
+
+    constructor(typeName: string, props: DropDownProps, container: DropDownWidget, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.store.beginBatch();
+        this.initialSelectedId = props.selectedId;
+        this.container.setModel(this.store.getModel());
+    }
+
+    public override finalizeInitialChildren(props: DropDownProps): boolean {
+        super.finalizeInitialChildren(props);
+        this.store.flushBatch();
+        this.reapplyInitialSelectedId();
+        return false;
+    }
+
+    private reapplyInitialSelectedId(): void {
+        if (this.initialSelectedId == null) return;
+        const index = this.store.getIndexById(this.initialSelectedId);
+        this.initialSelectedId = undefined;
+        if (index !== null) {
+            this.container.setSelected(index);
+        }
+    }
+
+    public override appendChild(child: ListItemNode): void {
+        super.appendChild(child);
+        child.setStore(this.store);
+        this.store.addItem(child.props.id, child.props.value as string);
+    }
+
+    public override insertBefore(child: ListItemNode, before: ListItemNode): void {
+        super.insertBefore(child, before);
+        child.setStore(this.store);
+        this.store.insertItemBefore(child.props.id, before.props.id, child.props.value as string);
+    }
+
+    public override removeChild(child: ListItemNode): void {
+        this.store.removeItem(child.props.id);
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: DropDownProps | null, newProps: DropDownProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: DropDownProps | null, newProps: DropDownProps): void {
+        if (hasChanged(oldProps, newProps, "onSelectionChanged")) {
+            const onSelectionChanged = newProps.onSelectionChanged;
+
+            const handleSelectionChange = onSelectionChanged
+                ? () => {
+                      const selectedIndex = this.container.getSelected();
+                      const id = this.store.getIdAtIndex(selectedIndex);
+                      if (id !== null) {
+                          onSelectionChanged(id);
+                      }
+                  }
+                : undefined;
+
+            this.signalStore.set(this, this.container, "notify::selected", handleSelectionChange);
+        }
+
+        if (hasChanged(oldProps, newProps, "selectedId")) {
+            const index = newProps.selectedId != null ? this.store.getIndexById(newProps.selectedId) : null;
+
+            if (index !== null) {
+                this.container.setSelected(index);
+            }
+        }
+    }
+}

package/src/nodes/event-controller.ts

@@ -0,0 +1,100 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { CONSTRUCTOR_PROPS } from "../generated/internal.js";
+import { resolvePropMeta, resolveSignal } from "../metadata.js";
+import { Node } from "../node.js";
+import type { Props } from "../types.js";
+import type { SignalHandler } from "./internal/signal-store.js";
+import { WidgetNode } from "./widget.js";
+
+const G_TYPE_INVALID = 0;
+
+export class EventControllerNode<
+    T extends Gtk.EventController = Gtk.EventController,
+    // biome-ignore lint/suspicious/noExplicitAny: Self-referential type bounds require any
+    TChild extends Node = any,
+> extends Node<T, Props, WidgetNode, TChild> {
+    public static override createContainer(
+        props: Props,
+        containerClass: typeof Gtk.EventController,
+    ): Gtk.EventController {
+        const typeName = containerClass.glibTypeName;
+
+        if (typeName === "GtkDropTarget") {
+            const actions = (props.actions as number | undefined) ?? 0;
+            return new Gtk.DropTarget(G_TYPE_INVALID, actions);
+        }
+
+        const args = (CONSTRUCTOR_PROPS[typeName] ?? []).map((name) => props[name]);
+
+        // biome-ignore lint/suspicious/noExplicitAny: Dynamic constructor invocation
+        return new (containerClass as any)(...args);
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode;
+    }
+
+    public override setParent(parent: WidgetNode | null): void {
+        if (!parent && this.parent) {
+            this.parent.container.removeController(this.container);
+        }
+
+        super.setParent(parent);
+
+        if (parent) {
+            parent.container.addController(this.container);
+        }
+    }
+
+    public override commitUpdate(oldProps: Props | null, newProps: Props): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent && this.container.getWidget() === this.parent.container) {
+            this.parent.container.removeController(this.container);
+        }
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: Props | null, newProps: Props): void {
+        const propNames = new Set([...Object.keys(oldProps ?? {}), ...Object.keys(newProps ?? {})]);
+
+        for (const name of propNames) {
+            if (name === "children") continue;
+
+            const oldValue = oldProps?.[name];
+            const newValue = newProps[name];
+
+            if (oldValue === newValue) continue;
+
+            const signalName = resolveSignal(this.container, name);
+
+            if (signalName) {
+                const handler = typeof newValue === "function" ? (newValue as SignalHandler) : undefined;
+                this.signalStore.set(this, this.container, signalName, handler, { blockable: false });
+            } else if (newValue !== undefined) {
+                this.setProperty(name, newValue);
+            }
+        }
+    }
+
+    private setProperty(name: string, value: unknown): void {
+        if (name === "types" && this.container instanceof Gtk.DropTarget) {
+            const types = value as number[];
+            this.container.setGtypes(types.length, types);
+            return;
+        }
+
+        const propMeta = resolvePropMeta(this.container, name);
+
+        if (propMeta) {
+            const [, setterName] = propMeta;
+            const setterFn = (this.container as unknown as Record<string, (v: unknown) => void>)[setterName];
+            if (typeof setterFn === "function") {
+                setterFn.call(this.container, value);
+            }
+        }
+    }
+}

package/src/nodes/fixed-child.ts

@@ -0,0 +1,108 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { FixedChildProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class FixedChildNode extends VirtualNode<FixedChildProps, WidgetNode<Gtk.Fixed>, WidgetNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode && parent.container instanceof Gtk.Fixed;
+    }
+
+    public override setParent(parent: WidgetNode<Gtk.Fixed> | null): void {
+        if (!parent && this.parent && this.children[0]) {
+            this.detachFromParent(this.parent.container, this.children[0].container);
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.attachToParent(parent.container, this.children[0].container);
+            this.applyTransform();
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+            this.applyTransform();
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        if (this.parent) {
+            this.detachFromParent(this.parent.container, child.container);
+        }
+
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: FixedChildProps | null, newProps: FixedChildProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        if (!this.parent || !this.children[0]) {
+            return;
+        }
+
+        const positionChanged = hasChanged(oldProps, newProps, "x") || hasChanged(oldProps, newProps, "y");
+
+        if (positionChanged) {
+            this.repositionChild();
+        } else if (hasChanged(oldProps, newProps, "transform")) {
+            this.applyTransform();
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent && this.children[0]) {
+            this.detachFromParent(this.parent.container, this.children[0].container);
+        }
+        super.detachDeletedInstance();
+    }
+
+    private attachToParent(parent: Gtk.Fixed, child: Gtk.Widget): void {
+        const x = this.props.x ?? 0;
+        const y = this.props.y ?? 0;
+        parent.put(child, x, y);
+    }
+
+    private detachFromParent(parent: Gtk.Fixed, child: Gtk.Widget): void {
+        const childParent = child.getParent();
+        if (childParent && childParent === parent) {
+            parent.remove(child);
+        }
+    }
+
+    private repositionChild(): void {
+        if (!this.parent || !this.children[0]) return;
+
+        const x = this.props.x ?? 0;
+        const y = this.props.y ?? 0;
+
+        this.parent.container.remove(this.children[0].container);
+        this.parent.container.put(this.children[0].container, x, y);
+        this.applyTransform();
+    }
+
+    private applyTransform(): void {
+        if (!this.parent || !this.children[0] || !this.props.transform) {
+            return;
+        }
+
+        const layoutManager = this.parent.container.getLayoutManager();
+
+        if (!layoutManager) {
+            return;
+        }
+
+        const layoutChild = layoutManager.getLayoutChild(this.children[0].container) as Gtk.FixedLayoutChild;
+        layoutChild.setTransform(this.props.transform);
+    }
+}

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

@@ -0,0 +1,97 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkFontDialogButtonProps } from "../jsx.js";
+import type { Container } from "../types.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = [
+    "fontDesc",
+    "onFontDescChanged",
+    "title",
+    "modal",
+    "language",
+    "useFont",
+    "useSize",
+    "level",
+] as const;
+
+type FontDialogButtonProps = Pick<GtkFontDialogButtonProps, (typeof OWN_PROPS)[number]>;
+
+export class FontDialogButtonNode extends WidgetNode<Gtk.FontDialogButton, FontDialogButtonProps> {
+    private dialog: Gtk.FontDialog;
+
+    public static override createContainer(
+        _props: FontDialogButtonProps,
+        containerClass: typeof Gtk.Widget,
+    ): Container | null {
+        const dialog = new Gtk.FontDialog();
+        const button = new (containerClass as typeof Gtk.FontDialogButton)(dialog);
+        return button;
+    }
+
+    constructor(
+        typeName: string,
+        props: FontDialogButtonProps,
+        container: Gtk.FontDialogButton,
+        rootContainer: Container,
+    ) {
+        super(typeName, props, container, rootContainer);
+        const dialog = container.getDialog();
+        if (!dialog) {
+            throw new Error("FontDialogButton must have a dialog");
+        }
+        this.dialog = dialog;
+    }
+
+    public override commitUpdate(oldProps: FontDialogButtonProps | null, newProps: FontDialogButtonProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: FontDialogButtonProps | null, newProps: FontDialogButtonProps): 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, "language") && newProps.language) {
+            this.dialog.setLanguage(newProps.language);
+        }
+
+        if (hasChanged(oldProps, newProps, "useFont")) {
+            this.container.setUseFont(newProps.useFont ?? false);
+        }
+
+        if (hasChanged(oldProps, newProps, "useSize")) {
+            this.container.setUseSize(newProps.useSize ?? false);
+        }
+
+        if (hasChanged(oldProps, newProps, "level")) {
+            this.container.setLevel(newProps.level ?? Gtk.FontLevel.FONT);
+        }
+
+        if (hasChanged(oldProps, newProps, "fontDesc") && newProps.fontDesc) {
+            this.container.setFontDesc(newProps.fontDesc);
+        }
+
+        if (hasChanged(oldProps, newProps, "onFontDescChanged")) {
+            const callback = newProps.onFontDescChanged;
+            this.signalStore.set(
+                this,
+                this.container,
+                "notify::font-desc",
+                callback
+                    ? () => {
+                          const fontDesc = this.container.getFontDesc();
+                          if (fontDesc) {
+                              callback(fontDesc);
+                          }
+                      }
+                    : undefined,
+            );
+        }
+    }
+}

package/src/nodes/grid-child.ts

@@ -0,0 +1,103 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GridChildProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class GridChildNode extends VirtualNode<GridChildProps, WidgetNode<Gtk.Grid>, WidgetNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode && parent.container instanceof Gtk.Grid;
+    }
+
+    public override setParent(parent: WidgetNode<Gtk.Grid> | null): void {
+        if (!parent && this.parent && this.children[0]) {
+            this.detachFromParent(this.parent.container, this.children[0].container);
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.attachToParent(parent.container, this.children[0].container);
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.attachToParent(this.parent.container, child.container);
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        if (this.parent) {
+            this.detachFromParent(this.parent.container, child.container);
+        }
+
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: GridChildProps | null, newProps: GridChildProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        const positionChanged =
+            hasChanged(oldProps, newProps, "column") ||
+            hasChanged(oldProps, newProps, "row") ||
+            hasChanged(oldProps, newProps, "columnSpan") ||
+            hasChanged(oldProps, newProps, "rowSpan");
+
+        if (positionChanged && this.parent && this.children[0]) {
+            this.reattachChild();
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent && this.children[0]) {
+            this.detachFromParent(this.parent.container, this.children[0].container);
+        }
+        super.detachDeletedInstance();
+    }
+
+    private attachToParent(parent: Gtk.Grid, child: Gtk.Widget): void {
+        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 = parent.getChildAt(column, row);
+        if (existingChild && existingChild !== child) {
+            parent.remove(existingChild);
+        }
+
+        parent.attach(child, column, row, columnSpan, rowSpan);
+    }
+
+    private detachFromParent(parent: Gtk.Grid, child: Gtk.Widget): void {
+        const childParent = child.getParent();
+        if (childParent && childParent === parent) {
+            parent.remove(child);
+        }
+    }
+
+    private reattachChild(): void {
+        if (!this.parent || !this.children[0]) return;
+
+        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 = this.parent.container.getChildAt(column, row);
+        if (existingChild && existingChild !== this.children[0].container) {
+            this.parent.container.remove(existingChild);
+        }
+
+        this.parent.container.remove(this.children[0].container);
+        this.parent.container.attach(this.children[0].container, column, row, columnSpan, rowSpan);
+    }
+}

package/src/nodes/grid-view.ts

@@ -0,0 +1,96 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkGridViewProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { GridItemRenderer } from "./internal/grid-item-renderer.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { ListItemNode } from "./list-item.js";
+import { GridModel, type GridModelProps } from "./models/grid.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["renderItem", "estimatedItemHeight"] as const;
+
+type GridViewProps = Pick<GtkGridViewProps, (typeof OWN_PROPS)[number]> & GridModelProps;
+
+export class GridViewNode extends WidgetNode<Gtk.GridView, GridViewProps, ListItemNode> {
+    private itemRenderer: GridItemRenderer;
+    private grid: GridModel;
+
+    constructor(typeName: string, props: GridViewProps, container: Gtk.GridView, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+        this.grid = new GridModel(
+            { owner: this, signalStore: this.signalStore },
+            {
+                selectionMode: props.selectionMode,
+                selected: props.selected,
+                onSelectionChanged: props.onSelectionChanged,
+            },
+        );
+        this.itemRenderer = new GridItemRenderer(this.signalStore);
+        this.itemRenderer.setStore(this.grid.getStore());
+        this.grid.getStore().setOnItemUpdated((id) => this.itemRenderer.rebindItem(id));
+        this.container.setFactory(this.itemRenderer.getFactory());
+    }
+
+    public override isValidChild(child: Node): boolean {
+        if (!(child instanceof ListItemNode)) return false;
+        if (child.getChildNodes().length > 0) {
+            throw new Error("GtkGridView does not support nested ListItems. Use GtkListView for tree lists.");
+        }
+        return true;
+    }
+
+    public override appendChild(child: ListItemNode): void {
+        super.appendChild(child);
+        this.grid.appendChild(child);
+    }
+
+    public override insertBefore(child: ListItemNode, before: ListItemNode): void {
+        super.insertBefore(child, before);
+        this.grid.insertBefore(child, before);
+    }
+
+    public override removeChild(child: ListItemNode): void {
+        this.grid.removeChild(child);
+        super.removeChild(child);
+    }
+
+    public override finalizeInitialChildren(props: GridViewProps): boolean {
+        super.finalizeInitialChildren(props);
+        return true;
+    }
+
+    public override commitUpdate(oldProps: GridViewProps | null, newProps: GridViewProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override commitMount(): void {
+        super.commitMount();
+        this.grid.flushBatch();
+        this.container.setModel(this.grid.getSelectionModel());
+    }
+
+    public override detachDeletedInstance(): void {
+        this.itemRenderer.dispose();
+        super.detachDeletedInstance();
+    }
+
+    private applyOwnProps(oldProps: GridViewProps | null, newProps: GridViewProps): void {
+        if (hasChanged(oldProps, newProps, "renderItem")) {
+            this.itemRenderer.setRenderFn(newProps.renderItem ?? null);
+        }
+
+        if (hasChanged(oldProps, newProps, "estimatedItemHeight")) {
+            this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight ?? null);
+        }
+
+        const previousModel = this.grid.getSelectionModel();
+        this.grid.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        const currentModel = this.grid.getSelectionModel();
+
+        if (previousModel !== currentModel) {
+            this.container.setModel(currentModel);
+        }
+    }
+}