@gtkx/react 0.15.0 → 0.16.0

package/dist/nodes/fixed-child.js

@@ -1,53 +1,65 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
 import { registerNodeClass } from "../registry.js";
-import { SlotNode } from "./slot.js";
-class FixedChildNode extends SlotNode {
+import { PositionalChildNode } from "./abstract/positional-child.js";
+import { hasChanged } from "./internal/utils.js";
+class FixedChildNode extends PositionalChildNode {
     static priority = 1;
     static matches(type) {
         return type === "FixedChild";
     }
-    getFixed() {
-        if (!this.parent) {
-            throw new Error("Expected Fixed reference to be set on FixedChildNode");
+    onChildChange(oldChild) {
+        super.onChildChange(oldChild);
+        if (this.child) {
+            this.applyTransform();
         }
-        return this.parent;
+    }
+    attachToParent(parent, child) {
+        const fixed = parent;
+        const x = this.props.x ?? 0;
+        const y = this.props.y ?? 0;
+        fixed.put(child, x, y);
+    }
+    detachFromParent(parent, child) {
+        parent.remove(child);
     }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (!oldProps || oldProps.x !== newProps.x || oldProps.y !== newProps.y) {
-            if (this.parent && this.child) {
-                this.positionChild();
-            }
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (!this.parent || !this.child) {
+            return;
+        }
+        const positionChanged = hasChanged(oldProps, newProps, "x") || hasChanged(oldProps, newProps, "y");
+        if (positionChanged) {
+            this.repositionChild();
+        }
+        else if (hasChanged(oldProps, newProps, "transform")) {
+            this.applyTransform();
         }
     }
-    positionChild() {
-        const fixed = this.getFixed();
+    repositionChild() {
+        const fixed = this.getTypedParent();
+        const child = this.child;
+        if (!child) {
+            return;
+        }
         const x = this.props.x ?? 0;
         const y = this.props.y ?? 0;
-        if (this.child) {
-            const child = this.child;
-            batch(() => {
-                const currentParent = child.getParent();
-                if (currentParent && isObjectEqual(currentParent, fixed)) {
-                    fixed.remove(child);
-                }
-                fixed.put(child, x, y);
-            });
-        }
+        fixed.remove(child);
+        fixed.put(child, x, y);
+        this.applyTransform();
     }
-    onChildChange(oldChild) {
-        const fixed = this.getFixed();
-        batch(() => {
-            if (oldChild) {
-                const parent = oldChild.getParent();
-                if (parent && isObjectEqual(parent, fixed)) {
-                    fixed.remove(oldChild);
-                }
-            }
-            if (this.child) {
-                this.positionChild();
-            }
-        });
+    applyTransform() {
+        if (!this.child || !this.props.transform) {
+            return;
+        }
+        const fixed = this.getTypedParent();
+        const layoutManager = fixed.getLayoutManager();
+        if (!layoutManager) {
+            return;
+        }
+        const layoutChild = layoutManager.getLayoutChild(this.child);
+        layoutChild.setTransform(this.props.transform);
     }
 }
 registerNodeClass(FixedChildNode);

package/dist/nodes/font-dialog-button.d.ts

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

package/dist/nodes/font-dialog-button.js

@@ -0,0 +1,90 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
+import { WidgetNode } from "./widget.js";
+const OWN_PROPS = [
+    "fontDesc",
+    "onFontDescChanged",
+    "title",
+    "modal",
+    "language",
+    "useFont",
+    "useSize",
+    "level",
+];
+class FontDialogButtonNode extends WidgetNode {
+    static priority = 1;
+    dialog;
+    notifyHandler = null;
+    static matches(_type, containerOrClass) {
+        return matchesAnyClass([Gtk.FontDialogButton], containerOrClass);
+    }
+    static createContainer(_props, containerClass) {
+        const dialog = new Gtk.FontDialog();
+        const button = new containerClass(dialog);
+        return button;
+    }
+    constructor(type, props, container, rootContainer) {
+        super(type, props, container, rootContainer);
+        const dialog = container.getDialog();
+        if (!dialog) {
+            throw new Error("FontDialogButton must have a dialog");
+        }
+        this.dialog = dialog;
+    }
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (hasChanged(oldProps, newProps, "title") && newProps.title !== undefined) {
+            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")) {
+            this.setupNotifyHandler(newProps.onFontDescChanged);
+        }
+    }
+    setupNotifyHandler(callback) {
+        if (this.notifyHandler) {
+            this.signalStore.set(this, this.container, "notify", undefined);
+            this.notifyHandler = null;
+        }
+        if (callback) {
+            this.notifyHandler = (_button, pspec) => {
+                if (pspec.getName() === "font-desc") {
+                    const fontDesc = this.container.getFontDesc();
+                    if (fontDesc) {
+                        callback(fontDesc);
+                    }
+                }
+            };
+            this.signalStore.set(this, this.container, "notify", this.notifyHandler);
+        }
+    }
+    unmount() {
+        if (this.notifyHandler) {
+            this.signalStore.set(this, this.container, "notify", undefined);
+            this.notifyHandler = null;
+        }
+        super.unmount();
+    }
+}
+registerNodeClass(FontDialogButtonNode);

package/dist/nodes/grid-child.js

@@ -1,62 +1,56 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
+import { isObjectEqual } from "@gtkx/ffi";
 import { registerNodeClass } from "../registry.js";
-import { SlotNode } from "./slot.js";
-class GridChildNode extends SlotNode {
+import { PositionalChildNode } from "./abstract/positional-child.js";
+import { hasChanged } from "./internal/utils.js";
+class GridChildNode extends PositionalChildNode {
     static priority = 1;
     static matches(type) {
         return type === "GridChild";
     }
+    attachToParent(parent, child) {
+        const grid = parent;
+        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 = grid.getChildAt(column, row);
+        if (existingChild && !isObjectEqual(existingChild, child)) {
+            grid.remove(existingChild);
+        }
+        grid.attach(child, column, row, columnSpan, rowSpan);
+    }
+    detachFromParent(parent, child) {
+        parent.remove(child);
+    }
     updateProps(oldProps, newProps) {
         super.updateProps(oldProps, newProps);
-        if (!oldProps ||
-            oldProps.column !== newProps.column ||
-            oldProps.row !== newProps.row ||
-            oldProps.columnSpan !== newProps.columnSpan ||
-            oldProps.rowSpan !== newProps.rowSpan) {
-            if (this.parent && this.child) {
-                this.attachChild();
-            }
-        }
+        this.applyOwnProps(oldProps, newProps);
     }
-    getGrid() {
-        if (!this.parent) {
-            throw new Error("Expected Grid reference to be set on GridChildNode");
+    applyOwnProps(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.child) {
+            this.reattachChild();
         }
-        return this.parent;
     }
-    attachChild() {
-        const grid = this.getGrid();
+    reattachChild() {
+        const grid = this.getTypedParent();
+        const child = this.child;
+        if (!child) {
+            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;
-        batch(() => {
-            const existingChild = grid.getChildAt(column, row);
-            if (existingChild && this.child && !isObjectEqual(existingChild, this.child)) {
-                grid.remove(existingChild);
-            }
-            if (this.child) {
-                const currentParent = this.child.getParent();
-                if (currentParent && isObjectEqual(currentParent, grid)) {
-                    grid.remove(this.child);
-                }
-                grid.attach(this.child, column, row, columnSpan, rowSpan);
-            }
-        });
-    }
-    onChildChange(oldChild) {
-        const grid = this.getGrid();
-        batch(() => {
-            if (oldChild) {
-                const parent = oldChild.getParent();
-                if (parent && isObjectEqual(parent, grid)) {
-                    grid.remove(oldChild);
-                }
-            }
-            if (this.child) {
-                this.attachChild();
-            }
-        });
+        const existingChild = grid.getChildAt(column, row);
+        if (existingChild && !isObjectEqual(existingChild, child)) {
+            grid.remove(existingChild);
+        }
+        grid.remove(child);
+        grid.attach(child, column, row, columnSpan, rowSpan);
     }
 }
 registerNodeClass(GridChildNode);

package/dist/nodes/grid.d.ts

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

package/dist/nodes/grid.js

@@ -0,0 +1,41 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { registerNodeClass } from "../registry.js";
+import { isAttachable } from "./internal/predicates.js";
+import { matchesAnyClass } from "./internal/utils.js";
+import { SlotNode } from "./slot.js";
+import { WidgetNode } from "./widget.js";
+class GridNode extends WidgetNode {
+    static priority = 0;
+    static matches(_type, containerOrClass) {
+        return matchesAnyClass([Gtk.Grid], containerOrClass);
+    }
+    isGridChild(child) {
+        return child.typeName === "GridChild";
+    }
+    appendChild(child) {
+        if (child instanceof SlotNode) {
+            super.appendChild(child);
+            return;
+        }
+        if (isAttachable(child) && this.isGridChild(child)) {
+            child.attachTo(this);
+            return;
+        }
+        throw new Error(`Cannot append '${child.typeName}' to 'Grid': expected x.GridChild`);
+    }
+    insertBefore(child, _before) {
+        this.appendChild(child);
+    }
+    removeChild(child) {
+        if (child instanceof SlotNode) {
+            super.removeChild(child);
+            return;
+        }
+        if (isAttachable(child) && this.isGridChild(child)) {
+            child.detachFrom(this);
+            return;
+        }
+        throw new Error(`Cannot remove '${child.typeName}' from 'Grid': expected x.GridChild`);
+    }
+}
+registerNodeClass(GridNode);

package/dist/nodes/index.d.ts

@@ -1,17 +1,20 @@
-import "./action-row-child.js";
 import "./action-row.js";
+import "./adjustable.js";
+import "./animation/index.js";
+import "./alert-dialog-response.js";
 import "./application.js";
 import "./autowrapped.js";
-import "./calendar-mark.js";
 import "./calendar.js";
+import "./color-dialog-button.js";
 import "./column-view-column.js";
 import "./column-view.js";
+import "./dialog.js";
 import "./drawing-area.js";
-import "./expander-row-child.js";
 import "./expander-row.js";
 import "./fixed-child.js";
+import "./font-dialog-button.js";
+import "./grid.js";
 import "./grid-child.js";
-import "./level-bar-offset.js";
 import "./level-bar.js";
 import "./list-item.js";
 import "./list-view.js";
@@ -22,23 +25,25 @@ import "./notebook-page-tab.js";
 import "./notebook-page.js";
 import "./notebook.js";
 import "./overlay-child.js";
-import "./pack-child.js";
 import "./pack.js";
 import "./popover-menu.js";
-import "./adjustment.js";
-import "./scale-mark.js";
 import "./scale.js";
 import "./scrolled-window.js";
+import "./search-bar.js";
 import "./shortcut-controller.js";
 import "./shortcut.js";
+import "./event-controller.js";
 import "./simple-list-item.js";
 import "./simple-list-view.js";
 import "./slot.js";
-import "./source-buffer.js";
 import "./source-view.js";
 import "./stack-page.js";
 import "./stack.js";
-import "./text-buffer.js";
+import "./text-anchor.js";
+import "./text-content.js";
+import "./text-paintable.js";
+import "./text-segment.js";
+import "./text-tag.js";
 import "./text-view.js";
 import "./toggle.js";
 import "./toggle-group.js";
@@ -46,5 +51,8 @@ import "./toolbar-child.js";
 import "./tree-list-item.js";
 import "./tree-list-view.js";
 import "./virtual.js";
+import "./action-row-child.js";
+import "./expander-row-child.js";
+import "./pack-child.js";
 import "./widget.js";
 import "./window.js";

package/dist/nodes/index.js

@@ -1,17 +1,20 @@
-import "./action-row-child.js";
 import "./action-row.js";
+import "./adjustable.js";
+import "./animation/index.js";
+import "./alert-dialog-response.js";
 import "./application.js";
 import "./autowrapped.js";
-import "./calendar-mark.js";
 import "./calendar.js";
+import "./color-dialog-button.js";
 import "./column-view-column.js";
 import "./column-view.js";
+import "./dialog.js";
 import "./drawing-area.js";
-import "./expander-row-child.js";
 import "./expander-row.js";
 import "./fixed-child.js";
+import "./font-dialog-button.js";
+import "./grid.js";
 import "./grid-child.js";
-import "./level-bar-offset.js";
 import "./level-bar.js";
 import "./list-item.js";
 import "./list-view.js";
@@ -22,23 +25,25 @@ import "./notebook-page-tab.js";
 import "./notebook-page.js";
 import "./notebook.js";
 import "./overlay-child.js";
-import "./pack-child.js";
 import "./pack.js";
 import "./popover-menu.js";
-import "./adjustment.js";
-import "./scale-mark.js";
 import "./scale.js";
 import "./scrolled-window.js";
+import "./search-bar.js";
 import "./shortcut-controller.js";
 import "./shortcut.js";
+import "./event-controller.js";
 import "./simple-list-item.js";
 import "./simple-list-view.js";
 import "./slot.js";
-import "./source-buffer.js";
 import "./source-view.js";
 import "./stack-page.js";
 import "./stack.js";
-import "./text-buffer.js";
+import "./text-anchor.js";
+import "./text-content.js";
+import "./text-paintable.js";
+import "./text-segment.js";
+import "./text-tag.js";
 import "./text-view.js";
 import "./toggle.js";
 import "./toggle-group.js";
@@ -46,5 +51,8 @@ import "./toolbar-child.js";
 import "./tree-list-item.js";
 import "./tree-list-view.js";
 import "./virtual.js";
+import "./action-row-child.js";
+import "./expander-row-child.js";
+import "./pack-child.js";
 import "./widget.js";
 import "./window.js";

package/dist/nodes/internal/base-item-renderer.d.ts

@@ -0,0 +1,29 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { ReactNode } from "react";
+import type Reconciler from "react-reconciler";
+import type { SignalStore } from "./signal-store.js";
+export declare abstract class BaseItemRenderer<TStore = unknown> {
+    protected factory: Gtk.SignalListItemFactory;
+    protected fiberRoots: Map<number, any>;
+    protected tornDown: Set<number>;
+    protected estimatedItemHeight: number | null;
+    private store;
+    protected signalStore: SignalStore;
+    protected abstract getStoreTypeName(): string;
+    constructor(signalStore: SignalStore);
+    getFactory(): Gtk.SignalListItemFactory;
+    setEstimatedItemHeight(height: number | null): void;
+    setStore(store: TStore | null): void;
+    protected getStore(): TStore;
+    dispose(): void;
+    protected abstract renderItem(ptr: number): ReactNode;
+    protected abstract getItemFromListItem(listItem: Gtk.ListItem): unknown;
+    protected abstract onSetup(listItem: Gtk.ListItem, ptr: number): Gtk.Widget;
+    protected abstract onBind(listItem: Gtk.ListItem, ptr: number, fiberRoot: Reconciler.FiberRoot): void;
+    protected abstract onUnbind(listItem: Gtk.ListItem): void;
+    protected abstract onTeardown(listItem: Gtk.ListItem, ptr: number): void;
+    protected onSetupComplete(_ptr: number): void;
+    protected createBox(): Gtk.Box;
+    protected clearBoxSizeRequest(box: Gtk.Widget): void;
+    private initializeFactory;
+}

package/dist/nodes/internal/base-item-renderer.js

@@ -0,0 +1,88 @@
+import { getNativeId } from "@gtkx/ffi";
+import * as Gtk from "@gtkx/ffi/gtk";
+import { createFiberRoot } from "../../fiber-root.js";
+import { reconciler } from "../../reconciler.js";
+export class BaseItemRenderer {
+    factory;
+    fiberRoots = new Map();
+    tornDown = new Set();
+    estimatedItemHeight = null;
+    store = null;
+    signalStore;
+    constructor(signalStore) {
+        this.signalStore = signalStore;
+        this.factory = new Gtk.SignalListItemFactory();
+        this.initializeFactory();
+    }
+    getFactory() {
+        return this.factory;
+    }
+    setEstimatedItemHeight(height) {
+        this.estimatedItemHeight = height;
+    }
+    setStore(store) {
+        this.store = store;
+    }
+    getStore() {
+        if (!this.store) {
+            throw new Error(`Expected ${this.getStoreTypeName()} to be set on ${this.constructor.name}`);
+        }
+        return this.store;
+    }
+    dispose() {
+        this.signalStore.clear(this);
+        this.fiberRoots.clear();
+        this.tornDown.clear();
+    }
+    onSetupComplete(_ptr) { }
+    createBox() {
+        const box = new Gtk.Box(Gtk.Orientation.HORIZONTAL);
+        box.setValign(Gtk.Align.CENTER);
+        if (this.estimatedItemHeight !== null) {
+            box.setSizeRequest(-1, this.estimatedItemHeight);
+        }
+        return box;
+    }
+    clearBoxSizeRequest(box) {
+        if (box instanceof Gtk.Box) {
+            box.setSizeRequest(-1, -1);
+        }
+    }
+    initializeFactory() {
+        this.signalStore.set(this, this.factory, "setup", (listItem) => {
+            const ptr = getNativeId(listItem.handle);
+            const container = this.onSetup(listItem, ptr);
+            const fiberRoot = createFiberRoot(container);
+            this.fiberRoots.set(ptr, fiberRoot);
+            const element = this.renderItem(ptr);
+            reconciler.getInstance().updateContainer(element, fiberRoot, null, () => {
+                if (this.tornDown.has(ptr))
+                    return;
+                this.onSetupComplete(ptr);
+            });
+        });
+        this.signalStore.set(this, this.factory, "bind", (listItem) => {
+            const ptr = getNativeId(listItem.handle);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (!fiberRoot)
+                return;
+            this.onBind(listItem, ptr, fiberRoot);
+        });
+        this.signalStore.set(this, this.factory, "unbind", (listItem) => {
+            this.onUnbind(listItem);
+        });
+        this.signalStore.set(this, this.factory, "teardown", (listItem) => {
+            const ptr = getNativeId(listItem.handle);
+            const fiberRoot = this.fiberRoots.get(ptr);
+            if (fiberRoot) {
+                this.tornDown.add(ptr);
+                this.onTeardown(listItem, ptr);
+                reconciler.getInstance().updateContainer(null, fiberRoot, null, () => { });
+                queueMicrotask(() => {
+                    this.fiberRoots.delete(ptr);
+                    this.tornDown.delete(ptr);
+                });
+            }
+        });
+    }
+}

package/dist/nodes/internal/base-store.d.ts

@@ -0,0 +1,9 @@
+export declare abstract class BaseStore<TItem = unknown> {
+    protected items: Map<string, TItem>;
+    private syncAction;
+    constructor();
+    getItem(id: string): TItem | undefined;
+    updateItem(id: string, item: TItem): void;
+    protected scheduleSync(): void;
+    protected abstract sync(): void;
+}

package/dist/nodes/internal/base-store.js

@@ -0,0 +1,20 @@
+import { CommitPriority } from "../../scheduler.js";
+import { DeferredAction } from "./deferred-action.js";
+export class BaseStore {
+    items = new Map();
+    syncAction;
+    constructor() {
+        this.syncAction = new DeferredAction(() => this.sync(), CommitPriority.LOW);
+    }
+    getItem(id) {
+        return this.items.get(id);
+    }
+    updateItem(id, item) {
+        if (this.items.has(id)) {
+            this.items.set(id, item);
+        }
+    }
+    scheduleSync() {
+        this.syncAction.schedule();
+    }
+}

package/dist/nodes/internal/child-attachment.d.ts

@@ -0,0 +1,26 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+type AttachmentStrategy = {
+    type: "appendable";
+    container: Gtk.Widget & {
+        append(child: Gtk.Widget): void;
+    };
+} | {
+    type: "addable";
+    container: Gtk.Widget & {
+        add(child: Gtk.Widget): void;
+    };
+} | {
+    type: "content";
+    container: Gtk.Widget & {
+        setContent(content: Gtk.Widget | null): void;
+    };
+} | {
+    type: "singleChild";
+    container: Gtk.Widget & {
+        setChild(child: Gtk.Widget | null): void;
+    };
+};
+export declare const getAttachmentStrategy: (container: Gtk.Widget) => AttachmentStrategy | null;
+export declare const attachChild: (child: Gtk.Widget, strategy: AttachmentStrategy) => void;
+export declare const detachChild: (child: Gtk.Widget, strategy: AttachmentStrategy) => void;
+export {};