@gtkx/react 0.18.0 → 0.18.2

package/src/nodes/slot.ts

@@ -0,0 +1,138 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import { toCamelCase } from "@gtkx/gir";
+import type { SlotProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { ContainerClass, Props } from "../types.js";
+import { getFocusWidget, isDescendantOf, resolvePropertySetter } from "./internal/widget.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class SlotNode<P extends Props = SlotProps, TChild extends Node = WidgetNode> extends VirtualNode<
+    P,
+    WidgetNode,
+    TChild
+> {
+    private cachedSetter: ((child: Gtk.Widget | null) => void) | null = null;
+    private detachedParentWidget: Gtk.Widget | null = null;
+
+    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 {
+        const previousParent = this.parent;
+        if (previousParent !== parent) {
+            this.cachedSetter = null;
+        }
+
+        if (!parent && previousParent) {
+            this.detachedParentWidget = previousParent.container;
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
+        }
+    }
+
+    public override appendChild(child: TChild): void {
+        const firstChild = this.children[0];
+        const oldChildWidget = firstChild instanceof WidgetNode ? firstChild.container : null;
+
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override removeChild(child: TChild): void {
+        const oldChildWidget = child instanceof WidgetNode ? child.container : null;
+
+        super.removeChild(child);
+
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        const parentWidget = this.detachedParentWidget;
+
+        if (parentWidget && this.children[0]) {
+            if (parentWidget.getRoot() !== null) {
+                this.cachedSetter = null;
+                const setter = this.resolveChildSetter(parentWidget);
+                if (setter) {
+                    const oldChild = this.children[0].container;
+                    const focus = getFocusWidget(oldChild);
+                    if (focus && isDescendantOf(focus, oldChild)) {
+                        parentWidget.grabFocus();
+                    }
+                    setter(null);
+                }
+            }
+            this.detachedParentWidget = null;
+        }
+
+        super.detachDeletedInstance();
+    }
+
+    private getId(): string {
+        const id = (this.props as SlotProps).id;
+
+        if (!id) {
+            throw new Error("Expected 'id' prop to be present on Slot");
+        }
+
+        return toCamelCase(id);
+    }
+
+    private getParentWidget(): Gtk.Widget {
+        if (!this.parent) {
+            throw new Error(`Expected parent widget to be set on '${this.getId()}' SlotNode`);
+        }
+
+        return this.parent.container;
+    }
+
+    private ensureChildSetter(): (child: Gtk.Widget | null) => void {
+        if (this.cachedSetter) return this.cachedSetter;
+
+        const parent = this.getParentWidget();
+        const setter = this.resolveChildSetter(parent);
+
+        if (!setter) {
+            const parentType = (parent.constructor as ContainerClass).glibTypeName;
+            throw new Error(`Unable to find property for Slot '${this.getId()}' on type '${parentType}'`);
+        }
+
+        this.cachedSetter = setter;
+        return this.cachedSetter;
+    }
+
+    private onChildChange(oldChild: Gtk.Widget | null): void {
+        const setter = this.ensureChildSetter();
+        const childWidget = this.children[0]?.container ?? null;
+
+        if (oldChild && !childWidget) {
+            const parent = this.getParentWidget();
+            const focus = getFocusWidget(oldChild);
+
+            if (focus && isDescendantOf(focus, oldChild)) {
+                parent.grabFocus();
+            }
+        }
+
+        setter(childWidget);
+    }
+
+    private resolveChildSetter(parent: Gtk.Widget): ((child: Gtk.Widget | null) => void) | null {
+        return resolvePropertySetter(parent, this.getId());
+    }
+}

package/src/nodes/source-view.ts

@@ -0,0 +1,130 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import * as GtkSource from "@gtkx/ffi/gtksource";
+import type { GtkSourceViewProps } from "../jsx.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { TextBufferController } from "./internal/text-buffer-controller.js";
+import { TextViewNode } from "./text-view.js";
+
+const OWN_PROPS = [
+    "language",
+    "styleScheme",
+    "highlightSyntax",
+    "highlightMatchingBrackets",
+    "implicitTrailingNewline",
+    "onCursorMoved",
+    "onHighlightUpdated",
+] as const;
+
+type SourceViewProps = Pick<
+    GtkSourceViewProps,
+    | "enableUndo"
+    | "onBufferChanged"
+    | "onTextInserted"
+    | "onTextDeleted"
+    | "onCanUndoChanged"
+    | "onCanRedoChanged"
+    | (typeof OWN_PROPS)[number]
+>;
+
+export class SourceViewNode extends TextViewNode {
+    protected override createBufferController(): TextBufferController<GtkSource.Buffer> {
+        return new TextBufferController<GtkSource.Buffer>(this, this.container, () => new GtkSource.Buffer());
+    }
+
+    protected override ensureBufferController(): TextBufferController<GtkSource.Buffer> {
+        return super.ensureBufferController() as TextBufferController<GtkSource.Buffer>;
+    }
+
+    public override commitUpdate(oldProps: SourceViewProps | null, newProps: SourceViewProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private resolveLanguage(language: string | GtkSource.Language): GtkSource.Language | null {
+        if (typeof language === "string") {
+            const langManager = GtkSource.LanguageManager.getDefault();
+            return langManager.getLanguage(language);
+        }
+        return language;
+    }
+
+    private resolveStyleScheme(scheme: string | GtkSource.StyleScheme): GtkSource.StyleScheme | null {
+        if (typeof scheme === "string") {
+            const schemeManager = GtkSource.StyleSchemeManager.getDefault();
+            return schemeManager.getScheme(scheme);
+        }
+        return scheme;
+    }
+
+    private applyOwnProps(oldProps: SourceViewProps | null, newProps: SourceViewProps): void {
+        if (hasChanged(oldProps, newProps, "onCursorMoved") || hasChanged(oldProps, newProps, "onHighlightUpdated")) {
+            this.applySignalProps(newProps);
+        }
+
+        this.applyBufferProps(oldProps, newProps);
+    }
+
+    private applyBufferProps(oldProps: SourceViewProps | null, newProps: SourceViewProps): void {
+        const languageChanged = hasChanged(oldProps, newProps, "language");
+        const styleSchemeChanged = hasChanged(oldProps, newProps, "styleScheme");
+        const highlightSyntaxChanged = hasChanged(oldProps, newProps, "highlightSyntax");
+        const highlightBracketsChanged = hasChanged(oldProps, newProps, "highlightMatchingBrackets");
+        const trailingNewlineChanged = hasChanged(oldProps, newProps, "implicitTrailingNewline");
+
+        if (
+            !languageChanged &&
+            !styleSchemeChanged &&
+            !highlightSyntaxChanged &&
+            !highlightBracketsChanged &&
+            !trailingNewlineChanged
+        ) {
+            return;
+        }
+
+        const buffer = this.ensureBufferController().ensureBuffer();
+
+        if (languageChanged) {
+            if (newProps.language !== undefined) {
+                buffer.setLanguage(this.resolveLanguage(newProps.language));
+            } else if (oldProps?.language !== undefined) {
+                buffer.setLanguage(null);
+            }
+        }
+
+        if (styleSchemeChanged) {
+            if (newProps.styleScheme !== undefined) {
+                buffer.setStyleScheme(this.resolveStyleScheme(newProps.styleScheme));
+            } else if (oldProps?.styleScheme !== undefined) {
+                buffer.setStyleScheme(null);
+            }
+        }
+
+        if (highlightSyntaxChanged || languageChanged) {
+            buffer.setHighlightSyntax(newProps.highlightSyntax ?? newProps.language !== undefined);
+        }
+
+        if (highlightBracketsChanged) {
+            buffer.setHighlightMatchingBrackets(newProps.highlightMatchingBrackets ?? true);
+        }
+
+        if (trailingNewlineChanged && newProps.implicitTrailingNewline !== undefined) {
+            buffer.setImplicitTrailingNewline(newProps.implicitTrailingNewline);
+        }
+    }
+
+    private applySignalProps(props: SourceViewProps): void {
+        const buffer = this.ensureBufferController().getBuffer();
+        if (!buffer) return;
+
+        const { onCursorMoved, onHighlightUpdated } = props;
+
+        this.signalStore.set(this, buffer, "cursor-moved", onCursorMoved);
+
+        this.signalStore.set(
+            this,
+            buffer,
+            "highlight-updated",
+            onHighlightUpdated ? (start: Gtk.TextIter, end: Gtk.TextIter) => onHighlightUpdated(start, end) : undefined,
+        );
+    }
+}

package/src/nodes/stack-page.ts

@@ -0,0 +1,170 @@
+import * as Adw from "@gtkx/ffi/adw";
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { StackPageProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { StackWidget } from "../registry.js";
+import { hasChanged } from "./internal/props.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class StackPageNode extends VirtualNode<StackPageProps, WidgetNode<StackWidget>, WidgetNode> {
+    private page: Gtk.StackPage | Adw.ViewStackPage | null = null;
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return (
+            parent instanceof WidgetNode &&
+            (parent.container instanceof Gtk.Stack || parent.container instanceof Adw.ViewStack)
+        );
+    }
+
+    public override setParent(parent: WidgetNode<StackWidget> | null): void {
+        const previousParent = this.parent;
+
+        if (previousParent && !parent) {
+            const childWidget = this.children[0]?.container ?? null;
+            if (childWidget) {
+                this.removePage(childWidget);
+            }
+            this.page = null;
+        }
+
+        super.setParent(parent);
+
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        const oldChildWidget = this.children[0]?.container ?? null;
+        super.appendChild(child);
+
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override removeChild(child: WidgetNode): void {
+        const oldChildWidget = child.container;
+        super.removeChild(child);
+
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
+        }
+    }
+
+    public override commitUpdate(oldProps: StackPageProps | null, newProps: StackPageProps): void {
+        super.commitUpdate(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    public override detachDeletedInstance(): void {
+        const childWidget = this.children[0]?.container ?? null;
+        if (childWidget && this.parent) {
+            this.removePage(childWidget);
+        }
+        this.page = null;
+        super.detachDeletedInstance();
+    }
+
+    private getChildWidget(): Gtk.Widget {
+        const child = this.children[0];
+        if (!child) {
+            throw new Error("Expected child widget to be set on StackPageNode");
+        }
+        return child.container;
+    }
+
+    private getParentWidget(): StackWidget {
+        if (!this.parent) {
+            throw new Error("Expected parent widget to be set on StackPageNode");
+        }
+        return this.parent.container;
+    }
+
+    private applyOwnProps(oldProps: StackPageProps | null, newProps: StackPageProps): void {
+        if (!this.page) {
+            return;
+        }
+
+        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
+            this.page.setTitle(newProps.title);
+        }
+
+        if (hasChanged(oldProps, newProps, "iconName") && newProps.iconName !== undefined) {
+            this.page.setIconName(newProps.iconName);
+        }
+
+        if (hasChanged(oldProps, newProps, "needsAttention")) {
+            this.page.setNeedsAttention(newProps.needsAttention ?? false);
+        }
+
+        if (hasChanged(oldProps, newProps, "visible")) {
+            this.page.setVisible(newProps.visible ?? true);
+        }
+
+        if (hasChanged(oldProps, newProps, "useUnderline")) {
+            this.page.setUseUnderline(newProps.useUnderline ?? false);
+        }
+
+        if ("setBadgeNumber" in this.page && hasChanged(oldProps, newProps, "badgeNumber")) {
+            this.page.setBadgeNumber?.(newProps.badgeNumber ?? 0);
+        }
+    }
+
+    private onChildChange(oldChild: Gtk.Widget | null): void {
+        this.removePage(oldChild);
+
+        if (this.children[0]) {
+            this.addPage();
+        }
+    }
+
+    private addPage(): void {
+        const child = this.getChildWidget();
+        const parent = this.getParentWidget();
+
+        let page: Gtk.StackPage | Adw.ViewStackPage;
+
+        if (parent instanceof Adw.ViewStack) {
+            if (this.props.title && this.props.iconName) {
+                page = parent.addTitledWithIcon(child, this.props.title, this.props.iconName, this.props.id);
+            } else if (this.props.title) {
+                page = parent.addTitled(child, this.props.title, this.props.id);
+            } else if (this.props.id) {
+                page = parent.addNamed(child, this.props.id);
+            } else {
+                page = parent.add(child);
+            }
+        } else {
+            if (this.props.title) {
+                page = parent.addTitled(child, this.props.title, this.props.id);
+            } else if (this.props.id) {
+                page = parent.addNamed(child, this.props.id);
+            } else {
+                page = parent.addChild(child);
+            }
+        }
+
+        this.page = page;
+        this.commitUpdate(null, this.props);
+    }
+
+    private removePage(oldChild: Gtk.Widget | null): void {
+        const parent = this.getParentWidget();
+
+        if (!oldChild) {
+            return;
+        }
+
+        const currentParent = oldChild.getParent();
+
+        if (currentParent && currentParent === parent) {
+            parent.remove(oldChild);
+        }
+    }
+}

package/src/nodes/stack.ts

@@ -0,0 +1,35 @@
+import type { AdwViewStackProps, GtkStackProps } from "../jsx.js";
+import type { StackWidget } from "../registry.js";
+import { filterProps, hasChanged } from "./internal/props.js";
+import { WidgetNode } from "./widget.js";
+
+const OWN_PROPS = ["page", "onPageChanged"] as const;
+
+type StackProps = Omit<Pick<GtkStackProps | AdwViewStackProps, (typeof OWN_PROPS)[number]>, "onPageChanged"> & {
+    onPageChanged?: ((page: string | null, self: StackWidget) => void) | null;
+};
+
+export class StackNode extends WidgetNode<StackWidget, StackProps> {
+    public override commitUpdate(oldProps: StackProps | null, newProps: StackProps): void {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+
+    private applyOwnProps(oldProps: StackProps | null, newProps: StackProps): void {
+        if (newProps.page && this.container.getVisibleChildName() !== newProps.page) {
+            if (this.container.getChildByName(newProps.page)) {
+                this.container.setVisibleChildName(newProps.page);
+            }
+        }
+
+        if (hasChanged(oldProps, newProps, "onPageChanged")) {
+            const { onPageChanged } = newProps;
+            this.signalStore.set(
+                this,
+                this.container,
+                "notify::visible-child-name",
+                onPageChanged ? (self: StackWidget) => onPageChanged(self.getVisibleChildName(), self) : undefined,
+            );
+        }
+    }
+}

package/src/nodes/text-anchor.ts

@@ -0,0 +1,74 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { TextAnchorProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { TEXT_OBJECT_REPLACEMENT, type TextContentParent } from "./text-content.js";
+import { isTextContentParent } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+
+export class TextAnchorNode extends VirtualNode<TextAnchorProps, Node & TextContentParent, WidgetNode> {
+    private textView: Gtk.TextView | null = null;
+    private buffer: Gtk.TextBuffer | null = null;
+    private anchor: Gtk.TextChildAnchor | null = null;
+
+    private bufferOffset = 0;
+
+    public getBufferOffset(): number {
+        return this.bufferOffset;
+    }
+
+    public setBufferOffset(offset: number): void {
+        this.bufferOffset = offset;
+    }
+
+    public override isValidChild(child: Node): boolean {
+        return child instanceof WidgetNode;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return isTextContentParent(parent);
+    }
+
+    public getLength(): number {
+        return 1;
+    }
+
+    public getText(): string {
+        return TEXT_OBJECT_REPLACEMENT;
+    }
+
+    public setTextViewAndBuffer(textView: Gtk.TextView, buffer: Gtk.TextBuffer): void {
+        this.textView = textView;
+        this.buffer = buffer;
+        this.setupAnchor();
+    }
+
+    private setupAnchor(): void {
+        if (!this.textView || !this.buffer) return;
+
+        const iter = new Gtk.TextIter();
+        this.buffer.getIterAtOffset(iter, this.bufferOffset);
+
+        this.anchor = this.buffer.createChildAnchor(iter);
+
+        const widgetChild = this.children[0];
+        if (widgetChild?.container && this.anchor) {
+            this.textView.addChildAtAnchor(widgetChild.container, this.anchor);
+        }
+    }
+
+    public override appendChild(child: WidgetNode): void {
+        super.appendChild(child);
+
+        if (this.textView && this.anchor && child.container) {
+            this.textView.addChildAtAnchor(child.container, this.anchor);
+        }
+    }
+
+    public override detachDeletedInstance(): void {
+        this.anchor = null;
+        this.buffer = null;
+        this.textView = null;
+        super.detachDeletedInstance();
+    }
+}

package/src/nodes/text-content.ts

@@ -0,0 +1,14 @@
+import type { TextAnchorNode } from "./text-anchor.js";
+import type { TextPaintableNode } from "./text-paintable.js";
+import type { TextSegmentNode } from "./text-segment.js";
+import type { TextTagNode } from "./text-tag.js";
+
+export const TEXT_OBJECT_REPLACEMENT = "\uFFFC";
+
+export type TextContentChild = TextSegmentNode | TextTagNode | TextAnchorNode | TextPaintableNode;
+
+export type TextContentParent = {
+    onChildInserted(child: TextContentChild): void;
+    onChildRemoved(child: TextContentChild): void;
+    onChildTextChanged(child: TextSegmentNode, oldLength: number, newLength: number): void;
+};

package/src/nodes/text-paintable.ts

@@ -0,0 +1,51 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { TextPaintableProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { TEXT_OBJECT_REPLACEMENT, type TextContentParent } from "./text-content.js";
+import { isTextContentParent } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+
+export class TextPaintableNode extends VirtualNode<TextPaintableProps, Node & TextContentParent, never> {
+    public override isValidChild(_child: Node): boolean {
+        return false;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return isTextContentParent(parent);
+    }
+    private buffer: Gtk.TextBuffer | null = null;
+    private bufferOffset = 0;
+
+    public getBufferOffset(): number {
+        return this.bufferOffset;
+    }
+
+    public setBufferOffset(offset: number): void {
+        this.bufferOffset = offset;
+    }
+
+    public getLength(): number {
+        return 1;
+    }
+
+    public getText(): string {
+        return TEXT_OBJECT_REPLACEMENT;
+    }
+
+    public setTextViewAndBuffer(_textView: Gtk.TextView, buffer: Gtk.TextBuffer): void {
+        this.buffer = buffer;
+        this.insertPaintable();
+    }
+
+    private insertPaintable(): void {
+        if (!this.buffer || !this.props.paintable) return;
+        const iter = new Gtk.TextIter();
+        this.buffer.getIterAtOffset(iter, this.bufferOffset);
+        this.buffer.insertPaintable(iter, this.props.paintable);
+    }
+
+    public override detachDeletedInstance(): void {
+        this.buffer = null;
+        super.detachDeletedInstance();
+    }
+}

package/src/nodes/text-segment.ts

@@ -0,0 +1,55 @@
+import type { TextSegmentProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { hasChanged } from "./internal/props.js";
+import type { TextContentParent } from "./text-content.js";
+import { VirtualNode } from "./virtual.js";
+
+type TextSegmentParent = Node & TextContentParent;
+
+export class TextSegmentNode extends VirtualNode<TextSegmentProps, TextSegmentParent, never> {
+    private bufferOffset = 0;
+
+    public getBufferOffset(): number {
+        return this.bufferOffset;
+    }
+
+    public setBufferOffset(offset: number): void {
+        this.bufferOffset = offset;
+    }
+
+    public override isValidChild(_child: Node): boolean {
+        return false;
+    }
+
+    public override isValidParent(parent: Node): boolean {
+        return isTextContentParent(parent);
+    }
+
+    public getText(): string {
+        return this.props.text;
+    }
+
+    public getLength(): number {
+        return this.props.text.length;
+    }
+
+    public override commitUpdate(oldProps: TextSegmentProps | null, newProps: TextSegmentProps): void {
+        const oldText = oldProps?.text ?? "";
+        const newText = newProps.text;
+
+        super.commitUpdate(oldProps, newProps);
+
+        if (hasChanged(oldProps, newProps, "text") && this.parent) {
+            this.parent.onChildTextChanged(this, oldText.length, newText.length);
+        }
+    }
+}
+
+export function isTextContentParent(node: Node): node is TextSegmentParent {
+    const candidate = node as unknown as TextContentParent;
+    return (
+        typeof candidate.onChildInserted === "function" &&
+        typeof candidate.onChildRemoved === "function" &&
+        typeof candidate.onChildTextChanged === "function"
+    );
+}