@gtkx/react 0.18.0 → 0.18.2

package/src/nodes/notebook-page-tab.ts

@@ -0,0 +1,55 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { SlotProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { NotebookPageNode } from "./notebook-page.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class NotebookPageTabNode extends VirtualNode<SlotProps, NotebookPageNode, WidgetNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof VirtualNode && parent.typeName === "NotebookPage";
+    }
+
+    private getNotebook(): Gtk.Notebook | null {
+        return this.parent?.parent?.container ?? null;
+    }
+
+    private getPage(): Gtk.Widget | null {
+        return this.parent?.findContentChild()?.container ?? null;
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange();
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        super.removeChild(child);
+
+        if (this.parent) {
+            this.onChildChange();
+        }
+    }
+
+    private onChildChange(): void {
+        const notebook = this.getNotebook();
+        const page = this.getPage();
+
+        if (!notebook || !page) {
+            return;
+        }
+
+        if (notebook.pageNum(page) === -1) {
+            return;
+        }
+
+        notebook.setTabLabel(page, this.children[0]?.container ?? null);
+    }
+}

package/src/nodes/notebook-page.ts

@@ -0,0 +1,185 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { NotebookPageProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import { NotebookPageTabNode } from "./notebook-page-tab.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+type NotebookPageChild = WidgetNode | NotebookPageTabNode;
+
+export class NotebookPageNode extends VirtualNode<NotebookPageProps, WidgetNode<Gtk.Notebook>, NotebookPageChild> {
+    private position: number | null = null;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode || child instanceof NotebookPageTabNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof WidgetNode && parent.container instanceof Gtk.Notebook;
+    }
+
+    public findTabNode(): NotebookPageTabNode | undefined {
+        return this.children.find((c): c is NotebookPageTabNode => c instanceof NotebookPageTabNode);
+    }
+
+    public findContentChild(): WidgetNode | undefined {
+        return this.children.find(
+            (c): c is WidgetNode => c instanceof WidgetNode && !(c instanceof NotebookPageTabNode),
+        );
+    }
+
+    public override setParent(parent: WidgetNode<Gtk.Notebook> | null): void {
+        if (!parent && this.parent) {
+            const childWidget = this.findContentChild()?.container ?? null;
+            if (childWidget) {
+                this.detachPage(childWidget);
+            }
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.findContentChild()) {
+            this.onChildChange(null);
+        }
+    }
+
+    public override appendChild(child: NotebookPageChild): void {
+        if (child instanceof NotebookPageTabNode) {
+            super.appendChild(child);
+            return;
+        }
+
+        const oldContent = this.findContentChild()?.container ?? null;
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange(oldContent);
+        }
+    }
+
+    public override removeChild(child: NotebookPageChild): void {
+        if (child instanceof NotebookPageTabNode) {
+            super.removeChild(child);
+            return;
+        }
+
+        const isContent = child === this.findContentChild();
+        const oldContent = isContent ? child.container : null;
+        super.removeChild(child);
+
+        if (isContent && this.parent && oldContent) {
+            this.onChildChange(oldContent);
+        }
+    }
+
+    public override commitUpdate(oldProps: NotebookPageProps | null, newProps: NotebookPageProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        const childWidget = this.findContentChild()?.container ?? null;
+        if (childWidget && this.parent) {
+            this.detachPage(childWidget);
+        }
+        super.detachDeletedInstance();
+    }
+
+    public setPosition(position: number | null): void {
+        this.position = position;
+    }
+
+    public getChildWidget(): Gtk.Widget {
+        const contentChild = this.findContentChild();
+        if (!contentChild) {
+            throw new Error("Expected content child widget to be set on NotebookPageNode");
+        }
+
+        return contentChild.container;
+    }
+
+    private getParentWidget(): Gtk.Notebook {
+        if (!this.parent) {
+            throw new Error("Expected parent widget to be set on NotebookPageNode");
+        }
+
+        return this.parent.container;
+    }
+
+    private applyOwnProps(oldProps: NotebookPageProps | null, newProps: NotebookPageProps): void {
+        const contentChild = this.findContentChild();
+        const childWidget = contentChild?.container ?? null;
+        const tabNode = this.findTabNode();
+
+        if (hasChanged(oldProps, newProps, "label") && childWidget && this.parent && !tabNode?.children[0]) {
+            const tabLabel = this.getParentWidget().getTabLabel(childWidget) as Gtk.Label;
+            tabLabel.setLabel(newProps.label ?? "");
+        }
+
+        const pagePropsChanged =
+            hasChanged(oldProps, newProps, "tabExpand") || hasChanged(oldProps, newProps, "tabFill");
+        if (childWidget && this.parent && pagePropsChanged) {
+            this.applyPageProps();
+        }
+    }
+
+    private attachPage(): void {
+        const child = this.getChildWidget();
+        const notebook = this.getParentWidget();
+        const tabNode = this.findTabNode();
+
+        let tabLabel: Gtk.Widget;
+
+        if (tabNode?.children[0]) {
+            tabLabel = tabNode.children[0].container;
+        } else {
+            const label = new Gtk.Label();
+            label.setLabel(this.props.label ?? "");
+            tabLabel = label;
+        }
+
+        if (this.position != null) {
+            notebook.insertPage(child, this.position, tabLabel);
+        } else {
+            notebook.appendPage(child, tabLabel);
+        }
+
+        this.applyPageProps();
+    }
+
+    private applyPageProps(): void {
+        const child = this.findContentChild()?.container ?? null;
+        if (!child || !this.parent) return;
+
+        const notebook = this.getParentWidget();
+        const page = notebook.getPage(child);
+        if (!page) return;
+
+        if (this.props.tabExpand !== undefined) {
+            page.setTabExpand(this.props.tabExpand);
+        }
+
+        if (this.props.tabFill !== undefined) {
+            page.setTabFill(this.props.tabFill);
+        }
+    }
+
+    private detachPage(childToDetach: Gtk.Widget): void {
+        const notebook = this.getParentWidget();
+        const pageNum = notebook.pageNum(childToDetach);
+        if (pageNum !== -1) {
+            notebook.removePage(pageNum);
+        }
+    }
+
+    private onChildChange(oldChild: Gtk.Widget | null): void {
+        if (oldChild) {
+            this.detachPage(oldChild);
+        }
+
+        if (this.findContentChild()) {
+            this.attachPage();
+        }
+    }
+}

package/src/nodes/notebook.ts

@@ -0,0 +1,28 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../node.js";
+import type { Props } from "../types.js";
+import { NotebookPageNode } from "./notebook-page.js";
+import { WidgetNode } from "./widget.js";
+
+export class NotebookNode extends WidgetNode<Gtk.Notebook, Props, NotebookPageNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof NotebookPageNode;
+    }
+
+    public override insertBefore(child: NotebookPageNode, before: NotebookPageNode): void {
+        const isMove = this.children.includes(child);
+        const beforePosition = this.container.pageNum(before.getChildWidget());
+        child.setPosition(beforePosition);
+
+        if (isMove) {
+            this.container.reorderChild(child.getChildWidget(), beforePosition);
+        }
+
+        super.insertBefore(child, before);
+    }
+
+    public override removeChild(child: NotebookPageNode): void {
+        child.setPosition(null);
+        super.removeChild(child);
+    }
+}

package/src/nodes/overlay-child.ts

@@ -0,0 +1,109 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { OverlayChildProps } 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 OverlayChildNode extends VirtualNode<OverlayChildProps, WidgetNode<Gtk.Overlay>, 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.Overlay;
+    }
+
+    public override setParent(parent: WidgetNode<Gtk.Overlay> | 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) {
+            const widget = child.container;
+            const currentParent = widget.getParent();
+            if (currentParent && currentParent === this.parent.container) {
+                this.parent.container.removeOverlay(widget);
+            }
+        }
+
+        super.removeChild(child);
+    }
+
+    public override commitUpdate(oldProps: OverlayChildProps | null, newProps: OverlayChildProps): void {
+        super.commitUpdate(oldProps, newProps);
+
+        if (!this.parent) {
+            return;
+        }
+
+        const measureChanged = hasChanged(oldProps, newProps, "measure");
+        const clipOverlayChanged = hasChanged(oldProps, newProps, "clipOverlay");
+
+        if (measureChanged || clipOverlayChanged) {
+            const parent = this.parent.container;
+            for (const child of this.children) {
+                if (measureChanged) {
+                    parent.setMeasureOverlay(child.container, newProps.measure ?? false);
+                }
+                if (clipOverlayChanged) {
+                    parent.setClipOverlay(child.container, newProps.clipOverlay ?? false);
+                }
+            }
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        if (this.parent) {
+            this.detachAllChildren(this.parent.container);
+        }
+        super.detachDeletedInstance();
+    }
+
+    private attachToParent(parent: Gtk.Overlay, child: Gtk.Widget): void {
+        parent.addOverlay(child);
+
+        if (this.props.measure !== undefined) {
+            parent.setMeasureOverlay(child, this.props.measure);
+        }
+
+        if (this.props.clipOverlay !== undefined) {
+            parent.setClipOverlay(child, this.props.clipOverlay);
+        }
+    }
+
+    private detachAllChildren(parent: Gtk.Overlay): void {
+        for (const child of this.children) {
+            const currentParent = child.container.getParent();
+            if (currentParent && currentParent === parent) {
+                parent.removeOverlay(child.container);
+            }
+        }
+    }
+}

package/src/nodes/popover-menu.ts

@@ -0,0 +1,59 @@
+import * as Gio from "@gtkx/ffi/gio";
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../node.js";
+import type { PopoverMenuWidget } from "../registry.js";
+import type { Container, Props } from "../types.js";
+import { MenuNode } from "./menu.js";
+import { MenuModel } from "./models/menu.js";
+import { SlotNode } from "./slot.js";
+import { WidgetNode } from "./widget.js";
+
+type PopoverMenuChild = MenuNode | SlotNode | WidgetNode;
+
+export class PopoverMenuNode extends WidgetNode<PopoverMenuWidget, Props, PopoverMenuChild> {
+    private menu: MenuModel;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof MenuNode || child instanceof SlotNode || child instanceof WidgetNode;
+    }
+
+    constructor(typeName: string, props: Props, container: PopoverMenuWidget, rootContainer: Container) {
+        super(typeName, props, container, rootContainer);
+
+        const application = rootContainer instanceof Gtk.Application ? rootContainer : undefined;
+        const actionGroup = new Gio.SimpleActionGroup();
+        const prefix = application ? "app" : "menu";
+
+        this.container.insertActionGroup(prefix, actionGroup);
+        this.menu = new MenuModel("root", {}, rootContainer, actionGroup, application);
+        this.container.setMenuModel(this.menu.getMenu());
+    }
+
+    public override appendChild(child: PopoverMenuChild): void {
+        if (child instanceof MenuNode) {
+            this.menu.appendChild(child);
+            return;
+        }
+        super.appendChild(child);
+    }
+
+    public override insertBefore(child: PopoverMenuChild, before: PopoverMenuChild): void {
+        if (child instanceof MenuNode) {
+            if (before instanceof MenuNode) {
+                this.menu.insertBefore(child, before);
+            } else {
+                this.menu.appendChild(child);
+            }
+            return;
+        }
+        super.insertBefore(child, before);
+    }
+
+    public override removeChild(child: PopoverMenuChild): void {
+        if (child instanceof MenuNode) {
+            this.menu.removeChild(child);
+            return;
+        }
+        super.removeChild(child);
+    }
+}

package/src/nodes/scale.ts

@@ -0,0 +1,28 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { AdjustableProps, GtkScaleProps, ScaleMark } from "../jsx.js";
+import { AdjustableNode } from "./adjustable.js";
+import { shallowArrayEqual } from "./internal/props.js";
+
+type ScaleProps = AdjustableProps & Pick<GtkScaleProps, "marks">;
+
+export class ScaleNode extends AdjustableNode<Gtk.Scale> {
+    private appliedMarks: ScaleMark[] = [];
+
+    protected override applyOwnProps(oldProps: ScaleProps | null, newProps: ScaleProps): void {
+        super.applyOwnProps(oldProps, newProps);
+
+        const newMarks = newProps.marks ?? [];
+
+        if (shallowArrayEqual(this.appliedMarks, newMarks)) {
+            return;
+        }
+
+        this.container.clearMarks();
+
+        for (const mark of newMarks) {
+            this.container.addMark(mark.value, mark.position ?? Gtk.PositionType.BOTTOM, mark.label);
+        }
+
+        this.appliedMarks = [...newMarks];
+    }
+}

package/src/nodes/scrolled-window.ts

@@ -0,0 +1,23 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkScrolledWindowProps } from "../jsx.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["hscrollbarPolicy", "vscrollbarPolicy"] as const;
+
+type ScrolledWindowProps = Pick<GtkScrolledWindowProps, (typeof OWN_PROPS)[number]>;
+
+export class ScrolledWindowNode extends WidgetNode<Gtk.ScrolledWindow, ScrolledWindowProps> {
+    public override commitUpdate(oldProps: ScrolledWindowProps | null, newProps: ScrolledWindowProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: ScrolledWindowProps | null, newProps: ScrolledWindowProps): void {
+        if (hasChanged(oldProps, newProps, "hscrollbarPolicy") || hasChanged(oldProps, newProps, "vscrollbarPolicy")) {
+            const hPolicy = newProps.hscrollbarPolicy ?? Gtk.PolicyType.AUTOMATIC;
+            const vPolicy = newProps.vscrollbarPolicy ?? Gtk.PolicyType.AUTOMATIC;
+            this.container.setPolicy(hPolicy, vPolicy);
+        }
+    }
+}

package/src/nodes/search-bar.ts

@@ -0,0 +1,27 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkSearchBarProps } from "../jsx.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["onSearchModeChanged"] as const;
+
+type SearchBarProps = Pick<GtkSearchBarProps, (typeof OWN_PROPS)[number]>;
+
+export class SearchBarNode extends WidgetNode<Gtk.SearchBar, SearchBarProps> {
+    public override commitUpdate(oldProps: SearchBarProps | null, newProps: SearchBarProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: SearchBarProps | null, newProps: SearchBarProps): void {
+        if (hasChanged(oldProps, newProps, "onSearchModeChanged")) {
+            const callback = newProps.onSearchModeChanged;
+            this.signalStore.set(
+                this,
+                this.container,
+                "notify::search-mode-enabled",
+                callback ? () => callback(this.container.getSearchMode()) : undefined,
+            );
+        }
+    }
+}

package/src/nodes/shortcut-controller.ts

@@ -0,0 +1,27 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { ShortcutNode } from "./shortcut.js";
+
+export class ShortcutControllerNode extends EventControllerNode<Gtk.ShortcutController, ShortcutNode> {
+    public override isValidChild(child: Node): boolean {
+        return child instanceof ShortcutNode;
+    }
+
+    public override appendChild(child: ShortcutNode): void {
+        super.appendChild(child);
+        child.createShortcut();
+        const shortcut = child.getShortcut();
+        if (shortcut) {
+            this.container.addShortcut(shortcut);
+        }
+    }
+
+    public override removeChild(child: ShortcutNode): void {
+        const shortcut = child.getShortcut();
+        if (shortcut) {
+            this.container.removeShortcut(shortcut);
+        }
+        super.removeChild(child);
+    }
+}

package/src/nodes/shortcut.ts

@@ -0,0 +1,69 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ShortcutProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { hasChanged } from "./internal/props.js";
+import { VirtualNode } from "./virtual.js";
+
+export class ShortcutNode extends VirtualNode<ShortcutProps, EventControllerNode<Gtk.ShortcutController>, never> {
+    public override isValidChild(_child: Node): boolean {
+        return false;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return parent instanceof EventControllerNode && parent.container instanceof Gtk.ShortcutController;
+    }
+    private shortcut: Gtk.Shortcut | null = null;
+    private action: Gtk.CallbackAction | null = null;
+
+    public override commitUpdate(oldProps: ShortcutProps | null, newProps: ShortcutProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.shortcut = null;
+        this.action = null;
+        super.detachDeletedInstance();
+    }
+
+    public getShortcut(): Gtk.Shortcut | null {
+        return this.shortcut;
+    }
+
+    public createShortcut(): void {
+        const trigger = this.createTrigger();
+        this.action = new Gtk.CallbackAction(() => {
+            const result = this.props.onActivate();
+            return result !== false;
+        });
+        this.shortcut = new Gtk.Shortcut(trigger, this.action);
+    }
+
+    private applyOwnProps(oldProps: ShortcutProps | null, newProps: ShortcutProps): void {
+        if (!this.shortcut) return;
+
+        if (hasChanged(oldProps, newProps, "trigger") || hasChanged(oldProps, newProps, "disabled")) {
+            this.shortcut.setTrigger(this.createTrigger());
+        }
+    }
+
+    private createTrigger(): Gtk.ShortcutTrigger {
+        if (this.props.disabled) {
+            return Gtk.NeverTrigger.get();
+        }
+
+        const { trigger } = this.props;
+        const triggers = Array.isArray(trigger) ? trigger : [trigger];
+
+        if (triggers.length === 0) {
+            return Gtk.NeverTrigger.get();
+        }
+
+        let result: Gtk.ShortcutTrigger = new Gtk.ShortcutTrigger(triggers[0] as string);
+        for (let i = 1; i < triggers.length; i++) {
+            result = new Gtk.AlternativeTrigger(result, new Gtk.ShortcutTrigger(triggers[i] as string));
+        }
+        return result;
+    }
+}