@gtkx/react 0.15.0 → 0.16.0

package/dist/nodes/stack-page.js

@@ -1,41 +1,47 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
+import { isObjectEqual } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
 import { SlotNode } from "./slot.js";
 class StackPageNode extends SlotNode {
     static priority = 1;
-    page;
+    page = null;
     static matches(type) {
         return type === "StackPage";
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         if (!this.page) {
             return;
         }
-        if (!oldProps || oldProps.title !== newProps.title) {
-            if (newProps.title !== undefined) {
-                this.page.setTitle(newProps.title);
-            }
+        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
+            this.page.setTitle(newProps.title);
         }
-        if (!oldProps || oldProps.iconName !== newProps.iconName) {
-            if (newProps.iconName !== undefined) {
-                this.page.setIconName(newProps.iconName);
-            }
+        if (hasChanged(oldProps, newProps, "iconName") && newProps.iconName !== undefined) {
+            this.page.setIconName(newProps.iconName);
         }
-        if (!oldProps || oldProps.needsAttention !== newProps.needsAttention) {
+        if (hasChanged(oldProps, newProps, "needsAttention")) {
             this.page.setNeedsAttention(newProps.needsAttention ?? false);
         }
-        if (!oldProps || oldProps.visible !== newProps.visible) {
+        if (hasChanged(oldProps, newProps, "visible")) {
             this.page.setVisible(newProps.visible ?? true);
         }
-        if (!oldProps || oldProps.useUnderline !== newProps.useUnderline) {
+        if (hasChanged(oldProps, newProps, "useUnderline")) {
             this.page.setUseUnderline(newProps.useUnderline ?? false);
         }
-        if ("setBadgeNumber" in this.page && (!oldProps || oldProps.badgeNumber !== newProps.badgeNumber)) {
+        if ("setBadgeNumber" in this.page && hasChanged(oldProps, newProps, "badgeNumber")) {
             this.page.setBadgeNumber?.(newProps.badgeNumber ?? 0);
         }
     }
+    onChildChange(oldChild) {
+        this.removePage(oldChild);
+        if (this.child) {
+            this.addPage();
+        }
+    }
     addPage() {
         const child = this.getChild();
         const parent = this.getParent();
@@ -78,13 +84,5 @@ class StackPageNode extends SlotNode {
             parent.remove(oldChild);
         }
     }
-    onChildChange(oldChild) {
-        batch(() => {
-            this.removePage(oldChild);
-            if (this.child) {
-                this.addPage();
-            }
-        });
-    }
 }
 registerNodeClass(StackPageNode);

package/dist/nodes/stack.js

@@ -1,24 +1,38 @@
 import { STACK_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
-import { scheduleAfterCommit } from "../scheduler.js";
-import { filterProps, matchesAnyClass } from "./internal/utils.js";
+import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
-const PROPS = ["page"];
+const OWN_PROPS = ["page", "onPageChanged"];
 class StackNode extends WidgetNode {
     static priority = 1;
     static matches(_type, containerOrClass) {
         return matchesAnyClass(STACK_CLASSES, containerOrClass);
     }
     updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
         if (newProps.page && this.container.getVisibleChildName() !== newProps.page) {
             const page = newProps.page;
             scheduleAfterCommit(() => {
                 if (this.container.getChildByName(page)) {
                     this.container.setVisibleChildName(page);
                 }
-            });
+            }, CommitPriority.NORMAL);
+        }
+        if (hasChanged(oldProps, newProps, "onPageChanged")) {
+            const { onPageChanged } = newProps;
+            if (onPageChanged) {
+                this.signalStore.set(this, this.container, "notify::visible-child-name", (self) => {
+                    onPageChanged(self.getVisibleChildName(), self);
+                });
+            }
+            else {
+                this.signalStore.set(this, this.container, "notify::visible-child-name", null);
+            }
         }
-        super.updateProps(filterProps(oldProps ?? {}, PROPS), filterProps(newProps, PROPS));
     }
 }
 registerNodeClass(StackNode);

package/dist/nodes/text-anchor.d.ts

@@ -0,0 +1,41 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type { Node } from "../node.js";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the TextAnchor virtual element.
+ *
+ * Used to declaratively embed widgets within text content in a TextBuffer.
+ * The anchor is placed at the current position in the text flow.
+ *
+ * @example
+ * ```tsx
+ * <GtkTextView>
+ *     <x.TextBuffer>
+ *         Click here: <x.TextAnchor>
+ *             <GtkButton label="Click me" />
+ *         </x.TextAnchor> to continue.
+ *     </x.TextBuffer>
+ * </GtkTextView>
+ * ```
+ */
+export type TextAnchorProps = {
+    /** The widget to embed at this anchor position */
+    children?: ReactNode;
+};
+export declare class TextAnchorNode extends VirtualNode<TextAnchorProps> {
+    static priority: number;
+    private textView;
+    private buffer;
+    private anchor;
+    private widgetChild;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    getLength(): number;
+    getText(): string;
+    setTextViewAndBuffer(textView: Gtk.TextView, buffer: Gtk.TextBuffer): void;
+    private setupAnchor;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    unmount(): void;
+}

package/dist/nodes/text-anchor.js

@@ -0,0 +1,59 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+const PLACEHOLDER = "\uFFFC";
+export class TextAnchorNode extends VirtualNode {
+    static priority = 1;
+    textView = null;
+    buffer = null;
+    anchor = null;
+    widgetChild = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextAnchor";
+    }
+    getLength() {
+        return 1;
+    }
+    getText() {
+        return PLACEHOLDER;
+    }
+    setTextViewAndBuffer(textView, buffer) {
+        this.textView = textView;
+        this.buffer = buffer;
+        this.setupAnchor();
+    }
+    setupAnchor() {
+        if (!this.textView || !this.buffer)
+            return;
+        const iter = new Gtk.TextIter();
+        this.buffer.getIterAtOffset(iter, this.bufferOffset);
+        this.anchor = this.buffer.createChildAnchor(iter);
+        if (this.widgetChild?.container && this.anchor) {
+            this.textView.addChildAtAnchor(this.widgetChild.container, this.anchor);
+        }
+    }
+    appendChild(child) {
+        if (!(child instanceof WidgetNode)) {
+            throw new Error(`TextAnchor can only contain widget children, got '${child.typeName}'`);
+        }
+        this.widgetChild = child;
+        if (this.textView && this.anchor && child.container) {
+            this.textView.addChildAtAnchor(child.container, this.anchor);
+        }
+    }
+    removeChild(child) {
+        if (child === this.widgetChild) {
+            this.widgetChild = null;
+        }
+    }
+    unmount() {
+        this.anchor = null;
+        this.widgetChild = null;
+        this.buffer = null;
+        this.textView = null;
+        super.unmount();
+    }
+}
+registerNodeClass(TextAnchorNode);

package/dist/nodes/text-content.d.ts

@@ -0,0 +1,10 @@
+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 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/dist/nodes/text-content.js

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

package/dist/nodes/text-paintable.d.ts

@@ -0,0 +1,17 @@
+import type * as Gdk from "@gtkx/ffi/gdk";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { VirtualNode } from "./virtual.js";
+export type TextPaintableProps = {
+    paintable: Gdk.Paintable;
+};
+export declare class TextPaintableNode extends VirtualNode<TextPaintableProps> {
+    static priority: number;
+    private buffer;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    getLength(): number;
+    getText(): string;
+    setTextViewAndBuffer(_textView: Gtk.TextView, buffer: Gtk.TextBuffer): void;
+    private insertPaintable;
+    unmount(): void;
+}

package/dist/nodes/text-paintable.js

@@ -0,0 +1,34 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { VirtualNode } from "./virtual.js";
+const PLACEHOLDER = "\uFFFC";
+export class TextPaintableNode extends VirtualNode {
+    static priority = 1;
+    buffer = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextPaintable";
+    }
+    getLength() {
+        return 1;
+    }
+    getText() {
+        return PLACEHOLDER;
+    }
+    setTextViewAndBuffer(_textView, buffer) {
+        this.buffer = buffer;
+        this.insertPaintable();
+    }
+    insertPaintable() {
+        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);
+    }
+    unmount() {
+        this.buffer = null;
+        super.unmount();
+    }
+}
+registerNodeClass(TextPaintableNode);

package/dist/nodes/text-segment.d.ts

@@ -0,0 +1,15 @@
+import type { TextContentParent } from "./text-content.js";
+import { VirtualNode } from "./virtual.js";
+export type TextSegmentProps = {
+    text: string;
+};
+export declare class TextSegmentNode extends VirtualNode<TextSegmentProps> {
+    static priority: number;
+    private parent;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    setParent(parent: TextContentParent): void;
+    getText(): string;
+    getLength(): number;
+    updateProps(oldProps: TextSegmentProps | null, newProps: TextSegmentProps): void;
+}

package/dist/nodes/text-segment.js

@@ -0,0 +1,29 @@
+import { registerNodeClass } from "../registry.js";
+import { hasChanged } from "./internal/utils.js";
+import { VirtualNode } from "./virtual.js";
+export class TextSegmentNode extends VirtualNode {
+    static priority = 1;
+    parent = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextSegment";
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    getText() {
+        return this.props.text;
+    }
+    getLength() {
+        return this.props.text.length;
+    }
+    updateProps(oldProps, newProps) {
+        const oldText = oldProps?.text ?? "";
+        const newText = newProps.text;
+        super.updateProps(oldProps, newProps);
+        if (hasChanged(oldProps, newProps, "text") && this.parent) {
+            this.parent.onChildTextChanged(this, oldText.length, newText.length);
+        }
+    }
+}
+registerNodeClass(TextSegmentNode);

package/dist/nodes/text-tag.d.ts

@@ -0,0 +1,136 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type * as Pango from "@gtkx/ffi/pango";
+import type { ReactNode } from "react";
+import type { Node } from "../node.js";
+import type { TextContentChild, TextContentParent } from "./text-content.js";
+import { TextSegmentNode } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+/**
+ * Props for the TextTag virtual element.
+ *
+ * Used to declaratively define and apply text formatting to content within a TextBuffer.
+ *
+ * @example
+ * ```tsx
+ * <GtkTextView>
+ *     <x.TextBuffer>
+ *         Hello <x.TextTag id="bold" weight={Pango.Weight.BOLD}>bold</x.TextTag> world
+ *     </x.TextBuffer>
+ * </GtkTextView>
+ * ```
+ */
+export type TextTagProps = {
+    /** Unique identifier for this tag in the tag table */
+    id: string;
+    /** Priority of this tag (higher wins when multiple tags affect same property) */
+    priority?: number;
+    /** Background color as a string (e.g., "red", "#ff0000") */
+    background?: string;
+    /** Whether the background fills the entire line height */
+    backgroundFullHeight?: boolean;
+    /** Foreground (text) color as a string */
+    foreground?: string;
+    /** Font family name (e.g., "Sans", "Monospace") */
+    family?: string;
+    /** Font description string (e.g., "Sans Italic 12") */
+    font?: string;
+    /** Font size in points */
+    sizePoints?: number;
+    /** Font size in Pango units */
+    size?: number;
+    /** Font size scale factor relative to default */
+    scale?: number;
+    /** Font weight (use Pango.Weight constants) */
+    weight?: Pango.Weight | number;
+    /** Font style (use Pango.Style constants) */
+    style?: Pango.Style;
+    /** Font stretch (use Pango.Stretch constants) */
+    stretch?: Pango.Stretch;
+    /** Font variant (use Pango.Variant constants) */
+    variant?: Pango.Variant;
+    /** Whether to strike through the text */
+    strikethrough?: boolean;
+    /** Underline style (use Pango.Underline constants) */
+    underline?: Pango.Underline;
+    /** Overline style (use Pango.Overline constants) */
+    overline?: Pango.Overline;
+    /** Offset of text above baseline in Pango units (negative = below) */
+    rise?: number;
+    /** Extra spacing between characters in Pango units */
+    letterSpacing?: number;
+    /** Factor to scale line height by */
+    lineHeight?: number;
+    /** Left margin in pixels */
+    leftMargin?: number;
+    /** Right margin in pixels */
+    rightMargin?: number;
+    /** Paragraph indent in pixels (negative = hanging) */
+    indent?: number;
+    /** Pixels of blank space above paragraphs */
+    pixelsAboveLines?: number;
+    /** Pixels of blank space below paragraphs */
+    pixelsBelowLines?: number;
+    /** Pixels of blank space between wrapped lines */
+    pixelsInsideWrap?: number;
+    /** Text justification */
+    justification?: Gtk.Justification;
+    /** Text direction */
+    direction?: Gtk.TextDirection;
+    /** Wrap mode for line breaks */
+    wrapMode?: Gtk.WrapMode;
+    /** Whether the text can be modified */
+    editable?: boolean;
+    /** Whether the text is invisible/hidden */
+    invisible?: boolean;
+    /** Whether breaks are allowed */
+    allowBreaks?: boolean;
+    /** Whether to insert hyphens at breaks */
+    insertHyphens?: boolean;
+    /** Whether font fallback is enabled */
+    fallback?: boolean;
+    /** Whether margins accumulate */
+    accumulativeMargin?: boolean;
+    /** Paragraph background color as a string */
+    paragraphBackground?: string;
+    /** How to render invisible characters */
+    showSpaces?: Pango.ShowFlags;
+    /** How to transform text for display */
+    textTransform?: Pango.TextTransform;
+    /** OpenType font features as a string */
+    fontFeatures?: string;
+    /** Language code (e.g., "en-US") */
+    language?: string;
+    /** Text content and nested TextTag children */
+    children?: ReactNode;
+};
+export declare class TextTagNode extends VirtualNode<TextTagProps> implements TextContentParent {
+    static priority: number;
+    private buffer;
+    private tag;
+    private children;
+    private parent;
+    bufferOffset: number;
+    static matches(type: string): boolean;
+    setParent(parent: TextContentParent): void;
+    setBuffer(buffer: Gtk.TextBuffer): void;
+    hasBuffer(): boolean;
+    private setupTag;
+    private applyStyleProps;
+    getText(): string;
+    getLength(): number;
+    getChildren(): TextContentChild[];
+    private applyTagToRange;
+    private removeTagFromBuffer;
+    reapplyTag(): void;
+    private updateChildOffsets;
+    onChildInserted(child: TextContentChild): void;
+    onChildRemoved(child: TextContentChild): void;
+    onChildTextChanged(child: TextSegmentNode, oldLength: number, newLength: number): void;
+    appendChild(child: Node): void;
+    removeChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    private isTextContentChild;
+    private setChildParent;
+    updateProps(oldProps: TextTagProps | null, newProps: TextTagProps): void;
+    unmount(): void;
+}

package/dist/nodes/text-tag.js

@@ -0,0 +1,202 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { applyStyleChanges } from "./internal/text-tag-styles.js";
+import { hasChanged } from "./internal/utils.js";
+import { TextAnchorNode } from "./text-anchor.js";
+import { TextSegmentNode } from "./text-segment.js";
+import { VirtualNode } from "./virtual.js";
+export class TextTagNode extends VirtualNode {
+    static priority = 1;
+    buffer = null;
+    tag = null;
+    children = [];
+    parent = null;
+    bufferOffset = 0;
+    static matches(type) {
+        return type === "TextTag";
+    }
+    setParent(parent) {
+        this.parent = parent;
+    }
+    setBuffer(buffer) {
+        this.buffer = buffer;
+        this.updateChildOffsets(0);
+        this.setupTag();
+        for (const child of this.children) {
+            if (child instanceof TextTagNode) {
+                child.setBuffer(buffer);
+            }
+        }
+    }
+    hasBuffer() {
+        return this.buffer !== null;
+    }
+    setupTag() {
+        if (!this.buffer)
+            return;
+        const tagTable = this.buffer.getTagTable();
+        this.tag = new Gtk.TextTag(this.props.id);
+        this.applyStyleProps(null, this.props);
+        tagTable.add(this.tag);
+        if (this.props.priority !== undefined) {
+            this.tag.setPriority(this.props.priority);
+        }
+        this.applyTagToRange();
+    }
+    applyStyleProps(oldProps, newProps) {
+        if (!this.tag)
+            return;
+        applyStyleChanges(this.tag, oldProps, newProps);
+    }
+    getText() {
+        let text = "";
+        for (const child of this.children) {
+            text += child.getText();
+        }
+        return text;
+    }
+    getLength() {
+        let length = 0;
+        for (const child of this.children) {
+            length += child.getLength();
+        }
+        return length;
+    }
+    getChildren() {
+        return this.children;
+    }
+    applyTagToRange() {
+        const buffer = this.buffer;
+        const tag = this.tag;
+        if (!buffer || !tag)
+            return;
+        const length = this.getLength();
+        if (length === 0)
+            return;
+        const startIter = new Gtk.TextIter();
+        const endIter = new Gtk.TextIter();
+        buffer.getIterAtOffset(startIter, this.bufferOffset);
+        buffer.getIterAtOffset(endIter, this.bufferOffset + length);
+        buffer.applyTag(tag, startIter, endIter);
+    }
+    removeTagFromBuffer() {
+        const buffer = this.buffer;
+        const tag = this.tag;
+        if (!buffer || !tag)
+            return;
+        const startIter = new Gtk.TextIter();
+        const endIter = new Gtk.TextIter();
+        buffer.getStartIter(startIter);
+        buffer.getEndIter(endIter);
+        buffer.removeTag(tag, startIter, endIter);
+    }
+    reapplyTag() {
+        if (!this.buffer || !this.tag)
+            return;
+        this.removeTagFromBuffer();
+        this.applyTagToRange();
+    }
+    updateChildOffsets(startIndex) {
+        let offset = this.bufferOffset;
+        for (let i = 0; i < startIndex; i++) {
+            const child = this.children[i];
+            if (child)
+                offset += child.getLength();
+        }
+        for (let i = startIndex; i < this.children.length; i++) {
+            const child = this.children[i];
+            if (child) {
+                child.bufferOffset = offset;
+                offset += child.getLength();
+            }
+        }
+    }
+    onChildInserted(child) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.updateChildOffsets(index);
+        }
+        this.parent?.onChildInserted(child);
+    }
+    onChildRemoved(child) {
+        this.parent?.onChildRemoved(child);
+    }
+    onChildTextChanged(child, oldLength, newLength) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.updateChildOffsets(index + 1);
+        }
+        this.parent?.onChildTextChanged(child, oldLength, newLength);
+    }
+    appendChild(child) {
+        if (this.isTextContentChild(child)) {
+            const index = this.children.length;
+            this.children.push(child);
+            this.setChildParent(child);
+            if (child instanceof TextTagNode && this.buffer) {
+                child.setBuffer(this.buffer);
+            }
+            this.updateChildOffsets(index);
+            this.parent?.onChildInserted(child);
+            return;
+        }
+        super.appendChild(child);
+    }
+    removeChild(child) {
+        const index = this.children.indexOf(child);
+        if (index !== -1) {
+            this.children.splice(index, 1);
+            this.updateChildOffsets(index);
+            this.parent?.onChildRemoved(child);
+            return;
+        }
+        super.removeChild(child);
+    }
+    insertBefore(child, before) {
+        if (this.isTextContentChild(child)) {
+            const beforeIndex = this.children.indexOf(before);
+            const insertIndex = beforeIndex !== -1 ? beforeIndex : this.children.length;
+            this.children.splice(insertIndex, 0, child);
+            this.setChildParent(child);
+            if (child instanceof TextTagNode && this.buffer) {
+                child.setBuffer(this.buffer);
+            }
+            this.updateChildOffsets(insertIndex);
+            this.parent?.onChildInserted(child);
+            return;
+        }
+        super.insertBefore(child, before);
+    }
+    isTextContentChild(child) {
+        return child instanceof TextSegmentNode || child instanceof TextTagNode || child instanceof TextAnchorNode;
+    }
+    setChildParent(child) {
+        if (child instanceof TextSegmentNode || child instanceof TextTagNode) {
+            child.setParent(this);
+        }
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps, newProps);
+        if (oldProps && oldProps.id !== newProps.id) {
+            throw new Error("TextTag id cannot be changed after creation");
+        }
+        if (this.tag) {
+            this.applyStyleProps(oldProps, newProps);
+            if (hasChanged(oldProps, newProps, "priority") && newProps.priority !== undefined) {
+                this.tag.setPriority(newProps.priority);
+            }
+        }
+    }
+    unmount() {
+        if (this.buffer && this.tag) {
+            this.removeTagFromBuffer();
+            const tagTable = this.buffer.getTagTable();
+            tagTable.remove(this.tag);
+        }
+        this.tag = null;
+        this.buffer = null;
+        this.children = [];
+        super.unmount();
+    }
+}
+registerNodeClass(TextTagNode);