@gtkx/react 0.15.0 → 0.17.1

package/dist/nodes/animation.js

@@ -0,0 +1,252 @@
+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";
+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";
+    }
+    className;
+    provider = null;
+    display = null;
+    currentAnimation = null;
+    currentValues = {};
+    isExiting = false;
+    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;
+        }
+        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);
+        }
+    }
+    onChildChange(oldChild) {
+        if (oldChild && this.provider) {
+            oldChild.removeCssClass(this.className);
+        }
+        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);
+            }
+        }
+        if (this.child && this.parent) {
+            const strategy = getAttachmentStrategy(this.parent);
+            if (strategy) {
+                attachChild(this.child, strategy);
+            }
+            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() {
+        if (this.isExiting) {
+            return;
+        }
+        if (this.props.exit && this.child) {
+            this.isExiting = true;
+            this.animateTo(this.props.exit, () => {
+                this.detachChildFromParent();
+                this.cleanup();
+                super.unmount();
+            });
+        }
+        else {
+            this.detachChildFromParent();
+            this.cleanup();
+            super.unmount();
+        }
+    }
+    detachChildFromParent() {
+        if (this.child && this.parent && this.isChildAttachedToParent()) {
+            const strategy = getAttachmentStrategy(this.parent);
+            if (strategy) {
+                detachChild(this.child, strategy);
+            }
+            else if (isRemovable(this.parent)) {
+                this.parent.remove(this.child);
+            }
+        }
+    }
+    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);
+    }
+    setupCssProvider() {
+        if (this.provider || !this.child)
+            return;
+        this.provider = new Gtk.CssProvider();
+        this.display = Gdk.DisplayManager.get().getDefaultDisplay();
+        if (this.display) {
+            Gtk.StyleContext.addProviderForDisplay(this.display, this.provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        }
+    }
+    cleanup() {
+        if (this.currentAnimation) {
+            this.currentAnimation.skip();
+            this.currentAnimation = null;
+        }
+        if (this.provider && this.display) {
+            Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
+        }
+        if (this.child) {
+            this.child.removeCssClass(this.className);
+        }
+        this.provider = null;
+        this.display = null;
+    }
+    animateTo(target, onComplete) {
+        if (!this.child)
+            return;
+        if (this.currentAnimation) {
+            this.currentAnimation.skip();
+            this.currentAnimation = null;
+        }
+        const from = { ...this.currentValues };
+        const to = { ...target };
+        this.props.onAnimationStart?.();
+        const callback = new Adw.CallbackAnimationTarget((progress) => {
+            const interpolated = interpolate(from, to, progress);
+            this.currentValues = interpolated;
+            this.applyValues(interpolated);
+        });
+        const animation = this.createAnimation(this.child, callback);
+        animation.connect("done", () => {
+            this.currentValues = { ...to };
+            this.currentAnimation = null;
+            this.props.onAnimationComplete?.();
+            onComplete?.();
+        });
+        this.currentAnimation = animation;
+        const transition = this.props.transition;
+        const delay = transition?.delay ?? 0;
+        if (delay > 0) {
+            setTimeout(() => {
+                if (this.currentAnimation === animation) {
+                    animation.play();
+                }
+            }, delay);
+        }
+        else {
+            animation.play();
+        }
+    }
+    createAnimation(widget, target) {
+        const mode = this.props.mode;
+        if (mode === "spring") {
+            return this.createSpringAnimation(widget, target);
+        }
+        return this.createTimedAnimation(widget, target);
+    }
+    createTimedAnimation(widget, target) {
+        const transition = this.props.transition;
+        const duration = transition?.duration ?? DEFAULT_TIMED_DURATION;
+        const animation = new Adw.TimedAnimation(widget, 0, 1, duration, target);
+        if (transition?.easing !== undefined) {
+            animation.setEasing(transition.easing);
+        }
+        if (transition?.repeat !== undefined) {
+            animation.setRepeatCount(transition.repeat);
+        }
+        if (transition?.reverse !== undefined) {
+            animation.setReverse(transition.reverse);
+        }
+        if (transition?.alternate !== undefined) {
+            animation.setAlternate(transition.alternate);
+        }
+        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;
+        const springParams = new Adw.SpringParams(damping, mass, stiffness);
+        const animation = new Adw.SpringAnimation(widget, 0, 1, springParams, target);
+        if (transition?.initialVelocity !== undefined) {
+            animation.setInitialVelocity(transition.initialVelocity);
+        }
+        if (transition?.clamp !== undefined) {
+            animation.setClamp(transition.clamp);
+        }
+        return animation;
+    }
+    applyValues(values) {
+        if (!this.provider) {
+            return;
+        }
+        if (this.child && !this.child.getCssClasses()?.includes(this.className)) {
+            this.child.addCssClass(this.className);
+        }
+        const css = buildCss(this.className, values);
+        if (css) {
+            this.provider.loadFromString(css);
+        }
+    }
+    arePropsEqual(a, b) {
+        if (a === b)
+            return true;
+        if (!a || !b)
+            return false;
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length)
+            return false;
+        for (const key of keysA) {
+            if (a[key] !== b[key])
+                return false;
+        }
+        return true;
+    }
+}
+registerNodeClass(AnimationNode);

package/dist/nodes/application.js

@@ -2,20 +2,21 @@ import * as Gtk from "@gtkx/ffi/gtk";
 import { Node } from "../node.js";
 import { registerNodeClass } from "../registry.js";
 import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { isContainerType } from "./internal/utils.js";
+import { DialogNode } from "./dialog.js";
+import { matchesAnyClass } from "./internal/utils.js";
 import { MenuNode } from "./menu.js";
-import { Menu } from "./models/menu.js";
+import { MenuModel } from "./models/menu.js";
 import { WindowNode } from "./window.js";
 class ApplicationNode extends Node {
     static priority = 0;
     menu;
     static matches(_type, containerOrClass) {
-        return isContainerType(Gtk.Application, 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 Menu("root", {}, container, application);
+        this.menu = new MenuModel("root", {}, rootContainer, container, application);
     }
     appendChild(child) {
         if (child instanceof MenuNode) {
@@ -26,7 +27,10 @@ class ApplicationNode extends Node {
         if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot append '${child.typeName}' to 'Application': expected ApplicationWindow or MenuItem`);
+        if (child instanceof DialogNode) {
+            return;
+        }
+        throw new Error(`Cannot append '${child.typeName}' to 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
     }
     insertBefore(child, before) {
         if (child instanceof MenuNode) {
@@ -36,7 +40,10 @@ class ApplicationNode extends Node {
         if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot insert '${child.typeName}' into 'Application': expected ApplicationWindow or MenuItem`);
+        if (child instanceof DialogNode) {
+            return;
+        }
+        throw new Error(`Cannot insert '${child.typeName}' into 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
     }
     removeChild(child) {
         if (child instanceof MenuNode) {
@@ -51,7 +58,10 @@ class ApplicationNode extends Node {
         if (child instanceof WindowNode && child.container instanceof Gtk.ApplicationWindow) {
             return;
         }
-        throw new Error(`Cannot remove '${child.typeName}' from 'Application': expected ApplicationWindow or MenuItem`);
+        if (child instanceof DialogNode) {
+            return;
+        }
+        throw new Error(`Cannot remove '${child.typeName}' from 'Application': expected ApplicationWindow, Dialog, or MenuItem`);
     }
 }
 registerNodeClass(ApplicationNode);

package/dist/nodes/autowrapped.js

@@ -1,4 +1,4 @@
-import { batch, isObjectEqual } from "@gtkx/ffi";
+import { isObjectEqual } from "@gtkx/ffi";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { AUTOWRAP_CLASSES } from "../generated/internal.js";
 import { registerNodeClass } from "../registry.js";
@@ -10,7 +10,7 @@ const isAutowrappedChild = (obj) => {
     return obj instanceof Gtk.ListBoxRow || obj instanceof Gtk.FlowBoxChild;
 };
 class AutowrappedNode extends WidgetNode {
-    static priority = 2;
+    static priority = 1;
     static matches(_type, containerOrClass) {
         return matchesAnyClass(AUTOWRAP_CLASSES, containerOrClass);
     }
@@ -22,18 +22,16 @@ class AutowrappedNode extends WidgetNode {
         if (!(child instanceof WidgetNode)) {
             throw new Error(`Cannot append '${child.typeName}' to 'ListBox/FlowBox': expected Widget`);
         }
-        batch(() => {
-            if (isAutowrappedChild(child.container)) {
-                const currentParent = child.container.getParent();
-                if (currentParent !== null && isRemovable(currentParent)) {
-                    currentParent.remove(child.container);
-                }
-            }
-            else {
-                this.removeExistingWrapper(child.container);
+        if (isAutowrappedChild(child.container)) {
+            const currentParent = child.container.getParent();
+            if (currentParent !== null && isRemovable(currentParent)) {
+                currentParent.remove(child.container);
             }
-            this.container.append(child.container);
-        });
+        }
+        else {
+            this.removeExistingWrapper(child.container);
+        }
+        this.container.append(child.container);
     }
     removeChild(child) {
         if (child instanceof SlotNode) {
@@ -43,17 +41,15 @@ class AutowrappedNode extends WidgetNode {
         if (!(child instanceof WidgetNode)) {
             throw new Error(`Cannot remove '${child.typeName}' from 'ListBox/FlowBox': expected Widget`);
         }
-        batch(() => {
-            if (!isAutowrappedChild(child.container)) {
-                const wrapper = child.container.getParent();
-                if (wrapper && isSingleChild(wrapper)) {
-                    wrapper.setChild(null);
-                    this.container.remove(wrapper);
-                    return;
-                }
+        if (!isAutowrappedChild(child.container)) {
+            const wrapper = child.container.getParent();
+            if (wrapper && isSingleChild(wrapper)) {
+                wrapper.setChild(null);
+                this.container.remove(wrapper);
+                return;
             }
-            this.container.remove(child.container);
-        });
+        }
+        this.container.remove(child.container);
     }
     insertBefore(child, before) {
         if (child instanceof SlotNode) {
@@ -61,31 +57,29 @@ class AutowrappedNode extends WidgetNode {
             return;
         }
         if (!(child instanceof WidgetNode) || !(before instanceof WidgetNode)) {
-            throw new Error(`Cannot insert '${child.typeName}' before '${before.typeName}' in 'ListBox/FlowBox': expected Widget`);
+            throw new Error(`Cannot insert '${child.typeName}' into 'ListBox/FlowBox': expected Widget`);
         }
-        batch(() => {
-            const currentParent = child.container.getParent();
-            if (currentParent !== null) {
-                if (isAutowrappedChild(child.container)) {
-                    if (isRemovable(currentParent)) {
-                        currentParent.remove(child.container);
-                    }
-                }
-                else {
-                    this.removeExistingWrapper(child.container);
+        const currentParent = child.container.getParent();
+        if (currentParent !== null) {
+            if (isAutowrappedChild(child.container)) {
+                if (isRemovable(currentParent)) {
+                    currentParent.remove(child.container);
                 }
             }
-            else if (!isAutowrappedChild(child.container)) {
-                this.removeExistingWrapper(child.container);
-            }
-            const position = this.findChildPosition(before);
-            if (position !== null) {
-                this.container.insert(child.container, position);
-            }
             else {
-                this.container.append(child.container);
+                this.removeExistingWrapper(child.container);
             }
-        });
+        }
+        else if (!isAutowrappedChild(child.container)) {
+            this.removeExistingWrapper(child.container);
+        }
+        const position = this.findChildPosition(before);
+        if (position !== null) {
+            this.container.insert(child.container, position);
+        }
+        else {
+            this.container.append(child.container);
+        }
     }
     removeExistingWrapper(childWidget) {
         const existingWrapper = childWidget.getParent();

package/dist/nodes/calendar.js

@@ -1,57 +1,31 @@
 import * as Gtk from "@gtkx/ffi/gtk";
 import { registerNodeClass } from "../registry.js";
-import { CommitPriority, scheduleAfterCommit } from "../scheduler.js";
-import { CalendarMarkNode } from "./calendar-mark.js";
-import { isContainerType } from "./internal/utils.js";
+import { filterProps, matchesAnyClass, primitiveArrayEqual } from "./internal/utils.js";
 import { WidgetNode } from "./widget.js";
+const OWN_PROPS = ["markedDays"];
 class CalendarNode extends WidgetNode {
     static priority = 1;
-    markChildren = [];
+    appliedMarks = [];
     static matches(_type, containerOrClass) {
-        return isContainerType(Gtk.Calendar, containerOrClass);
+        return matchesAnyClass([Gtk.Calendar], containerOrClass);
     }
-    appendChild(child) {
-        if (child instanceof CalendarMarkNode) {
-            child.setCalendar(this.container, () => this.scheduleRebuildAllMarks());
-            this.markChildren.push(child);
-            scheduleAfterCommit(() => child.addMark());
-            return;
-        }
-        super.appendChild(child);
+    updateProps(oldProps, newProps) {
+        super.updateProps(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
+        this.applyOwnProps(oldProps, newProps);
     }
-    insertBefore(child, before) {
-        if (child instanceof CalendarMarkNode) {
-            child.setCalendar(this.container, () => this.scheduleRebuildAllMarks());
-            const beforeIndex = this.markChildren.indexOf(before);
-            if (beforeIndex >= 0) {
-                this.markChildren.splice(beforeIndex, 0, child);
-            }
-            else {
-                this.markChildren.push(child);
-            }
-            this.scheduleRebuildAllMarks();
-            return;
-        }
-        super.insertBefore(child, before);
+    applyOwnProps(_oldProps, newProps) {
+        this.applyMarkedDays(newProps);
     }
-    removeChild(child) {
-        if (child instanceof CalendarMarkNode) {
-            const index = this.markChildren.indexOf(child);
-            if (index >= 0) {
-                this.markChildren.splice(index, 1);
-            }
-            this.scheduleRebuildAllMarks(CommitPriority.HIGH);
+    applyMarkedDays(newProps) {
+        const newMarkedDays = newProps.markedDays ?? [];
+        if (primitiveArrayEqual(this.appliedMarks, newMarkedDays)) {
             return;
         }
-        super.removeChild(child);
-    }
-    scheduleRebuildAllMarks(priority = CommitPriority.NORMAL) {
-        scheduleAfterCommit(() => {
-            this.container.clearMarks();
-            for (const mark of this.markChildren) {
-                mark.addMark();
-            }
-        }, priority);
+        this.container.clearMarks();
+        for (const day of newMarkedDays) {
+            this.container.markDay(day);
+        }
+        this.appliedMarks = [...newMarkedDays];
     }
 }
 registerNodeClass(CalendarNode);

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

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

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,10 +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);
+    constructor(typeName: string, props: Props, container: undefined, rootContainer: Container);
     unmount(): void;
-    setStore(model?: ListStore): void;
-    setEstimatedRowHeight(height?: number): 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,7 +11,7 @@ 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());
     }