@gtkx/components 1.0.0-rc.1 → 1.0.0-rc.2

package/src/hooks/use-sort-handler.ts

@@ -1,107 +0,0 @@
-import * as Gtk from "@gtkx/gi/gtk";
-import { type ObjectProp, resolveObjectProp } from "@gtkx/react/internal";
-import { useLayoutEffect, useRef } from "react";
-
-export type ColumnRegistration = {
-    id: string;
-    column: Gtk.ColumnViewColumn;
-    sortable: boolean;
-};
-
-type SortHandlerOptions = {
-    columnView: ObjectProp<Gtk.ColumnView>;
-    sortColumn: string | null | undefined;
-    sortOrder: Gtk.SortType | null | undefined;
-    onSortChanged: ((column: string | null, order: Gtk.SortType) => void) | null | undefined;
-    columns: ColumnRegistration[];
-};
-
-const neutralSorter = (): Gtk.CustomSorter => Gtk.CustomSorter.new(() => 0);
-
-const ensureColumnSorters = (columns: ColumnRegistration[], activeId: string | null): void => {
-    for (const registration of columns) {
-        const wantsSorter = registration.sortable || registration.id === activeId;
-        const hasSorter = registration.column.getSorter() !== null;
-        if (wantsSorter && !hasSorter) {
-            registration.column.setSorter(neutralSorter());
-        } else if (!wantsSorter && hasSorter) {
-            registration.column.setSorter(null);
-        }
-    }
-};
-
-const columnForId = (columns: ColumnRegistration[], id: string | null): Gtk.ColumnViewColumn | null => {
-    if (id === null) return null;
-    for (const registration of columns) {
-        if (registration.id === id) return registration.column;
-    }
-    return null;
-};
-
-const idForColumn = (columns: ColumnRegistration[], column: Gtk.ColumnViewColumn | null): string | null => {
-    if (column === null) return null;
-    for (const registration of columns) {
-        if (registration.column === column) return registration.id;
-    }
-    return column.getId();
-};
-
-const primarySort = (sorter: Gtk.Sorter): { column: Gtk.ColumnViewColumn | null; order: Gtk.SortType } =>
-    sorter instanceof Gtk.ColumnViewSorter
-        ? { column: sorter.getPrimarySortColumn(), order: sorter.getPrimarySortOrder() }
-        : { column: null, order: Gtk.SortType.ASCENDING };
-
-type SorterSubscription = {
-    sorter: Gtk.Sorter | null;
-    handler: ((change: Gtk.SorterChange) => void) | null;
-};
-
-const disconnectSorter = (subscription: SorterSubscription): void => {
-    if (subscription.sorter !== null && subscription.handler !== null) {
-        subscription.sorter.off("changed", subscription.handler);
-    }
-    subscription.sorter = null;
-    subscription.handler = null;
-};
-
-export const useSortHandler = (options: SortHandlerOptions): void => {
-    const { columnView, sortColumn, sortOrder, onSortChanged, columns } = options;
-    const activeId = sortColumn ?? null;
-    const order = sortOrder ?? Gtk.SortType.ASCENDING;
-
-    const onChangedRef = useRef(onSortChanged);
-    onChangedRef.current = onSortChanged;
-    const columnsRef = useRef(columns);
-    columnsRef.current = columns;
-    const suppressRef = useRef(false);
-    const subscriptionRef = useRef<SorterSubscription>({ sorter: null, handler: null });
-
-    const resubscribe = (sorter: Gtk.Sorter | null): void => {
-        const subscription = subscriptionRef.current;
-        if (sorter === subscription.sorter) return;
-        disconnectSorter(subscription);
-        if (sorter === null) return;
-        const handler = (): void => {
-            if (suppressRef.current) return;
-            const callback = onChangedRef.current;
-            if (!callback) return;
-            const { column, order: primaryOrder } = primarySort(sorter);
-            callback(idForColumn(columnsRef.current, column), primaryOrder);
-        };
-        subscription.sorter = sorter;
-        subscription.handler = handler;
-        sorter.on("changed", handler);
-    };
-
-    useLayoutEffect(() => {
-        const view = resolveObjectProp(columnView);
-        if (view === null) return;
-        ensureColumnSorters(columns, activeId);
-        suppressRef.current = true;
-        view.sortByColumn(columnForId(columns, activeId), order);
-        suppressRef.current = false;
-        resubscribe(view.getSorter());
-    });
-
-    useLayoutEffect(() => () => disconnectSorter(subscriptionRef.current), []);
-};

package/src/menu-items.ts

@@ -1,48 +0,0 @@
-import * as Gio from "@gtkx/gi/gio";
-import type { MenuEntry } from "./types.js";
-
-const buildMenuModel = (entries: MenuEntry[]): Gio.Menu => {
-    const menu = new Gio.Menu();
-    appendEntries(menu, entries);
-    return menu;
-};
-
-const appendEntries = (menu: Gio.Menu, entries: MenuEntry[]): void => {
-    for (const entry of entries) {
-        if (entry.section !== undefined) {
-            menu.appendSection(entry.label ?? null, buildMenuModel(entry.section));
-            continue;
-        }
-        if (entry.submenu !== undefined) {
-            menu.appendSubmenu(entry.label ?? null, buildMenuModel(entry.submenu));
-            continue;
-        }
-        const item = new Gio.MenuItem();
-        if (entry.label !== undefined) item.setLabel(entry.label);
-        if (entry.action !== undefined) item.setDetailedAction(entry.action);
-        menu.appendItem(item);
-    }
-};
-
-export const applyMenuItems = (menu: Gio.Menu, entries: MenuEntry[] | null): void => {
-    menu.removeAll();
-    if (entries) appendEntries(menu, entries);
-};
-
-const entryEqual = (a: MenuEntry, b: MenuEntry): boolean =>
-    a.label === b.label &&
-    a.action === b.action &&
-    entryListEqual(a.submenu, b.submenu) &&
-    entryListEqual(a.section, b.section);
-
-const entryListEqual = (a: MenuEntry[] | undefined, b: MenuEntry[] | undefined): boolean => {
-    if (a === b) return true;
-    if (a === undefined || b === undefined) return false;
-    return a.length === b.length && a.every((entry, index) => entryEqual(entry, b[index] as MenuEntry));
-};
-
-export const menuItemsEqual = (a: MenuEntry[] | null, b: MenuEntry[] | null): boolean => {
-    if (a === b) return true;
-    if (a === null || b === null) return false;
-    return entryListEqual(a, b);
-};

package/src/menu.tsx

@@ -1,32 +0,0 @@
-import type * as Gio from "@gtkx/gi/gio";
-import { GMenu, type GMenuProps } from "@gtkx/jsx/gio";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { type ReactNode, type Ref, useLayoutEffect, useRef } from "react";
-import { applyMenuItems, menuItemsEqual } from "./menu-items.js";
-import type { MenuEntry } from "./types.js";
-
-export type MenuItemsProps = {
-    items?: MenuEntry[] | null | undefined;
-};
-
-/** Props for {@link Menu}, combining Gio.Menu props with a declarative items array. */
-export type MenuProps = Omit<GMenuProps, keyof MenuItemsProps> & MenuItemsProps & { ref?: Ref<Gio.Menu | null> };
-
-/** Builds a Gio.Menu model from a declarative array of {@link MenuEntry} items. */
-export const Menu = (props: MenuProps): ReactNode => {
-    const { items, ref, ...rest } = props;
-    const menuRef = useRef<Gio.Menu | null>(null);
-    const mergedRef = useMergeRefs(ref, menuRef);
-    const appliedRef = useRef<MenuEntry[] | null>(null);
-
-    useLayoutEffect(() => {
-        const menu = menuRef.current;
-        if (!menu) return;
-        const entries = items ?? null;
-        if (menuItemsEqual(appliedRef.current, entries)) return;
-        appliedRef.current = entries;
-        applyMenuItems(menu, entries);
-    });
-
-    return <GMenu {...rest} ref={mergedRef} />;
-};

package/src/overlay.tsx

@@ -1,88 +0,0 @@
-import type * as Gtk from "@gtkx/gi/gtk";
-import { GtkOverlay, type GtkOverlayProps } from "@gtkx/jsx/gtk";
-import { useMergeRefs } from "@gtkx/react/internal";
-import { Children, type ElementType, isValidElement, type ReactNode, type Ref, useRef } from "react";
-import { createParentContext, usePlacedChild } from "./hooks/use-placed-child.js";
-import type { ChildProps } from "./types.js";
-
-const { Context: OverlayContext, useParentRef: useOverlayRef } = createParentContext<Gtk.Overlay>(
-    "<Overlay.Child> must be a child of <Overlay>",
-);
-
-/** Props for {@link Overlay}. */
-export type OverlayProps = GtkOverlayProps & { ref?: Ref<Gtk.Overlay | null> };
-
-export type OverlayPlacementProps = {
-    /** Whether this overlay contributes to the Overlay's measured size. */
-    measure?: boolean | null | undefined;
-    /** Whether the overlay is clipped to the main child's allocation. */
-    clipOverlay?: boolean | null | undefined;
-};
-
-/** Adds a single widget as an overlay on top of an {@link Overlay}'s main child. */
-export type OverlayChildProps<C extends ElementType> = ChildProps<C, OverlayPlacementProps>;
-
-type OverlayPlacement = { measure: boolean; clipOverlay: boolean };
-
-const placementOf = (props: OverlayPlacementProps): OverlayPlacement => ({
-    measure: props.measure ?? false,
-    clipOverlay: props.clipOverlay ?? false,
-});
-
-const samePlacement = (a: OverlayPlacement, b: OverlayPlacement): boolean =>
-    a.measure === b.measure && a.clipOverlay === b.clipOverlay;
-
-const OverlayChild = <C extends ElementType>({
-    component,
-    measure,
-    clipOverlay,
-    ref,
-    ...rest
-}: OverlayChildProps<C>): ReactNode => {
-    const overlayRef = useOverlayRef();
-    const Component: ElementType = component;
-    return usePlacedChild<Gtk.Widget, OverlayPlacement>({
-        render: (placeRef) => <Component {...rest} ref={placeRef} />,
-        ref,
-        placement: placementOf({ measure, clipOverlay }),
-        samePlacement,
-        place: (widget, placement) => {
-            const overlay = overlayRef.current;
-            if (!overlay) return;
-            if (widget.getParent() !== overlay) overlay.addOverlay(widget);
-            overlay.setMeasureOverlay(widget, placement.measure);
-            overlay.setClipOverlay(widget, placement.clipOverlay);
-        },
-        release: (widget) => {
-            const overlay = overlayRef.current;
-            if (overlay && widget.getParent() === overlay) overlay.removeOverlay(widget);
-        },
-    });
-};
-
-const isOverlayChild = (node: ReactNode): boolean => isValidElement(node) && node.type === OverlayChild;
-
-/**
- * Renders a Gtk.Overlay: a main child with one or more widgets stacked on top,
- * declared via {@link Overlay.Child}. Non-Child children form the main content.
- */
-export const Overlay: ((props: OverlayProps) => ReactNode) & {
-    Child: <C extends ElementType>(props: OverlayChildProps<C>) => ReactNode;
-} = Object.assign(
-    ({ children, ref, ...rest }: OverlayProps): ReactNode => {
-        const overlayRef = useRef<Gtk.Overlay | null>(null);
-        const mergedRef = useMergeRefs<Gtk.Overlay>(ref, overlayRef);
-        const items = Children.toArray(children);
-        const overlays = items.filter(isOverlayChild);
-        const base = items.filter((node) => !isOverlayChild(node));
-        return (
-            <>
-                <GtkOverlay {...rest} ref={mergedRef}>
-                    {base}
-                </GtkOverlay>
-                <OverlayContext.Provider value={overlayRef}>{overlays}</OverlayContext.Provider>
-            </>
-        );
-    },
-    { Child: OverlayChild },
-);

package/src/utils/cell-container-store.ts

@@ -1,114 +0,0 @@
-import type * as GObject from "@gtkx/gi/gobject";
-import type * as Gtk from "@gtkx/gi/gtk";
-
-export type CellEntry = {
-    position: number;
-    treeRow: Gtk.TreeListRow | null;
-};
-
-let nextKey = 0;
-
-export class CellContainerStore {
-    private entries = new Map<GObject.Object, CellEntry>();
-
-    private published = new Map<GObject.Object, CellEntry>();
-
-    private setListeners = new Set<() => void>();
-
-    private positionListeners = new Map<GObject.Object, Set<() => void>>();
-
-    private positionFlushers = new Map<GObject.Object, () => void>();
-
-    private keys = new WeakMap<GObject.Object, string>();
-
-    private snapshot: GObject.Object[] = [];
-
-    subscribeSet = (onChange: () => void): (() => void) => {
-        this.setListeners.add(onChange);
-        return () => {
-            this.setListeners.delete(onChange);
-        };
-    };
-
-    getContainersSnapshot = (): GObject.Object[] => this.snapshot;
-
-    subscribePosition = (container: GObject.Object, onChange: () => void): (() => void) => {
-        let listeners = this.positionListeners.get(container);
-        if (listeners === undefined) {
-            listeners = new Set();
-            this.positionListeners.set(container, listeners);
-        }
-        listeners.add(onChange);
-        return () => {
-            const current = this.positionListeners.get(container);
-            if (current === undefined) return;
-            current.delete(onChange);
-            if (current.size === 0) this.positionListeners.delete(container);
-        };
-    };
-
-    getPosition = (container: GObject.Object): CellEntry => {
-        let entry = this.published.get(container);
-        if (entry === undefined) {
-            entry = { position: -1, treeRow: null };
-            this.published.set(container, entry);
-        }
-        return entry;
-    };
-
-    keyFor = (container: GObject.Object): string => {
-        const existing = this.keys.get(container);
-        if (existing !== undefined) return existing;
-        const key = `cell-${nextKey++}`;
-        this.keys.set(container, key);
-        return key;
-    };
-
-    addContainer = (container: GObject.Object): void => {
-        if (this.entries.has(container)) return;
-        this.entries.set(container, { position: -1, treeRow: null });
-        this.notifySet();
-    };
-
-    bind = (container: GObject.Object, position: number, treeRow: Gtk.TreeListRow | null): void => {
-        this.entries.set(container, { position, treeRow });
-        this.notifyPosition(container);
-    };
-
-    unbind = (container: GObject.Object): void => {
-        if (!this.entries.has(container)) return;
-        this.entries.set(container, { position: -1, treeRow: null });
-        this.notifyPosition(container);
-    };
-
-    removeContainer = (container: GObject.Object): void => {
-        if (!this.entries.delete(container)) return;
-        this.published.delete(container);
-        this.positionFlushers.delete(container);
-        this.notifySet();
-    };
-
-    private flushSet = (): void => {
-        this.snapshot = [...this.entries.keys()];
-        for (const listener of [...this.setListeners]) listener();
-    };
-
-    private notifySet(): void {
-        this.flushSet();
-    }
-
-    private notifyPosition(container: GObject.Object): void {
-        let flush = this.positionFlushers.get(container);
-        if (flush === undefined) {
-            flush = (): void => {
-                const live = this.entries.get(container);
-                if (live !== undefined) this.published.set(container, live);
-                const listeners = this.positionListeners.get(container);
-                if (listeners === undefined) return;
-                for (const listener of [...listeners]) listener();
-            };
-            this.positionFlushers.set(container, flush);
-        }
-        flush();
-    }
-}

package/src/utils/item-models.ts

@@ -1,113 +0,0 @@
-import * as Gio from "@gtkx/gi/gio";
-import type * as GObject from "@gtkx/gi/gobject";
-import * as Gtk from "@gtkx/gi/gtk";
-import type { ItemNode, SectionNode } from "../types.js";
-import type { RowValue } from "./item-resolver.js";
-import { countDescendants, treeItemMetadata } from "./list-item-flatten.js";
-
-const emptyStrings = (count: number): string[] => new Array<string>(Math.max(0, count)).fill("");
-
-export const retagRows = <T>(
-    items: ItemNode<T>[],
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    placeholdersById: Map<string, GObject.Object>,
-): void => {
-    const walk = (list: ItemNode<T>[]): void => {
-        for (const item of list) {
-            const placeholder = placeholdersById.get(item.id);
-            if (placeholder !== undefined) {
-                rowValues.set(placeholder, {
-                    id: item.id,
-                    value: item.value,
-                    metadata: treeItemMetadata(item),
-                });
-            }
-            if (item.children !== undefined && item.children.length > 0) walk(item.children);
-        }
-    };
-    walk(items);
-};
-
-export const createFlatModel = (count: number): Gtk.StringList => Gtk.StringList.new(emptyStrings(count));
-
-export const resizeFlatModel = (model: Gtk.StringList, count: number): void => {
-    const target = Math.max(0, count);
-    const current = model.getNItems();
-    if (current === target) return;
-    if (target > current) {
-        model.splice(current, 0, emptyStrings(target - current));
-        return;
-    }
-    model.splice(target, current - target, null);
-};
-
-const createTaggedRow = <T>(
-    row: RowValue<T>,
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    placeholdersById?: Map<string, GObject.Object>,
-): GObject.Object => {
-    const placeholder = Gtk.StringObject.new("");
-    rowValues.set(placeholder, row);
-    if (placeholdersById !== undefined) placeholdersById.set(row.id, placeholder);
-    return placeholder;
-};
-
-const childModelOf = <T>(
-    children: ItemNode<T>[],
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    placeholdersById: Map<string, GObject.Object>,
-): Gio.ListStore => {
-    const store = Gio.ListStore.new(Gtk.StringObject.prototype.__type__);
-    for (const child of children) {
-        store.append(
-            createTaggedRow(
-                { id: child.id, value: child.value, metadata: treeItemMetadata(child) },
-                rowValues,
-                placeholdersById,
-            ),
-        );
-    }
-    return store;
-};
-
-export const createTreeModel = <T>(
-    items: ItemNode<T>[],
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    placeholdersById: Map<string, GObject.Object>,
-): Gtk.TreeListModel => {
-    const childrenByRow = new WeakMap<GObject.Object, ItemNode<T>[]>();
-    const root = Gio.ListStore.new(Gtk.StringObject.prototype.__type__);
-    for (const item of items) {
-        const placeholder = createTaggedRow(
-            { id: item.id, value: item.value, metadata: treeItemMetadata(item) },
-            rowValues,
-            placeholdersById,
-        );
-        if (item.children !== undefined && item.children.length > 0) {
-            childrenByRow.set(placeholder, item.children);
-        }
-        root.append(placeholder);
-    }
-    const createFunc = (rowItem: GObject.Object): Gio.ListModel | null => {
-        const children = childrenByRow.get(rowItem);
-        if (children === undefined) return null;
-        const store = childModelOf(children, rowValues, placeholdersById);
-        for (let index = 0; index < children.length; index++) {
-            const child = children[index];
-            if (child !== undefined && child.children !== undefined && child.children.length > 0) {
-                const placeholder = store.getItem(index);
-                if (placeholder !== null) childrenByRow.set(placeholder, child.children);
-            }
-        }
-        return store;
-    };
-    return Gtk.TreeListModel.new(root, false, false, createFunc);
-};
-
-export const createSectionModel = <S, T>(sections: SectionNode<S, T>[]): Gtk.FlattenListModel => {
-    const store = Gio.ListStore.new(Gtk.StringList.prototype.__type__);
-    for (const section of sections) {
-        store.append(Gtk.StringList.new(emptyStrings(countDescendants(section.data))));
-    }
-    return Gtk.FlattenListModel.new(store);
-};

package/src/utils/item-resolver.ts

@@ -1,138 +0,0 @@
-import type * as GObject from "@gtkx/gi/gobject";
-import type * as Gtk from "@gtkx/gi/gtk";
-import type { ItemNode, SectionNode } from "../types.js";
-import { countDescendants, flattenListItems, type TreeItemMetadata } from "./list-item-flatten.js";
-
-const NO_TREE_METADATA: TreeItemMetadata = { hideExpander: false, indentForDepth: true, indentForIcon: true };
-
-const treeItemCache = new WeakMap<Gtk.TreeListRow, GObject.Object>();
-
-const treeRowItem = (treeRow: Gtk.TreeListRow): GObject.Object | null => {
-    const cached = treeItemCache.get(treeRow);
-    if (cached !== undefined) return cached;
-    const item = treeRow.getItem();
-    if (item !== null) treeItemCache.set(treeRow, item);
-    return item;
-};
-
-export type Resolved<T = unknown, S = unknown> = {
-    value: T | S | undefined;
-    present: boolean;
-    isHeader: boolean;
-    metadata: TreeItemMetadata;
-};
-
-export type ItemResolver<T = unknown, S = unknown> = {
-    resolve(position: number, treeRow: Gtk.TreeListRow | null): Resolved<T, S>;
-    positionOfId(id: string): number;
-    idOf(position: number): string | undefined;
-};
-
-export type RowValue<T = unknown> = {
-    id: string;
-    value: T;
-    metadata: TreeItemMetadata;
-};
-
-export const rowIdOf = <T>(
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    row: Gtk.TreeListRow,
-): string | undefined => {
-    const item = row.getItem();
-    return item === null ? undefined : rowValues.get(item)?.id;
-};
-
-export const createItemResolver = <T, S>(
-    items: ItemNode<T>[] | undefined,
-    flattenTreeChildren: boolean,
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-): ItemResolver<T, S> => {
-    const flattened = flattenListItems(items, flattenTreeChildren);
-    return {
-        positionOfId(id: string): number {
-            const position = flattened.idToPosition.get(id);
-            return position === undefined ? -1 : position;
-        },
-        idOf(position: number): string | undefined {
-            return flattened.positionToId.get(position);
-        },
-        resolve(position: number, treeRow: Gtk.TreeListRow | null): Resolved<T, S> {
-            if (treeRow !== null && !flattenTreeChildren) {
-                const rowItem = treeRowItem(treeRow);
-                if (rowItem !== null) {
-                    const tagged = rowValues.get(rowItem);
-                    if (tagged !== undefined) {
-                        return {
-                            value: tagged.value,
-                            present: true,
-                            isHeader: false,
-                            metadata: tagged.metadata,
-                        };
-                    }
-                }
-            }
-            const record = flattened.records[position];
-            if (record === undefined) {
-                return {
-                    value: undefined,
-                    present: false,
-                    isHeader: false,
-                    metadata: NO_TREE_METADATA,
-                };
-            }
-            return {
-                value: record.value,
-                present: true,
-                isHeader: false,
-                metadata: record.metadata,
-            };
-        },
-    };
-};
-
-export const createSectionHeaderResolver = <T, S>(sections: SectionNode<S, T>[] | undefined): ItemResolver<T, S> => {
-    const valueByStart = new Map<number, S>();
-    let start = 0;
-    for (const section of sections ?? []) {
-        valueByStart.set(start, section.value);
-        start += countDescendants(section.data);
-    }
-    return {
-        positionOfId: () => -1,
-        idOf: () => undefined,
-        resolve(position: number): Resolved<T, S> {
-            if (!valueByStart.has(position)) {
-                return { value: undefined, present: false, isHeader: true, metadata: NO_TREE_METADATA };
-            }
-            return {
-                value: valueByStart.get(position),
-                present: true,
-                isHeader: true,
-                metadata: NO_TREE_METADATA,
-            };
-        },
-    };
-};
-
-export const createTreeResolver = <T, S>(
-    items: ItemNode<T>[] | undefined,
-    rowValues: WeakMap<GObject.Object, RowValue<T>>,
-    model: Gtk.TreeListModel,
-): ItemResolver<T, S> => {
-    const base = createItemResolver<T, S>(items, false, rowValues);
-    return {
-        resolve: base.resolve,
-        idOf: (position: number): string | undefined => {
-            const row = model.getRow(position);
-            return row === null ? undefined : rowIdOf(rowValues, row);
-        },
-        positionOfId: (id: string): number => {
-            const count = model.getNItems();
-            for (let position = 0; position < count; position++) {
-                const row = model.getRow(position);
-                if (row !== null && rowIdOf(rowValues, row) === id) return position;
-            }
-            return -1;
-        },
-    };
-};