wuira 0.1.0 → 0.1.2

package/src/ui/layout/measureLayout.ts

@@ -1,87 +0,0 @@
-import type { ICell, Size } from "../Cell";
-import type { IFlowLayout } from "../FlowLayout";
-import type { IGridLayout } from "../GridLayout";
-import type { Element } from "../primitives/jsx";
-import { resolveSpacing, Insets } from "../../types/Spacing";
-import { calculateFlow } from "./calculateFlow";
-import { calculateGrid } from "./calculateGrid";
-
-export interface MeasuredCell {
-    cell: ICell;
-    width: number;
-    height: number;
-    margin: Insets;
-    children: MeasuredCell[];
-    placements?: ({ x: number; y: number } | undefined)[];
-}
-
-function resolveSize(value: Size, available: number | undefined, margin: number): number {
-    if (value === "inherit") {
-        if (available === undefined) error("Cannot inherit a size from an unconstrained content-sized parent");
-        return Math.max(0, available - margin);
-    }
-    if (!Number.isFinite(value) || value < 0) error("Cell sizes must be finite and non-negative");
-    return value;
-}
-
-/** Resolve available space top-down and content bounds bottom-up. */
-export function measureLayout(
-    element: Element,
-    available: { width?: number; height?: number } = {},
-    ancestors: Element[] = [],
-): MeasuredCell {
-    if (ancestors.includes(element)) error("Layout children contain a cycle");
-    if (element.kind !== "cell" && element.kind !== "flow" && element.kind !== "grid" && element.kind !== "progress") {
-        error(`Unsupported UI element: ${element.kind}`);
-    }
-    const cell = element as ICell;
-    const props = cell.props;
-    const margin = resolveSpacing(props.margin);
-    const padding = resolveSpacing(props.padding);
-    let width = resolveSize(props.width, available.width, margin.left + margin.right);
-    let height = resolveSize(props.height, available.height, margin.top + margin.bottom);
-    const isLayout = element.kind === "flow" || element.kind === "grid";
-    const layout = isLayout ? element as IFlowLayout | IGridLayout : undefined;
-    const contentSizing = layout?.props.sizing === "content";
-    const contentWidth = contentSizing && props.width === 0 ? undefined : Math.max(0, width - padding.left - padding.right);
-    const contentHeight = contentSizing && props.height === 0 ? undefined : Math.max(0, height - padding.top - padding.bottom);
-    const sourceChildren = layout !== undefined ? layout.children : cell.child === undefined ? [] : [cell.child];
-    let childWidth = contentWidth;
-    let childHeight = contentHeight;
-    if (layout?.kind === "grid") {
-        const grid = layout.props;
-        if (!Number.isFinite(grid.columns) || grid.columns < 1 || Math.floor(grid.columns) !== grid.columns) error("GridLayout columns must be a positive integer");
-        const rows = Math.max(1, Math.ceil(sourceChildren.length / grid.columns));
-        childWidth = grid.cellWidth ?? (contentWidth === undefined ? undefined : Math.max(0,
-            (contentWidth - (grid.columnGap ?? grid.gap ?? 0) * (grid.columns - 1)) / grid.columns));
-        childHeight = grid.cellHeight ?? (contentHeight === undefined ? undefined : Math.max(0,
-            (contentHeight - (grid.rowGap ?? grid.gap ?? 0) * (rows - 1)) / rows));
-    }
-    const path = [...ancestors, element];
-    const children = sourceChildren.map(child => measureLayout(child, { width: childWidth, height: childHeight }, path));
-    let placements: MeasuredCell["placements"];
-    if (layout !== undefined) {
-        const sizes = children.map(child => ({
-            width: child.width + child.margin.left + child.margin.right,
-            height: child.height + child.margin.top + child.margin.bottom,
-        }));
-        const positions = layout.kind === "flow"
-            ? calculateFlow({ ...layout.props, width: contentWidth ?? 0, height: contentHeight ?? 0 }, sizes)
-            : calculateGrid(layout.props, sizes);
-        placements = positions.map(point => ({ x: point.x + padding.left, y: point.y + padding.top }));
-        if (contentSizing) {
-            width = padding.left + padding.right;
-            height = padding.top + padding.bottom;
-            for (let i = 0; i < children.length; i += 1) {
-                width = Math.max(width, positions[i].x + sizes[i].width + padding.left + padding.right);
-                height = Math.max(height, positions[i].y + sizes[i].height + padding.top + padding.bottom);
-            }
-        }
-    } else if (children.length > 0) {
-        const position = children[0].cell.props;
-        if (position.mode === "relative" && position.relativeTo === undefined) {
-            placements = [{ x: padding.left + position.offset.x, y: padding.top + position.offset.y }];
-        }
-    }
-    return { cell, width, height, margin, children, placements };
-}

package/src/ui/mount.ts

@@ -1,138 +0,0 @@
-import type { CellProps, ICell } from "./Cell";
-import type { Element } from "./primitives/jsx";
-import type { Decoration } from "./decorations/Decoration";
-import { measureLayout, MeasuredCell } from "./layout/measureLayout";
-import type { IProgressBar } from "./ProgressBar";
-import type { Anchor } from "../types/Position";
-import { Background } from "./decorations/Background";
-import { Border } from "./decorations/Border";
-import { resolveStatusBarTexture } from "./decorations/statusBarTextures";
-
-const mountedFrames = new Map<CellProps, UiraNativeFrame>();
-const mountedTrees = new Map<UiraNativeFrame, { frames: UiraNativeFrame[]; cells: ICell[]; decorations: Decoration[] }>();
-
-export function unmount(frame: UiraNativeFrame): void {
-    const tree = mountedTrees.get(frame);
-    if (tree === undefined) return;
-    for (const decoration of tree.decorations) decoration.dispose();
-    for (const child of tree.frames) {
-        child.UnregisterAllEvents();
-        child.SetScript("OnEvent", undefined);
-        child.Hide();
-    }
-    for (const cell of tree.cells) mountedFrames.delete(cell.props);
-    mountedTrees.delete(frame);
-}
-
-/** Creates the tree before resolving anchors. Positive y moves down. */
-export function mount(element: Element, parent: UiraNativeFrame = UIParent, rootAnchor?: Anchor): UiraNativeFrame {
-    const frames = new Map<CellProps, UiraNativeFrame>();
-    const pending: { cell: ICell; width: number; height: number; margin: MeasuredCell["margin"]; frame: UiraNativeFrame; parent: UiraNativeFrame; placement?: { x: number; y: number } }[] = [];
-
-    function create(measured: MeasuredCell, parent: UiraNativeFrame, placement?: { x: number; y: number }): UiraNativeFrame {
-        const { cell, width, height } = measured;
-        if (frames.has(cell.props) || mountedFrames.has(cell.props)) error("A Cell can only be mounted once at a time");
-        const frame = cell.kind === "progress"
-            ? CreateFrame("StatusBar", undefined, parent)
-            : CreateFrame("Frame", undefined, parent);
-        frame.Hide();
-        frame.EnableMouse(!(cell.props.clickThrough ?? true));
-        frames.set(cell.props, frame);
-        pending.push({ cell, width, height, margin: measured.margin, frame, parent, placement });
-        frame.SetSize(width, height);
-        for (let index = 0; index < measured.children.length; index += 1) {
-            create(measured.children[index], frame, measured.placements?.[index]);
-        }
-        return frame;
-    }
-
-    const rootProps = (element as ICell).props;
-    const root = create(measureLayout(element, {
-        width: rootProps.width === "inherit" ? parent.GetWidth() : undefined,
-        height: rootProps.height === "inherit" ? parent.GetHeight() : undefined,
-    }), parent);
-    const anchors = new Map<UiraNativeFrame, UiraNativeFrame>();
-    for (const item of pending) {
-        const position = item.cell.props;
-        if (item.placement !== undefined) {
-            anchors.set(item.frame, item.parent);
-        } else if (position.mode === "absolute") {
-            anchors.set(item.frame, UIParent);
-        } else {
-            const target = position.relativeTo === undefined
-                ? item.parent
-                : frames.get(position.relativeTo.props);
-            if (target === undefined) error("relativeTo must reference a Cell in the same mounted tree");
-            if (target === item.frame) error("A Cell cannot anchor to itself");
-            anchors.set(item.frame, target);
-        }
-    }
-    // Reject indirect anchor cycles before asking the client to apply them.
-    for (const item of pending) {
-        let target = anchors.get(item.frame);
-        while (target !== undefined) {
-            if (target === item.frame) error("Cell positioning contains an anchor cycle");
-            target = anchors.get(target);
-        }
-    }
-    const tree = { frames: pending.map(item => item.frame), cells: pending.map(item => item.cell), decorations: [] as Decoration[] };
-    mountedTrees.set(root, tree);
-    try {
-        for (const item of pending) {
-            const position = item.cell.props;
-            const target = anchors.get(item.frame)!;
-            const x = item.placement?.x ?? (position.mode === "absolute" ? position.x : position.offset.x);
-            const y = item.placement?.y ?? (position.mode === "absolute" ? position.y : position.offset.y);
-            const overrideAnchor = item.frame === root ? rootAnchor : undefined;
-            const anchor = overrideAnchor ?? (item.placement !== undefined ? "TOPLEFT" : position.anchor ?? "TOPLEFT");
-            const relativeAnchor = overrideAnchor ?? (item.placement !== undefined ? "TOPLEFT" : position.relativeAnchor ?? anchor);
-            item.frame.SetPoint(anchor, target, relativeAnchor, x + item.margin.left, -(y + item.margin.top));
-            if (item.cell.kind === "progress") {
-                const props = (item.cell as IProgressBar).props;
-                const bar = item.frame as UiraNativeStatusBar;
-                const color = props.foreground?.color ?? props.color;
-                bar.SetStatusBarTexture(resolveStatusBarTexture(props.foreground?.texture ?? props.texture ?? "solid"));
-                bar.SetStatusBarColor(color?.r ?? 1, color?.g ?? 1, color?.b ?? 1, color?.a ?? 1);
-                if (props.foreground !== undefined) {
-                    const fill = bar.GetStatusBarTexture();
-                    fill.SetHorizTile(props.foreground.tileX ?? false);
-                    fill.SetVertTile(props.foreground.tileY ?? false);
-                    fill.SetBlendMode(props.foreground.blendMode ?? "BLEND");
-                    const uv = props.foreground.texCoords ?? [0, 1, 0, 1];
-                    fill.SetTexCoord(uv[0], uv[1], uv[2], uv[3]);
-                }
-                bar.SetOrientation(props.orientation === "vertical" ? "VERTICAL" : "HORIZONTAL");
-                bar.SetReverseFill(props.reverse ?? false);
-                bar.SetMinMaxValues(props.min ?? 0, props.max ?? 100);
-                const source = item.cell.source ?? props.source;
-                if (source !== undefined) {
-                    source.BindTo(bar, {
-                        min: props.min, max: props.max, current: props.current ?? props.value,
-                    });
-                } else {
-                    bar.SetValue(props.current ?? props.value ?? 0);
-                }
-            }
-            const decorations = item.cell.props.decorations;
-            // Explicit slots: Lua arrays with nil entries cannot be iterated safely.
-            function attach(decoration: Decoration | undefined): void {
-                if (decoration !== undefined) {
-                    decoration.mount(item.frame, item.width, item.height);
-                    tree.decorations.push(decoration);
-                }
-            }
-            const progress = item.cell.kind === "progress" ? (item.cell as IProgressBar).props : undefined;
-            attach(progress?.background === false ? undefined
-                : progress?.background !== undefined ? new Background(progress.background) : decorations?.background);
-            attach(progress?.backdrop === false ? undefined
-                : progress?.backdrop !== undefined ? new Border(progress.backdrop) : decorations?.border);
-            attach(decorations?.glow);
-            mountedFrames.set(item.cell.props, item.frame);
-            item.frame.Show();
-        }
-    } catch (failure) {
-        unmount(root);
-        throw failure;
-    }
-    return root;
-}

package/src/ui/primitives/jsx.ts

@@ -1,75 +0,0 @@
-import type { CellProps } from "../Cell";
-import type { FlowLayoutProps } from "../FlowLayout";
-import type { GridLayoutProps } from "../GridLayout";
-import type { ProgressBarProps } from "../ProgressBar";
-import type { ProgressSource } from "../../datasources/ProgressSource";
-
-/** Declarative UI description; native frames are created by mount. */
-export interface Element {
-    kind: string;
-    props: object;
-    child?: Element;
-    children?: Element[];
-    source?: ProgressSource;
-}
-
-export type Component<P extends object> = (props: P, child?: Element) => Element;
-
-export namespace UI {
-    export function Fragment(): Element {
-        return { kind: "empty", props: {} };
-    }
-    export function createElement<P extends object>(
-        component: Component<P> | "cell" | "flow" | "grid" | "progress",
-        props: P | undefined,
-        ...children: (Element | Element[])[]
-    ): Element {
-        const elements: Element[] = [];
-        for (const child of children) {
-            if (Array.isArray(child)) {
-                for (const element of child) elements.push(element);
-            } else {
-                elements.push(child);
-            }
-        }
-        const properties = props ?? ({} as P);
-        if (typeof component === "string") {
-            const input = properties as unknown as Partial<FlowLayoutProps & GridLayoutProps & ProgressBarProps>;
-            const resolved = {
-                ...properties,
-                width: input.width ?? (input.sizing === "content" ? 0 : "inherit"),
-                height: input.height ?? (input.sizing === "content" ? 0 : "inherit"),
-                mode: input.mode ?? "relative",
-                ...(input.mode === "absolute"
-                    ? { x: input.x ?? 0, y: input.y ?? 0 }
-                    : { offset: input.offset ?? { x: 0, y: 0 } }),
-                ...(component === "flow" ? { direction: input.direction ?? "vertical" } : {}),
-                ...(component === "grid" ? { columns: input.columns ?? 1 } : {}),
-            };
-            if (component === "flow" || component === "grid") {
-                return { kind: component, props: resolved, children: elements };
-            }
-            if (elements.length > 1) throw "Cell accepts at most one child; use FlowLayout for multiple children";
-            return {
-                kind: component, props: resolved, child: elements[0],
-                source: (properties as unknown as { source?: ProgressSource }).source,
-            };
-        }
-        const componentProps = children.length === 0 ? properties
-            : { ...properties, child: elements.length === 1 ? elements[0] : elements };
-        if (component === Fragment && elements.length !== 0) throw "Only empty fragments are supported for now";
-        return component(componentProps, elements[0]);
-    }
-
-    // Keep JSX types beside the factory so TSX files only need one import.
-    export namespace JSX {
-        export type Element = import("./jsx").Element;
-        export interface ElementChildrenAttribute { child: {}; }
-        export interface IntrinsicElements {
-            cell: Partial<CellProps> & { child?: Element };
-            flow: Partial<FlowLayoutProps> & { child?: Element | Element[] };
-            grid: Partial<GridLayoutProps> & { child?: Element | Element[] };
-            progress: Partial<ProgressBarProps> & { child?: Element };
-        }
-    }
-}