@gtkx/react 0.21.0 → 1.0.0-rc.2

package/src/nodes/animation.ts

@@ -1,409 +0,0 @@
-import * as Adw from "@gtkx/ffi/adw";
-import * as Gdk from "@gtkx/ffi/gdk";
-import * as Gtk from "@gtkx/ffi/gtk";
-import type { AdwSpringAnimationProps, AdwTimedAnimationProps, AnimatableProperties, AnimationProps } from "../jsx.js";
-import type { Node } from "../node.js";
-import type { Container } from "../types.js";
-import { attachChild, detachChild, isAttachedTo } from "./internal/widget.js";
-import { VirtualNode } from "./virtual.js";
-import { WidgetNode } from "./widget.js";
-
-type SetChildContainer = { setChild: (child: Gtk.Widget | null) => void };
-
-function hasSetChild(obj: unknown): obj is SetChildContainer {
-    return obj !== null && typeof obj === "object" && "setChild" in obj && typeof obj.setChild === "function";
-}
-
-let animationCounter = 0;
-
-const DEFAULT_TIMED_DURATION = 300;
-const DEFAULT_SPRING_DAMPING = 1;
-const DEFAULT_SPRING_MASS = 1;
-const DEFAULT_SPRING_STIFFNESS = 100;
-
-export class AnimationNode extends VirtualNode<AnimationProps, Node, WidgetNode> {
-    private className: string;
-    private provider: Gtk.CssProvider | null = null;
-    private display: Gdk.Display | null = null;
-    private currentAnimation: Adw.Animation | null = null;
-    private currentValues: AnimatableProperties = {};
-    private isExiting = false;
-    private detachedParentContainer: unknown = null;
-
-    constructor(typeName: string, props: AnimationProps, container: undefined, rootContainer: Container) {
-        super(typeName, props, container, rootContainer);
-        this.className = `gtkx-anim-${animationCounter++}`;
-    }
-
-    public override isValidChild(child: Node): boolean {
-        return child instanceof WidgetNode;
-    }
-
-    public override isValidParent(_parent: Node): boolean {
-        return true;
-    }
-
-    public override setParent(parent: Node | null): void {
-        if (!parent && this.parent) {
-            this.detachedParentContainer = this.parent.container;
-        }
-
-        super.setParent(parent);
-
-        if (parent && this.children[0]) {
-            this.onChildChange(null);
-        }
-    }
-
-    public override appendChild(child: WidgetNode): void {
-        const oldChildWidget = this.children[0]?.container ?? null;
-
-        super.appendChild(child);
-
-        if (this.parent) {
-            this.onChildChange(oldChildWidget);
-        }
-    }
-
-    public override removeChild(child: WidgetNode): void {
-        const oldChildWidget = child.container;
-
-        super.removeChild(child);
-
-        if (this.parent && oldChildWidget) {
-            this.onChildChange(oldChildWidget);
-        }
-    }
-
-    public override finalizeInitialChildren(props: AnimationProps): boolean {
-        this.commitUpdate(null, props);
-        return !!props.animateOnMount;
-    }
-
-    public override commitMount(): void {
-        const animate = this.props.animate;
-
-        if (this.props.animateOnMount && animate) {
-            this.animateTo(animate);
-        }
-    }
-
-    public override commitUpdate(oldProps: AnimationProps | null, newProps: AnimationProps): void {
-        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);
-            }
-        }
-    }
-
-    public override detachDeletedInstance(): void {
-        if (this.isExiting) {
-            return;
-        }
-
-        if (this.props.exit && this.children[0]) {
-            this.isExiting = true;
-
-            this.animateTo(this.props.exit, () => {
-                this.detachChildFromParentWidget();
-                this.cleanup();
-                super.detachDeletedInstance();
-            });
-        } else {
-            this.detachChildFromParentWidget();
-            this.cleanup();
-            super.detachDeletedInstance();
-        }
-    }
-
-    private onChildChange(oldChild: Gtk.Widget | null): void {
-        const parentContainer = this.parent?.container ?? null;
-        const childWidget = this.children[0]?.container ?? null;
-
-        if (oldChild && this.provider) {
-            oldChild.removeCssClass(this.className);
-        }
-
-        if (oldChild && parentContainer instanceof Gtk.Widget && isAttachedTo(oldChild, parentContainer)) {
-            detachChild(oldChild, parentContainer);
-        } else if (oldChild && parentContainer && hasSetChild(parentContainer)) {
-            parentContainer.setChild(null);
-        }
-
-        if (childWidget && parentContainer instanceof Gtk.Widget) {
-            attachChild(childWidget, parentContainer);
-            this.setupAnimatedChild(childWidget);
-        } else if (childWidget && parentContainer && hasSetChild(parentContainer)) {
-            parentContainer.setChild(childWidget);
-            this.setupAnimatedChild(childWidget);
-        }
-    }
-
-    private setupAnimatedChild(childWidget: Gtk.Widget): void {
-        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 {
-            const initialValues = initial ?? animate ?? {};
-            this.currentValues = { ...initialValues };
-            this.applyValues(this.currentValues);
-        }
-    }
-
-    private detachChildFromParentWidget(): void {
-        const parentContainer = this.parent?.container ?? this.detachedParentContainer;
-        const childWidget = this.children[0]?.container ?? null;
-
-        if (childWidget && parentContainer instanceof Gtk.Widget && isAttachedTo(childWidget, parentContainer)) {
-            detachChild(childWidget, parentContainer);
-        } else if (childWidget && parentContainer && hasSetChild(parentContainer)) {
-            parentContainer.setChild(null);
-        }
-    }
-
-    private setupCssProvider(): void {
-        const childWidget = this.children[0]?.container ?? null;
-        if (this.provider || !childWidget) 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,
-            );
-        }
-    }
-
-    private cleanup(): void {
-        const childWidget = this.children[0]?.container ?? null;
-
-        if (this.currentAnimation) {
-            this.currentAnimation.skip();
-            this.currentAnimation = null;
-        }
-
-        if (this.provider && this.display) {
-            Gtk.StyleContext.removeProviderForDisplay(this.display, this.provider);
-        }
-
-        if (childWidget) {
-            childWidget.removeCssClass(this.className);
-        }
-
-        this.provider = null;
-        this.display = null;
-    }
-
-    private animateTo(target: AnimatableProperties, onComplete?: () => void): void {
-        const childWidget = this.children[0]?.container ?? null;
-        if (!childWidget) 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: number) => {
-            const interpolated = this.interpolate(from, to, progress);
-            this.currentValues = interpolated;
-            this.applyValues(interpolated);
-        });
-
-        const animation = this.createAnimation(childWidget, callback);
-
-        animation.connect("done", () => {
-            this.currentValues = { ...to };
-            this.currentAnimation = null;
-            this.props.onAnimationComplete?.();
-            onComplete?.();
-        });
-
-        this.currentAnimation = animation;
-
-        const delay = (this.props as AdwTimedAnimationProps | AdwSpringAnimationProps).delay ?? 0;
-
-        if (delay > 0) {
-            setTimeout(() => {
-                if (this.currentAnimation === animation) {
-                    animation.play();
-                }
-            }, delay);
-        } else {
-            animation.play();
-        }
-    }
-
-    private createAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.Animation {
-        if (this.typeName === "AdwSpringAnimation") {
-            return this.createSpringAnimation(widget, target);
-        }
-
-        return this.createTimedAnimation(widget, target);
-    }
-
-    private createTimedAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.TimedAnimation {
-        const props = this.props as AdwTimedAnimationProps;
-        const duration = props.duration ?? DEFAULT_TIMED_DURATION;
-
-        const animation = new Adw.TimedAnimation(widget, 0, 1, duration, target);
-
-        if (props.easing !== undefined) {
-            animation.setEasing(props.easing);
-        }
-
-        if (props.repeat !== undefined) {
-            animation.setRepeatCount(props.repeat);
-        }
-
-        if (props.reverse !== undefined) {
-            animation.setReverse(props.reverse);
-        }
-
-        if (props.alternate !== undefined) {
-            animation.setAlternate(props.alternate);
-        }
-
-        return animation;
-    }
-
-    private createSpringAnimation(widget: Gtk.Widget, target: Adw.CallbackAnimationTarget): Adw.SpringAnimation {
-        const props = this.props as AdwSpringAnimationProps;
-        const damping = props.damping ?? DEFAULT_SPRING_DAMPING;
-        const mass = props.mass ?? DEFAULT_SPRING_MASS;
-        const stiffness = props.stiffness ?? DEFAULT_SPRING_STIFFNESS;
-
-        const springParams = new Adw.SpringParams(damping, mass, stiffness);
-        const animation = new Adw.SpringAnimation(widget, 0, 1, springParams, target);
-
-        if (props.initialVelocity !== undefined) {
-            animation.setInitialVelocity(props.initialVelocity);
-        }
-
-        if (props.clamp !== undefined) {
-            animation.setClamp(props.clamp);
-        }
-
-        return animation;
-    }
-
-    private applyValues(values: AnimatableProperties): void {
-        if (!this.provider) {
-            return;
-        }
-
-        const childWidget = this.children[0]?.container ?? null;
-        if (childWidget && !childWidget.getCssClasses()?.includes(this.className)) {
-            childWidget.addCssClass(this.className);
-        }
-
-        const css = this.buildCss(this.className, values);
-        if (css) {
-            this.provider.loadFromString(css);
-        }
-    }
-
-    private getDefaultValue(property: keyof AnimatableProperties): number {
-        switch (property) {
-            case "opacity":
-            case "scale":
-            case "scaleX":
-            case "scaleY":
-                return 1;
-            default:
-                return 0;
-        }
-    }
-
-    private interpolate(from: AnimatableProperties, to: AnimatableProperties, progress: number): AnimatableProperties {
-        const result: AnimatableProperties = {};
-
-        const allKeys = new Set([...Object.keys(from), ...Object.keys(to)]) as Set<keyof AnimatableProperties>;
-
-        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;
-    }
-
-    private buildCss(className: string, props: AnimatableProperties): string {
-        const parts: string[] = [];
-        const transforms: string[] = [];
-
-        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("; ")}; }`;
-    }
-
-    private areAnimatedPropsEqual<T extends Record<string, unknown>>(a?: T, b?: T): boolean {
-        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;
-    }
-}

package/src/nodes/application.ts

@@ -1,61 +0,0 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import { Node } from "../node.js";
-import type { Container, Props } from "../types.js";
-import { MenuNode } from "./menu.js";
-import { MenuModel } from "./models/menu.js";
-import { WindowNode } from "./window.js";
-
-export class ApplicationNode extends Node<Gtk.Application, Props, Node, Node> {
-    private menu: MenuModel;
-
-    constructor(typeName: string, props: Props, container: Gtk.Application, rootContainer: Container) {
-        super(typeName, props, container, rootContainer);
-        const application = rootContainer instanceof Gtk.Application ? rootContainer : undefined;
-        this.menu = new MenuModel("root", {}, rootContainer, container, application);
-    }
-
-    public override isValidChild(): boolean {
-        return true;
-    }
-
-    public override appendChild(child: Node): void {
-        if (child instanceof MenuNode) {
-            this.menu.appendChild(child);
-            this.container.setMenubar(this.menu.getMenu());
-            return;
-        }
-
-        super.appendChild(child);
-    }
-
-    public override insertBefore(child: Node, before: Node): void {
-        if (child instanceof MenuNode) {
-            if (before instanceof MenuNode) {
-                this.menu.insertBefore(child, before);
-            } else {
-                this.menu.appendChild(child);
-            }
-            this.container.setMenubar(this.menu.getMenu());
-            return;
-        }
-
-        super.insertBefore(child, before);
-    }
-
-    public override removeChild(child: Node): void {
-        if (child instanceof MenuNode) {
-            this.menu.removeChild(child);
-
-            if (this.menu.getMenu().getNItems() === 0) {
-                this.container.setMenubar(null);
-            }
-            return;
-        }
-
-        if (child instanceof WindowNode) {
-            child.container.setVisible(false);
-        }
-
-        super.removeChild(child);
-    }
-}

package/src/nodes/calendar.ts

@@ -1,42 +0,0 @@
-import type * as Gtk from "@gtkx/ffi/gtk";
-import type { GtkCalendarProps } from "../jsx.js";
-import type { Node } from "../node.js";
-import { ContainerSlotNode } from "./container-slot.js";
-import { EventControllerNode } from "./event-controller.js";
-import { filterProps, primitiveArrayEqual } from "./internal/props.js";
-import { SlotNode } from "./slot.js";
-import { WidgetNode } from "./widget.js";
-
-const OWN_PROPS = ["markedDays"] as const;
-
-type CalendarProps = Pick<GtkCalendarProps, (typeof OWN_PROPS)[number]>;
-
-type CalendarChild = EventControllerNode | SlotNode | ContainerSlotNode;
-
-export class CalendarNode extends WidgetNode<Gtk.Calendar, CalendarProps, CalendarChild> {
-    public override isValidChild(child: Node): boolean {
-        return child instanceof EventControllerNode || child instanceof SlotNode || child instanceof ContainerSlotNode;
-    }
-    private appliedMarks: number[] = [];
-
-    public override commitUpdate(oldProps: CalendarProps | null, newProps: CalendarProps): void {
-        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
-        this.applyOwnProps(newProps);
-    }
-
-    private applyOwnProps(newProps: CalendarProps): void {
-        const newMarkedDays = newProps.markedDays ?? [];
-
-        if (primitiveArrayEqual(this.appliedMarks, newMarkedDays)) {
-            return;
-        }
-
-        this.container.clearMarks();
-
-        for (const day of newMarkedDays) {
-            this.container.markDay(day);
-        }
-
-        this.appliedMarks = [...newMarkedDays];
-    }
-}

package/src/nodes/color-dialog-button.ts

@@ -1,69 +0,0 @@
-import * as Gtk from "@gtkx/ffi/gtk";
-import type { GtkColorDialogButtonProps } from "../jsx.js";
-import type { Container } from "../types.js";
-import { filterProps, hasChanged } from "./internal/props.js";
-import { WidgetNode } from "./widget.js";
-
-const OWN_PROPS = ["rgba", "onRgbaChanged", "title", "modal", "withAlpha"] as const;
-
-type ColorDialogButtonProps = Pick<GtkColorDialogButtonProps, (typeof OWN_PROPS)[number]>;
-
-export class ColorDialogButtonNode extends WidgetNode<Gtk.ColorDialogButton, ColorDialogButtonProps> {
-    private dialog: Gtk.ColorDialog;
-
-    public static override createContainer(
-        _props: ColorDialogButtonProps,
-        containerClass: typeof Gtk.Widget,
-    ): Container | null {
-        const dialog = new Gtk.ColorDialog();
-        const button = new (containerClass as typeof Gtk.ColorDialogButton)(dialog);
-        return button;
-    }
-
-    constructor(
-        typeName: string,
-        props: ColorDialogButtonProps,
-        container: Gtk.ColorDialogButton,
-        rootContainer: Container,
-    ) {
-        super(typeName, props, container, rootContainer);
-        const dialog = container.getDialog();
-        if (!dialog) {
-            throw new Error("ColorDialogButton must have a dialog");
-        }
-        this.dialog = dialog;
-    }
-
-    public override commitUpdate(oldProps: ColorDialogButtonProps | null, newProps: ColorDialogButtonProps): void {
-        super.commitUpdate(oldProps ? filterProps(oldProps, OWN_PROPS) : null, filterProps(newProps, OWN_PROPS));
-        this.applyOwnProps(oldProps, newProps);
-    }
-
-    private applyOwnProps(oldProps: ColorDialogButtonProps | null, newProps: ColorDialogButtonProps): void {
-        if (hasChanged(oldProps, newProps, "title")) {
-            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")) {
-            const callback = newProps.onRgbaChanged;
-            this.signalStore.set(
-                this,
-                this.container,
-                "notify::rgba",
-                callback ? () => callback(this.container.getRgba()) : undefined,
-            );
-        }
-    }
-}