@gtkx/react 0.14.0 → 0.16.0

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

@@ -0,0 +1,70 @@
+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 = ["rgba", "onRgbaChanged", "title", "modal", "withAlpha"];
+class ColorDialogButtonNode extends WidgetNode {
+    static priority = 1;
+    dialog;
+    notifyHandler = null;
+    static matches(_type, containerOrClass) {
+        return matchesAnyClass([Gtk.ColorDialogButton], containerOrClass);
+    }
+    static createContainer(_props, containerClass) {
+        const dialog = new Gtk.ColorDialog();
+        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("ColorDialogButton 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, "withAlpha")) {
+            this.dialog.setWithAlpha(newProps.withAlpha ?? true);
+        }
+        if (hasChanged(oldProps, newProps, "rgba") && newProps.rgba) {
+            this.container.setRgba(newProps.rgba);
+        }
+        if (hasChanged(oldProps, newProps, "onRgbaChanged")) {
+            this.setupNotifyHandler(newProps.onRgbaChanged);
+        }
+    }
+    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() === "rgba") {
+                    const rgba = this.container.getRgba();
+                    callback(rgba);
+                }
+            };
+            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(ColorDialogButtonNode);

package/dist/nodes/column-view-column.d.ts

@@ -9,9 +9,10 @@ export declare class ColumnViewColumnNode extends VirtualNode<Props> {
     static matches(type: string): boolean;
     column: Gtk.ColumnViewColumn;
     private itemRenderer;
-    constructor(typeName: string, props: Props, container: undefined, rootContainer?: Container);
-    setStore(model?: ListStore): void;
-    setEstimatedRowHeight(height?: number): void;
+    constructor(typeName: string, props: Props, container: undefined, rootContainer: Container);
+    unmount(): void;
+    setStore(model: ListStore | null): void;
+    setEstimatedRowHeight(height: number | null): void;
     updateProps(oldProps: Props | null, newProps: Props): void;
 }
 export {};

package/dist/nodes/column-view-column.js

@@ -11,10 +11,14 @@ export class ColumnViewColumnNode extends VirtualNode {
     itemRenderer;
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
-        this.itemRenderer = new ListItemRenderer();
+        this.itemRenderer = new ListItemRenderer(this.signalStore);
         this.column = new Gtk.ColumnViewColumn();
         this.column.setFactory(this.itemRenderer.getFactory());
     }
+    unmount() {
+        this.itemRenderer.dispose();
+        super.unmount();
+    }
     setStore(model) {
         this.itemRenderer.setStore(model);
     }

package/dist/nodes/column-view.js

@@ -2,24 +2,23 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import { COLUMN_VIEW_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
 import { ColumnViewColumnNode } from "./column-view-column.js";
-import { signalStore } from "./internal/signal-store.js";
 import { filterProps, matchesAnyClass } from "./internal/utils.js";
 import { ListItemNode } from "./list-item.js";
-import { List } from "./models/list.js";
+import { ListModel } from "./models/list.js";
 import { WidgetNode } from "./widget.js";
-const PROP_NAMES = ["sortColumn", "sortOrder", "onSortChange", "estimatedRowHeight"];
+const PROP_NAMES = ["sortColumn", "sortOrder", "onSortChanged", "estimatedRowHeight"];
 class ColumnViewNode extends WidgetNode {
     static priority = 1;
-    handleSortChange;
+    handleSortChange = null;
     list;
     columnNodes = new Set();
-    estimatedRowHeight;
+    estimatedRowHeight = null;
     static matches(_type, containerOrClass) {
         return matchesAnyClass(COLUMN_VIEW_CLASSES, containerOrClass);
     }
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
-        this.list = new List({
+        this.list = new ListModel({ owner: this, signalStore: this.signalStore }, {
             selectionMode: props.selectionMode,
             selected: props.selected,
             onSelectionChanged: props.onSelectionChanged,
@@ -41,9 +40,9 @@ class ColumnViewNode extends WidgetNode {
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
-        this.container.appendColumn(child.column);
         child.setStore(this.list.getStore());
         child.setEstimatedRowHeight(this.estimatedRowHeight);
+        this.container.appendColumn(child.column);
         this.columnNodes.add(child);
     }
     insertBefore(child, before) {
@@ -58,6 +57,8 @@ class ColumnViewNode extends WidgetNode {
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
+        child.setStore(this.list.getStore());
+        child.setEstimatedRowHeight(this.estimatedRowHeight);
         if (before instanceof ColumnViewColumnNode) {
             const beforeIndex = this.getColumnIndex(before.column);
             this.container.insertColumn(beforeIndex, child.column);
@@ -65,8 +66,6 @@ class ColumnViewNode extends WidgetNode {
         else {
             this.container.appendColumn(child.column);
         }
-        child.setStore(this.list.getStore());
-        child.setEstimatedRowHeight(this.estimatedRowHeight);
         this.columnNodes.add(child);
     }
     removeChild(child) {
@@ -81,18 +80,23 @@ class ColumnViewNode extends WidgetNode {
         if (existingColumn) {
             this.container.removeColumn(existingColumn);
         }
-        child.setStore(undefined);
+        child.setStore(null);
         this.columnNodes.delete(child);
     }
     updateProps(oldProps, newProps) {
-        if (!oldProps || oldProps.onSortChange !== newProps.onSortChange) {
+        super.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
+        this.applyOwnProps(oldProps, newProps);
+        this.list.updateProps(oldProps, newProps);
+    }
+    applyOwnProps(oldProps, newProps) {
+        if (!oldProps || oldProps.onSortChanged !== newProps.onSortChanged) {
             const sorter = this.container.getSorter();
-            const onSortChange = newProps.onSortChange;
+            const onSortChanged = newProps.onSortChanged;
             if (sorter) {
                 this.handleSortChange = () => {
-                    onSortChange?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
+                    onSortChanged?.(sorter.getPrimarySortColumn()?.getId() ?? null, sorter.getPrimarySortOrder());
                 };
-                signalStore.set(this, sorter, "changed", this.handleSortChange);
+                this.signalStore.set(this, sorter, "changed", this.handleSortChange);
             }
         }
         if (!oldProps || oldProps.sortColumn !== newProps.sortColumn || oldProps.sortOrder !== newProps.sortOrder) {
@@ -106,51 +110,44 @@ class ColumnViewNode extends WidgetNode {
             }
         }
         if (!oldProps || oldProps.estimatedRowHeight !== newProps.estimatedRowHeight) {
-            this.estimatedRowHeight = newProps.estimatedRowHeight;
+            this.estimatedRowHeight = newProps.estimatedRowHeight ?? null;
             for (const column of this.columnNodes) {
                 column.setEstimatedRowHeight(this.estimatedRowHeight);
             }
         }
-        this.list.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
-        super.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
     }
-    getColumn(columnId) {
+    findColumn(predicate) {
         const columns = this.container.getColumns();
         for (let i = 0; i < columns.getNItems(); i++) {
             const column = columns.getObject(i);
-            if (column.getId() === columnId) {
-                return column;
-            }
+            const result = predicate(column, i);
+            if (result !== null)
+                return result;
         }
-        throw new Error(`Unable to find column '${columnId}' in ColumnView`);
+        return null;
     }
-    getColumnIndex(column) {
-        const index = this.findColumnIndex(column);
-        if (index === -1) {
-            throw new Error(`Unable to find column '${column.getId()}' in ColumnView`);
+    getColumn(columnId) {
+        const column = this.findColumn((col) => (col.getId() === columnId ? col : null));
+        if (!column) {
+            throw new Error(`Unable to find column '${columnId}' in ColumnView`);
         }
-        return index;
+        return column;
     }
-    findColumnIndex(column) {
-        const columns = this.container.getColumns();
-        for (let i = 0; i < columns.getNItems(); i++) {
-            const col = columns.getObject(i);
-            if (col.getId() === column.getId()) {
-                return i;
-            }
+    getColumnIndex(column) {
+        const targetId = column.getId();
+        const index = this.findColumn((col, i) => (col.getId() === targetId ? i : null));
+        if (index === null) {
+            throw new Error(`Unable to find column '${targetId}' in ColumnView`);
         }
-        return -1;
+        return index;
     }
     findColumnInView(column) {
-        const columns = this.container.getColumns();
         const targetId = column.getId();
-        for (let i = 0; i < columns.getNItems(); i++) {
-            const col = columns.getObject(i);
-            if (col.getId() === targetId) {
-                return col;
-            }
-        }
-        return null;
+        return this.findColumn((col) => (col.getId() === targetId ? col : null));
+    }
+    unmount() {
+        this.columnNodes.clear();
+        super.unmount();
     }
 }
 registerNodeClass(ColumnViewNode);

package/dist/nodes/dialog.d.ts

@@ -0,0 +1,11 @@
+import * as Adw from "@gtkx/ffi/adw";
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { Container, ContainerClass } from "../types.js";
+import { WidgetNode } from "./widget.js";
+export declare class DialogNode extends WidgetNode<Adw.Dialog> {
+    static priority: number;
+    parent: Gtk.Window | null;
+    static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
+    mount(): void;
+    unmount(): void;
+}

package/dist/nodes/dialog.js

@@ -0,0 +1,20 @@
+import * as Adw from "@gtkx/ffi/adw";
+import { registerNodeClass } from "../registry.js";
+import { matchesAnyClass } from "./internal/utils.js";
+import { WidgetNode } from "./widget.js";
+export class DialogNode extends WidgetNode {
+    static priority = 1;
+    parent = null;
+    static matches(_type, containerOrClass) {
+        return matchesAnyClass([Adw.Dialog], containerOrClass);
+    }
+    mount() {
+        this.container.present(this.parent ?? undefined);
+        super.mount();
+    }
+    unmount() {
+        this.container.forceClose();
+        super.unmount();
+    }
+}
+registerNodeClass(DialogNode);

package/dist/nodes/drawing-area.d.ts

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

package/dist/nodes/drawing-area.js

@@ -0,0 +1,36 @@
+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 = ["onDraw"];
+class DrawingAreaNode extends WidgetNode {
+    static priority = 1;
+    pendingDrawFunc = null;
+    static matches(_type, containerOrClass) {
+        return matchesAnyClass([Gtk.DrawingArea], containerOrClass);
+    }
+    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, "onDraw") && newProps.onDraw) {
+            if (this.container.getRealized()) {
+                this.container.setDrawFunc(newProps.onDraw);
+            }
+            else {
+                this.pendingDrawFunc = newProps.onDraw;
+                this.signalStore.set(this, this.container, "realize", this.onRealize.bind(this));
+            }
+        }
+    }
+    onRealize() {
+        if (this.pendingDrawFunc) {
+            const drawFunc = this.pendingDrawFunc;
+            this.pendingDrawFunc = null;
+            queueMicrotask(() => this.container.setDrawFunc(drawFunc));
+        }
+        this.signalStore.set(this, this.container, "realize", null);
+    }
+}
+registerNodeClass(DrawingAreaNode);

package/dist/nodes/event-controller.d.ts

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

package/dist/nodes/event-controller.js

@@ -0,0 +1,96 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import { CONTROLLER_CLASSES, CONTROLLER_CONSTRUCTOR_PROPS } from "../generated/internal.js";
+import { Node } from "../node.js";
+import { registerNodeClass } from "../registry.js";
+import { propNameToSignalName, resolvePropMeta, resolveSignal } from "./internal/utils.js";
+import { WidgetNode } from "./widget.js";
+const G_TYPE_INVALID = 0;
+class EventControllerNode extends Node {
+    static priority = 1;
+    static matches(type) {
+        return type in CONTROLLER_CLASSES;
+    }
+    static createContainer(props, containerClass) {
+        const typeName = containerClass.glibTypeName;
+        if (typeName === "GtkDropTarget") {
+            const actions = props.actions ?? 0;
+            return new Gtk.DropTarget(G_TYPE_INVALID, actions);
+        }
+        const args = (CONTROLLER_CONSTRUCTOR_PROPS[typeName] ?? []).map((name) => props[name]);
+        // biome-ignore lint/suspicious/noExplicitAny: Dynamic constructor invocation
+        return new containerClass(...args);
+    }
+    props;
+    parentWidget = null;
+    constructor(typeName, props, container, rootContainer) {
+        super(typeName, props, container, rootContainer);
+        this.props = props;
+    }
+    canBeChildOf(parent) {
+        return parent instanceof WidgetNode;
+    }
+    appendChild(_child) { }
+    removeChild(_child) { }
+    insertBefore(_child, _before) { }
+    attachTo(parent) {
+        if (parent instanceof WidgetNode) {
+            this.parentWidget = parent.container;
+            parent.container.addController(this.container);
+        }
+    }
+    detachFrom(_parent) {
+        if (this.parentWidget) {
+            this.parentWidget.removeController(this.container);
+        }
+        this.parentWidget = null;
+    }
+    updateProps(oldProps, newProps) {
+        this.props = newProps;
+        this.applyProps(oldProps, newProps);
+    }
+    unmount() {
+        if (this.parentWidget) {
+            this.parentWidget.removeController(this.container);
+        }
+        this.parentWidget = null;
+        super.unmount();
+    }
+    applyProps(oldProps, newProps) {
+        if (!this.container) {
+            throw new Error(`EventControllerNode.applyProps: container is undefined for ${this.typeName}`);
+        }
+        const propNames = new Set([...Object.keys(oldProps ?? {}), ...Object.keys(newProps ?? {})]);
+        for (const name of propNames) {
+            if (name === "children")
+                continue;
+            const oldValue = oldProps?.[name];
+            const newValue = newProps[name];
+            if (oldValue === newValue)
+                continue;
+            const signalName = propNameToSignalName(name);
+            if (resolveSignal(this.container, signalName)) {
+                const handler = typeof newValue === "function" ? newValue : undefined;
+                this.signalStore.set(this, this.container, signalName, handler);
+            }
+            else if (newValue !== undefined) {
+                this.setProperty(name, newValue);
+            }
+        }
+    }
+    setProperty(name, value) {
+        if (name === "types" && this.container instanceof Gtk.DropTarget) {
+            const types = value;
+            this.container.setGtypes(types.length, types);
+            return;
+        }
+        const propMeta = resolvePropMeta(this.container, name);
+        if (propMeta) {
+            const [, setterName] = propMeta;
+            const setterFn = this.container[setterName];
+            if (typeof setterFn === "function") {
+                setterFn.call(this.container, value);
+            }
+        }
+    }
+}
+registerNodeClass(EventControllerNode);

package/dist/nodes/expander-row-child.d.ts

@@ -1,15 +1 @@
-import type * as Adw from "@gtkx/ffi/adw";
-import type * as Gtk from "@gtkx/ffi/gtk";
-import { VirtualChildNode } from "./virtual-child.js";
-type ExpanderRowWidget = Adw.ExpanderRow & {
-    addRow(child: Gtk.Widget): void;
-    addAction(widget: Gtk.Widget): void;
-    remove(child: Gtk.Widget): void;
-};
-export declare class ExpanderRowChild extends VirtualChildNode<ExpanderRowWidget> {
-    static priority: number;
-    static matches(type: string): boolean;
-    protected getPositionLabel(): string;
-    protected attachChild(parent: ExpanderRowWidget, widget: Gtk.Widget): void;
-}
 export {};

package/dist/nodes/expander-row-child.js

@@ -1,20 +1,22 @@
 import { registerNodeClass } from "../registry.js";
-import { VirtualChildNode } from "./virtual-child.js";
-export class ExpanderRowChild extends VirtualChildNode {
+import { VirtualContainerNode } from "./abstract/virtual-container.js";
+class ExpanderRowRowNode extends VirtualContainerNode {
     static priority = 1;
     static matches(type) {
-        return type === "ExpanderRowRow" || type === "ExpanderRowAction";
+        return type === "ExpanderRowRow";
     }
-    getPositionLabel() {
-        return this.typeName === "ExpanderRowRow" ? "row" : "action";
+    attachChild(parent, widget) {
+        parent.addRow(widget);
+    }
+}
+class ExpanderRowActionNode extends VirtualContainerNode {
+    static priority = 1;
+    static matches(type) {
+        return type === "ExpanderRowAction";
     }
     attachChild(parent, widget) {
-        if (this.getPositionLabel() === "row") {
-            parent.addRow(widget);
-        }
-        else {
-            parent.addAction(widget);
-        }
+        parent.addAction(widget);
     }
 }
-registerNodeClass(ExpanderRowChild);
+registerNodeClass(ExpanderRowRowNode);
+registerNodeClass(ExpanderRowActionNode);

package/dist/nodes/expander-row.d.ts

@@ -1 +1,6 @@
-export {};
+import type * as Gtk from "@gtkx/ffi/gtk";
+export type ExpanderRowWidget = Gtk.Widget & {
+    addRow(child: Gtk.Widget): void;
+    addAction(child: Gtk.Widget): void;
+    remove(child: Gtk.Widget): void;
+};

package/dist/nodes/expander-row.js

@@ -1,54 +1,18 @@
 import * as Adw from "@gtkx/ffi/adw";
 import { registerNodeClass } from "../registry.js";
-import { ActionRowChild } from "./action-row-child.js";
-import { ExpanderRowChild } from "./expander-row-child.js";
-import { isContainerType } from "./internal/utils.js";
-import { SlotNode } from "./slot.js";
-import { WidgetNode } from "./widget.js";
-class ExpanderRowNode extends WidgetNode {
+import { PositionalParentNode } from "./abstract/positional-parent.js";
+import { matchesAnyClass } from "./internal/utils.js";
+class ExpanderRowNode extends PositionalParentNode {
     static priority = -1;
+    acceptedPositionalChildTypes = new Set([
+        "ExpanderRowRow",
+        "ExpanderRowAction",
+        "ActionRowPrefix",
+        "ActionRowSuffix",
+    ]);
+    containerTypeName = "ExpanderRow";
     static matches(_type, containerOrClass) {
-        return isContainerType(Adw.ExpanderRow, containerOrClass);
-    }
-    appendChild(child) {
-        if (child instanceof ExpanderRowChild) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof ActionRowChild) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.appendChild(child);
-            return;
-        }
-        throw new Error(`Cannot append '${child.typeName}' to 'ExpanderRow': expected x.ExpanderRowRow, x.ExpanderRowAction, x.ActionRowPrefix, x.ActionRowSuffix, or Widget`);
-    }
-    insertBefore(child, before) {
-        if (child instanceof ExpanderRowChild) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof ActionRowChild) {
-            child.setParent(this.container);
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.insertBefore(child, before);
-            return;
-        }
-        throw new Error(`Cannot insert '${child.typeName}' into 'ExpanderRow': expected x.ExpanderRowRow, x.ExpanderRowAction, x.ActionRowPrefix, x.ActionRowSuffix, or Widget`);
-    }
-    removeChild(child) {
-        if (child instanceof ExpanderRowChild || child instanceof ActionRowChild) {
-            return;
-        }
-        if (child instanceof SlotNode || child instanceof WidgetNode) {
-            super.removeChild(child);
-            return;
-        }
-        throw new Error(`Cannot remove '${child.typeName}' from 'ExpanderRow': expected x.ExpanderRowRow, x.ExpanderRowAction, x.ActionRowPrefix, x.ActionRowSuffix, or Widget`);
+        return matchesAnyClass([Adw.ExpanderRow], containerOrClass);
     }
 }
 registerNodeClass(ExpanderRowNode);

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);