@gtkx/react 0.13.2 → 0.14.0

package/dist/nodes/tree-list-view.js

@@ -59,7 +59,12 @@ class TreeListViewNode extends WidgetNode {
         if (!oldProps || oldProps.estimatedItemHeight !== newProps.estimatedItemHeight) {
             this.itemRenderer.setEstimatedItemHeight(newProps.estimatedItemHeight);
         }
+        const previousModel = this.treeList.getSelectionModel();
         this.treeList.updateProps(oldProps ? filterProps(oldProps, RENDERER_PROP_NAMES) : null, filterProps(newProps, RENDERER_PROP_NAMES));
+        const currentModel = this.treeList.getSelectionModel();
+        if (previousModel !== currentModel) {
+            this.container.setModel(currentModel);
+        }
         super.updateProps(oldProps ? filterProps(oldProps, PROP_NAMES) : null, filterProps(newProps, PROP_NAMES));
     }
 }

package/dist/nodes/widget.d.ts

@@ -7,6 +7,8 @@ export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Pro
     private clickController?;
     private keyController?;
     private scrollController?;
+    private dragSourceController?;
+    private dropTargetController?;
     static matches(_type: string, containerOrClass?: Container | ContainerClass | null): boolean;
     static createContainer(props: Props, containerClass: typeof Gtk.Widget): Container | null;
     appendChild(child: Node): void;
@@ -15,7 +17,10 @@ export declare class WidgetNode<T extends Gtk.Widget = Gtk.Widget, P extends Pro
     private insertBeforeReorderable;
     private insertBeforeInsertable;
     updateProps(oldProps: P | null, newProps: P): void;
+    private updateSizeRequest;
     private updateEventControllerProp;
+    private ensureDragSource;
+    private ensureDropTarget;
     private updateNotifyHandler;
     private propNameToSignalName;
     private getProperty;

package/dist/nodes/widget.js

@@ -1,4 +1,5 @@
 import { batch, isObjectEqual, NativeObject } from "@gtkx/ffi";
+import * as Gdk from "@gtkx/ffi/gdk";
 import * as Gtk from "@gtkx/ffi/gtk";
 import { CONSTRUCTOR_PROPS } from "../generated/internal.js";
 import { Node } from "../node.js";
@@ -8,12 +9,15 @@ import { hasSingleContent, isAddable, isAppendable, isEditable, isInsertable, is
 import { signalStore } from "./internal/signal-store.js";
 import { filterProps, isContainerType, resolvePropMeta, resolveSignal } from "./internal/utils.js";
 import { SlotNode } from "./slot.js";
+const PROPS = ["children", "widthRequest", "heightRequest"];
 export class WidgetNode extends Node {
     static priority = 3;
     motionController;
     clickController;
     keyController;
     scrollController;
+    dragSourceController;
+    dropTargetController;
     static matches(_type, containerOrClass) {
         return isContainerType(Gtk.Widget, containerOrClass);
     }
@@ -89,9 +93,10 @@ export class WidgetNode extends Node {
         container.insert(child.container, position);
     }
     updateProps(oldProps, newProps) {
+        this.updateSizeRequest(oldProps, newProps);
         const propNames = new Set([
-            ...Object.keys(filterProps(oldProps ?? {}, ["children"])),
-            ...Object.keys(filterProps(newProps ?? {}, ["children"])),
+            ...Object.keys(filterProps(oldProps ?? {}, PROPS)),
+            ...Object.keys(filterProps(newProps ?? {}, PROPS)),
         ]);
         const pendingSignals = [];
         for (const name of propNames) {
@@ -136,8 +141,19 @@ export class WidgetNode extends Node {
             }
         }
     }
-    updateEventControllerProp(propName, handler) {
-        const wrappedHandler = handler ? (_self, ...args) => handler(...args) : undefined;
+    updateSizeRequest(oldProps, newProps) {
+        const oldWidth = oldProps?.widthRequest;
+        const oldHeight = oldProps?.heightRequest;
+        const newWidth = newProps.widthRequest;
+        const newHeight = newProps.heightRequest;
+        if (oldWidth !== newWidth || oldHeight !== newHeight) {
+            this.container.setSizeRequest(newWidth ?? -1, newHeight ?? -1);
+        }
+    }
+    updateEventControllerProp(propName, handlerOrValue) {
+        const wrappedHandler = typeof handlerOrValue === "function"
+            ? (_self, ...args) => handlerOrValue(...args)
+            : undefined;
         switch (propName) {
             case "onEnter":
             case "onLeave":
@@ -178,7 +194,69 @@ export class WidgetNode extends Node {
                 signalStore.set(this, this.scrollController, "scroll", wrappedHandler);
                 break;
             }
+            case "onDragPrepare":
+            case "onDragBegin":
+            case "onDragEnd":
+            case "onDragCancel":
+            case "dragActions": {
+                const dragSource = this.ensureDragSource();
+                if (propName === "dragActions") {
+                    dragSource.setActions(handlerOrValue ?? Gdk.DragAction.COPY);
+                }
+                else {
+                    const signalName = propName === "onDragPrepare"
+                        ? "prepare"
+                        : propName === "onDragBegin"
+                            ? "drag-begin"
+                            : propName === "onDragEnd"
+                                ? "drag-end"
+                                : "drag-cancel";
+                    signalStore.set(this, dragSource, signalName, wrappedHandler);
+                }
+                break;
+            }
+            case "onDrop":
+            case "onDropEnter":
+            case "onDropLeave":
+            case "onDropMotion":
+            case "dropActions":
+            case "dropTypes": {
+                const dropTarget = this.ensureDropTarget();
+                if (propName === "dropActions") {
+                    dropTarget.setActions(handlerOrValue ?? Gdk.DragAction.COPY);
+                }
+                else if (propName === "dropTypes") {
+                    const types = handlerOrValue ?? [];
+                    dropTarget.setGtypes(types.length, types);
+                }
+                else {
+                    const signalName = propName === "onDrop"
+                        ? "drop"
+                        : propName === "onDropEnter"
+                            ? "enter"
+                            : propName === "onDropLeave"
+                                ? "leave"
+                                : "motion";
+                    signalStore.set(this, dropTarget, signalName, wrappedHandler);
+                }
+                break;
+            }
+        }
+    }
+    ensureDragSource() {
+        if (!this.dragSourceController) {
+            this.dragSourceController = new Gtk.DragSource();
+            this.dragSourceController.setActions(Gdk.DragAction.COPY);
+            this.container.addController(this.dragSourceController);
+        }
+        return this.dragSourceController;
+    }
+    ensureDropTarget() {
+        if (!this.dropTargetController) {
+            this.dropTargetController = new Gtk.DropTarget(0, Gdk.DragAction.COPY);
+            this.container.addController(this.dropTargetController);
         }
+        return this.dropTargetController;
     }
     updateNotifyHandler(handler) {
         const wrappedHandler = handler

package/dist/render.d.ts

@@ -9,9 +9,9 @@ import { type ReactNode } from "react";
  * @example
  * ```tsx
  * const App = () => {
- *   const app = useApplication();
- *   console.log(app.applicationId);
- *   return <GtkLabel label="Hello" />;
+ * const app = useApplication();
+ * console.log(app.applicationId);
+ * return <GtkLabel label="Hello" />;
  * };
  * ```
  */
@@ -27,8 +27,8 @@ export declare const ApplicationContext: React.Context<Gtk.Application | null>;
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const app = useApplication();
- *   return <GtkLabel label={app.applicationId} />;
+ * const app = useApplication();
+ * return <GtkLabel label={app.applicationId} />;
  * };
  * ```
  *
@@ -69,9 +69,9 @@ export declare const setHotReloading: (value: boolean) => void;
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkLabel label="Hello, GTKX!" />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkLabel label="Hello, GTKX!" />
+ * </GtkApplicationWindow>
  * );
  *
  * render(<App />, "com.example.myapp");
@@ -94,9 +94,9 @@ export declare const render: (element: ReactNode, appId: string, flags?: Gio.App
  * ```tsx
  * // In HMR handler
  * if (import.meta.hot) {
- *   import.meta.hot.accept(() => {
- *     update(<App />);
- *   });
+ * import.meta.hot.accept(() => {
+ * update(<App />);
+ * });
  * }
  * ```
  *
@@ -114,9 +114,9 @@ export declare const update: (element: ReactNode) => Promise<void>;
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkButton label="Quit" onClicked={quit} />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkButton label="Quit" onClicked={quit} />
+ * </GtkApplicationWindow>
  * );
  * ```
  *

package/dist/render.js

@@ -11,9 +11,9 @@ import { reconciler } from "./reconciler.js";
  * @example
  * ```tsx
  * const App = () => {
- *   const app = useApplication();
- *   console.log(app.applicationId);
- *   return <GtkLabel label="Hello" />;
+ * const app = useApplication();
+ * console.log(app.applicationId);
+ * return <GtkLabel label="Hello" />;
  * };
  * ```
  */
@@ -29,8 +29,8 @@ export const ApplicationContext = createContext(null);
  * @example
  * ```tsx
  * const MyComponent = () => {
- *   const app = useApplication();
- *   return <GtkLabel label={app.applicationId} />;
+ * const app = useApplication();
+ * return <GtkLabel label={app.applicationId} />;
  * };
  * ```
  *
@@ -84,9 +84,9 @@ export const setHotReloading = (value) => {
  * import { render, quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkLabel label="Hello, GTKX!" />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkLabel label="Hello, GTKX!" />
+ * </GtkApplicationWindow>
  * );
  *
  * render(<App />, "com.example.myapp");
@@ -121,9 +121,9 @@ export const render = (element, appId, flags) => {
  * ```tsx
  * // In HMR handler
  * if (import.meta.hot) {
- *   import.meta.hot.accept(() => {
- *     update(<App />);
- *   });
+ * import.meta.hot.accept(() => {
+ * update(<App />);
+ * });
  * }
  * ```
  *
@@ -147,9 +147,9 @@ export const update = (element) => {
  * import { quit } from "@gtkx/react";
  *
  * const App = () => (
- *   <GtkApplicationWindow title="My App" onClose={quit}>
- *     <GtkButton label="Quit" onClicked={quit} />
- *   </GtkApplicationWindow>
+ * <GtkApplicationWindow title="My App" onClose={quit}>
+ * <GtkButton label="Quit" onClicked={quit} />
+ * </GtkApplicationWindow>
  * );
  * ```
  *

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 import type * as Gdk from "@gtkx/ffi/gdk";
+import type * as GObject from "@gtkx/ffi/gobject";
 import type * as Gtk from "@gtkx/ffi/gtk";
 export type Container = Gtk.Widget | Gtk.Application;
 export type Props = Record<string, unknown>;
@@ -7,7 +8,7 @@ export type ContainerClass = typeof Gtk.Widget | typeof Gtk.Application;
  * Props for EventController-based event handlers.
  *
  * These props attach EventControllers to widgets for handling
- * pointer motion, clicks, and keyboard events.
+ * pointer motion, clicks, keyboard events, and drag-and-drop.
  */
 export interface EventControllerProps {
     /** Called when the pointer enters the widget */
@@ -27,3 +28,85 @@ export interface EventControllerProps {
     /** Called when the widget is scrolled */
     onScroll?: (dx: number, dy: number) => boolean;
 }
+/**
+ * Props for DragSource controller.
+ *
+ * Enables dragging content from a widget. Attach a DragSource to make
+ * a widget draggable.
+ */
+export interface DragSourceProps {
+    /**
+     * Called when a drag is about to start. Return a ContentProvider with the data
+     * to be dragged, or null to cancel the drag.
+     * @param x - X coordinate where drag started
+     * @param y - Y coordinate where drag started
+     */
+    onDragPrepare?: (x: number, y: number) => Gdk.ContentProvider | null;
+    /**
+     * Called when the drag operation begins.
+     * @param drag - The Gdk.Drag object representing the ongoing drag
+     */
+    onDragBegin?: (drag: Gdk.Drag) => void;
+    /**
+     * Called when the drag operation ends.
+     * @param drag - The Gdk.Drag object
+     * @param deleteData - Whether the data should be deleted (for move operations)
+     */
+    onDragEnd?: (drag: Gdk.Drag, deleteData: boolean) => void;
+    /**
+     * Called when the drag operation is cancelled.
+     * @param drag - The Gdk.Drag object
+     * @param reason - The reason for cancellation
+     * @returns true if the cancel was handled
+     */
+    onDragCancel?: (drag: Gdk.Drag, reason: Gdk.DragCancelReason) => boolean;
+    /**
+     * The allowed drag actions (COPY, MOVE, LINK, ASK).
+     * Defaults to Gdk.DragAction.COPY if not specified.
+     */
+    dragActions?: Gdk.DragAction;
+}
+/**
+ * Props for DropTarget controller.
+ *
+ * Enables dropping content onto a widget. Attach a DropTarget to make
+ * a widget accept drops.
+ */
+export interface DropTargetProps {
+    /**
+     * Called when content is dropped on the widget.
+     * @param value - The dropped value (use value.getTypeName() to check type, then extract)
+     * @param x - X coordinate of drop
+     * @param y - Y coordinate of drop
+     * @returns true if the drop was accepted
+     */
+    onDrop?: (value: GObject.Value, x: number, y: number) => boolean;
+    /**
+     * Called when a drag enters the widget bounds.
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @returns The preferred action, or 0 to reject
+     */
+    onDropEnter?: (x: number, y: number) => Gdk.DragAction;
+    /**
+     * Called when a drag leaves the widget bounds.
+     */
+    onDropLeave?: () => void;
+    /**
+     * Called when a drag moves within the widget bounds.
+     * @param x - X coordinate
+     * @param y - Y coordinate
+     * @returns The preferred action, or 0 to reject
+     */
+    onDropMotion?: (x: number, y: number) => Gdk.DragAction;
+    /**
+     * The allowed drop actions (COPY, MOVE, LINK, ASK).
+     * Defaults to Gdk.DragAction.COPY if not specified.
+     */
+    dropActions?: Gdk.DragAction;
+    /**
+     * Array of GTypes that this drop target accepts.
+     * Use typeFromName() to get GType values (e.g., typeFromName("gchararray") for strings).
+     */
+    dropTypes?: number[];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gtkx/react",
-  "version": "0.13.2",
+  "version": "0.14.0",
   "description": "Build GTK4 desktop applications with React and TypeScript",
   "keywords": [
     "gtkx",
@@ -37,8 +37,8 @@
   ],
   "dependencies": {
     "react-reconciler": "^0.33.0",
-    "@gtkx/ffi": "0.13.2",
-    "@gtkx/gir": "0.13.2"
+    "@gtkx/ffi": "0.14.0",
+    "@gtkx/gir": "0.14.0"
   },
   "devDependencies": {
     "@types/react-reconciler": "^0.32.3"