@gtkx/react 0.17.2 → 0.18.0

package/dist/nodes/animation.d.ts

@@ -1 +1,37 @@
-export {};
+import type { AnimationProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import type { Container } from "../types.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
+export declare class AnimationNode extends VirtualNode<AnimationProps, WidgetNode, WidgetNode> {
+    private className;
+    private provider;
+    private display;
+    private currentAnimation;
+    private currentValues;
+    private isExiting;
+    private detachedParentWidget;
+    constructor(typeName: string, props: AnimationProps, container: undefined, rootContainer: Container);
+    isValidChild(child: Node): boolean;
+    isValidParent(parent: Node): boolean;
+    setParent(parent: WidgetNode | null): void;
+    appendChild(child: WidgetNode): void;
+    removeChild(child: WidgetNode): void;
+    finalizeInitialChildren(props: AnimationProps): boolean;
+    commitMount(): void;
+    commitUpdate(oldProps: AnimationProps | null, newProps: AnimationProps): void;
+    detachDeletedInstance(): void;
+    private onChildChange;
+    private detachChildFromParentWidget;
+    private setupCssProvider;
+    private cleanup;
+    private animateTo;
+    private createAnimation;
+    private createTimedAnimation;
+    private createSpringAnimation;
+    private applyValues;
+    private getDefaultValue;
+    private interpolate;
+    private buildCss;
+    private areAnimatedPropsEqual;
+}

package/dist/nodes/animation.js

@@ -1,129 +1,133 @@
-import { isObjectEqual } from "@gtkx/ffi";
 import * as Adw from "@gtkx/ffi/adw";
 import * as Gdk from "@gtkx/ffi/gdk";
 import * as Gtk from "@gtkx/ffi/gtk";
-import { buildCss, interpolate } from "../animation/css-builder.js";
-import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { VirtualSingleChildNode } from "./abstract/virtual-single-child.js";
-import { attachChild, detachChild, getAttachmentStrategy } from "./internal/child-attachment.js";
-import { isRemovable } from "./internal/predicates.js";
+import { attachChild, detachChild, isAttachedTo } from "./internal/widget.js";
+import { VirtualNode } from "./virtual.js";
+import { WidgetNode } from "./widget.js";
 let animationCounter = 0;
 const DEFAULT_TIMED_DURATION = 300;
 const DEFAULT_SPRING_DAMPING = 1;
 const DEFAULT_SPRING_MASS = 1;
 const DEFAULT_SPRING_STIFFNESS = 100;
-class AnimationNode extends VirtualSingleChildNode {
-    static priority = 2;
-    static matches(type) {
-        return type === "Animation";
-    }
+export class AnimationNode extends VirtualNode {
     className;
     provider = null;
     display = null;
     currentAnimation = null;
     currentValues = {};
     isExiting = false;
+    detachedParentWidget = null;
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
         this.className = `gtkx-anim-${animationCounter++}`;
     }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps, newProps);
-        if (this.isExiting) {
-            return;
+    isValidChild(child) {
+        return child instanceof WidgetNode;
+    }
+    isValidParent(parent) {
+        return parent instanceof WidgetNode;
+    }
+    setParent(parent) {
+        if (!parent && this.parent) {
+            this.detachedParentWidget = this.parent.container;
         }
-        if (oldProps && newProps.animate && !this.arePropsEqual(oldProps.animate, newProps.animate)) {
-            const target = newProps.animate;
-            scheduleAfterCommit(() => {
-                if (this.child && !this.isExiting) {
-                    this.animateTo(target);
-                }
-            }, CommitPriority.LOW);
+        super.setParent(parent);
+        if (parent && this.children[0]) {
+            this.onChildChange(null);
         }
     }
-    onChildChange(oldChild) {
-        if (oldChild && this.provider) {
-            oldChild.removeCssClass(this.className);
+    appendChild(child) {
+        const oldChildWidget = this.children[0]?.container ?? null;
+        super.appendChild(child);
+        if (this.parent) {
+            this.onChildChange(oldChildWidget);
         }
-        if (oldChild && this.parent && this.isWidgetAttachedTo(oldChild, this.parent)) {
-            const strategy = getAttachmentStrategy(this.parent);
-            if (strategy) {
-                detachChild(oldChild, strategy);
-            }
-            else if (isRemovable(this.parent)) {
-                this.parent.remove(oldChild);
-            }
+    }
+    removeChild(child) {
+        const oldChildWidget = child.container;
+        super.removeChild(child);
+        if (this.parent && oldChildWidget) {
+            this.onChildChange(oldChildWidget);
         }
-        if (this.child && this.parent) {
-            const strategy = getAttachmentStrategy(this.parent);
-            if (strategy) {
-                attachChild(this.child, strategy);
+    }
+    finalizeInitialChildren(props) {
+        this.commitUpdate(null, props);
+        return !!props.animateOnMount;
+    }
+    commitMount() {
+        const animate = this.props.animate;
+        if (this.props.animateOnMount && animate) {
+            this.animateTo(animate);
+        }
+    }
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps, newProps);
+        if (this.isExiting) {
+            return;
+        }
+        if (oldProps && newProps.animate && !this.areAnimatedPropsEqual(oldProps.animate, newProps.animate)) {
+            const target = newProps.animate;
+            if (this.children[0] && !this.isExiting) {
+                this.animateTo(target);
             }
-            this.setupCssProvider();
-            this.child.addCssClass(this.className);
-            scheduleAfterCommit(() => {
-                if (!this.child)
-                    return;
-                const initial = this.props.initial;
-                const animate = this.props.animate;
-                if (initial === false || !this.props.animateOnMount) {
-                    if (animate) {
-                        this.currentValues = { ...animate };
-                        this.applyValues(this.currentValues);
-                    }
-                }
-                else {
-                    const initialValues = initial ?? animate ?? {};
-                    this.currentValues = { ...initialValues };
-                    this.applyValues(this.currentValues);
-                    if (this.props.animateOnMount && animate) {
-                        this.animateTo(animate);
-                    }
-                }
-            }, CommitPriority.LOW);
         }
     }
-    unmount() {
+    detachDeletedInstance() {
         if (this.isExiting) {
             return;
         }
-        if (this.props.exit && this.child) {
+        if (this.props.exit && this.children[0]) {
             this.isExiting = true;
             this.animateTo(this.props.exit, () => {
-                this.detachChildFromParent();
+                this.detachChildFromParentWidget();
                 this.cleanup();
-                super.unmount();
+                super.detachDeletedInstance();
             });
         }
         else {
-            this.detachChildFromParent();
+            this.detachChildFromParentWidget();
             this.cleanup();
-            super.unmount();
+            super.detachDeletedInstance();
         }
     }
-    detachChildFromParent() {
-        if (this.child && this.parent && this.isChildAttachedToParent()) {
-            const strategy = getAttachmentStrategy(this.parent);
-            if (strategy) {
-                detachChild(this.child, strategy);
+    onChildChange(oldChild) {
+        const parentWidget = this.parent?.container ?? null;
+        const childWidget = this.children[0]?.container ?? null;
+        if (oldChild && this.provider) {
+            oldChild.removeCssClass(this.className);
+        }
+        if (oldChild && parentWidget && isAttachedTo(oldChild, parentWidget)) {
+            detachChild(oldChild, parentWidget);
+        }
+        if (childWidget && parentWidget) {
+            attachChild(childWidget, parentWidget);
+            this.setupCssProvider();
+            childWidget.addCssClass(this.className);
+            const initial = this.props.initial;
+            const animate = this.props.animate;
+            if (initial === false || !this.props.animateOnMount) {
+                if (animate) {
+                    this.currentValues = { ...animate };
+                    this.applyValues(this.currentValues);
+                }
             }
-            else if (isRemovable(this.parent)) {
-                this.parent.remove(this.child);
+            else {
+                const initialValues = initial ?? animate ?? {};
+                this.currentValues = { ...initialValues };
+                this.applyValues(this.currentValues);
             }
         }
     }
-    isChildAttachedToParent() {
-        return this.isWidgetAttachedTo(this.child, this.parent);
-    }
-    isWidgetAttachedTo(child, parent) {
-        if (!child || !parent)
-            return false;
-        const childParent = child.getParent();
-        return childParent !== null && isObjectEqual(childParent, parent);
+    detachChildFromParentWidget() {
+        const parentWidget = this.parent?.container ?? this.detachedParentWidget;
+        const childWidget = this.children[0]?.container ?? null;
+        if (childWidget && parentWidget && isAttachedTo(childWidget, parentWidget)) {
+            detachChild(childWidget, parentWidget);
+        }
     }
     setupCssProvider() {
-        if (this.provider || !this.child)
+        const childWidget = this.children[0]?.container ?? null;
+        if (this.provider || !childWidget)
             return;
         this.provider = new Gtk.CssProvider();
         this.display = Gdk.DisplayManager.get().getDefaultDisplay();
@@ -132,6 +136,7 @@ class AnimationNode extends VirtualSingleChildNode {
         }
     }
     cleanup() {
+        const childWidget = this.children[0]?.container ?? null;
         if (this.currentAnimation) {
             this.currentAnimation.skip();
             this.currentAnimation = null;
@@ -139,14 +144,15 @@ class AnimationNode extends VirtualSingleChildNode {
         if (this.provider && this.display) {
             Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
         }
-        if (this.child) {
-            this.child.removeCssClass(this.className);
+        if (childWidget) {
+            childWidget.removeCssClass(this.className);
         }
         this.provider = null;
         this.display = null;
     }
     animateTo(target, onComplete) {
-        if (!this.child)
+        const childWidget = this.children[0]?.container ?? null;
+        if (!childWidget)
             return;
         if (this.currentAnimation) {
             this.currentAnimation.skip();
@@ -156,11 +162,11 @@ class AnimationNode extends VirtualSingleChildNode {
         const to = { ...target };
         this.props.onAnimationStart?.();
         const callback = new Adw.CallbackAnimationTarget((progress) => {
-            const interpolated = interpolate(from, to, progress);
+            const interpolated = this.interpolate(from, to, progress);
             this.currentValues = interpolated;
             this.applyValues(interpolated);
         });
-        const animation = this.createAnimation(this.child, callback);
+        const animation = this.createAnimation(childWidget, callback);
         animation.connect("done", () => {
             this.currentValues = { ...to };
             this.currentAnimation = null;
@@ -182,14 +188,13 @@ class AnimationNode extends VirtualSingleChildNode {
         }
     }
     createAnimation(widget, target) {
-        const mode = this.props.mode;
-        if (mode === "spring") {
-            return this.createSpringAnimation(widget, target);
+        const transition = this.props.transition;
+        if (transition?.mode === "spring") {
+            return this.createSpringAnimation(widget, target, transition);
         }
-        return this.createTimedAnimation(widget, target);
+        return this.createTimedAnimation(widget, target, transition);
     }
-    createTimedAnimation(widget, target) {
-        const transition = this.props.transition;
+    createTimedAnimation(widget, target, transition) {
         const duration = transition?.duration ?? DEFAULT_TIMED_DURATION;
         const animation = new Adw.TimedAnimation(widget, 0, 1, duration, target);
         if (transition?.easing !== undefined) {
@@ -206,17 +211,16 @@ class AnimationNode extends VirtualSingleChildNode {
         }
         return animation;
     }
-    createSpringAnimation(widget, target) {
-        const transition = this.props.transition;
-        const damping = transition?.damping ?? DEFAULT_SPRING_DAMPING;
-        const mass = transition?.mass ?? DEFAULT_SPRING_MASS;
-        const stiffness = transition?.stiffness ?? DEFAULT_SPRING_STIFFNESS;
+    createSpringAnimation(widget, target, transition) {
+        const damping = transition.damping ?? DEFAULT_SPRING_DAMPING;
+        const mass = transition.mass ?? DEFAULT_SPRING_MASS;
+        const stiffness = transition.stiffness ?? DEFAULT_SPRING_STIFFNESS;
         const springParams = new Adw.SpringParams(damping, mass, stiffness);
         const animation = new Adw.SpringAnimation(widget, 0, 1, springParams, target);
-        if (transition?.initialVelocity !== undefined) {
+        if (transition.initialVelocity !== undefined) {
             animation.setInitialVelocity(transition.initialVelocity);
         }
-        if (transition?.clamp !== undefined) {
+        if (transition.clamp !== undefined) {
             animation.setClamp(transition.clamp);
         }
         return animation;
@@ -225,15 +229,69 @@ class AnimationNode extends VirtualSingleChildNode {
         if (!this.provider) {
             return;
         }
-        if (this.child && !this.child.getCssClasses()?.includes(this.className)) {
-            this.child.addCssClass(this.className);
+        const childWidget = this.children[0]?.container ?? null;
+        if (childWidget && !childWidget.getCssClasses()?.includes(this.className)) {
+            childWidget.addCssClass(this.className);
         }
-        const css = buildCss(this.className, values);
+        const css = this.buildCss(this.className, values);
         if (css) {
             this.provider.loadFromString(css);
         }
     }
-    arePropsEqual(a, b) {
+    getDefaultValue(property) {
+        switch (property) {
+            case "opacity":
+            case "scale":
+            case "scaleX":
+            case "scaleY":
+                return 1;
+            default:
+                return 0;
+        }
+    }
+    interpolate(from, to, progress) {
+        const result = {};
+        const allKeys = new Set([...Object.keys(from), ...Object.keys(to)]);
+        for (const key of allKeys) {
+            const fromVal = from[key] ?? this.getDefaultValue(key);
+            const toVal = to[key] ?? this.getDefaultValue(key);
+            result[key] = fromVal + (toVal - fromVal) * progress;
+        }
+        return result;
+    }
+    buildCss(className, props) {
+        const parts = [];
+        const transforms = [];
+        if (props.opacity !== undefined) {
+            parts.push(`opacity: ${props.opacity}`);
+        }
+        if (props.translateX !== undefined || props.translateY !== undefined) {
+            transforms.push(`translate(${props.translateX ?? 0}px, ${props.translateY ?? 0}px)`);
+        }
+        if (props.scale !== undefined) {
+            transforms.push(`scale(${props.scale})`);
+        }
+        else if (props.scaleX !== undefined || props.scaleY !== undefined) {
+            transforms.push(`scale(${props.scaleX ?? 1}, ${props.scaleY ?? 1})`);
+        }
+        if (props.rotate !== undefined) {
+            transforms.push(`rotate(${props.rotate}deg)`);
+        }
+        if (props.skewX !== undefined) {
+            transforms.push(`skewX(${props.skewX}deg)`);
+        }
+        if (props.skewY !== undefined) {
+            transforms.push(`skewY(${props.skewY}deg)`);
+        }
+        if (transforms.length > 0) {
+            parts.push(`transform: ${transforms.join(" ")}`);
+        }
+        if (parts.length === 0) {
+            return "";
+        }
+        return `.${className} { ${parts.join("; ")}; }`;
+    }
+    areAnimatedPropsEqual(a, b) {
         if (a === b)
             return true;
         if (!a || !b)
@@ -249,4 +307,3 @@ class AnimationNode extends VirtualSingleChildNode {
         return true;
     }
 }
-registerNodeClass(AnimationNode);

package/dist/nodes/application.d.ts

@@ -1 +1,11 @@
-export {};
+import * as Gtk from "@gtkx/ffi/gtk";
+import { Node } from "../node.js";
+import type { Container, Props } from "../types.js";
+export declare class ApplicationNode extends Node<Gtk.Application, Props, Node, Node> {
+    private menu;
+    constructor(typeName: string, props: Props, container: Gtk.Application, rootContainer: Container);
+    isValidChild(): boolean;
+    appendChild(child: Node): void;
+    insertBefore(child: Node, before: Node): void;
+    removeChild(child: Node): void;
+}

package/dist/nodes/application.js

@@ -1,67 +1,46 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
-import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { DialogNode } from "./dialog.js";
-import { matchesAnyClass } from "./internal/utils.js";
 import { MenuNode } from "./menu.js";
 import { MenuModel } from "./models/menu.js";
-import { WindowNode } from "./window.js";
-class ApplicationNode extends Node {
-    static priority = 0;
+export class ApplicationNode extends Node {
     menu;
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Gtk.Application], containerOrClass);
-    }
     constructor(typeName, props, container, rootContainer) {
         super(typeName, props, container, rootContainer);
         const application = rootContainer instanceof Gtk.Application ? rootContainer : undefined;
         this.menu = new MenuModel("root", {}, rootContainer, container, application);
     }
+    isValidChild() {
+        return true;
+    }
     appendChild(child) {
         if (child instanceof MenuNode) {
             this.menu.appendChild(child);
             this.container.setMenubar(this.menu.getMenu());
             return;
         }
-        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
-            return;
-        }
-        if (child instanceof DialogNode) {
-            return;
-        }
-        throw new Error(`Cannot append '${child.typeName}' to 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
+        super.appendChild(child);
     }
     insertBefore(child, before) {
         if (child instanceof MenuNode) {
-            this.menu.insertBefore(child, before);
-            return;
-        }
-        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
-            return;
-        }
-        if (child instanceof DialogNode) {
+            if (before instanceof MenuNode) {
+                this.menu.insertBefore(child, before);
+            }
+            else {
+                this.menu.appendChild(child);
+            }
+            this.container.setMenubar(this.menu.getMenu());
             return;
         }
-        throw new Error(`Cannot insert '${child.typeName}' into 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
+        super.insertBefore(child, before);
     }
     removeChild(child) {
         if (child instanceof MenuNode) {
             this.menu.removeChild(child);
-            scheduleAfterCommit(() => {
-                if (this.menu.getMenu().getNItems() === 0) {
-                    this.container.setMenubar(null);
-                }
-            }, CommitPriority.LOW);
-            return;
-        }
-        if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
-            return;
-        }
-        if (child instanceof DialogNode) {
+            if (this.menu.getMenu().getNItems() === 0) {
+                this.container.setMenubar(null);
+            }
             return;
         }
-        throw new Error(`Cannot remove '${child.typeName}' from 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
+        super.removeChild(child);
     }
 }
-registerNodeClass(ApplicationNode);

package/dist/nodes/calendar.d.ts

@@ -1 +1,14 @@
+import type * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkCalendarProps } from "../jsx.js";
+import type { Node } from "../node.js";
+import { EventControllerNode } from "./event-controller.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["markedDays"];
+type CalendarProps = Pick<GtkCalendarProps, (typeof OWN_PROPS)[number]>;
+export declare class CalendarNode extends WidgetNode<Gtk.Calendar, CalendarProps, EventControllerNode> {
+    isValidChild(child: Node): boolean;
+    private appliedMarks;
+    commitUpdate(oldProps: CalendarProps | null, newProps: CalendarProps): void;
+    private applyOwnProps;
+}
 export {};

package/dist/nodes/calendar.js

@@ -1,22 +1,17 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import { registerNodeClass } from "../registry.js";
-import { filterProps, matchesAnyClass, primitiveArrayEqual } from "./internal/utils.js";
+import { EventControllerNode } from "./event-controller.js";
+import { filterProps, primitiveArrayEqual } from "./internal/props.js";
 import { WidgetNode } from "./widget.js";
 const OWN_PROPS = ["markedDays"];
-class CalendarNode extends WidgetNode {
-    static priority = 1;
-    appliedMarks = [];
-    static matches(_type, containerOrClass) {
-        return matchesAnyClass([Gtk.Calendar], containerOrClass);
-    }
-    updateProps(oldProps, newProps) {
-        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
-        this.applyOwnProps(oldProps, newProps);
+export class CalendarNode extends WidgetNode {
+    isValidChild(child) {
+        return child instanceof EventControllerNode;
     }
-    applyOwnProps(_oldProps, newProps) {
-        this.applyMarkedDays(newProps);
+    appliedMarks = [];
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(newProps);
     }
-    applyMarkedDays(newProps) {
+    applyOwnProps(newProps) {
         const newMarkedDays = newProps.markedDays ?? [];
         if (primitiveArrayEqual(this.appliedMarks, newMarkedDays)) {
             return;
@@ -28,4 +23,3 @@ class CalendarNode extends WidgetNode {
         this.appliedMarks = [...newMarkedDays];
     }
 }
-registerNodeClass(CalendarNode);

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

@@ -1 +1,14 @@
+import * as Gtk from "@gtkx/ffi/gtk";
+import type { GtkColorDialogButtonProps } from "../jsx.js";
+import type { Container } from "../types.js";
+import { WidgetNode } from "./widget.js";
+declare const OWN_PROPS: readonly ["rgba", "onRgbaChanged", "title", "modal", "withAlpha"];
+type ColorDialogButtonProps = Pick<GtkColorDialogButtonProps, (typeof OWN_PROPS)[number]>;
+export declare class ColorDialogButtonNode extends WidgetNode<Gtk.ColorDialogButton, ColorDialogButtonProps> {
+    private dialog;
+    static createContainer(_props: ColorDialogButtonProps, containerClass: typeof Gtk.Widget): Container | null;
+    constructor(typeName: string, props: ColorDialogButtonProps, container: Gtk.ColorDialogButton, rootContainer: Container);
+    commitUpdate(oldProps: ColorDialogButtonProps | null, newProps: ColorDialogButtonProps): void;
+    private applyOwnProps;
+}
 export {};

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

@@ -1,35 +1,29 @@
 import * as Gtk from "@gtkx/ffi/gtk";
-import { registerNodeClass } from "../registry.js";
-import { filterProps, hasChanged, matchesAnyClass } from "./internal/utils.js";
+import { filterProps, hasChanged } from "./internal/props.js";
 import { WidgetNode } from "./widget.js";
 const OWN_PROPS = ["rgba", "onRgbaChanged", "title", "modal", "withAlpha"];
-class ColorDialogButtonNode extends WidgetNode {
-    static priority = 1;
+export class ColorDialogButtonNode extends WidgetNode {
     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);
+    constructor(typeName, props, container, rootContainer) {
+        super(typeName, 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));
+    commitUpdate(oldProps, newProps) {
+        super.commitUpdate(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, "title")) {
+            this.dialog.setTitle(newProps.title ?? "");
         }
         if (hasChanged(oldProps, newProps, "modal")) {
             this.dialog.setModal(newProps.modal ?? true);
@@ -41,30 +35,8 @@ class ColorDialogButtonNode extends WidgetNode {
             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;
+            const callback = newProps.onRgbaChanged;
+            this.signalStore.set(this, this.container, "notify::rgba", callback ? () => callback(this.container.getRgba()) : undefined);
         }
-        super.unmount();
     }
 }
-registerNodeClass(ColorDialogButtonNode);