pixifact 0.1.3 → 0.1.5

package/dist/builtin-scenes/controlLayout.js

@@ -0,0 +1,202 @@
+export const defaultControlLayoutProps = {
+    minWidth: 0,
+    minHeight: 0,
+    hSize: 'content',
+    vSize: 'content',
+    stretch: 1,
+};
+export function measureChildren(container) {
+    const bounds = measureChildrenBounds(container);
+    return {
+        width: bounds.width,
+        height: bounds.height,
+    };
+}
+export function measureChildrenBounds(container) {
+    if (container.children.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+    for (const child of container.children) {
+        minX = Math.min(minX, child.x);
+        minY = Math.min(minY, child.y);
+        maxX = Math.max(maxX, child.x + child.width);
+        maxY = Math.max(maxY, child.y + child.height);
+    }
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
+export function measureControlChild(child, baseSizes) {
+    const measured = child.measureControlNaturalSize?.();
+    if (measured) {
+        return measured;
+    }
+    if (!baseSizes.has(child)) {
+        baseSizes.set(child, {
+            width: child.width,
+            height: child.height,
+        });
+    }
+    return baseSizes.get(child) ?? { width: child.width, height: child.height };
+}
+export function controlChildProps(child) {
+    return child.getControlLayoutProps?.() ?? defaultControlLayoutProps;
+}
+export function controlMinSize(child, baseSizes) {
+    const props = controlChildProps(child);
+    const natural = measureControlChild(child, baseSizes);
+    return {
+        width: Math.max(natural.width, props.minWidth),
+        height: Math.max(natural.height, props.minHeight),
+    };
+}
+export function setControlChildBox(child, rect) {
+    if (child.setControlLayoutBox) {
+        child.setControlLayoutBox(rect.x, rect.y, rect.width, rect.height);
+        return;
+    }
+    child.position.set(rect.x, rect.y);
+}
+export function layoutStack(options) {
+    const children = options.children;
+    if (!children || children.length === 0) {
+        return;
+    }
+    const mainAxis = options.axis;
+    const cross = crossAxis(mainAxis);
+    const naturalContainer = options.naturalSize();
+    const containerWidth = options.width ?? naturalContainer.width;
+    const containerHeight = options.height ?? naturalContainer.height;
+    const containerMain = mainAxis === 'horizontal' ? containerWidth : containerHeight;
+    const containerCross = cross === 'horizontal' ? containerWidth : containerHeight;
+    const gapTotal = options.gap * Math.max(0, children.length - 1);
+    const items = children.map((child) => {
+        const props = controlChildProps(child);
+        const natural = controlMinSize(child, options.baseSizes);
+        const mainMode = mainAxis === 'horizontal' ? props.hSize : props.vSize;
+        const crossMode = cross === 'horizontal' ? props.hSize : props.vSize;
+        return {
+            child,
+            props,
+            mainMode,
+            crossMode,
+            baseMain: mainAxis === 'horizontal' ? natural.width : natural.height,
+            baseCross: cross === 'horizontal' ? natural.width : natural.height,
+            mainSize: mainAxis === 'horizontal' ? natural.width : natural.height,
+            crossSize: cross === 'horizontal' ? natural.width : natural.height,
+        };
+    });
+    const naturalMain = items.reduce((sum, item) => sum + item.baseMain, 0);
+    const freeMain = Math.max(0, containerMain - naturalMain - gapTotal);
+    const expandable = items.filter((item) => item.mainMode === 'expand');
+    const totalStretch = expandable.reduce((sum, item) => sum + item.props.stretch, 0);
+    if (totalStretch > 0) {
+        for (const item of expandable) {
+            item.mainSize = item.baseMain + freeMain * (item.props.stretch / totalStretch);
+        }
+    }
+    for (const item of items) {
+        if (fillOrExpand(item.crossMode)) {
+            item.crossSize = containerCross;
+        }
+    }
+    const usedMain = items.reduce((sum, item) => sum + item.mainSize, 0) + gapTotal;
+    const remainingMain = Math.max(0, containerMain - usedMain);
+    const actualGap = options.justify === 'space-between' && items.length > 1
+        ? options.gap + remainingMain / (items.length - 1)
+        : options.gap;
+    let cursor = justifyOffset(options.justify, remainingMain);
+    for (const item of items) {
+        const crossFree = Math.max(0, containerCross - item.crossSize);
+        const main = cursor;
+        const crossPosition = alignOffset(options.alignCross, crossFree);
+        setControlChildBox(item.child, {
+            x: mainAxis === 'horizontal' ? main : crossPosition,
+            y: mainAxis === 'horizontal' ? crossPosition : main,
+            width: mainAxis === 'horizontal' ? item.mainSize : item.crossSize,
+            height: mainAxis === 'horizontal' ? item.crossSize : item.mainSize,
+        });
+        cursor += item.mainSize + actualGap;
+    }
+}
+export function measureStackNaturalSize(axis, children, gap, baseSizes) {
+    if (!children || children.length === 0) {
+        return { width: 0, height: 0 };
+    }
+    const gapTotal = gap * Math.max(0, children.length - 1);
+    const sizes = children.map((child) => controlMinSize(child, baseSizes));
+    if (axis === 'horizontal') {
+        return {
+            width: sizes.reduce((sum, size) => sum + size.width, 0) + gapTotal,
+            height: sizes.reduce((max, size) => Math.max(max, size.height), 0),
+        };
+    }
+    return {
+        width: sizes.reduce((max, size) => Math.max(max, size.width), 0),
+        height: sizes.reduce((sum, size) => sum + size.height, 0) + gapTotal,
+    };
+}
+export function fillOrExpand(mode) {
+    return mode === 'fill' || mode === 'expand';
+}
+export function crossAxis(axis) {
+    return axis === 'horizontal' ? 'vertical' : 'horizontal';
+}
+export function alignOffset(align, available) {
+    if (align === 'center') {
+        return available / 2;
+    }
+    if (align === 'end') {
+        return available;
+    }
+    return 0;
+}
+export function justifyOffset(justify, available) {
+    if (justify === 'center') {
+        return available / 2;
+    }
+    if (justify === 'end') {
+        return available;
+    }
+    return 0;
+}
+export function parseSizeMode(value) {
+    if (value === 'fill' || value === 'expand') {
+        return value;
+    }
+    return 'content';
+}
+export function parseAlign(value) {
+    if (value === 'center' || value === 'end') {
+        return value;
+    }
+    return 'start';
+}
+export function parseJustify(value) {
+    if (value === 'center' || value === 'end' || value === 'space-between') {
+        return value;
+    }
+    return 'start';
+}
+export function finiteNumber(value, fallback) {
+    return Number.isFinite(value) ? value : fallback;
+}
+export function boxSize(value, height) {
+    if (typeof value === 'number') {
+        return {
+            width: Math.max(0, finiteNumber(value, 0)),
+            height: Math.max(0, finiteNumber(height ?? value, 0)),
+        };
+    }
+    return {
+        width: Math.max(0, finiteNumber(value.width, 0)),
+        height: Math.max(0, finiteNumber(value.height ?? value.width, 0)),
+    };
+}

package/dist/builtin-scenes/controlLayout.ts

@@ -0,0 +1,270 @@
+import { Container, type ContainerChild } from 'pixi.js';
+
+export type ControlSizeMode = 'content' | 'fill' | 'expand';
+export type ControlAlign = 'start' | 'center' | 'end';
+export type ControlJustify = 'start' | 'center' | 'end' | 'space-between';
+export type ControlAxis = 'horizontal' | 'vertical';
+
+export interface Size {
+    width: number;
+    height: number;
+}
+
+export interface Rect extends Size {
+    x: number;
+    y: number;
+}
+
+export interface ControlLayoutProps {
+    minWidth: number;
+    minHeight: number;
+    hSize: ControlSizeMode;
+    vSize: ControlSizeMode;
+    stretch: number;
+}
+
+export type ControlLayoutChild = ContainerChild & {
+    getControlLayoutProps?: () => ControlLayoutProps;
+    measureControlNaturalSize?: () => Size;
+    setControlLayoutBox?: (x: number, y: number, width: number, height: number) => void;
+};
+
+export const defaultControlLayoutProps: ControlLayoutProps = {
+    minWidth: 0,
+    minHeight: 0,
+    hSize: 'content',
+    vSize: 'content',
+    stretch: 1,
+};
+
+export function measureChildren(container: Container): Size {
+    const bounds = measureChildrenBounds(container);
+    return {
+        width: bounds.width,
+        height: bounds.height,
+    };
+}
+
+export function measureChildrenBounds(container: Container): Rect {
+    if (container.children.length === 0) {
+        return { x: 0, y: 0, width: 0, height: 0 };
+    }
+
+    let minX = Number.POSITIVE_INFINITY;
+    let minY = Number.POSITIVE_INFINITY;
+    let maxX = Number.NEGATIVE_INFINITY;
+    let maxY = Number.NEGATIVE_INFINITY;
+
+    for (const child of container.children) {
+        minX = Math.min(minX, child.x);
+        minY = Math.min(minY, child.y);
+        maxX = Math.max(maxX, child.x + child.width);
+        maxY = Math.max(maxY, child.y + child.height);
+    }
+
+    return {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
+
+export function measureControlChild(child: ControlLayoutChild, baseSizes: WeakMap<object, Size>): Size {
+    const measured = child.measureControlNaturalSize?.();
+    if (measured) {
+        return measured;
+    }
+    if (!baseSizes.has(child)) {
+        baseSizes.set(child, {
+            width: child.width,
+            height: child.height,
+        });
+    }
+    return baseSizes.get(child) ?? { width: child.width, height: child.height };
+}
+
+export function controlChildProps(child: ControlLayoutChild): ControlLayoutProps {
+    return child.getControlLayoutProps?.() ?? defaultControlLayoutProps;
+}
+
+export function controlMinSize(child: ControlLayoutChild, baseSizes: WeakMap<object, Size>): Size {
+    const props = controlChildProps(child);
+    const natural = measureControlChild(child, baseSizes);
+    return {
+        width: Math.max(natural.width, props.minWidth),
+        height: Math.max(natural.height, props.minHeight),
+    };
+}
+
+export function setControlChildBox(child: ControlLayoutChild, rect: Rect) {
+    if (child.setControlLayoutBox) {
+        child.setControlLayoutBox(rect.x, rect.y, rect.width, rect.height);
+        return;
+    }
+    child.position.set(rect.x, rect.y);
+}
+
+export interface StackLayoutOptions {
+    axis: ControlAxis;
+    children: ControlLayoutChild[] | undefined;
+    gap: number;
+    alignCross: ControlAlign;
+    justify: ControlJustify;
+    baseSizes: WeakMap<object, Size>;
+    width: number | undefined;
+    height: number | undefined;
+    naturalSize: () => Size;
+}
+
+export function layoutStack(options: StackLayoutOptions) {
+    const children = options.children;
+    if (!children || children.length === 0) {
+        return;
+    }
+
+    const mainAxis = options.axis;
+    const cross = crossAxis(mainAxis);
+    const naturalContainer = options.naturalSize();
+    const containerWidth = options.width ?? naturalContainer.width;
+    const containerHeight = options.height ?? naturalContainer.height;
+    const containerMain = mainAxis === 'horizontal' ? containerWidth : containerHeight;
+    const containerCross = cross === 'horizontal' ? containerWidth : containerHeight;
+    const gapTotal = options.gap * Math.max(0, children.length - 1);
+    const items = children.map((child) => {
+        const props = controlChildProps(child);
+        const natural = controlMinSize(child, options.baseSizes);
+        const mainMode = mainAxis === 'horizontal' ? props.hSize : props.vSize;
+        const crossMode = cross === 'horizontal' ? props.hSize : props.vSize;
+        return {
+            child,
+            props,
+            mainMode,
+            crossMode,
+            baseMain: mainAxis === 'horizontal' ? natural.width : natural.height,
+            baseCross: cross === 'horizontal' ? natural.width : natural.height,
+            mainSize: mainAxis === 'horizontal' ? natural.width : natural.height,
+            crossSize: cross === 'horizontal' ? natural.width : natural.height,
+        };
+    });
+    const naturalMain = items.reduce((sum, item) => sum + item.baseMain, 0);
+    const freeMain = Math.max(0, containerMain - naturalMain - gapTotal);
+    const expandable = items.filter((item) => item.mainMode === 'expand');
+    const totalStretch = expandable.reduce((sum, item) => sum + item.props.stretch, 0);
+
+    if (totalStretch > 0) {
+        for (const item of expandable) {
+            item.mainSize = item.baseMain + freeMain * (item.props.stretch / totalStretch);
+        }
+    }
+
+    for (const item of items) {
+        if (fillOrExpand(item.crossMode)) {
+            item.crossSize = containerCross;
+        }
+    }
+
+    const usedMain = items.reduce((sum, item) => sum + item.mainSize, 0) + gapTotal;
+    const remainingMain = Math.max(0, containerMain - usedMain);
+    const actualGap = options.justify === 'space-between' && items.length > 1
+        ? options.gap + remainingMain / (items.length - 1)
+        : options.gap;
+    let cursor = justifyOffset(options.justify, remainingMain);
+
+    for (const item of items) {
+        const crossFree = Math.max(0, containerCross - item.crossSize);
+        const main = cursor;
+        const crossPosition = alignOffset(options.alignCross, crossFree);
+        setControlChildBox(item.child, {
+            x: mainAxis === 'horizontal' ? main : crossPosition,
+            y: mainAxis === 'horizontal' ? crossPosition : main,
+            width: mainAxis === 'horizontal' ? item.mainSize : item.crossSize,
+            height: mainAxis === 'horizontal' ? item.crossSize : item.mainSize,
+        });
+        cursor += item.mainSize + actualGap;
+    }
+}
+
+export function measureStackNaturalSize(axis: ControlAxis, children: ControlLayoutChild[] | undefined, gap: number, baseSizes: WeakMap<object, Size>): Size {
+    if (!children || children.length === 0) {
+        return { width: 0, height: 0 };
+    }
+    const gapTotal = gap * Math.max(0, children.length - 1);
+    const sizes = children.map((child) => controlMinSize(child, baseSizes));
+    if (axis === 'horizontal') {
+        return {
+            width: sizes.reduce((sum, size) => sum + size.width, 0) + gapTotal,
+            height: sizes.reduce((max, size) => Math.max(max, size.height), 0),
+        };
+    }
+    return {
+        width: sizes.reduce((max, size) => Math.max(max, size.width), 0),
+        height: sizes.reduce((sum, size) => sum + size.height, 0) + gapTotal,
+    };
+}
+
+export function fillOrExpand(mode: ControlSizeMode) {
+    return mode === 'fill' || mode === 'expand';
+}
+
+export function crossAxis(axis: ControlAxis): ControlAxis {
+    return axis === 'horizontal' ? 'vertical' : 'horizontal';
+}
+
+export function alignOffset(align: ControlAlign, available: number) {
+    if (align === 'center') {
+        return available / 2;
+    }
+    if (align === 'end') {
+        return available;
+    }
+    return 0;
+}
+
+export function justifyOffset(justify: ControlJustify, available: number) {
+    if (justify === 'center') {
+        return available / 2;
+    }
+    if (justify === 'end') {
+        return available;
+    }
+    return 0;
+}
+
+export function parseSizeMode(value: string): ControlSizeMode {
+    if (value === 'fill' || value === 'expand') {
+        return value;
+    }
+    return 'content';
+}
+
+export function parseAlign(value: string): ControlAlign {
+    if (value === 'center' || value === 'end') {
+        return value;
+    }
+    return 'start';
+}
+
+export function parseJustify(value: string): ControlJustify {
+    if (value === 'center' || value === 'end' || value === 'space-between') {
+        return value;
+    }
+    return 'start';
+}
+
+export function finiteNumber(value: number, fallback: number) {
+    return Number.isFinite(value) ? value : fallback;
+}
+
+export function boxSize(value: number | { width: number; height?: number }, height?: number): Size {
+    if (typeof value === 'number') {
+        return {
+            width: Math.max(0, finiteNumber(value, 0)),
+            height: Math.max(0, finiteNumber(height ?? value, 0)),
+        };
+    }
+    return {
+        width: Math.max(0, finiteNumber(value.width, 0)),
+        height: Math.max(0, finiteNumber(value.height ?? value.width, 0)),
+    };
+}

package/dist/compiler/builtinScenes.d.ts

@@ -0,0 +1,14 @@
+import type { SceneTemplateInterface } from './spec.js';
+export declare const builtinScenePrefix = "pixifact:";
+export declare const builtinSceneNames: readonly ["CenterContainer", "Control", "FlexItem", "FlexLayout", "HBoxContainer", "MarginContainer", "VBoxContainer"];
+export type BuiltinSceneName = typeof builtinSceneNames[number];
+export type BuiltinSceneScriptSources = Record<BuiltinSceneName, string>;
+export declare function isBuiltinSceneName(value: string): value is BuiltinSceneName;
+export declare function builtinSceneAssetId(name: string): string;
+export declare function isBuiltinSceneAssetId(value: string): boolean;
+export declare function builtinSceneNameFromAssetId(assetId: string): "CenterContainer" | "Control" | "FlexItem" | "FlexLayout" | "HBoxContainer" | "MarginContainer" | "VBoxContainer";
+export declare function builtinSceneAssetIds(): string[];
+export declare function builtinSceneInterface(assetId: string, scriptSources: BuiltinSceneScriptSources): SceneTemplateInterface;
+export declare function builtinSceneInterfaces(scriptSources: BuiltinSceneScriptSources): {
+    [k: string]: SceneTemplateInterface;
+};

package/dist/compiler/builtinScenes.js

@@ -0,0 +1,62 @@
+import { extractSceneScriptInterfaces } from './scriptInterfaceExtractor.js';
+export const builtinScenePrefix = 'pixifact:';
+export const builtinSceneNames = [
+    'CenterContainer',
+    'Control',
+    'FlexItem',
+    'FlexLayout',
+    'HBoxContainer',
+    'MarginContainer',
+    'VBoxContainer',
+];
+const builtinSceneNameSet = new Set(builtinSceneNames);
+export function isBuiltinSceneName(value) {
+    return builtinSceneNameSet.has(value);
+}
+export function builtinSceneAssetId(name) {
+    if (!isBuiltinSceneName(name)) {
+        throw new Error(`Unknown built-in Scene "${name}".`);
+    }
+    return `${builtinScenePrefix}${name}.scene`;
+}
+export function isBuiltinSceneAssetId(value) {
+    return value.startsWith(builtinScenePrefix);
+}
+export function builtinSceneNameFromAssetId(assetId) {
+    if (!isBuiltinSceneAssetId(assetId) || !assetId.endsWith('.scene')) {
+        throw new Error(`Built-in Scene id "${assetId}" must use ${builtinScenePrefix}<Name>.scene.`);
+    }
+    const name = assetId.slice(builtinScenePrefix.length, -'.scene'.length);
+    if (!isBuiltinSceneName(name)) {
+        throw new Error(`Unknown built-in Scene "${name}".`);
+    }
+    return name;
+}
+export function builtinSceneAssetIds() {
+    return builtinSceneNames.map(builtinSceneAssetId);
+}
+export function builtinSceneInterface(assetId, scriptSources) {
+    return builtinSceneInterfaceDescriptors(scriptSources)[assetId].interface;
+}
+export function builtinSceneInterfaces(scriptSources) {
+    const descriptors = builtinSceneInterfaceDescriptors(scriptSources);
+    return Object.fromEntries(builtinSceneAssetIds().map((assetId) => [assetId, descriptors[assetId].interface]));
+}
+function builtinSceneInterfaceDescriptors(scriptSources) {
+    const descriptors = extractSceneScriptInterfaces(builtinSceneNames.map((name) => ({
+        scene: builtinSceneAssetId(name),
+        fileName: `${name}.ts`,
+        source: scriptSources[name],
+    })));
+    for (const assetId of builtinSceneAssetIds()) {
+        const name = builtinSceneNameFromAssetId(assetId);
+        const descriptor = descriptors[assetId];
+        if (!descriptor) {
+            throw new Error(`Built-in Scene "${assetId}" is missing a @scene script.`);
+        }
+        if (descriptor.className !== name) {
+            throw new Error(`Built-in Scene "${assetId}" name must match @scene class "${descriptor.className}".`);
+        }
+    }
+    return descriptors;
+}